/* EumetView — habillage de l'interface carte. Deux themes : sombre (defaut) et clair. Le theme resolu est pose par app.js dans , jamais devine par le CSS. */ :root{ --rail:74px; --bar:76px; --panel-w:340px; --r-sm:8px; --r-md:11px; --r-lg:14px; /* --- theme sombre --- */ --bg:#080b12; --map-bg:#05070c; --panel:#111722; --panel2:#161e2c; --hover:#1a2333; --line:#222d3f; --line-soft:#172033; --line-strong:#33415a; --txt:#e6edf7; --dim:#8b9bb4; --dim2:#5f7290; --accent:#4db8ff; --accent2:#7de2a8; --warn:#ffb347; --bad:#ff6b6b; --sel:#16283e; --sel-line:#2b537a; --sel-txt:#bfe0ff; --ic:#1b2536; --ic-on:#22405f; --glass:rgba(11,15,23,.92); --glass2:rgba(14,19,29,.94); --shadow:0 8px 28px rgba(0,0,0,.5); --track:#1d2636; --tick:#33415a; --tick-h:#4a5c7d; --tick-lbl:#61799c; --ring:#0b0f17; --pill:#1c2b3f; --pill-txt:#8fc4f0; --ok-bg:#16321f; --ok-txt:#7de2a8; --warn-bg:#33280f; --warn-txt:#ffb347; --bad-bg:#331616; --bad-txt:#ff8888; --city:#c8d6e8; --city-cap:#e2ecf7; --city-dot:#9fb6d4; --city-halo:0 1px 3px #000,0 0 6px #000; } :root[data-theme="light"]{ --bg:#e9eef4; --map-bg:#dfe7ef; --panel:#ffffff; --panel2:#f2f6fa; --hover:#e9f0f7; --line:#d5dde7; --line-soft:#e7edf3; --line-strong:#b6c3d2; --txt:#16202c; --dim:#566577; --dim2:#7d8da0; --accent:#0a6fbe; --accent2:#0f8a55; --warn:#a2650a; --bad:#c0392b; --sel:#dfeefb; --sel-line:#9ac7ee; --sel-txt:#0a5a99; --ic:#e7eef6; --ic-on:#cfe4f8; --glass:rgba(255,255,255,.9); --glass2:rgba(255,255,255,.94); --shadow:0 8px 26px rgba(24,44,70,.16); --track:#d2dae4; --tick:#b3c1d0; --tick-h:#8b9bad; --tick-lbl:#71808f; --ring:#ffffff; --pill:#e2edf8; --pill-txt:#1a6aa8; --ok-bg:#e2f4e9; --ok-txt:#12764c; --warn-bg:#fbeed6; --warn-txt:#8f5a06; --bad-bg:#fbe3e0; --bad-txt:#b4271b; --city:#2c3742; --city-cap:#151d26; --city-dot:#4a5866; --city-halo:0 0 3px #fff,0 0 6px #fff,0 1px 2px rgba(255,255,255,.9); } *{box-sizing:border-box} html,body{margin:0;height:100%;background:var(--bg);color:var(--txt); font:14px/1.45 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow:hidden;-webkit-font-smoothing:antialiased} #map{position:absolute;inset:0;background:var(--map-bg)} .hidden{display:none !important} ::selection{background:var(--sel);color:var(--txt)} /* barres de defilement discretes, accordees au theme */ *{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent} *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px; border:3px solid transparent;background-clip:content-box} *::-webkit-scrollbar-track{background:transparent} /* --- rail --- */ #rail{position:absolute;left:0;top:0;bottom:0;width:var(--rail);z-index:900; background:var(--glass);backdrop-filter:blur(14px); border-right:1px solid var(--line);display:flex;flex-direction:column; align-items:center;padding:12px 0 10px;gap:2px} .rail-brand{color:var(--accent);display:flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:var(--r-md);margin-bottom:10px;position:relative} .rail-brand::after{content:"";position:absolute;left:-9px;right:-9px;bottom:-6px; height:1px;background:var(--line)} .rail-spacer{flex:1;min-height:10px} .rail-sep{width:38px;height:1px;background:var(--line);margin:7px 0 6px;flex:0 0 1px} .rail-btn{position:relative;width:58px;height:52px;border:0;border-radius:var(--r-md); background:transparent;color:var(--dim);cursor:pointer;display:flex; flex-direction:column;align-items:center;justify-content:center;gap:4px; transition:background .14s,color .14s;font:inherit;text-decoration:none;padding:0 2px} .rail-btn svg{flex:0 0 auto} .rail-btn .lbl{font-size:9.5px;line-height:1;letter-spacing:.03em;max-width:54px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rail-btn:hover{background:var(--hover);color:var(--txt)} .rail-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .rail-btn.on{background:var(--sel);color:var(--accent)} .rail-btn.on::before{content:"";position:absolute;left:-8px;top:12px;bottom:12px; width:3px;border-radius:0 3px 3px 0;background:var(--accent)} /* infobulle du rail (les boutons du bas n'ont pas d'etiquette) */ .rail-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px); top:50%;transform:translateY(-50%);background:var(--panel);color:var(--txt); border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 9px;font-size:11.5px; white-space:nowrap;box-shadow:var(--shadow);z-index:5;pointer-events:none} /* --- panneau --- */ #panel{position:absolute;left:var(--rail);top:0;bottom:var(--bar);width:var(--panel-w);z-index:880; background:var(--glass2);backdrop-filter:blur(16px);border-right:1px solid var(--line); display:flex;flex-direction:column;animation:slide .18s ease} @keyframes slide{from{transform:translateX(-12px);opacity:0}to{transform:none;opacity:1}} #panel header{display:flex;align-items:center;gap:10px; padding:15px 14px 11px;border-bottom:1px solid var(--line);flex:0 0 auto} #panel h2{margin:0;font-size:12px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--dim);flex:1;min-width:0} #panel-close{background:none;border:0;color:var(--dim);font-size:20px;cursor:pointer; line-height:1;width:26px;height:26px;border-radius:var(--r-sm);flex:0 0 26px} #panel-close:hover{color:var(--txt);background:var(--hover)} #panel-body{overflow-y:auto;overscroll-behavior:contain;padding:6px 10px 18px;flex:1} .grp{margin:12px 6px 5px;font-size:10px;letter-spacing:.11em;text-transform:uppercase; color:var(--dim2);display:flex;align-items:center;gap:8px} .grp::after{content:"";flex:1;height:1px;background:var(--line-soft)} .grp:first-child{margin-top:4px} .item{position:relative;display:flex;gap:10px;align-items:flex-start;padding:9px 10px; border-radius:var(--r-md);cursor:pointer;border:1px solid transparent; transition:background .12s,border-color .12s;margin-bottom:2px} .item:hover{background:var(--hover)} .item.on{background:var(--sel);border-color:var(--sel-line)} .item.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px; border-radius:0 3px 3px 0;background:var(--accent)} .item.off{opacity:.5;cursor:not-allowed} .item.off:hover{background:transparent} .item .ic{width:28px;height:28px;flex:0 0 28px;border-radius:var(--r-sm);background:var(--ic); display:flex;align-items:center;justify-content:center;color:var(--dim);margin-top:1px} .item.on .ic{background:var(--ic-on);color:var(--accent)} .item .tx{flex:1;min-width:0} .item .nm{font-size:13px;font-weight:500;line-height:1.3} .item.on .nm{font-weight:600;color:var(--sel-txt)} .item .ds{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .item .st{font-size:10.5px;color:var(--dim2);margin-top:5px;font-variant-numeric:tabular-nums} .item .st b{font-weight:600;color:var(--dim)} .item .st .sep{display:inline-block;width:3px;height:3px;border-radius:50%;margin:0 6px 2px; background:var(--line-strong);vertical-align:middle} /* case a cocher : rond pour un fond exclusif, carre pour une superposition */ .item .tg{width:17px;height:17px;flex:0 0 17px;border-radius:5px;margin-top:6px; border:1.5px solid var(--line-strong);position:relative;transition:.12s} .item.excl .tg{border-radius:50%} .item.on .tg{background:var(--accent);border-color:var(--accent)} .item.on .tg::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px; border:solid var(--ring);border-width:0 2px 2px 0;transform:rotate(42deg)} .item.excl.on .tg::after{left:4.5px;top:1px} .item.off .tg{opacity:.5} .opacity-row{display:flex;align-items:center;gap:9px;padding:2px 12px 11px 50px;margin-top:-2px} .opacity-row input{flex:1;accent-color:var(--accent);height:3px} .opacity-row span{font-size:11px;color:var(--dim);min-width:38px;text-align:right; font-variant-numeric:tabular-nums} .panel-empty{padding:16px 12px;font-size:12.5px;color:var(--dim)} /* --- entete --- */ #topbar{position:absolute;left:calc(var(--rail) + 14px);top:12px;z-index:850; display:flex;align-items:center;gap:14px;pointer-events:none;transition:left .18s ease} body.panel-open #topbar{left:calc(var(--rail) + var(--panel-w) + 14px)} .tb-title{background:var(--glass2);backdrop-filter:blur(10px);padding:7px 14px; border-radius:var(--r-md);border:1px solid var(--line);pointer-events:auto} .tb-title strong{font-size:14px;letter-spacing:.02em} .tb-sub{font-size:11px;color:var(--dim);margin-left:8px} .tb-live{background:var(--glass2);backdrop-filter:blur(10px);padding:7px 12px; border-radius:var(--r-md);border:1px solid var(--line);font-size:11px;color:var(--dim); display:flex;align-items:center;gap:7px;pointer-events:auto} .dot{width:7px;height:7px;border-radius:50%;background:var(--dim)} .dot.ok{background:var(--accent2);box-shadow:0 0 8px var(--accent2);animation:pulse 2.4s infinite} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} /* --- legende --- */ #legend{position:absolute;right:14px;bottom:calc(var(--bar) + 14px);z-index:850; background:var(--glass2);backdrop-filter:blur(12px);border:1px solid var(--line); border-radius:var(--r-lg);padding:11px 13px;width:288px;box-shadow:var(--shadow); max-height:calc(100vh - var(--bar) - 90px);overflow-y:auto} /* une entree par couche active, separees par un filet */ .lg-item + .lg-item{margin-top:9px;padding-top:9px;border-top:1px solid var(--line-soft)} .lg-title{font-size:11px;color:var(--txt);margin-bottom:7px;font-weight:500} .lg-canvas{width:262px;height:12px;border-radius:3px;display:block} .lg-ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--dim); margin-top:4px;font-variant-numeric:tabular-nums} .lg-src{font-size:10px;color:var(--dim2);margin-top:6px;line-height:1.3} /* --- barre de temps --- */ #timebar{position:absolute;left:var(--rail);right:0;bottom:0;height:var(--bar);z-index:870; background:var(--glass);backdrop-filter:blur(14px);border-top:1px solid var(--line); display:flex;align-items:center;gap:16px;padding:0 20px} #btn-play{width:42px;height:42px;flex:0 0 42px;border-radius:50%;border:1px solid var(--line); background:var(--panel2);color:var(--accent);cursor:pointer;display:flex; align-items:center;justify-content:center;transition:.15s} #btn-play:hover{background:var(--sel);border-color:var(--sel-line)} /* mise en memoire tampon : la lecture attend que l'image suivante soit prete */ #btn-play.buffering{animation:buffering 1s ease-in-out infinite} @keyframes buffering{0%,100%{opacity:1}50%{opacity:.45}} #range{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden; flex:0 0 auto;background:var(--panel2)} #range button{border:0;background:transparent;color:var(--dim);font:inherit;font-size:11px; padding:7px 9px;cursor:pointer;border-right:1px solid var(--line);transition:.12s; white-space:nowrap} #range button:last-child{border-right:0} #range button:hover{background:var(--hover);color:var(--txt)} #range button.on{background:var(--sel);color:var(--accent);font-weight:600} #track{position:relative;flex:1;height:42px;cursor:pointer} #track-line{position:absolute;left:0;right:0;top:26px;height:3px;border-radius:2px;background:var(--track)} #track-fill{position:absolute;left:0;top:26px;height:3px;border-radius:2px; background:linear-gradient(90deg,var(--sel-line),var(--accent));width:0} #track-ticks{position:absolute;left:0;right:0;top:0;height:42px} .tick{position:absolute;top:19px;width:2px;height:8px;background:var(--tick);border-radius:1px; transform:translateX(-1px)} .tick.hour{top:14px;height:13px;background:var(--tick-h)} .tick-lbl{position:absolute;top:0;font-size:9.5px;color:var(--tick-lbl);transform:translateX(-50%); font-variant-numeric:tabular-nums;white-space:nowrap} #track-cursor{position:absolute;top:19px;width:14px;height:14px;border-radius:50%; background:var(--accent);border:2px solid var(--ring);box-shadow:0 0 10px rgba(77,184,255,.55); transform:translate(-7px,0);pointer-events:none;transition:left .08s linear} #clock{text-align:right;min-width:112px;font-variant-numeric:tabular-nums} #clock-utc{font-size:19px;font-weight:600;letter-spacing:.02em} #clock-loc{font-size:10.5px;color:var(--dim)} /* --- divers --- */ #coords{position:absolute;right:14px;top:12px;z-index:850;background:var(--glass2); backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:9px; padding:6px 11px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums} /* attribution du fond de carte : obligatoire pour les fonds en ligne */ #credit{position:absolute;left:calc(var(--rail) + 14px);bottom:calc(var(--bar) + 12px);z-index:840; background:var(--glass2);backdrop-filter:blur(10px);border:1px solid var(--line); border-radius:8px;padding:4px 9px;font-size:10px;color:var(--dim2);pointer-events:none} body.panel-open #credit{left:calc(var(--rail) + var(--panel-w) + 14px)} @media (max-width:760px){#credit{left:calc(var(--rail) + 8px)} body.panel-open #credit{display:none}} #toast{position:absolute;left:50%;bottom:calc(var(--bar) + 22px);transform:translateX(-50%); z-index:950;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md); padding:9px 16px;font-size:12.5px;box-shadow:var(--shadow);color:var(--txt)} .leaflet-container{background:var(--map-bg);font-family:inherit} .leaflet-control-attribution{background:var(--glass)!important;color:var(--dim2)!important; font-size:10px!important;border-radius:6px 0 0 0} .leaflet-control-attribution a{color:var(--dim)!important} .ev-raster{image-rendering:auto;transition:opacity .18s linear} /* --- tableau de bord --- */ #dash{position:absolute;left:var(--rail);top:0;bottom:0;right:0;z-index:920;overflow-y:auto; background:var(--bg);padding:26px 32px 60px;color:var(--txt)} #dash h1{font-size:19px;margin:0 0 4px} #dash .sub{color:var(--dim);font-size:12px;margin-bottom:22px} #dash code{background:var(--panel2);border:1px solid var(--line);border-radius:5px; padding:1px 5px;font-size:12px} #dash-close{position:absolute;right:22px;top:20px;background:none;border:0;color:var(--dim); font-size:26px;cursor:pointer;line-height:1} #dash-close:hover{color:var(--txt)} .cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:12px; margin-bottom:26px;overflow-x:auto;padding-bottom:2px} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px} .card .k{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim2)} .card .v{font-size:23px;font-weight:600;margin-top:5px;font-variant-numeric:tabular-nums} .card .m{font-size:11px;color:var(--dim);margin-top:3px} #dash h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim); margin:24px 0 10px;font-weight:600} .dash-txt{max-width:760px;line-height:1.7;color:var(--txt)} .dash-foot{color:var(--dim2);font-size:12px;margin-top:26px} table.t{width:100%;border-collapse:collapse;font-size:12px} table.t th{text-align:left;color:var(--dim2);font-weight:500;padding:7px 10px; border-bottom:1px solid var(--line);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase} table.t td{padding:7px 10px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums} table.t tr:hover td{background:var(--panel2)} .pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10.5px; background:var(--pill);color:var(--pill-txt)} .pill.ok{background:var(--ok-bg);color:var(--ok-txt)} .pill.warn{background:var(--warn-bg);color:var(--warn-txt)} .pill.bad{background:var(--bad-bg);color:var(--bad-txt)} .err{color:var(--bad)} @media (max-width:760px){ :root{--rail:60px} #rail{padding-top:8px} .rail-btn{width:50px;height:48px} /* le panneau se pose sous la carte mais laisse le rail visible */ #panel{left:var(--rail);right:0;width:auto;top:auto;bottom:var(--bar);height:58vh; border-right:0;border-top:1px solid var(--line);border-radius:16px 0 0 0} #panel header{padding:12px 12px 9px} .item .ds{-webkit-line-clamp:3} body.panel-open #topbar{left:calc(var(--rail) + 14px)} #legend{right:8px;left:8px;width:auto;bottom:calc(var(--bar) + 8px)} #topbar .tb-sub{display:none} #dash{left:0} } /* etiquettes de villes */ .ev-city{position:relative;pointer-events:none} .ev-city-dot{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%; background:var(--city-dot);box-shadow:0 0 4px rgba(0,0,0,.9)} .ev-city.cap .ev-city-dot{width:6px;height:6px;left:-3px;top:-3px;background:var(--city-cap)} .ev-city.cap .ev-city-nm{font-weight:600;color:var(--city-cap)} .ev-city-nm{position:absolute;left:7px;top:-8px;font-size:10.5px;color:var(--city); white-space:nowrap;text-shadow:var(--city-halo);letter-spacing:.02em} :root[data-theme="light"] .ev-city-dot{box-shadow:0 0 0 1.5px rgba(255,255,255,.85)} /* --- controles Leaflet --- Leaflet place ses conteneurs de controles en z-index 1000 : sans cela le zoom passe par-dessus le rail, le panneau et la barre de temps. On le redescend sous l'habillage et on le cale sous l'encart de coordonnees. */ .leaflet-top,.leaflet-bottom{z-index:820} .leaflet-top.leaflet-right{top:0;right:0;padding:0} .leaflet-control-zoom{margin:52px 14px 0 0!important;border:1px solid var(--line)!important; border-radius:9px!important;overflow:hidden;box-shadow:var(--shadow);clear:none} .leaflet-control-zoom a{width:32px;height:32px;line-height:32px;font-size:17px; background:var(--glass2)!important;color:var(--txt)!important; border-bottom:1px solid var(--line)!important;border-radius:0!important} .leaflet-control-zoom a:last-child{border-bottom:0!important} .leaflet-control-zoom a:hover{background:var(--hover)!important;color:var(--accent)!important} .leaflet-control-zoom a.leaflet-disabled{background:var(--panel2)!important;color:var(--dim2)!important}