/* Carte des inondations : même langage visuel que la carte des feux (en-tête, volet bas à poignée, onglets en pastilles, tuiles de chiffres clés), palette BLEUE. Jaune, orange et rouge restent réservés aux niveaux officiels de vigilance. */ :root { --bg: #eef1f6; --panel: #ffffff; --panel2: #f5f7fb; --line: #e3e8f0; --txt: #18202e; --muted: #5f6b7d; --eau: #1d6fe0; --eau2: #3b8bf0; --eau-ombre: rgba(29, 111, 224, .34); /* Pleins bleus sous du texte blanc (audit UI du 25/09/2026, P1-1) : le même bleu profond dans les DEUX thèmes (blanc dessus : 4,77:1). Le --eau clair du thème sombre (#4a9bec) ne donnait que 2,92:1 sous un texte blanc. */ --eau-plein: #1d6fe0; --bord-champ: #7d8799; /* contour des champs de saisie : 3,4:1 sur le volet (WCAG 1.4.11, audit UI P2-3) */ --foudre: #7c3aed; --pluie: #0ea5e9; --presse: #0f766e; --jaune: #f2c200; --orange: #ff8a00; --rouge: #e30613; --danger: #e11d1d; --ok: #16a34a; --alerte-fond: #fff7e6; --alerte-bord: #f5b041; --shadow: 0 6px 22px rgba(20, 30, 50, .10); --shadow-lg: 0 12px 40px rgba(20, 30, 50, .16); --grip: #cbd3e0; --grip-on: #aeb8c8; --hdr-h: 58px; --sheet-peek: 220px; --sheet-mini: 42px; /* 220 px : onglets de 37 px (audit UI P1-8) */ --tuile-filtre: none; --eau-txt: #1558b0; --eau-fond: rgba(29, 111, 224, .12); --ok-txt: #166534; --ok-fond: rgba(22, 163, 74, .14); --neutre-fond: #e6ebf2; --terrain-txt: #92400e; --terrain-fond: rgba(180, 83, 9, .13); --vert-txt: #065f46; --vert-fond: rgba(4, 120, 87, .13); --brun-txt: #6b4a1f; --brun-fond: rgba(124, 90, 46, .15); } :root[data-theme="dark"] { --bg: #0b0f14; --panel: #151b26; --panel2: #0f141c; --line: #28323f; --txt: #e7edf5; --muted: #93a0b4; --eau: #4a9bec; --eau2: #6db1f5; --eau-ombre: rgba(74, 155, 236, .35); --alerte-fond: rgba(245, 176, 65, .12); --alerte-bord: rgba(245, 176, 65, .5); --shadow: 0 6px 22px rgba(0, 0, 0, .5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6); --grip: #3a4656; --grip-on: #55637a; --tuile-filtre: brightness(.72) contrast(1.08) saturate(.8); --eau-txt: #8cc2ff; --eau-fond: rgba(74, 155, 236, .18); --ok-txt: #86e0a6; --ok-fond: rgba(34, 197, 94, .16); --neutre-fond: #253041; --terrain-txt: #f5b673; --terrain-fond: rgba(245, 158, 11, .16); --vert-txt: #6ee7b7; --vert-fond: rgba(16, 185, 129, .16); --brun-txt: #e5c49a; --brun-fond: rgba(214, 170, 110, .16); --bord-champ: #5b6678; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0f14; --panel: #151b26; --panel2: #0f141c; --line: #28323f; --txt: #e7edf5; --muted: #93a0b4; --eau: #4a9bec; --eau2: #6db1f5; --eau-ombre: rgba(74, 155, 236, .35); --alerte-fond: rgba(245, 176, 65, .12); --alerte-bord: rgba(245, 176, 65, .5); --shadow: 0 6px 22px rgba(0, 0, 0, .5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6); --grip: #3a4656; --grip-on: #55637a; --tuile-filtre: brightness(.72) contrast(1.08) saturate(.8); --eau-txt: #8cc2ff; --eau-fond: rgba(74, 155, 236, .18); --ok-txt: #86e0a6; --ok-fond: rgba(34, 197, 94, .16); --neutre-fond: #253041; --terrain-txt: #f5b673; --terrain-fond: rgba(245, 158, 11, .16); --vert-txt: #6ee7b7; --vert-fond: rgba(16, 185, 129, .16); --brun-txt: #e5c49a; --brun-fond: rgba(214, 170, 110, .16); --bord-champ: #5b6678; } } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } body { overflow: hidden; } #app { position: fixed; inset: 0; } a { color: var(--eau); } button { font: inherit; color: inherit; } h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; font-weight: 700; } /* ─── En-tête ─────────────────────────────────────────────────────────────── */ header { position: absolute; top: 0; left: 0; right: 0; z-index: 1200; display: flex; align-items: center; gap: 9px; padding: calc(env(safe-area-inset-top) + 10px) 14px 10px; background: linear-gradient(180deg, var(--panel), var(--panel2)); border-bottom: 1px solid var(--line); box-shadow: 0 3px 16px rgba(20, 30, 50, .08); } header .logo { width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; display: block; object-fit: cover; } header .htitle { min-width: 0; flex: 1 1 auto; } header h1 { font-size: 17px; margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -.015em; white-space: nowrap; } /* Complément du titre pour les moteurs et les lecteurs d'écran : jamais affiché tronqué. Caché à l'œil sous 900 px (toujours lu), affiché en entier sur grand écran. */ header .h1kw { font-size: .72em; font-weight: 600; color: var(--muted); letter-spacing: 0; } @media (max-width: 899px) { header .h1kw { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } } header .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hbtn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; display: grid; place-items: center; font-size: 16px; flex: 0 0 auto; } .hbtn:active { transform: scale(.95); } .hbtn { position: relative; } .hbtn::after { content: ""; position: absolute; inset: -5px; } /* 34 px visibles, 44 px au doigt (audit UI P1-8) */ header .live { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--eau-txt); background: rgba(29, 111, 224, .1); padding: 6px 9px; border-radius: 20px; white-space: nowrap; } header .live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--eau); animation: pulse 1.4s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } /* Petits téléphones : tout tient sur une ligne, titre lisible en entier (vérifié à 320, 360 et 390 px). */ @media (max-width: 400px) { header { gap: 7px; padding-left: 11px; padding-right: 11px; } header h1 { font-size: 16px; } header .logo { width: 30px; height: 30px; } } @media (max-width: 380px) { header { gap: 6px; padding-left: 10px; padding-right: 10px; } header h1 { font-size: 15.5px; letter-spacing: -.02em; } header .logo { width: 28px; height: 28px; border-radius: 8px; } header .hbtn { width: 32px; height: 32px; } } @media (max-width: 350px) { header { gap: 5px; padding-left: 8px; padding-right: 8px; } header h1 { font-size: 15px; } header .logo { width: 24px; height: 24px; border-radius: 7px; } header .hbtn { width: 30px; height: 30px; } header .live { padding: 4px 6px; font-size: 9px; gap: 3px; letter-spacing: .03em; } header .sub { font-size: 11px; } } /* ─── Carte ───────────────────────────────────────────────────────────────── */ #carte { position: absolute; top: var(--hdr-h); left: 0; right: 0; bottom: 0; background: var(--bg); } .leaflet-tile-pane { filter: var(--tuile-filtre); } .leaflet-container { font: inherit; background: var(--bg); } .leaflet-control-zoom { border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; border-radius: 10px !important; overflow: hidden; } .leaflet-control-zoom a { background: var(--panel) !important; color: var(--txt) !important; border-color: var(--line) !important; } .leaflet-control-attribution { background: color-mix(in srgb, var(--panel) 85%, transparent) !important; color: var(--muted) !important; font-size: 10px !important; } .leaflet-control-attribution a { color: var(--eau-txt); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--txt); box-shadow: var(--shadow-lg); } .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.45; } .leaflet-popup-content-wrapper { border-radius: 14px; } .fiche-titre { font-weight: 700; font-size: 14px; margin: 0 0 4px; } .fiche-ligne { margin: 2px 0; color: var(--muted); } .fiche-bloc { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); } .fiche-bloc:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; } .fiche-consigne { margin: 4px 0 0; font-size: 12px; } .sparkline { width: 100%; height: 44px; display: block; margin: 6px 0 2px; } .sparkline polyline { fill: none; stroke: var(--eau); stroke-width: 2; } .sparkline .axe { font-size: 9px; fill: var(--muted); } .fiche-photo { max-width: 100%; border-radius: 10px; margin-top: 6px; display: block; } canvas.velocity-overlay { pointer-events: none !important; } .marqueur-sig { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); color: #fff; font-size: 15px; } .marqueur-sig > span { transform: rotate(45deg); } .marqueur-sig.a-verifier { opacity: .85; } .marqueur-presse { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--presse); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); font-size: 11px; } .ic { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; } .ic-crue { background: linear-gradient(90deg, var(--jaune), var(--orange), var(--rouge)); height: 6px; border-radius: 3px; } .ic-vigi { background: rgba(255, 138, 0, .35); border: 1.5px solid var(--orange); } .ic-station { border-radius: 50%; background: var(--eau); box-shadow: 0 0 0 3px rgba(29, 111, 224, .2); width: 11px; height: 11px; } .ic-radar { background: linear-gradient(90deg, #7dd3fc, #2563eb, #7c3aed); } .ic-foudre { background: var(--foudre); border-radius: 50%; width: 11px; height: 11px; box-shadow: 0 0 0 3px rgba(124, 58, 237, .25); } .ic-vent { background: repeating-linear-gradient(90deg, #64748b 0 3px, transparent 3px 5px); height: 3px; border-radius: 0; width: 16px; } .ic-hum { background: linear-gradient(90deg, #fde68a, #38bdf8, #1e3a8a); } .ic-sig { background: #b45309; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); width: 11px; height: 11px; } .ic-presse { background: var(--presse); } .ic-navire { background: #0e7490; border-radius: 50%; width: 12px; height: 12px; box-shadow: 0 0 0 3px rgba(14, 116, 144, .2); } .ic-subm { background: rgba(14, 116, 144, .25); border: 1.5px solid #0e7490; } .ic-marine { background: repeating-linear-gradient(45deg, #0e7490 0 2px, transparent 2px 5px); border: 1px solid #0e7490; } .marqueur-navire { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0e7490; color: #fff; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); font-size: 14px; } .facade { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-right: 6px; } .facade-n0 { background: rgba(22, 163, 74, .15); color: #15803d; } .facade-n1 { background: rgba(234, 179, 8, .2); color: #a16207; } .facade-n2 { background: rgba(249, 115, 22, .2); color: #c2410c; } .facade-n3 { background: rgba(220, 38, 38, .2); color: #b91c1c; } .ic-heli { background: #dc2626; border-radius: 50%; width: 12px; height: 12px; box-shadow: 0 0 0 3px rgba(220, 38, 38, .2); } .marqueur-heli { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #dc2626; color: #fff; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); font-size: 15px; } .ic-ruiss { background: linear-gradient(90deg, #fde68a, #f59e0b, #7c2d12); } .ic-zones { background: rgba(29, 111, 224, .28); border: 1.5px dashed #1d6fe0; } .carte-adresse { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 8px; margin: 6px 0 10px; } .carte-adresse h2 { margin: 0 0 8px; } .adresse-ligne { display: flex; gap: 6px; } .recherche-tete { margin: 0 0 12px; } .recherche-champ { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--bord-champ); border-radius: 12px; background: var(--panel); color: var(--muted); cursor: text; } .recherche-champ:focus-within { outline: 2px solid var(--eau); outline-offset: 1px; } .recherche-champ input { flex: 1; min-width: 0; border: 0; background: none; color: var(--txt); font: inherit; font-size: 14px; padding: 10px 0; outline: none; } .recherche-resultat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); } .recherche-resultat > b { flex: 1 1 100%; font-size: 14px; } .recherche-resultat .btn-secondaire { min-height: 40px; } .adresse-ligne input { flex: 1; min-width: 0; font: inherit; padding: 9px 11px; border: 1px solid var(--bord-champ); border-radius: 10px; background: var(--panel); color: var(--txt); } .suggestions { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; } .suggestions li { padding: 8px 11px; font-size: 13px; cursor: pointer; border-top: 1px solid var(--line); } .suggestions li:first-child { border-top: 0; } .suggestions li:hover, .suggestions li.actif { background: rgba(29, 111, 224, .08); } .suggestions small { color: var(--muted); } .zone-fiche { margin-top: 10px; } .zone-fiche .titre { font-weight: 800; font-size: 15px; margin: 0 0 6px; } .zone-fiche dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; } .zone-fiche dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; } .zone-fiche dd { margin: 0 0 4px; font-size: 13px; line-height: 1.4; } .zone-fiche .oui { color: #b45309; font-weight: 800; } .zone-fiche .non { color: var(--ok); font-weight: 800; } .ruiss-n0 { color: var(--muted); } .ruiss-n1 { color: #b45309; } .ruiss-n2 { color: #c2410c; font-weight: 800; } .ruiss-n3 { color: #7c2d12; font-weight: 800; } .zone-fiche .liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .communes-choisies { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .communes-choisies li { display: inline-flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 6px 5px 11px; font-size: 13px; font-weight: 600; } .communes-choisies button { border: 0; background: var(--line); color: var(--txt); border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 12px; line-height: 1; } .ic-trafic { background: repeating-linear-gradient(135deg, #f59e0b 0 4px, #1f2937 4px 8px); } .marqueur-trafic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #f59e0b; color: #1f2937; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); font-size: 14px; } .marqueur-trafic.obstruction { background: #94a3b8; } .tag.trafic { background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .45); } /* ─── Urgences : numéros officiels (bleu, jamais les couleurs de vigilance) ── */ .urgences { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 10px; } .urg-btn { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--txt); background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; min-width: 0; } .urg-btn:active { transform: scale(.98); } .urg-ico { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(29, 111, 224, .1); color: var(--eau); } .urg-tx { min-width: 0; } .urg-tx b { display: block; font-size: 18px; font-weight: 800; line-height: 1.05; color: var(--txt); font-variant-numeric: tabular-nums; } .urg-tx small { display: block; font-size: 11px; line-height: 1.3; color: var(--muted); margin-top: 2px; } .urg-btn.chaud { border-color: var(--eau); box-shadow: 0 0 0 1px var(--eau) inset; } .urg-btn.chaud .urg-ico { background: var(--eau-plein); color: #fff; } .urgence-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); font-size: 12.5px; } .urgence-bandeau .ub-titre { font-weight: 800; color: var(--txt); margin-right: 2px; } .urgence-bandeau a { display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-weight: 800; text-decoration: none; color: var(--eau-txt); font-variant-numeric: tabular-nums; } .urgence-bandeau a small { font-weight: 700; font-size: 10px; color: var(--muted); } /* Numéros d'urgence atteignables d'un pouce (audit UI du 25/09/2026, P1-8) : 44 × 44 px au moins (112 : 42 × 25, 18 / 15 / 17 : 34 × 25 avant) ; le bandeau passe sur deux lignes, c'est accepté. */ .urgence-bandeau a { min-height: 44px; min-width: 44px; padding: 8px 12px; align-items: center; justify-content: center; font-size: 15px; } .urgence-bandeau a small { font-size: 11px; } .urgence-bandeau .ub-tous { min-height: 44px; padding: 0 6px; font-size: 12.5px; } .urgence-bandeau .ub-tous { border: 0; background: none; color: var(--eau-txt); font-weight: 700; font-size: 12px; cursor: pointer; padding: 3px 2px; text-decoration: underline; } .liens-fiches { margin: 4px 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.6; } /* ─── Entraide ─────────────────────────────────────────────────────────────── */ .plateformes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 6px 0 12px; } .plat { display: flex; flex-direction: column; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0; } .plat-lien { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 9px; text-decoration: none; color: var(--txt); flex: 1; } .plat-lien b { font-size: 13.5px; } .plat-par { font-size: 11px; color: var(--muted); font-weight: 700; } .plat-detail { font-size: 12px; line-height: 1.4; color: var(--muted); } .plat-go { font-size: 11.5px; font-weight: 800; color: var(--eau-txt); margin-top: 2px; overflow-wrap: anywhere; } .plat-autre { font-size: 12px; font-weight: 700; color: var(--eau-txt); padding: 7px 12px; border-top: 1px solid var(--line); text-decoration: none; } .groupe-titre { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 8px 0 0; } a.item { color: inherit; text-decoration: none; } .groupes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; } .groupes .groupe { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--txt); text-decoration: none; } .demarches { list-style: none; margin: 4px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .demarches li { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; } .demarches a { font-weight: 700; } .demarches .note { margin: 2px 0 0; display: inline-block; } .lien-texte { border: 0; background: none; padding: 0; color: var(--eau-txt); text-decoration: underline; cursor: pointer; font: inherit; } /* ─── Soutenir : dons et partenaires ───────────────────────────────────────── */ .donateurs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .donateur { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; } .paliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 6px 0 8px; } .palier { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: center; min-width: 0; } .palier b { font-size: 12px; } .palier span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .item.partenaire { cursor: default; align-items: center; } .logo-partenaire { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--line); flex: 0 0 auto; } .liens-partenaire { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; font-size: 12.5px; font-weight: 700; } .logo-apercu { max-width: 140px; max-height: 90px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--line); margin: 2px 0 6px; } .form-partenaire { margin-top: 4px; } .segment:disabled, .btn-secondaire:disabled { opacity: .55; cursor: default; } .encart-neutre { margin: 0 0 10px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; line-height: 1.4; } /* ─── Animaux perdus ou trouvés ───────────────────────────────────────────── */ .ic-animal { background: #7c5a2e; border-radius: 50%; width: 12px; height: 12px; box-shadow: 0 0 0 3px rgba(124, 90, 46, .2); } .marqueur-animal { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--panel); border: 3px solid #7c5a2e; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); font-size: 15px; } .marqueur-animal.trouve { border-color: #0f766e; } .item.animal { cursor: default; } .item.animal.cible { box-shadow: 0 0 0 2px var(--eau); } .item.animal.retrouve { opacity: .8; } .actions-animal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .btn-secondaire.petit { padding: 5px 10px; font-size: 12px; border-radius: 10px; } .contact-animal { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; } .tab .n.neutre { background: var(--eau2); } .tab.on .n.neutre { background: rgba(255, 255, 255, .28); } .champ-titre { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 4px; } .types.especes { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .types.especes .type-btn { align-items: center; font-size: 12.5px; font-weight: 700; } .apercu { max-width: 100%; max-height: 180px; border-radius: 12px; margin: 4px 0; } .consentement { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; color: var(--muted); margin: 6px 0; } .consentement input { margin-top: 2px; flex: 0 0 auto; } #animalTypes { display: flex; width: 100%; } #animalTypes .segment { flex: 1; } /* ─── Statistiques par département (bleu seulement) ───────────────────────── */ .stats-tete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 4px 0 10px; } .stats-tete .kpi .v { font-size: 18px; } .stat-ligne .barre { height: 6px; border-radius: 999px; background: var(--line); margin: 5px 0 3px; overflow: hidden; } .stat-ligne .barre span { display: block; height: 100%; border-radius: 999px; background: var(--eau); } .stats-sources { margin: 4px 0 10px; padding-left: 18px; font-size: 12px; line-height: 1.45; color: var(--muted); } .stats-sources li { margin-bottom: 5px; } .stats-sources li.indispo b { color: var(--txt); } /* ─── Invitation à installer l'application ────────────────────────────────── */ .install-banniere { position: relative; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px 8px 8px 10px; max-width: 520px; } .install-banniere img { border-radius: 8px; flex: 0 0 auto; } .install-banniere p { margin: 0; flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; } .install-banniere p small { display: block; color: var(--muted); font-size: 11px; } .btn-primaire.petit { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; flex: 0 0 auto; } .install-fermer { border: 0; background: var(--panel2); color: var(--muted); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; flex: 0 0 auto; } .install-fermer { position: relative; } .install-fermer::after { content: ""; position: absolute; inset: -8px; } /* (Bannière d'installation : dans la pile .bandes depuis le 25/09/2026, ses positions absolues sont neutralisées plus bas.) */ #app:has(#pickUi:not([hidden])) .install-banniere, #app:has(.modal:not([hidden])) .install-banniere { display: none; } /* ─── Langue de l'interface ────────────────────────────────────────────────── */ .langue { position: relative; flex: 0 0 auto; } .langue-btn .lf { display: inline-flex; } .drapeau { width: 20px; height: 14px; border-radius: 2px; display: inline-block; vertical-align: middle; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); flex: none; } .menu-langue .drapeau { width: 18px; height: 12px; } .menu-langue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1250; list-style: none; margin: 0; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 140px; } .menu-langue button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; } .menu-langue button:hover, .menu-langue button[aria-checked="true"] { background: rgba(29, 111, 224, .1); color: var(--eau-txt); } /* ─── Commandes flottantes ────────────────────────────────────────────────── */ .radar-ctl { position: absolute; z-index: 1000; left: 10px; bottom: calc(var(--sheet-peek) + 12px + env(safe-area-inset-bottom)); display: flex; align-items: stretch; height: 36px; border-radius: 10px; box-shadow: var(--shadow); font-size: 12px; font-variant-numeric: tabular-nums; transition: bottom .28s, opacity .2s; } /* Arrondis portés par les segments extrêmes (plus d'overflow: hidden sur la pilule : il rognait l'attribution). */ .radar-ctl .rseg-bleu { border-radius: 10px 0 0 10px; } .radar-ctl .rseg-rouge { border-radius: 0 10px 10px 0; } /* Attribution du radar OPERA (CC BY 4.0) juste au-dessus de la pilule, discrète, comme celle de Leaflet. */ .radar-src { position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; padding: 1px 6px; border-radius: 5px; white-space: nowrap; font-size: 9.5px; line-height: 14px; font-weight: 600; color: var(--muted); text-decoration: none; background: color-mix(in srgb, var(--panel) 85%, transparent); } .radar-src:hover, .radar-src:focus-visible { text-decoration: underline; } .radar-ctl.eteint .radar-src { display: none; } /* Bleu · blanc · rouge : trois aplats sans contour ni ombre propre (sinon des traits clairs apparaissent entre eux). */ .rseg { border: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; font: inherit; } .rseg-bleu { background: #1e40af; color: #fff; cursor: pointer; } .rseg-blanc { background: #fff; color: #334155; font-weight: 700; white-space: nowrap; } .rseg-rouge { background: linear-gradient(135deg, #ef3b24, #cf1512); color: #fff; cursor: pointer; font-size: 13px; min-width: 42px; } .rseg:focus-visible { outline: 2px solid #fbbf24; outline-offset: -3px; } /* Pluie masquée : les trois aplats restent pleins (le drapeau ne devient jamais transparent), seuls texte et icônes pâlissent. */ .radar-ctl.eteint .rseg-blanc { color: #64748b; } .radar-ctl.eteint .rseg-bleu svg { opacity: .6; } .radar-ctl.eteint .rseg-rouge { color: rgba(255, 255, 255, .5); cursor: default; } #sigFab { position: absolute; z-index: 1000; right: 12px; bottom: calc(var(--sheet-peek) + 12px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 24px; border: 0; background: var(--eau-plein); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 6px 18px var(--eau-ombre); cursor: pointer; transition: bottom .28s, opacity .2s; } #sigFab:active { transform: scale(.96); } /* Sous 380 px (audit UI P1-4), le libellé recouvrait la pilule de la pluie radar (11 px à 320) : « + » seul, 48 px, le nom accessible (aria-label) reste « Signaler une inondation… ». */ @media (max-width: 379px) { #sigFab .sig-libelle { display: none; } #sigFab { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; } #sigFab svg { width: 20px; height: 20px; } } #app:has(#sheet.collapsed.mini) .radar-ctl, #app:has(#sheet.collapsed.mini) #sigFab { bottom: calc(var(--sheet-mini) + 12px + env(safe-area-inset-bottom)); } @media (max-width: 1099px) { #app:has(#sheet:not(.collapsed)) .drawerbtn, #app:has(#sheet:not(.collapsed)) .radar-ctl, #app:has(#sheet:not(.collapsed)) #sigFab, #app:has(#sheet:not(.collapsed)) .leaflet-control-zoom { opacity: 0; pointer-events: none; } .leaflet-top.leaflet-right { top: 48px; } } /* ─── Volet bas ───────────────────────────────────────────────────────────── */ #sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1100; background: var(--panel); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 34px rgba(20, 30, 50, .14); display: flex; flex-direction: column; transition: transform .28s cubic-bezier(.22, 1, .36, 1); /* Hauteur FIXE : le bord haut ne saute pas d'un onglet à l'autre, le contenu défile à l'intérieur. */ height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--hdr-h) - 14px); min-height: 60dvh; max-height: calc(100dvh - 58px); padding-bottom: calc(env(safe-area-inset-bottom) + 22px); } #sheet.collapsed { transform: translateY(calc(100% - var(--sheet-peek) - env(safe-area-inset-bottom))); } #sheet.collapsed.mini { transform: translateY(calc(100% - var(--sheet-mini) - env(safe-area-inset-bottom))); } /* Poignée : 40 px de haut sur toute la largeur, barre de 120 × 6 px (même règle que la carte des feux). */ #grip { display: flex; align-items: center; justify-content: center; height: 40px; width: 100%; touch-action: none; cursor: pointer; flex: 0 0 auto; } /* Barre fine et discrète façon iOS (24/09/2026, même règle que la carte des feux) : 96 × 4 px ; la prise facile vient de la zone tactile (#grip, 40 px de haut, pleine largeur), jamais d'une barre plus épaisse. */ #grip::before { content: ""; width: 96px; height: 4px; border-radius: 999px; background: var(--grip); transition: .2s; } #sheet:not(.collapsed) #grip::before { background: var(--grip-on); } .tabs { display: flex; gap: 6px; padding: 4px 12px 9px; overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; } .tabs::-webkit-scrollbar { display: none; } /* Onglets à la souris (audit UI du 25/09/2026, P1-13) : flèches aux bords quand la rangée déborde (6 onglets sur 11 hors de vue à 1280 px, sans barre ni indice), fondu du côté où il reste des onglets ; rien de tout cela au doigt (on glisse). */ .tabs-cadre { position: relative; flex: 0 0 auto; min-width: 0; } .tabs-fleche { position: absolute; top: 4px; z-index: 2; width: 34px; height: 37px; display: grid; place-items: center; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--txt) 22%, var(--line)); background: var(--panel); color: var(--txt); box-shadow: var(--shadow); cursor: pointer; } .tabs-fleche.prec { left: 6px; } .tabs-fleche.suiv { right: 6px; } .tabs-cadre::before, .tabs-cadre::after { content: ""; position: absolute; top: 0; bottom: 9px; width: 46px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .15s; } .tabs-cadre::before { left: 0; background: linear-gradient(to right, var(--panel) 45%, transparent); } .tabs-cadre::after { right: 0; background: linear-gradient(to left, var(--panel) 45%, transparent); } .tabs-cadre.avant::before, .tabs-cadre.apres::after { opacity: 1; } @media (hover: none) { .tabs-fleche { display: none !important; } } .tab { position: relative; display: inline-flex; align-items: center; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); border-radius: 22px; padding: 9px 14px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; flex: 0 0 auto; transition: background .15s, color .15s, box-shadow .15s, transform .1s; } .tab:not(.on):active { transform: scale(.96); } .tab::after { content: ""; position: absolute; inset: -4px -3px; } /* zone tactile (audit UI P1-8), dans le rembourrage de la rangée */ .tab.on { background: var(--eau-plein); color: #fff; border-color: var(--eau-plein); box-shadow: 0 4px 13px var(--eau-ombre); } .tab .n { display: inline-block; min-width: 16px; text-align: center; margin-left: 6px; font-size: 10px; font-weight: 800; background: var(--danger); color: #fff; border-radius: 10px; padding: 1px 5px; } .tab.on .n { background: rgba(255, 255, 255, .28); } .sheet-head { display: flex; gap: 7px; padding: 0 12px 10px; flex: 0 0 auto; align-items: stretch; } /* Chiffres clés (25/09/2026, refonte « comme la carte des feux ») : QUATRE tuiles larges sur une ligne, même hauteur, fond --panel sur le volet --panel2 comme les feux ; grand chiffre (26 px) ou pastille de niveau, ligne secondaire en petit, libellé court en capitales espacées sur UNE ligne : aucune césure automatique (hyphens: manual), jamais de lettre orpheline. Le sélecteur d'échéance de la tuile Vigilance s'étale sur la largeur de la tuile. */ .sheet-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; } .kpi { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 10px 6px 9px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .1s; } .kpi:hover, .kpi:focus-visible { border-color: color-mix(in srgb, var(--eau) 55%, var(--line)); outline: none; } .kpi:active { transform: scale(.98); } .kpi .v { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; min-height: 26px; display: flex; align-items: center; justify-content: center; max-width: 100%; } .kpi .v .pastille { font-size: 12px; padding: 4px 10px; line-height: 1.3; max-width: 100%; } .kpi .vsub { font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.25; max-width: 100%; min-height: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; } .kpi .vsub:empty { display: none; } .kpi .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; line-height: 1.2; white-space: nowrap; -webkit-hyphens: manual; hyphens: manual; max-width: 100%; overflow: hidden; margin-top: auto; } .kwin { display: flex; align-self: stretch; margin: 3px -2px 0; border: 1.5px solid var(--eau); border-radius: 9px; overflow: hidden; } .kwin button { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; color: var(--eau-txt); font: inherit; font-size: 9.5px; font-weight: 800; padding: 3px 2px; cursor: pointer; line-height: 1.2; white-space: nowrap; overflow: hidden; } .kwin button.on { background: var(--eau-plein); color: #fff; } @media (max-width: 1099px) { .sheet-head { padding: 0 12px 10px; } } @media (max-width: 360px) { .sheet-head { gap: 6px; padding: 0 10px 9px; } .kpi { padding: 9px 4px 8px; border-radius: 11px; } .kpi .v { font-size: 24px; } .kpi .l { font-size: 11px; } .kpi .vsub { font-size: 11px; } .kwin button { font-size: 9px; padding: 3px 1px; } } .sheet-body { overflow-y: auto; padding: 2px 16px 22px; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; } /* Chiffres clés lisibles (audit UI du 25/09/2026, P1-5) : libellés et sous-lignes à 11 px partout (8,5 à 10 px avant) ; sous 400 px, libellé en casse normale (« Vigilance » tient dans une tuile de 70 px, pas « VIGILANCE » espacé). Volet plein : la rangée se replie dès qu'on fait défiler le contenu et revient en haut de page (130 px rendus au contenu). */ @media (max-width: 400px) { .kpi .l { text-transform: none; letter-spacing: 0; } } .sheet-head { max-height: 220px; transition: max-height .22s ease, opacity .18s ease, padding .22s ease, visibility .22s; } #sheet.tuiles-repliees .sheet-head { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; visibility: hidden; } .pane { display: none; } .pane.on { display: block; } .intro { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 2px 0 10px; } .etat { margin: 0 0 8px; font-size: 14px; line-height: 1.45; } .etat strong { font-weight: 700; } .note { font-size: 12px; line-height: 1.45; color: var(--muted); margin: 4px 0 8px; } .alertes-sources { list-style: none; margin: 0 0 10px; padding: 8px 10px; background: var(--alerte-fond); border: 1px solid var(--alerte-bord); border-radius: 10px; font-size: 12px; line-height: 1.4; } .segments { display: inline-flex; gap: 0; margin: 4px 0 6px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel2); } .segment { border: 0; background: transparent; padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; } .segment.on { background: var(--eau-plein); color: #fff; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); } .tag.n2 { background: var(--jaune); color: #3b2f00; border-color: transparent; } .tag.n3 { background: var(--orange); color: #3b1d00; border-color: transparent; } .tag.n4 { background: var(--rouge); color: #fff; border-color: transparent; } .tag.terrain { background: rgba(180, 83, 9, .12); border-color: rgba(180, 83, 9, .35); } .tag.eau { background: rgba(29, 111, 224, .1); border-color: rgba(29, 111, 224, .3); } .legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 12px; } .legende-titre { color: var(--muted); margin-right: 2px; } .niveau { padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 11px; } .n2 { background: var(--jaune); color: #3b2f00; } .n3 { background: var(--orange); color: #3b1d00; } .n4 { background: var(--rouge); color: #fff; } .liste { display: flex; flex-direction: column; gap: 6px; } .item { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; cursor: pointer; } .item:active { transform: scale(.99); } .item .pic { font-size: 18px; flex: 0 0 auto; line-height: 1.2; } .item .corps { min-width: 0; flex: 1; } .item-titre { font-size: 13px; font-weight: 700; line-height: 1.3; } .item-sous { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; } .item .vignette { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; } .item .badge { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .item .badge.confirme { color: var(--ok); border-color: rgba(22, 163, 74, .4); } .item .badge.n2, .item .badge.n3, .item .badge.n4 { border-color: transparent; } .vide { font-size: 12.5px; color: var(--muted); padding: 10px 4px; } .cta-ligne { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; } .btn-primaire { border: 0; background: var(--eau-plein); color: #fff; font-weight: 800; padding: 9px 16px; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 12px var(--eau-ombre); display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .btn-primaire:disabled { opacity: .6; cursor: default; } .lien-bouton { text-decoration: none; display: inline-flex; } .pied-liens { margin-top: 10px; } .app-ver { white-space: nowrap; font-variant-numeric: tabular-nums; } .btn-secondaire { border: 1px solid var(--line); background: var(--panel); color: var(--txt); font-weight: 700; padding: 9px 14px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; } .btn-secondaire svg { color: var(--eau-txt); flex: 0 0 auto; } .btn-icone { padding: 0 12px; } .champ { display: block; margin: 8px 0; font-size: 12.5px; } .champ > span { display: block; color: var(--muted); font-weight: 700; margin-bottom: 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; } .champ select, .champ textarea, .champ input[type="text"] { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--bord-champ); border-radius: 10px; background: var(--panel); color: var(--txt); } .champ input[type="file"] { font-size: 12px; } /* Photo (audit UI P1-10) : le champ natif « Choose File / No file chosen » (anglais, petit) devient un bouton « Ajouter une photo » ; le champ reste le contrôle réel (visuellement masqué, focalisable), son étiquette fait office de bouton. */ .fichier-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; } .champ-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .champ-photo > span:first-child { flex: 1 1 100%; } .bouton-photo { min-height: 44px; cursor: pointer; } .fichier-cache:focus-visible + .bouton-photo { outline: 2px solid var(--eau); outline-offset: 2px; } .champ > .photo-nom { display: inline; margin: 0; font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); min-width: 0; overflow-wrap: anywhere; } /* ─── Choix d'un point ────────────────────────────────────────────────────── */ #pickCross { position: absolute; left: 50%; top: calc(50% + var(--hdr-h) / 2); width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; z-index: 1150; border: 3px solid var(--eau); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .8), 0 6px 16px rgba(0, 0, 0, .3); } #pickCross::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; background: var(--eau); border-radius: 50%; } #pickBar { position: absolute; z-index: 1150; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 10px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ppb-txt { flex: 1 1 200px; display: flex; flex-direction: column; font-size: 12px; color: var(--muted); } .ppb-txt b { color: var(--txt); font-size: 13px; } .ppb-b { border: 1px solid var(--line); background: var(--panel2); padding: 8px 14px; border-radius: 12px; font-weight: 700; cursor: pointer; } .ppb-b.ok { background: var(--eau-plein); color: #fff; border-color: var(--eau-plein); } #app:has(#pickUi:not([hidden])) #sheet, #app:has(#pickUi:not([hidden])) .drawerbtn, #app:has(#pickUi:not([hidden])) #drawer, #app:has(#pickUi:not([hidden])) #sigFab, #app:has(#pickUi:not([hidden])) .radar-ctl { opacity: 0; pointer-events: none; } /* ─── Formulaire ──────────────────────────────────────────────────────────── */ .modal { position: absolute; inset: 0; z-index: 1300; display: flex; align-items: flex-end; justify-content: center; } .modal-voile { position: absolute; inset: 0; background: rgba(10, 20, 40, .45); backdrop-filter: blur(2px); } .modal-carte { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--panel); border-radius: 20px 20px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg); margin: 0; } @media (min-width: 640px) { .modal { align-items: center; } .modal-carte { border-radius: 20px; } } .modal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .modal-tete h2 { margin: 0; font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--txt); } .types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; } .type-btn { border: 1.5px solid var(--line); background: var(--panel2); border-radius: 14px; padding: 10px 10px; text-align: left; cursor: pointer; display: flex; gap: 8px; align-items: flex-start; } .type-btn .pic { font-size: 20px; line-height: 1; } .type-btn b { display: block; font-size: 13px; } .type-btn small { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; } .type-btn.on { border-color: var(--eau); background: rgba(29, 111, 224, .08); box-shadow: 0 0 0 2px rgba(29, 111, 224, .18); } .champ-ligne { display: flex; gap: 8px; flex-wrap: wrap; } #sigApercu { max-width: 100%; max-height: 180px; border-radius: 12px; margin: 4px 0; } .erreurs { background: rgba(225, 29, 29, .08); border: 1px solid rgba(225, 29, 29, .35); color: var(--danger); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } #toast { position: absolute; z-index: 1500; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--txt); color: var(--panel); padding: 10px 16px; border-radius: 14px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); } /* Message au-dessus du volet replié et de la barre du bas (audit UI P2-9 : « Recherche de votre position… » couvrait les chiffres clés pendant la géolocalisation). */ @media (max-width: 1099px) { #app:has(#sheet.collapsed) #toast { bottom: calc(var(--sheet-peek) + 64px + env(safe-area-inset-bottom)); } #app:has(#sheet.collapsed.mini) #toast { bottom: calc(var(--sheet-mini) + 64px + env(safe-area-inset-bottom)); } } @media (min-width: 1100px) { #toast { left: calc(50% + 220px); } } /* ─── Grand écran : le volet devient une colonne à gauche, la carte prend le reste ─── */ @media (min-width: 1100px) { :root { --hdr-h: 62px; } #sheet { left: 0; right: auto; top: var(--hdr-h); width: 440px; height: auto; max-height: none; min-height: 0; border-radius: 0; border-top: 0; border-right: 1px solid var(--line); box-shadow: 8px 0 34px rgba(20, 30, 50, .08); transform: none !important; padding-bottom: 0; } #grip { display: none; } #carte { left: 440px; } .radar-ctl { left: 452px; bottom: 16px; } #sigFab { bottom: 20px; right: 20px; } .sheet-head { padding: 0 14px 11px; gap: 9px; } .kpi { padding: 12px 8px 10px; } #pickCross { left: calc(50% + 220px); } } /* ─── Pictogrammes des calques (24/09/2026, « juste des pastilles, c'est pas beau ») ──────────────────── Un pictogramme par calque, dessiné en SVG et peint dans la couleur du calque par un masque CSS : même rendu net en thème clair et sombre, aucune image à charger. Remplace les pastilles (carrés, ronds, dégradés) des puces de calques ET de la légende, qui utilisent les mêmes classes. Calque éteint = pictogramme pâli. */ .ic { width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; background: var(--ic-c, #64748b); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .ic.ic-crue { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 16c1.5 0 1.5-1.5 3-1.5s1.5 1.5 3 1.5 1.5-1.5 3-1.5 1.5 1.5 3 1.5 1.5-1.5 3-1.5 1.5 1.5 3 1.5%22/%3E%3Cpath d=%22M3 20.5c1.5 0 1.5-1.5 3-1.5s1.5 1.5 3 1.5 1.5-1.5 3-1.5 1.5 1.5 3 1.5 1.5-1.5 3-1.5 1.5 1.5 3 1.5%22/%3E%3Cpath d=%22M12 3v8M8.5 7.5 12 11l3.5-3.5%22/%3E%3C/svg%3E"); --ic-c: linear-gradient(135deg, var(--jaune), var(--orange) 50%, var(--rouge)); background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-vigi { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.5 2.5 20h19L12 3.5z%22/%3E%3Cpath d=%22M12 10v4.5%22/%3E%3Cpath d=%22M12 17.5h.01%22/%3E%3C/svg%3E"); --ic-c: var(--orange); background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-station { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 3v15%22/%3E%3Cpath d=%22M7 6h4M7 10h3M7 14h4%22/%3E%3Cpath d=%22M3 21c1.5 0 1.5-1.2 3-1.2s1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2%22/%3E%3Cpath d=%22M16 5v8M13.5 10.5 16 13l2.5-2.5%22/%3E%3C/svg%3E"); --ic-c: var(--eau); background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-radar { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 15.5A4.5 4.5 0 0 0 17.5 7h-1.3A7 7 0 1 0 4 13.9%22/%3E%3Cpath d=%22M8 17v2M12 19v2M16 17v2%22/%3E%3C/svg%3E"); --ic-c: linear-gradient(135deg, #38bdf8, #2563eb 55%, #7c3aed); background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-foudre { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2 4.5 13.5H11L10 22l8.5-11.5H12L13 2z%22/%3E%3C/svg%3E"); --ic-c: var(--foudre); background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-vent { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 8h11a3 3 0 1 0-3-3%22/%3E%3Cpath d=%22M3 12.5h15.5a2.5 2.5 0 1 1-2.5 2.5%22/%3E%3Cpath d=%22M3 17h7%22/%3E%3C/svg%3E"); --ic-c: #64748b; background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-hum { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.8s6 6.4 6 11.2a6 6 0 0 1-12 0c0-4.8 6-11.2 6-11.2z%22/%3E%3Cpath d=%22M9 14.5a3 3 0 0 0 3 3%22/%3E%3C/svg%3E"); --ic-c: var(--pluie); background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-trafic { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 7.5h18v6H3z%22/%3E%3Cpath d=%22M7 7.5l4 6M13 7.5l4 6%22/%3E%3Cpath d=%22M6 13.5V20M18 13.5V20%22/%3E%3C/svg%3E"); --ic-c: #d97706; background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-zones { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 6l7-2.5 9 3.5-2 11.5L9 20.5 4 15z%22 stroke-dasharray=%223 2.6%22/%3E%3Cpath d=%22M9.5 12h5%22/%3E%3C/svg%3E"); --ic-c: var(--eau); background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-ruiss { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 3.5l5 5M10 2.5l5 5M15 3.5l4 4%22/%3E%3Cpath d=%22M3 17c2.5 0 3.5-3 6.5-3s4 3 6.5 3 3.5-1.5 5-2.5%22/%3E%3Cpath d=%22M3 21h18%22/%3E%3C/svg%3E"); --ic-c: #b45309; background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-heli { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 5h16M11 5v3%22/%3E%3Cpath d=%22M5 12.5C5 10 7 8 10 8h5l2.5 4.5L15 17h-5c-3 0-5-2-5-4.5z%22/%3E%3Cpath d=%22M17.5 12.5H22M22 10.5v4%22/%3E%3Cpath d=%22M8 17v3M5.5 20h8%22/%3E%3C/svg%3E"); --ic-c: #dc2626; background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-navire { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M5.6 5.6l3.6 3.6M14.8 14.8l3.6 3.6M18.4 5.6l-3.6 3.6M9.2 14.8l-3.6 3.6%22/%3E%3C/svg%3E"); --ic-c: #0e7490; background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-subm { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 11.5 12 5l8 6.5%22/%3E%3Cpath d=%22M6.5 10v3.5M17.5 10v3.5%22/%3E%3Cpath d=%22M2 18c2 0 2.5-2 5-2s3 2 5 2 2.5-2 5-2 3 2 5 2%22/%3E%3Cpath d=%22M2 22c2 0 2.5-2 5-2s3 2 5 2 2.5-2 5-2 3 2 5 2%22/%3E%3C/svg%3E"); --ic-c: #0e7490; background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-marine { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%225%22 r=%222%22/%3E%3Cpath d=%22M12 7v14%22/%3E%3Cpath d=%22M8 11h8%22/%3E%3Cpath d=%22M4.5 13.5a7.5 7.5 0 0 0 15 0%22/%3E%3Cpath d=%22M3 13.5h3M18 13.5h3%22/%3E%3C/svg%3E"); --ic-c: #0e7490; background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-sig { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 10.5v3a1 1 0 0 0 1 1H7l6 4.5V5L7 9.5H4.5a1 1 0 0 0-1 1z%22/%3E%3Cpath d=%22M16.5 9a4 4 0 0 1 0 6%22/%3E%3Cpath d=%22M19 6.5a7.5 7.5 0 0 1 0 11%22/%3E%3C/svg%3E"); --ic-c: #b45309; background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-animal { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg fill=%22black%22 stroke=%22none%22%3E%3Ccircle cx=%225.5%22 cy=%2210%22 r=%222.1%22/%3E%3Ccircle cx=%229.3%22 cy=%225.8%22 r=%222.1%22/%3E%3Ccircle cx=%2214.7%22 cy=%225.8%22 r=%222.1%22/%3E%3Ccircle cx=%2218.5%22 cy=%2210%22 r=%222.1%22/%3E%3Cpath d=%22M12 11.5c-3.2 0-6.3 3.6-6.3 6.3 0 1.6 1.2 2.7 3 2.7 1.3 0 2.1-.7 3.3-.7s2 .7 3.3.7c1.8 0 3-1.1 3-2.7 0-2.7-3.1-6.3-6.3-6.3z%22/%3E%3C/g%3E%3C/svg%3E"); --ic-c: #7c5a2e; background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-presse { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5h13v14H6.5A2.5 2.5 0 0 1 4 16.5V5z%22/%3E%3Cpath d=%22M17 9h3v8a2 2 0 0 1-2 2h-1%22/%3E%3Cpath d=%22M7.5 8.5h6M7.5 12h6M7.5 15.5h4%22/%3E%3C/svg%3E"); --ic-c: var(--presse); background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .calque:not(:has(input:checked)) .ic { opacity: .45; filter: saturate(.3); } /* ─── Cartes d'articles de l'onglet Actu (24/09/2026, « comme la carte des feux, plus visuel ») ──────────── Icône du média dans une vignette, titre en gras (non souligné), source en couleur, ancienneté en pastille, séparateurs par période. Les étiquettes (crue, route coupée…) et le bouton 📍 restent sous le titre. */ .art-sep { display: flex; align-items: center; gap: 10px; margin: 16px 2px 9px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .art-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); } .art { display: flex; gap: 12px; align-items: flex-start; background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; margin-bottom: 9px; } .art-terrain { border-left: 3px solid #b45309; } .art-vignette { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .art-vignette img { width: 34px; height: 34px; object-fit: contain; } .art-initiale { color: #fff; font-weight: 800; font-size: 22px; border-color: transparent; } .art-corps { min-width: 0; flex: 1; } .art-titre { display: block; font-size: 14px; font-weight: 800; line-height: 1.32; color: var(--txt); text-decoration: none; overflow-wrap: anywhere; } .art-titre:hover, .art-titre:focus-visible { text-decoration: underline; } .art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 6px; } .art-source { font-size: 12px; font-weight: 800; color: var(--eau-txt); } .art-age { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; } .art-tags { margin: 8px 0 0; } .art-lieu { cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; color: var(--txt); } .art-lieu:active { transform: scale(.97); } .presse-plus { width: 100%; margin-top: 2px; min-height: 44px; } /* Lecture / pause du radar : icônes SVG blanches (jamais d'émoji), centrées dans le segment rouge. */ .rseg-rouge .ic-lecture { display: block; color: #fff; } /* ─── Volet des calques (bord droit, modèle de la carte des feux) ───────────────────────────────────────── Languette verticale « Afficher / masquer », tiroir sous l'en-tête (au-dessus de la carte et du volet bas, sous les formulaires, messages et menus). ⚠️ `.drawer-body > * { flex-shrink: 0 }` : sans lui, dans une colonne flex qui défile, un enfant en `overflow: hidden` peut tomber à 2 px de haut (c'est ce qui vide la section « Fond de carte » du tiroir de la carte des feux sur téléphone). */ .drawerbtn { position: absolute; right: 0; top: 46%; transform: translateY(-50%); z-index: 1000; display: flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-right: 0; border-radius: 13px 0 0 13px; padding: 13px 7px; font-size: 11.5px; font-weight: 800; color: var(--txt); box-shadow: -3px 2px 14px rgba(20, 30, 50, .18); cursor: pointer; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .04em; transition: opacity .2s; } .drawerbtn .dh-ic { width: 16px; height: 16px; color: var(--eau); flex: 0 0 auto; } /* Languette identique à toutes les tailles (audit UI P2-6) : pictogramme des calques seul, 44 px de haut au moins ; le texte « Afficher / masquer » reste son nom accessible (masqué à l'œil) et l'infobulle le dit au survol. Sur un écran court, le texte vertical recouvrait les contrôles de carte : il avait déjà disparu sous 720 px de haut, pas au-dessus. */ .drawerbtn { padding: 12px 8px; } .drawerbtn .dh-ic { width: 20px; height: 20px; } .drawerbtn > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .drawerbtn:focus-visible { outline: 2px solid var(--eau); outline-offset: -3px; } #app:has(#drawer:not(.closed)) .drawerbtn { opacity: 0; pointer-events: none; } #drawer { position: absolute; top: var(--hdr-h); right: 0; bottom: 0; width: min(330px, 88vw); z-index: 1160; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -8px 0 40px rgba(20, 30, 50, .22); display: flex; flex-direction: column; transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s; } #drawer.closed { transform: translateX(103%); box-shadow: none; visibility: hidden; } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; flex: 0 0 auto; } .drawer-head b { display: flex; align-items: center; gap: 7px; min-width: 0; } .dh-ic { width: 17px; height: 17px; flex: 0 0 auto; } .drawer-x { border: 0; background: var(--panel2); color: var(--muted); width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; flex: 0 0 auto; } .drawer-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 12px 14px max(20px, calc(env(safe-area-inset-bottom) + 14px)); display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .drawer-body > * { flex-shrink: 0; } .dsec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; margin-top: 6px; } .drawer-note { font-size: 11px; color: var(--muted); margin: -2px 0 0; line-height: 1.4; } .fonds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fond { display: flex; flex-direction: column; gap: 5px; padding: 5px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel2); cursor: pointer; text-align: left; min-width: 0; } .fond:hover { border-color: color-mix(in srgb, var(--eau) 45%, var(--line)); } .fond.on { border-color: var(--eau); box-shadow: 0 0 0 2px rgba(29, 111, 224, .2); } .fond:focus-visible { outline: 2px solid var(--eau); outline-offset: 2px; } .fond-apercu { display: block; height: 58px; border-radius: 8px; overflow: hidden; background: var(--line); } .fond-apercu img { width: 100%; height: 100%; object-fit: cover; display: block; } .fond-apercu.attenue img { filter: grayscale(1) brightness(1.1) contrast(.8); opacity: .75; } .fond-nom { font-size: 12px; font-weight: 700; padding: 0 3px 2px; line-height: 1.25; } .fond.on .fond-nom { color: var(--eau-txt); } .tgroup { border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); margin-bottom: 8px; overflow: hidden; } .tgroup-head { width: 100%; display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 10px 10px; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--txt); text-align: left; -webkit-tap-highlight-color: transparent; } .tgroup-ic-wrap { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--gc); } .tgroup-ic { width: 15px; height: 15px; } .tgroup-name { flex: 1 1 auto; min-width: 0; } .tgroup-count { font-size: 11px; font-weight: 800; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; font-variant-numeric: tabular-nums; } .tgroup-chev { flex: 0 0 auto; color: var(--muted); transition: transform .22s ease; } .tgroup.open .tgroup-chev { transform: rotate(180deg); } .tgroup:not(.open) .toggles { display: none; } .toggles { padding: 0 10px 4px; } .calque { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); cursor: pointer; } .calque .ic { flex: 0 0 auto; width: 20px; height: 20px; } .calque-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .calque-tx b { font-size: 13px; line-height: 1.25; } .calque-tx small { font-size: 11.5px; color: var(--muted); line-height: 1.3; } .calque input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .interrupteur { flex: 0 0 auto; position: relative; width: 40px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--txt) 22%, transparent); transition: background .2s; } .interrupteur::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); } input:checked + .interrupteur { background: var(--eau); } input:checked + .interrupteur::after { transform: translateX(16px); } input:focus-visible + .interrupteur { outline: 2px solid var(--eau); outline-offset: 2px; } .calque.petit { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--panel2); } .drawer-reglage { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; } .drawer-reglage .segments { margin: 0; } .drawer-reglage .segment { padding: 6px 11px; font-size: 12px; } .drawer-bouton { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); border-radius: 11px; padding: 10px 12px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; } .drawer-bouton svg { color: var(--eau); flex: 0 0 auto; } .drawer-ver { text-align: center; margin: 6px 0 0; font-size: 11px; color: var(--muted); font-weight: 700; } @media (max-width: 1099px) { #app:has(#drawer:not(.closed)) #sheet, #app:has(#drawer:not(.closed)) .radar-ctl, #app:has(#drawer:not(.closed)) #sigFab, #app:has(#drawer:not(.closed)) .install-banniere { opacity: 0; pointer-events: none; transition: opacity .2s; } } @media (min-width: 1100px) { #drawer { width: 330px; } } /* ─── Fonds de carte : réglages d'affichage par fond et par thème ─────────────────────────────────────── */ #carte[data-fond="photos"] .leaflet-tile-pane { filter: none; } /* L'estompage du relief est transparent hors des ombres : fond clair en thème clair, gris moyen en sombre. */ #carte[data-fond="relief"], #carte[data-fond="relief"].leaflet-container { background: #f2efe8; } :root[data-theme="dark"] #carte[data-fond="relief"], :root[data-theme="dark"] #carte[data-fond="relief"].leaflet-container { background: #4a515c; } #carte[data-fond="clair"] .leaflet-tile-pane { filter: grayscale(1) brightness(1.08) contrast(.82); opacity: .78; } :root[data-theme="dark"] #carte[data-fond="photos"] .leaflet-tile-pane { filter: brightness(.82); } :root[data-theme="dark"] #carte[data-fond="clair"] .leaflet-tile-pane { filter: grayscale(1) invert(.9) brightness(.85) contrast(.9); opacity: .9; } :root[data-theme="dark"] #carte[data-fond="relief"] .leaflet-tile-pane { filter: brightness(.85); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #carte[data-fond="photos"] .leaflet-tile-pane { filter: brightness(.82); } :root:not([data-theme="light"]) #carte[data-fond="clair"] .leaflet-tile-pane { filter: grayscale(1) invert(.9) brightness(.85) contrast(.9); opacity: .9; } :root:not([data-theme="light"]) #carte[data-fond="relief"] .leaflet-tile-pane { filter: brightness(.85); } :root:not([data-theme="light"]) #carte[data-fond="relief"], :root:not([data-theme="light"]) #carte[data-fond="relief"].leaflet-container { background: #4a515c; } } /* ─── Refonte « tout en cartes » (24/09/2026) : blocs, tuiles, pastilles, cartes d'élément, détails repliés ───── Même langage que les onglets Situation et Progression de la carte des feux : une carte par élément, pastille d'état pleine et sobre, chiffre clé en gros, libellé court, détail replié, sources en petit en pied de bloc. Jaune, orange et rouge restent réservés aux niveaux officiels (pastilles n2, n3, n4). */ .bloc { background: var(--panel2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 12px; margin: 0 0 14px; } .bloc-tete { display: flex; align-items: center; gap: 10px; margin: 0 0 11px; } .bloc-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--bc, var(--eau)); color: #fff; } .bloc-ic svg { width: 17px; height: 17px; } h2.bloc-titre { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; font-weight: 800; text-transform: none; letter-spacing: -.005em; color: var(--txt); line-height: 1.25; } .bloc-compte { flex: 0 0 auto; min-width: 28px; text-align: center; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-variant-numeric: tabular-nums; } .bloc-compte:empty { display: none; } .bloc-texte { font-size: 13px; line-height: 1.5; color: var(--txt); margin: 0 0 10px; } .bloc-pied { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; } .bloc-pied.reserve { flex-direction: row; align-items: flex-start; gap: 8px; } .bloc-pied.reserve > .svg-ic { color: var(--terrain-txt); flex: 0 0 auto; margin-top: 1px; } .source { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 0; } .source a { color: var(--eau-txt); } .bloc .segments { margin: 0 0 10px; } .bloc .liste { gap: 7px; } .pane > .intro { margin: 2px 2px 12px; } .pastilles-ligne { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .pastilles-ligne:empty { display: none; } .bloc-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(135deg, var(--eau-fond), var(--panel2) 70%); } .cta-tx { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .cta-tx b { font-size: 14px; line-height: 1.3; } .cta-tx span { font-size: 12.5px; color: var(--muted); line-height: 1.4; } .btn-large { width: 100%; padding: 12px 16px; font-size: 15px; } .segments-larges { display: flex; width: 100%; } .segments-larges .segment { flex: 1; padding: 11px 8px; font-size: 16px; font-variant-numeric: tabular-nums; } /* Pastilles pleines : niveaux officiels et états. */ .pastille { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.55; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent; } .pastille .svg-ic { flex: 0 0 auto; } .pastille.n2 { background: var(--jaune); color: #3b2f00; } .pastille.n3 { background: var(--orange); color: #3b1d00; } .pastille.n4 { background: var(--rouge); color: #fff; } .pastille.eau { background: var(--eau-plein); color: #fff; } .pastille.eau-fonce { background: #0b3a66; color: #fff; } .pastille.eau-clair { background: var(--eau-fond); color: var(--eau-txt); } .pastille.neutre { background: var(--neutre-fond); color: var(--txt); } .pastille.ok { background: #15803d; color: #fff; } .pastille.ok-clair { background: var(--ok-fond); color: var(--ok-txt); } .pastille.attention { background: #b45309; color: #fff; } .pastille.attention-clair { background: var(--terrain-fond); color: var(--terrain-txt); } .pastille.terrain { background: var(--terrain-fond); color: var(--terrain-txt); } .pastille.vert { background: var(--vert-fond); color: var(--vert-txt); } .pastille.brun { background: var(--brun-fond); color: var(--brun-txt); } .pastille.indispo { background: transparent; border: 1px dashed color-mix(in srgb, var(--muted) 70%, transparent); color: var(--muted); } .pastille.ruiss-0 { background: var(--neutre-fond); color: var(--txt); } .pastille.ruiss-1 { background: #fde68a; color: #3b2f00; } .pastille.ruiss-2 { background: #f59e0b; color: #3b1d00; } .pastille.ruiss-3 { background: #7c2d12; color: #fff; } .pastille.fac-0 { background: var(--ok-fond); color: var(--ok-txt); } .pastille.fac-1 { background: var(--eau-fond); color: var(--eau-txt); } .pastille.fac-2 { background: #b45309; color: #fff; } .pastille.fac-3 { background: #9f1239; color: #fff; } .legende .pastille { font-size: 11px; } /* Tuiles « chiffre clé » : grand nombre, libellé, détail ; liseré de couleur à gauche. */ .tuiles { display: grid; gap: 8px; margin: 0 0 12px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } .tuiles:empty { display: none; } .tuiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tuiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tuile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 10px 9px 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; min-width: 0; text-align: left; overflow: hidden; font: inherit; color: inherit; } .tuile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc, var(--eau)); } button.tuile { cursor: pointer; } .tuile-v { font-size: 24px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--txt); } .tuile-l { font-size: 12px; font-weight: 800; color: var(--txt); line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; } .tuile-s { font-size: 11px; color: var(--muted); line-height: 1.3; max-width: 100%; overflow-wrap: anywhere; } .tuile.niv .tuile-l, .tuile.ruiss .tuile-l { padding: 1px 8px; border-radius: 999px; overflow-wrap: normal; white-space: nowrap; font-size: 11px; } /* « Marqué » ne se coupe plus en « Marqu / é » (audit UI P2-1) */ .tuile.niv-2 { --tc: var(--jaune); } .tuile.niv-2 .tuile-l { background: var(--jaune); color: #3b2f00; } .tuile.niv-3 { --tc: var(--orange); } .tuile.niv-3 .tuile-l { background: var(--orange); color: #3b1d00; } .tuile.niv-4 { --tc: var(--rouge); } .tuile.niv-4 .tuile-l { background: var(--rouge); color: #fff; } .tuile.ruiss-t1 { --tc: #fde68a; } .tuile.ruiss-t1 .tuile-l { background: #fde68a; color: #3b2f00; } .tuile.ruiss-t2 { --tc: #f59e0b; } .tuile.ruiss-t2 .tuile-l { background: #f59e0b; color: #3b1d00; } .tuile.ruiss-t3 { --tc: #7c2d12; } .tuile.ruiss-t3 .tuile-l { background: #7c2d12; color: #fff; } .tuile.trafic { --tc: #d97706; } .tuile.neutre { --tc: #64748b; } .tuile.zero .tuile-v { color: var(--muted); } .tuile.zero::before { opacity: .45; } /* Tuile à zéro (audit UI P2-12) : grisée par la couleur, jamais par l'opacité (une pastille « Fort » à 75 % d'opacité perdait son contraste). */ .tuile.zero.niv .tuile-l, .tuile.zero.ruiss .tuile-l { background: var(--neutre-fond); color: var(--muted); } /* Carte d'un élément de liste (tronçon, station, route, hélicoptère, signalement…). */ .ce { position: relative; display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left; padding: 11px 12px 11px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; font: inherit; overflow: hidden; min-width: 0; } .ce::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ec, transparent); } .ce-clic { cursor: pointer; padding-right: 36px; transition: border-color .15s, transform .1s; } .ce-clic:hover, .ce-clic:focus-visible { border-color: color-mix(in srgb, var(--ec, var(--eau)) 60%, var(--line)); outline: none; } .ce-clic:active { transform: scale(.99); } .ce-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ec, var(--eau)); color: var(--ec-txt, #fff); } .ce-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ce-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .ce-titre { font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; min-width: 0; } .ce-chiffre { flex: 0 0 auto; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; line-height: 1.15; } .ce-chiffre small { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); } .ce-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .ce-ligne { font-size: 12.5px; line-height: 1.4; color: var(--txt); overflow-wrap: anywhere; } .ce-doux { color: var(--muted); font-size: 12px; } .ce-age { font-size: 11px; color: var(--muted); } .ce-go { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; } .ce-vignette { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; } .ce.animal.cible { box-shadow: 0 0 0 2px var(--eau); } .ce.animal.retrouve { opacity: .85; } .ce .plus { margin-top: 2px; } /* « En savoir plus » : détail replié. */ .plus > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--eau-txt); padding: 3px 0; user-select: none; } .plus > summary::-webkit-details-marker { display: none; } .plus > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; } .plus[open] > summary::after { transform: translateY(1px) rotate(-135deg); } .plus-corps { font-size: 12.5px; line-height: 1.5; color: var(--muted); padding: 5px 0 2px; } .plus-corps p { margin: 0 0 6px; } .plus-corps .liste { margin-top: 4px; } /* État vide ou calme : discret, jamais « rien » pour « indisponible ». */ .vide-etat { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); } .vide-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-fond); color: var(--ok-txt); } .vide-etat.indispo .vide-ic { background: var(--neutre-fond); color: var(--muted); } .vide-tx { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; line-height: 1.4; min-width: 0; } .vide-tx small { font-weight: 400; font-size: 12px; color: var(--muted); } /* Situation en France (onglet Actu). */ .sit-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; } .sit-etat .pastille { font-size: 12px; padding: 4px 11px; } /* Situation en France en liste triée par gravité (audit UI du 25/09/2026, P1-6) : une puce de la couleur du niveau, 4 lignes au plus, « Près de vous » en tête, le reste replié. */ .sit-raisons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; flex: 1 1 100%; min-width: 0; font-size: 13px; line-height: 1.4; } .sit-raisons li { position: relative; padding-left: 16px; overflow-wrap: anywhere; } .sit-raisons li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 8px; height: 8px; border-radius: 50%; background: var(--eau); } .sit-raisons li.niv-4::before { background: var(--rouge); } .sit-raisons li.niv-3::before { background: var(--orange); } .sit-raisons li.niv-2::before { background: var(--jaune); } .sit-raisons li.sit-pres { padding: 6px 8px 6px 22px; margin: 0 0 2px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); } .sit-raisons li.sit-pres::before { left: 8px; top: calc(6px + .52em); } .sit-pres-btn { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .sit-pres-btn b { font-weight: 800; } .sit-toutes { flex: 1 1 100%; } .sit-toutes .sit-raisons { margin-top: 6px; } .sit-etat > .sit-phrase { flex: 1 1 100%; } .sit-phrase { font-size: 13px; line-height: 1.45; color: var(--txt); flex: 1 1 200px; } .sit-liste { display: flex; flex-direction: column; gap: 7px; } .sit { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 36px 10px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font: inherit; color: inherit; cursor: pointer; } div.sit { cursor: default; padding-right: 12px; } .sit:hover { border-color: color-mix(in srgb, var(--sc) 55%, var(--line)); } .sit-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sc); color: var(--sc-txt, #fff); } .sit-n { flex: 0 0 auto; min-width: 30px; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .sit-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .sit-lib { font-size: 13px; font-weight: 700; line-height: 1.3; } .sit-pastilles { display: flex; flex-wrap: wrap; gap: 4px; } .sit-go { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; } .sit-calme { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--muted); margin: 10px 2px 0; } .sit-calme:empty { display: none; } .sit-calme .svg-ic { color: var(--ok-txt); flex: 0 0 auto; margin-top: 1px; } #situationDetails:empty { display: none; } #situationDetails { margin-top: 8px; } .bloc-situation .alertes-sources { margin: 10px 0 0; } /* Vigilance : une ligne par phénomène, façades littorales. */ .phen-liste { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; } .phen { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; } .phen-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--pc); color: var(--pc-txt, #fff); } .phen-nom { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; } .phen-niveaux { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .facades { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; } .facade-carte { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; min-width: 0; } .facade-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .facade-tete b { font-size: 13.5px; line-height: 1.25; } .facade-lignes { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .facade-lignes:empty { display: none; } .facade-vent { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); } .facade-carte .plus > summary { font-size: 12px; } .legende { margin: 0; } /* Fiche « Suis-je en zone inondable ? » : une ligne par dispositif, pastille d'état, plan et date en petit. */ .zone-fiche { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .zf-tete { display: flex; flex-direction: column; gap: 1px; } .zf-sur { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .zf-commune { font-size: 18px; font-weight: 800; line-height: 1.2; } .zf-dept { font-size: 12.5px; color: var(--muted); } .zf-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .zf-ligne { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); } .zf-ligne:first-child { border-top: 0; } .zf-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--eau-fond); color: var(--eau-txt); } .zf-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .zf-tx b { font-size: 13px; line-height: 1.3; } .zf-tx small { font-size: 12px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; } .zf-ligne > .pastille { flex: 0 0 auto; } .zf-liens { display: flex; flex-wrap: wrap; gap: 6px; } .zf-liens .btn-secondaire.petit { font-size: 12px; padding: 7px 10px; } /* Statistiques : rang, nom, valeur, barre, détail. */ .stat-ligne { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; font: inherit; color: inherit; cursor: pointer; } .stat-rang { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--eau-fond); color: var(--eau-txt); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } .stat-corps { flex: 1 1 auto; min-width: 0; } .stat-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .stat-nom { font-size: 13px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; } .stat-v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .stat-v small { font-size: 11px; color: var(--muted); font-weight: 600; } .stat-detail { font-size: 11.5px; color: var(--muted); line-height: 1.4; } .stats-tete { margin-bottom: 12px; } /* Mes alertes : types d'alertes en grille d'icônes. */ .types-alertes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } .types-alertes li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; line-height: 1.35; } .types-alertes .svg-ic { flex: 0 0 auto; color: var(--eau-txt); margin-top: 1px; } .etat-alertes { font-size: 13px; margin: 8px 0 0; line-height: 1.45; } .etat-alertes:empty { display: none; } .communes-choisies button { display: grid; place-items: center; } /* Divers : état des sources, donateurs, groupes, presse. */ .sante { margin: 10px 0 0; align-items: center; } .sante-titre { font-size: 11.5px; color: var(--muted); font-weight: 800; margin-right: 2px; } .donateur { gap: 5px; } .donateur .svg-ic { color: #be185d; } .groupes .groupe .svg-ic { color: var(--eau-txt); } .pastille.art-lieu { background: var(--panel); border: 1px solid var(--line); color: var(--txt); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; } .art-tags { margin: 8px 0 0; } .type-btn .pic .svg-ic { color: inherit; } .types.especes .type-btn .pic { color: #7c5a2e; } /* ─── Bulles des objets de la carte : bandeau coloré, titre, lignes, source, liens ─────────────────────── */ .bulle-wrap .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 14px; box-shadow: 0 12px 34px rgba(15, 30, 60, .28); } .bulle-wrap .leaflet-popup-content { margin: 0; min-width: 236px; max-height: min(62vh, 520px); overflow-y: auto; font-size: 13px; line-height: 1.45; -webkit-overflow-scrolling: touch; } .bulle-wrap .leaflet-popup-tip { background: var(--panel); } .bulle-wrap a.leaflet-popup-close-button { top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .22); color: #fff; font: 700 17px/26px system-ui, sans-serif; text-align: center; padding: 0; } .bulle-wrap a.leaflet-popup-close-button:hover { background: rgba(0, 0, 0, .35); color: #fff; } .bulle-wrap a.leaflet-popup-close-button::after { content: ""; position: absolute; inset: -9px; } /* zone tactile 44 × 44 (audit UI P1-8) */ .bulle-tete { display: flex; align-items: center; gap: 10px; padding: 11px 44px 11px 13px; } .bulle-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .24); display: grid; place-items: center; } .bulle-ht { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .bulle-ht small { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; opacity: .92; line-height: 1.3; } .bulle-ht b { font-size: 14.5px; line-height: 1.25; overflow-wrap: anywhere; } .bulle-corps { padding: 11px 13px 12px; background: var(--panel); color: var(--txt); display: flex; flex-direction: column; gap: 9px; } .bulle-pastilles { display: flex; flex-wrap: wrap; gap: 5px; } .bulle-lignes { display: grid; grid-template-columns: fit-content(46%) minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 12.5px; } .bulle-lignes dt { color: var(--muted); } .bulle-lignes dd { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: break-word; word-break: normal; } .bulle-lignes dd.pleine { grid-column: 1 / -1; font-weight: 400; } .bulle-texte { margin: 0; font-size: 13px; line-height: 1.45; } .bulle-doux { margin: 2px 0 0; font-size: 12px; color: var(--muted); } .bulle-blocs { display: flex; flex-direction: column; gap: 9px; } .bulle-bloc { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .bulle-photo { width: 100%; border-radius: 10px; display: block; } .bulle-note { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.45; border-top: 1px solid var(--line); padding-top: 8px; } .bulle-liens { display: flex; flex-wrap: wrap; gap: 6px; } .bulle-lien { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel2); color: var(--eau-txt) !important; font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; } .bulle-lien:hover { border-color: var(--eau); } .bulle-lien { min-height: 40px; } /* actions des bulles : 31 → 40 px (audit UI P1-8) */ .bulle .sparkline { margin: 0; } /* Marges héritées de Leaflet neutralisées dans les bulles (audit UI du 25/09/2026, P0-2) : `.leaflet-popup-content p` (1,3 em en haut ET en bas, spécificité 0,1,1) l'emportait sur `.bulle-texte { margin: 0 }` (0,1,0) et creusait 43 px de vide entre chaque ligne « proche de moi » (marges non fusionnées dans la colonne flex). Liens hors boutons : couleur d'accent lisible dans les deux thèmes (le #0078a8 de Leaflet tombe à 3,4:1 sur le fond sombre). */ .bulle-wrap .leaflet-popup-content p { margin: 0; } .bulle-wrap .leaflet-popup-content p.bulle-doux { margin-top: 2px; } .bulle-wrap .leaflet-popup-content .plus-corps p { margin: 0 0 6px; } .bulle-wrap .leaflet-popup-content a:not(.bulle-lien) { color: var(--eau-txt); } /* Cadrage des bulles (audit UI du 25/09/2026, P0-1) : hauteur bornée à la partie LIBRE de la carte (--bulle-max, posée par app.js à chaque recadrage), défilement interne, actions collées au bas du défilement (jamais sous la barre du bas). Petit écran où la bulle ne tient pas sous la pile : pile, pilule radar et « Je signale » s'effacent le temps de la bulle. */ .bulle-wrap .leaflet-popup-content { max-height: var(--bulle-max, min(62vh, 520px)); overscroll-behavior: contain; } .bulle-wrap .bulle-liens { position: sticky; bottom: 0; z-index: 1; margin: 0 -13px -12px; padding: 8px 13px 12px; background: var(--panel); border-top: 1px solid var(--line); } #app.bulle-serree .bandes, #app.bulle-serree .radar-ctl, #app.bulle-serree #sigFab { visibility: hidden; pointer-events: none; } .leaflet-tooltip.bulle-survol { background: rgba(20, 26, 38, .94); color: #fff; border: 0; border-radius: 9px; font-size: 12px; font-weight: 600; padding: 6px 10px; box-shadow: var(--shadow-lg); white-space: nowrap; } .leaflet-tooltip.bulle-survol::before { border-top-color: rgba(20, 26, 38, .94); } /* Marqueurs de la carte : pastilles rondes, pictogramme SVG blanc. */ .marqueur { display: grid; place-items: center; border-radius: 50%; color: #fff; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); } .marqueur.marqueur-heli { width: 30px; height: 30px; background: #dc2626; } .marqueur.marqueur-navire { width: 28px; height: 28px; background: #0e7490; } .marqueur.marqueur-trafic { width: 26px; height: 26px; border-radius: 8px; background: #f59e0b; color: #1f2937; } .marqueur.marqueur-trafic.obstruction { background: #94a3b8; } .marqueur.marqueur-presse { width: 24px; height: 24px; border-radius: 7px; background: var(--presse); } .marqueur.marqueur-animal { width: 30px; height: 30px; background: #7c5a2e; } .marqueur.marqueur-animal.trouve { background: #0f766e; } .marqueur-sig .svg-ic { display: block; } /* ─── Paramètres ────────────────────────────────────────────────────────────────────────────────────────── */ .parametres-carte { max-width: 440px; } .modal-tete h2 svg { vertical-align: -2px; margin-right: 7px; } .reglage-titre { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 8px; } .reglage-titre:first-of-type { margin-top: 6px; } .reglage-titre-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .reglage-valeur { text-transform: none; letter-spacing: 0; font-weight: 700; } .choix-theme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .choix-theme button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px; border: 1.5px solid var(--line); background: var(--panel2); border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--txt); } .choix-theme button.on { border-color: var(--eau-plein); background: var(--eau-plein); color: #fff; } .reglage-aide { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 7px 0 0; } #arrondiCurseur { width: 100%; accent-color: var(--eau); cursor: pointer; } .reglage-actions { margin-top: 2px; font-size: 12px; } .reglage-liste { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); overflow: hidden; } .reglage-ligne { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; font-size: 13.5px; border-top: 1px solid var(--line); cursor: pointer; } .reglage-ligne:first-child { border-top: 0; } .reglage-ligne > span:first-child { flex: 1 1 auto; min-width: 0; line-height: 1.3; } .reglage-ligne input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .parametres-carte .drawer-ver { margin-top: 18px; } .ver-stable { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #15803d; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; vertical-align: 1px; } .drawer-parametres { justify-content: center; } /* Éléments masqués par l'utilisateur (Paramètres). */ :root.sans-kpi { --sheet-peek: 100px; } .sans-kpi .sheet-head { display: none; } .sans-zoom .leaflet-control-zoom { display: none; } .sans-sigfab #sigFab { display: none; } .sans-radar #radarCtl { display: none; } .sans-radarsrc .radar-src { display: none; } /* Arrondi des angles réglé par l'utilisateur. */ :root[data-arrondi] :is(.bloc, .tuile, .ce, .sit, .phen, .facade-carte, .vide-etat, .zf-lignes, .tab, .btn-primaire, .btn-secondaire, .segments, .pastille, .kpi, .fond, .fond-apercu, .tgroup, .drawer-bouton, .bulle-lien, .hbtn, .modal-carte, .urg-btn, .plat, .art, .stat-ligne, .types-alertes li, .reglage-liste, .choix-theme button, #sigFab, .leaflet-control-zoom, .leaflet-popup-content-wrapper, .lecteur-btn, .art-vignette, .ce-ic, .sit-ic, .bloc-ic, .zf-ic, .phen-ic, .bloc-compte, .tgroup-count, .interrupteur, .calque.petit, .install-banniere, .drawer-x, .urgence-bandeau, .item, .demarches li, .carte-adresse, .suggestions, .adresse-ligne input, .champ select, .champ input[type="text"], .champ textarea) { border-radius: var(--ui-radius) !important; } :root[data-arrondi] .interrupteur::after { border-radius: calc(var(--ui-radius) * .8) !important; } :root[data-arrondi] .drawerbtn { border-radius: var(--ui-radius) 0 0 var(--ui-radius) !important; } :root[data-arrondi] #sheet { border-radius: var(--ui-radius) var(--ui-radius) 0 0; } @media (min-width: 1100px) { :root[data-arrondi] #sheet { border-radius: 0; } } /* Mode léger : plus d'animation ni de transition (les données, elles, restent complètes). */ .leger *, .leger *::before, .leger *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; } /* ─── Lecteur intégré ───────────────────────────────────────────────────────────────────────────────────── */ #lecteur { position: fixed; inset: 0; z-index: 1450; display: flex; flex-direction: column; background: var(--panel); } #lecteur[hidden] { display: none !important; } .lecteur-tete { display: flex; align-items: center; gap: 6px; padding: calc(env(safe-area-inset-top) + 7px) 8px 7px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--panel2)); flex: 0 0 auto; } .lecteur-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--txt); display: grid; place-items: center; cursor: pointer; } .lecteur-btn:active { transform: scale(.95); } .lecteur-titres { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 0 2px; } .lecteur-titre { font-size: 14px; font-weight: 800; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* titre sur deux lignes (audit UI P2-4) */ #sigPosition .coord { color: var(--muted); font-variant-numeric: tabular-nums; } .lecteur-site { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lecteur-site:empty { display: none; } .lecteur-corps { position: relative; flex: 1 1 auto; min-height: 0; background: #fff; } #lecteurCadre { width: 100%; height: 100%; border: 0; display: block; background: #fff; } .lecteur-attente { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--panel); color: var(--muted); font-weight: 700; font-size: 13px; } .lecteur-roue { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--eau); animation: tourne .8s linear infinite; } @keyframes tourne { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .lecteur-roue { animation: none !important; } } /* audit UI P2-11 */ .leger .lecteur-roue { animation: none; } .en-attente { opacity: .55; cursor: progress !important; pointer-events: none; } .toast-lien { color: inherit; font-weight: 800; text-decoration: underline; } /* Une forme SVG TOUCHÉE ne garde pas le cadre de focus de Chrome (rectangle blanc autour de son emprise) ; le focus au clavier, lui, reste visible (audit UI du 25/09/2026, P0-3 : les tracés sont d'ailleurs sortis de la tabulation). */ .leaflet-pane path.leaflet-interactive:focus:not(:focus-visible) { outline: none; } /* Lien d'évitement : invisible jusqu'au premier appui sur Tab, puis en haut à gauche, au-dessus de tout. */ .evitement { position: fixed; left: 8px; top: 8px; z-index: 3000; transform: translateY(-160%); background: var(--panel); color: var(--eau-txt); font-weight: 800; font-size: 14px; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); text-decoration: underline; } .evitement:focus { transform: none; outline: 2px solid var(--eau); outline-offset: 2px; } #sigFab { z-index: 1001; } .btn-primaire { font-size: 14px; } .btn-secondaire { font-size: 13.5px; } .stats-tete .tuile-v { font-size: 20px; } .stats-tete .tuile-l { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } /* ─── Écran de chargement (25/09/2026, parité feux, thème inondation) ──────────────────────────────────── Préfixe ld- pour ne rien croiser avec la carte. Pluie qui tombe, goutte (logo) qui flotte, eau qui MONTE pendant le chargement (dans la goutte et au sol), hélicoptère de secours qui passe ; la DÉCRUE se joue quand la carte est prête (#loading.done), puis fondu. Statique en mode léger et avec prefers-reduced-motion. */ #loading { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; background: radial-gradient(120% 80% at 50% 40%, #13223f, #070b14); color: #f2f4f8; transition: opacity .5s ease; padding: 24px; text-align: center; } #loading.hidden { opacity: 0; pointer-events: none; } #loading .ld-scene { position: relative; width: 240px; height: 190px; margin-bottom: 2px; overflow: hidden; border-radius: 18px; } /* Pluie : quatorze filets décalés (position et retard par enfant), du haut de la scène jusqu'au plan d'eau. */ #loading .ld-pluie { position: absolute; inset: 0; pointer-events: none; } #loading .ld-pluie i { position: absolute; top: -22px; width: 2px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, rgba(156, 210, 255, 0), #9cd2ff 70%, #e8f4ff); opacity: 0; animation: ldpluie var(--d, 1.1s) linear infinite; animation-delay: var(--r, 0s); } #loading .ld-pluie i:nth-child(1) { left: 6%; --r: .00s; --d: 1.05s; } #loading .ld-pluie i:nth-child(2) { left: 13%; --r: .42s; --d: 1.2s; } #loading .ld-pluie i:nth-child(3) { left: 21%; --r: .18s; --d: 1.1s; } #loading .ld-pluie i:nth-child(4) { left: 29%; --r: .66s; --d: 1.0s; } #loading .ld-pluie i:nth-child(5) { left: 36%; --r: .30s; --d: 1.15s; } #loading .ld-pluie i:nth-child(6) { left: 44%; --r: .84s; --d: 1.05s; } #loading .ld-pluie i:nth-child(7) { left: 52%; --r: .12s; --d: 1.2s; } #loading .ld-pluie i:nth-child(8) { left: 59%; --r: .54s; --d: 1.1s; } #loading .ld-pluie i:nth-child(9) { left: 66%; --r: .36s; --d: 1.0s; } #loading .ld-pluie i:nth-child(10) { left: 73%; --r: .78s; --d: 1.15s; } #loading .ld-pluie i:nth-child(11) { left: 80%; --r: .06s; --d: 1.1s; } #loading .ld-pluie i:nth-child(12) { left: 87%; --r: .48s; --d: 1.05s; } #loading .ld-pluie i:nth-child(13) { left: 93%; --r: .24s; --d: 1.2s; } #loading .ld-pluie i:nth-child(14) { left: 48%; --r: .96s; --d: 1.0s; } @keyframes ldpluie { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { transform: translateY(196px); opacity: 0; } } /* Hélicoptère de secours : un passage d'un bord à l'autre, rotor animé (parité avec les bombardiers des feux). */ #loading .ld-helico { position: absolute; left: 0; top: 0; width: 36px; height: 17px; offset-path: path('M 284 42 Q 120 16 -44 42'); offset-rotate: 0deg; offset-anchor: 50% 50%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); animation: ldvol 5.2s linear infinite; } #loading .ld-helico svg { display: block; } #loading .ld-rotor { transform-origin: 29px 2.3px; animation: ldrotor .16s linear infinite; } @keyframes ldvol { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } @keyframes ldrotor { 0% { transform: scaleX(1); } 50% { transform: scaleX(.18); } 100% { transform: scaleX(1); } } /* La goutte (logo) flotte doucement ; l'eau qu'elle contient monte pendant le chargement (translateY 70 → 0). */ #loading .ld-goutte { position: absolute; left: 120px; bottom: 34px; transform: translateX(-50%); transform-origin: center bottom; filter: drop-shadow(0 0 22px rgba(56, 189, 248, .55)); animation: ldflotte 3.6s ease-in-out infinite; } #loading .ld-goutte svg { display: block; } #loading .ld-vagues { animation: ldvagues 3.2s ease-in-out infinite, ldmontee 5s ease-out forwards; } @keyframes ldflotte { 0%, 100% { transform: translate(-50%, 0) rotate(0); } 50% { transform: translate(-50%, -7px) rotate(-1.5deg); } } @keyframes ldvagues { 0% { transform: translateX(0); } 100% { transform: translateX(-170px); } } @keyframes ldmontee { 0% { translate: 0 70px; } 100% { translate: 0 0; } } /* Ondes à la surface, là où la pluie tombe. */ #loading .ld-ondes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #loading .ld-onde ellipse { fill: none; stroke: #8ecbff; stroke-width: 1.6; } #loading .ld-onde { transform-box: fill-box; transform-origin: center; animation: ldonde 2.2s ease-out infinite; opacity: 0; } #loading .ld-onde.b { animation-delay: 1.1s; } #loading .ld-onde.c { animation-delay: .5s; } #loading .ld-onde.d { animation-delay: 1.6s; } @keyframes ldonde { 0% { transform: scale(.3); opacity: .9; } 80% { opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } } /* Plan d'eau au sol : deux vagues superposées, hauteur qui monte pendant le chargement (18 → 44 px). */ #loading .ld-eau { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; animation: ldniveau 5s ease-out forwards; } #loading .ld-vague { position: absolute; left: -240px; right: 0; top: 0; width: 480px; height: 100%; } #loading .ld-vague path { fill: rgba(56, 189, 248, .5); } #loading .ld-vague.v2 path { fill: rgba(37, 99, 235, .75); } #loading .ld-vague.v1 { animation: ldhoule 4.4s linear infinite; } #loading .ld-vague.v2 { animation: ldhoule 6.2s linear infinite reverse; top: 6px; } @keyframes ldhoule { 0% { transform: translateX(0); } 100% { transform: translateX(240px); } } @keyframes ldniveau { 0% { height: 18px; } 100% { height: 44px; } } /* Décrue quand la carte est prête : la pluie cesse, l'eau redescend, la goutte se pose. */ #loading.done .ld-pluie i, #loading.done .ld-onde, #loading.done .ld-helico { animation: none; opacity: 0; transition: opacity .3s; } #loading.done .ld-vagues { animation: ldvagues 3.2s ease-in-out infinite, lddecrue 1s ease-in forwards; } #loading.done .ld-eau { animation: lddecrue-sol 1s ease-in forwards; } #loading.done .ld-goutte { animation: ldpose .9s ease-out forwards; } @keyframes lddecrue { 0% { translate: 0 0; } 100% { translate: 0 120px; } } @keyframes lddecrue-sol { 0% { height: 44px; } 100% { height: 8px; } } @keyframes ldpose { 0% { transform: translate(-50%, -4px); } 100% { transform: translate(-50%, 6px) scale(.96); } } /* Textes, barre, crédits : même gabarit que la carte des feux, accent bleu. */ #loading .ld-t { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; margin-top: 4px; } #loading .ld-s { font-size: 12px; color: #8a92a6; } #loading .ld-bar { width: 180px; max-width: 60vw; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 8px; } #loading .ld-bar i { display: block; height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, #38bdf8, #2563eb); animation: ldglisse 1.1s ease-in-out infinite; } @keyframes ldglisse { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } } #loading .ld-credit { position: absolute; bottom: max(calc(env(safe-area-inset-bottom, 0px) + 18px), 54px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 20px; } #loading .ld-free { font-size: 12px; font-weight: 700; color: #cdd4e0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 6px; } #loading .ld-by { font-size: 12.5px; color: #aeb6c6; margin-top: 4px; } #loading .ld-by b, #loading .ld-by a b { color: #fff; } #loading .ld-idea { font-size: 11.5px; color: #c2c9d6; margin-top: 2px; } #loading .ld-fx { font-size: 11px; color: #7f8798; letter-spacing: .3px; margin-top: 2px; } #loading .ld-fx b { color: #6db1f5; } #loading .ld-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } #loading .ld-logos { display: flex; justify-content: center; gap: 30px; margin-top: 11px; } #loading .ld-logos img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; border: 1.5px solid rgba(255, 255, 255, .3); padding: 2px; } /* Mobile ou écran court : crédits en flux (jamais de recouvrement ni de coupe), le tout défile si besoin. */ @media (max-width: 560px), (max-height: 760px) { #loading { gap: 6px; justify-content: safe center; overflow-y: auto; padding: 24px 16px; } #loading .ld-credit { position: static; margin-top: 16px; } #loading .ld-logos { margin-top: 8px; } #loading .ld-logos img { width: 34px; height: 34px; } } /* Appareil modeste ou mouvement réduit : scène fixe, plus rien ne bouge (les animations jankent sur un GPU d'entrée de gamme). */ html.leger-boot #loading .ld-scene *, html.leger #loading .ld-scene *, html.leger-boot #loading .ld-goutte, html.leger #loading .ld-goutte { animation: none !important; } html.leger-boot #loading .ld-pluie, html.leger #loading .ld-pluie, html.leger-boot #loading .ld-helico, html.leger #loading .ld-helico, html.leger-boot #loading .ld-ondes, html.leger #loading .ld-ondes { display: none !important; } html.leger-boot #loading .ld-eau, html.leger #loading .ld-eau { height: 30px; } @media (prefers-reduced-motion: reduce) { #loading .ld-scene *, #loading .ld-goutte, #loading .ld-bar i { animation: none !important; } #loading .ld-pluie, #loading .ld-helico, #loading .ld-ondes { display: none; } #loading .ld-eau { height: 30px; } } /* ─── Lot P1 UX (25/09/2026) : contrôles de carte, bande de proximité, repère maison, préférences, mouvement réduit ──── */ /* Boutons « Ma position » / « Ma maison » sous le zoom : même cadre que les contrôles Leaflet. */ .carte-ctl { margin-top: 8px; background: var(--panel); border: 1px solid var(--line) !important; border-radius: 10px !important; box-shadow: var(--shadow) !important; overflow: hidden; } .carte-ctl button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--txt); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .carte-ctl button:last-child { border-bottom: 0; } .carte-ctl button:active { transform: scale(.94); } .carte-ctl button.on { color: var(--eau); background: var(--eau-fond); } .carte-ctl button svg { display: block; } .carte-ctl button:focus-visible { outline: 2px solid var(--eau); outline-offset: -3px; } .marqueur.marqueur-maison { width: 30px; height: 30px; background: #2563eb; } /* Bande de proximité : sous l'en-tête, jamais par-dessus le volet ouvert, un formulaire ou le réticule. */ .prox-bande { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 14px; box-shadow: var(--shadow-lg); font-size: 12.5px; font-weight: 700; line-height: 1.3; } .prox-ic { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .24); } .prox-texte { flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; overflow-wrap: anywhere; } span.prox-texte { cursor: default; } .prox-plus { flex: 0 0 auto; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .24); color: inherit; font: inherit; font-size: 11px; font-weight: 800; padding: 4px 9px; cursor: pointer; white-space: nowrap; } .prox-x { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .24); color: inherit; cursor: pointer; padding: 0; } .prox-bande.urgent { animation: proxpulse 1.6s infinite; } /* Pile de bandeaux (audit UI du 25/09/2026, P1-3) : texte sur deux lignes au plus (détail au toucher), zones tactiles de 44 px pour × et « + N autres » (visuel inchangé), tempête repliée en pastille sous 400 px quand la proximité est là. */ .prox-lignes { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .prox-x, .prox-plus, .prox-court { position: relative; } .prox-x::after { content: ""; position: absolute; inset: -8px; } .prox-plus { min-width: 36px; justify-content: center; } .prox-plus::after { content: ""; position: absolute; inset: -11px -4px; } .prox-plus .plus-court, .prox-court { display: none; } .prox-court { align-items: center; gap: 3px; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; padding: 0 2px; min-height: 28px; cursor: pointer; white-space: nowrap; } .prox-court::after { content: ""; position: absolute; inset: -8px -6px; } .prox-bande.replie { align-self: flex-start; max-width: 100%; padding: 4px 6px 4px 6px; gap: 6px; } .prox-bande.replie .prox-texte, .prox-bande.replie .prox-plus { display: none; } .prox-bande.replie .prox-court { display: inline-flex; min-width: 0; } .prox-bande.replie .prox-ic { width: 24px; height: 24px; } .prox-court-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 399px) { .prox-bande { gap: 6px; padding: 6px 6px 6px 8px; font-size: 12px; } .prox-ic { width: 24px; height: 24px; } .prox-ic .svg-ic { width: 15px; height: 15px; } .prox-plus .plus-long { display: none; } .prox-plus .plus-court { display: inline; } .prox-plus { padding: 4px 8px; margin-right: 6px; } /* zones de 44 px de « +3 » et du × sans chevauchement */ } @keyframes proxpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, .45); } 60% { box-shadow: 0 0 0 9px rgba(227, 6, 19, 0); } } /* Pile des bandes (25/09/2026) : tempête, proximité, pilule d'horizon, invitation à installer, empilées sous l'en-tête ; jamais par-dessus le volet ouvert (téléphone), le tiroir, un formulaire ou le réticule. À droite, place laissée aux contrôles de carte. */ .bandes { position: absolute; z-index: 1050; top: calc(var(--hdr-h) + 8px); left: 10px; right: 58px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; pointer-events: none; } .bandes > * { pointer-events: auto; } .bandes .install-banniere { position: relative; top: auto; left: auto; right: auto; width: auto; } @media (max-width: 1099px) { #app:has(#sheet:not(.collapsed)) .bandes, #app:has(#drawer:not(.closed)) .bandes { display: none; } } #app:has(#pickUi:not([hidden])) .bandes, #app:has(.modal:not([hidden])) .bandes { display: none; } @media (min-width: 1100px) { .bandes { left: 452px; right: auto; width: 480px; max-width: calc(100vw - 452px - 60px); } } /* Onglet Actu : boutons Ma position / Ma maison, suivi, état du repère. */ .sit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; } .sit-actions .btn-secondaire { flex: 1 1 140px; } #suiviLigne { margin: 0 0 8px; } #maisonEtat { margin-top: 2px; } #maisonEtat .lien-texte { font-size: 11.5px; } .bulle-texte .svg-ic { vertical-align: -3px; margin-right: 2px; } /* Ligne d'information neutre de la situation (fermetures de routes toutes causes) : grise, jamais un signal. */ .sit.sit-info .sit-n { color: var(--muted); } /* Mouvement réduit demandé au système : plus d'animation ni de transition, comme le mode léger (les données restent complètes ; le radar reste animable à la demande, plus lentement). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } header .live .dot { animation: none; opacity: 1; transform: none; } .prox-bande.urgent { animation: none; } } /* Champ d'humidité (25/09/2026) : canvas lissé, jamais interactif ; gouttes seulement là où il pleut ; légende du tiroir. */ .humidite-champ { pointer-events: none; image-rendering: auto; } .marqueur-pluie { display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #0369a1; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); } .calque-legende { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3px 8px; padding: 0 2px 9px 30px; font-size: 11px; color: var(--muted); } .calque-legende .degrade-hum { height: 8px; border-radius: 4px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(238, 228, 205, .75), rgba(214, 226, 232, .8), rgba(150, 196, 234, .85), rgba(86, 150, 222, .9), rgb(29, 92, 184)); } .calque-legende small { grid-column: 1 / -1; font-size: 10.5px; } .marqueur.marqueur-maison { display: grid; place-items: center; border-radius: 50%; color: #fff; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); } /* Écran court (téléphone 320 × 640, ≤ 720 px de haut) : la languette du tiroir se replie sur son icône, un peu plus bas, pour ne recouvrir ni les contrôles de carte (zoom, Ma position, Ma maison) ni le bouton « Je signale ». Le titre et le geste depuis le bord restent. */ @media (max-width: 1099px) and (max-height: 720px) { .drawerbtn { top: 53%; padding: 11px 8px; } .drawerbtn .dh-ic { width: 20px; height: 20px; } } /* ─── Vigie aérienne (25/09/2026, lot client) : silhouettes orientées sur la trace, badge d'activité, engagement, photo ── */ .aero-marqueur { background: none; border: 0; } .aero-ic { position: relative; width: 40px; height: 40px; display: grid; place-items: center; } .aero-ic .aero-svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); transition: transform .25s linear; } .leger .aero-ic .aero-svg, .mouvement-reduit .aero-ic .aero-svg { transition: none; } /* Appareil ENGAGÉ près d'un événement : anneau qui pulse dans la couleur de sa famille (statique en mode léger). */ .aero-ic.engage::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 2.5px solid var(--fc); animation: aeropulse 1.8s ease-out infinite; } @keyframes aeropulse { 0% { transform: scale(.75); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } } .leger .aero-ic.engage::before, .mouvement-reduit .aero-ic.engage::before { animation: none; transform: none; opacity: .6; } .aero-badge { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -5px); white-space: nowrap; font-size: 10px; font-weight: 800; line-height: 1.3; padding: 1px 7px; border-radius: 999px; background: var(--fc); color: #fff; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); pointer-events: none; } .aero-ic.masque { opacity: .55; } .aero-ic.estompe .aero-svg { opacity: .45; } .ce-ic .aero-svg { width: 24px; height: 24px; } .aero-photo:empty { display: none; } .heli-etat { margin: 0 0 10px; } .heli-etat:empty { display: none; } .heli-note { display: block; margin-top: 3px; } #heliEngagementsTitre { margin-top: 12px; } /* ─── Mes alertes (25/09/2026, lot client) : sous-titres, canaux du catalogue, rayon, heures calmes, état ─────────── */ h3.sous-titre { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; margin: 16px 0 7px; } #alertesEtatCarte { margin: 0 0 10px; } #alertesEtatCarte:empty { display: none; } .reglage-liste.canaux .reglage-ligne { padding: 9px 12px; } .reglage-liste.canaux .canal-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .reglage-liste.canaux .canal-tx b { font-size: 13px; line-height: 1.3; } .reglage-liste.canaux .canal-tx small { font-size: 11.5px; color: var(--muted); line-height: 1.35; } .reglage-liste.canaux .vide { padding: 10px 12px; } .rayon-ligne { display: flex; flex-direction: column; gap: 4px; margin: 8px 2px 6px; } .rayon-ligne label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--muted); font-weight: 700; } .rayon-ligne label b { color: var(--txt); font-variant-numeric: tabular-nums; } .rayon-ligne input[type="range"] { width: 100%; accent-color: var(--eau); cursor: pointer; } .heures-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 2px; } .heures-ligne .champ { margin: 0; } .heures-ligne input[type="time"] { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--bord-champ); border-radius: 10px; background: var(--panel); color: var(--txt); } .champ-langue { margin-top: 12px; } #alertesAutourEtat:empty, #communesAide:empty { display: none; } #alertesAutourLigne, #alertesCalmesLigne { margin: 0 0 6px; } /* ─── Montée des eaux et tempête (25/09/2026, lot client) : pilule d'horizon (parité #horizonSeg feux), stations, rafales, façades ── */ .horizons { display: flex; align-self: flex-start; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; box-shadow: var(--shadow); } /* Même principe que le bloc « Contraste des éléments cliquables » en fin de feuille : un bouton inactif se lit en texte plein, jamais atténué ; l'heure projetée seule est en petit. */ .horizons button { flex: 1 1 auto; min-width: 0; white-space: nowrap; background: transparent; color: var(--txt); border: 0; border-left: 1px solid var(--line); padding: 4px 8px; font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; -webkit-tap-highlight-color: transparent; } .horizons button:first-child { border-left: 0; } .horizons button:hover { background: color-mix(in srgb, var(--eau) 12%, var(--panel)); } .horizons button.on { background: var(--eau-plein); color: #fff; border-left-color: var(--eau-plein); } .horizons button .hh { font-size: 9.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; font-variant-numeric: tabular-nums; } .horizons button.on .hh { color: #fff; opacity: 1; } /* heure lisible : blanc plein, 9,5 px (4,77:1, audit UI P1-2) */ .horizons button:focus-visible { outline: 2px solid var(--eau); outline-offset: -3px; } #horizonSeg[hidden] { display: none !important; } /* Prévision à l'horizon choisi (25/09/2026, public/prevision.js) : bandeau « Prévision pour … » sous la pilule, liseré en TIRETS (une prévision n'est jamais une observation), pilule radar hachurée et libellée « Pluie prévue ». */ .prevision-bande { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic titre retour" "detail detail detail"; align-items: center; column-gap: 8px; row-gap: 3px; padding: 6px 7px 7px 9px; border-radius: 14px; background: var(--panel); color: var(--txt); border: 1.5px dashed var(--eau); box-shadow: var(--shadow-lg); line-height: 1.3; } #previsionBande[hidden] { display: none !important; } .prev-ic { grid-area: ic; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1e40af; color: #fff; } .prev-titre { grid-area: titre; min-width: 0; font-size: 12.5px; font-weight: 800; overflow-wrap: anywhere; } .prev-detail { grid-area: detail; display: block; font-size: 11px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; } .prev-detail::first-letter { text-transform: uppercase; } .prev-retour { grid-area: retour; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; background: #1d4ed8; color: #fff; font: inherit; font-size: 11.5px; font-weight: 800; padding: 6px 10px; min-height: 30px; cursor: pointer; white-space: nowrap; } .prev-retour:hover { background: #1e40af; } /* Pile compacte (audit UI du 25/09/2026, P1-3) : sous 400 px, le bandeau de prévision (toujours déplié) tient en cinq lignes au plus : « Maintenant » en icône seule (nom accessible « Revenir à Maintenant »), titre sur deux lignes, détail sur trois ; zone tactile de 44 px pour le retour. */ .prev-retour { position: relative; } .prev-retour::after { content: ""; position: absolute; inset: -7px -4px; } @media (max-width: 399px) { .prevision-bande { padding: 5px 6px 6px 8px; column-gap: 6px; } .prev-retour { padding: 6px 8px; } .prev-retour > span { display: none; } .prev-titre, .prev-detail { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .prev-detail { -webkit-line-clamp: 3; line-clamp: 3; } /* « autres calques à l'heure actuelle » reste lisible */ } .prevision-champ { pointer-events: none; image-rendering: auto; } .radar-ctl [hidden] { display: none !important; } .rseg-prevu { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; line-height: 1.15; padding: 0 10px; background: repeating-linear-gradient(135deg, #fff 0 6px, #eef3fc 6px 12px); } .rseg-prevu small { font-size: 9.5px; font-weight: 700; color: #475569; } .tempete-bande { border: 1.5px solid rgba(255, 255, 255, .45); } .ic.ic-montee { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m3 17 6-6 4 4 8-8%22/%3E%3Cpath d=%22M15 7h6v6%22/%3E%3C/svg%3E"); --ic-c: linear-gradient(135deg, #15803d, #1d6fe0 45%, #b91c1c); background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } .ic.ic-tempete { --ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 8h11a3 3 0 1 0-3-3%22/%3E%3Cpath d=%22M3 12.5h15.5a2.5 2.5 0 1 1-2.5 2.5%22/%3E%3Cpath d=%22M3 17h7%22/%3E%3C/svg%3E"); --ic-c: #6d28d9; background: var(--ic-c); width: 17px; height: 17px; border: 0; border-radius: 0; box-shadow: none; transform: none; } /* Station en montée rapide : contour qui pulse (statique en mode léger ou mouvement réduit). */ .station-rapide { animation: stationpulse 1.4s ease-in-out infinite; } @keyframes stationpulse { 0%, 100% { stroke-width: 2; stroke-opacity: 1; } 50% { stroke-width: 7; stroke-opacity: .35; } } .leger .station-rapide, .mouvement-reduit .station-rapide { animation: none; } .pastille.pleine { color: #fff; } .rafale-etiquette { background: none; border: 0; pointer-events: none; } .rafale-etiquette span { display: block; text-align: center; font-size: 10px; font-weight: 800; line-height: 14px; color: #fff; background: var(--rc, #6d28d9); border: 1px solid #fff; border-radius: 999px; padding: 0 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); font-variant-numeric: tabular-nums; } .facade-etiquette { background: none; border: 0; } .facade-etiquette span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border-radius: 999px; background: var(--panel); border: 1.5px solid #0e7490; color: var(--txt); font-size: 10.5px; font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); white-space: nowrap; } .facade-etiquette span small { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } /* Sous le zoom 7 (audit UI P2-7), l'étiquette de façade se réduit à son pictogramme : à 320 px, « Manche Est PM 10 h 48 » se posait sur les marqueurs voisins. Le nom et l'heure restent dans l'infobulle et la bulle. */ #carte.vue-large .facade-etiquette span b, #carte.vue-large .facade-etiquette span small { display: none; } #carte.vue-large .facade-etiquette span { padding: 3px; } .facade-etiquette span .svg-ic { color: #0e7490; flex: 0 0 auto; } .facade-etiquette span.fac-2 { border-color: #b45309; } .facade-etiquette span.fac-2 .svg-ic { color: #b45309; } .facade-etiquette span.fac-3 { border-color: #9f1239; } .facade-etiquette span.fac-3 .svg-ic { color: #9f1239; } #monteeCruesPhrase:empty, #monteePossiblePhrase:empty, #tempetePhrase:empty { display: none; } #monteeCruesNote:empty, #monteePossibleNote:empty, #tempeteNote:empty { display: none; } #loading .ld-recharger { margin-top: 14px; padding: 10px 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: #2563eb; color: #fff; font: inherit; font-weight: 700; cursor: pointer; } #loading .ld-diag { margin-top: 10px; max-width: 520px; font-size: 12px; line-height: 1.45; color: #ffd1d1; word-break: break-word; } /* ─── Contraste des éléments cliquables (25/09/2026, demande fondateur : « c'est fondu dans les tuiles ») ────────── Un élément qu'on peut toucher se voit : liseré d'accent net et texte d'accent gras pour les boutons secondaires et les boutons des bulles, texte plein (jamais atténué) sur les onglets et segments inactifs, liens soulignés dans les textes, interrupteurs éteints visibles, tuiles cliquables bordées, focus clavier visible partout. */ .btn-secondaire, .bulle-lien, .urg-btn { border: 1.5px solid var(--eau); color: var(--eau-txt); background: color-mix(in srgb, var(--eau) 9%, var(--panel)); font-weight: 800; } .btn-secondaire:hover, .bulle-lien:hover, .urg-btn:hover { background: color-mix(in srgb, var(--eau) 18%, var(--panel)); border-color: var(--eau); } .btn-secondaire:active, .bulle-lien:active { transform: scale(.97); } .btn-secondaire svg, .bulle-lien svg { color: var(--eau-txt); } .btn-secondaire.danger { border-color: var(--rouge); color: var(--rouge); background: color-mix(in srgb, var(--rouge) 8%, var(--panel)); } .tab:not(.on) { color: var(--txt); border-color: color-mix(in srgb, var(--txt) 22%, var(--line)); } .segment:not(.on) { color: var(--txt); } .tag { color: var(--txt); } .bloc p a:not(.btn-primaire):not(.btn-secondaire):not(.bulle-lien):not(.pastille), .source a, .pied-liens a, .bulle p a, .art a:not(.btn-primaire), details summary a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; font-weight: 700; } .interrupteur { background: color-mix(in srgb, var(--txt) 34%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--txt) 22%, transparent); } .interrupteur.on, .interrupteur[aria-checked="true"], input:checked + .interrupteur { box-shadow: none; } .ce, .kpi[role="button"], .tuile[role="button"], .tuile.cliquable { border: 1px solid color-mix(in srgb, var(--txt) 16%, var(--line)); cursor: pointer; } .ce:hover, .kpi[role="button"]:hover, .tuile[role="button"]:hover { border-color: var(--eau); } .ce:active, .kpi[role="button"]:active, .tuile[role="button"]:active { transform: scale(.98); } details > summary { color: var(--eau-txt); font-weight: 800; cursor: pointer; } button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex="0"]:focus-visible, .interrupteur:focus-visible, .tab:focus-visible { outline: 2px solid var(--eau); outline-offset: 2px; border-radius: 6px; } /* Épisodes de crue (audit du 25/09/2026) : carte mise en avant par un lien profond ?episode=, liens d'action. */ .ce.ce-avant { box-shadow: 0 0 0 2px var(--eau); } .ep-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; } /* Routes (audit du 25/09/2026, UI P0-4) : barrière orange réservée aux coupures pour inondation, gris pour le reste. */ .marqueur.marqueur-trafic.eau { background: #f59e0b; } .marqueur.marqueur-trafic.autre { background: #94a3b8; opacity: .8; } /* Très petits écrans (≤ 360 px de large ou ≤ 700 px de haut) : le bandeau de prévision tient sur UNE ligne (titre + « Maintenant ») ; le détail de ce qui est projeté reste lisible dans la bulle d'un appui sur la carte et à l'écran plus large. À 320 × 640 avec un horizon futur, la pile ne laissait que 80 px de carte (25/09/2026). */ @media (max-width: 360px), (max-height: 700px) { .prevision-bande { grid-template-areas: "ic titre retour"; row-gap: 0; } .prevision-bande .prev-detail { display: none; } .prevision-bande .prev-titre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Bulles (25/09/2026, « bugs d'affichage » signalés par le fondateur) : libellés coupés aux mots ; en bulle étroite, libellé AU-DESSUS de sa valeur ; en-tête collé en haut quand le contenu défile (jamais rogné). */ .bulle-lignes dt { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } .bulle-corps { container-type: inline-size; } @container (max-width: 270px) { .bulle-lignes { grid-template-columns: minmax(0, 1fr); row-gap: 1px; } .bulle-lignes dt { margin-top: 5px; font-size: 11.5px; } .bulle-lignes dt:first-child { margin-top: 0; } } .bulle-tete { position: sticky; top: 0; z-index: 2; } .bulle-wrap a.leaflet-popup-close-button { z-index: 3; } /* au-dessus de l'en-tête collé : la croix restait cachée (25/09/2026) */ /* Leaflet pose `.leaflet-map-pane svg { z-index: 200 }` sur TOUT SVG du volet de carte, bulles comprises. Un SVG élément flex (courbe des 24 dernières heures dans `.bulle-blocs`, icône d'une pastille) appliquait ce z-index et se dessinait par-dessus l'en-tête et la barre de liens collés quand on faisait défiler la bulle (signalé le 25/09/2026). */ .leaflet-popup-content svg, .leaflet-tooltip svg { z-index: auto; } /* Personnes en ligne en pied du volet des calques (25/09/2026, parité avec la carte des feux) : même pastille turquoise pulsée, nombre en gras. Rempli par frequentation.js à chaque battement ; reste masqué tant qu'aucune réponse n'est venue. */ .enligne-volet { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .01em; } .enligne-volet::before { content: ""; width: 11px; height: 11px; flex: 0 0 auto; background: #14b8a6; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 8.2a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8Zm0 1.4c-3.2 0-5.8 1.8-5.8 4v1h11.6v-1c0-2.2-2.6-4-5.8-4Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 8.2a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8Zm0 1.4c-3.2 0-5.8 1.8-5.8 4v1h11.6v-1c0-2.2-2.6-4-5.8-4Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: enligne-pouls 2.6s ease-in-out infinite; } .enligne-volet b { color: var(--txt); font-weight: 800; font-variant-numeric: tabular-nums; } .enligne-volet + .drawer-ver { margin-top: 4px; } @keyframes enligne-pouls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .enligne-volet::before { animation: none; } } /* Fil d'un pixel entre les tuiles (25/09/2026, « coupure nette et droite » signalée par le fondateur) : Leaflet 1.9 fusionne les tuiles en `plus-lighter` pour masquer les fentes en zoom fractionné. La carte est en zoom ENTIER ; sur un écran de densité 2,625 (Pixel 7), Chrome dessinait alors un fil sombre autour des premières tuiles chargées (mesuré : gris 97 au lieu de 147), en thème sombre comme clair. En fusion normale, plus aucun fil. */ .leaflet-container img.leaflet-tile { mix-blend-mode: normal; }