:root{ --blue-950:#052a65;--blue-900:#073b83;--blue-800:#0758bd;--blue-700:#0b6fe8;--blue-500:#27a8f7; --sky:#eaf7ff;--ink:#0c2242;--muted:#61738c;--white:#fff;--gold:#ffc928;--line:rgba(13,64,125,.12); --shadow:0 18px 60px rgba(3,54,114,.14);--shadow-sm:0 8px 30px rgba(3,54,114,.10);--radius:28px;--radius-sm:20px; } *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Manrope,system-ui,sans-serif;background:linear-gradient(180deg,#f8fcff 0,#eaf6ff 42%,#f8fbff 100%);min-height:100vh;overflow-x:hidden}.shell{width:min(1180px,calc(100% - 40px));margin:0 auto}.ambient{position:fixed;border-radius:999px;filter:blur(90px);pointer-events:none;z-index:-1}.ambient-a{width:420px;height:420px;background:rgba(40,170,255,.15);top:100px;right:-140px}.ambient-b{width:360px;height:360px;background:rgba(255,204,30,.10);top:480px;left:-180px} a{text-decoration:none;color:inherit}.topbar{position:sticky;top:0;z-index:50;background:rgba(251,254,255,.82);border-bottom:1px solid rgba(8,69,143,.08);backdrop-filter:blur(18px)}.topbar-inner{height:78px;display:flex;align-items:center;gap:32px}.brand{display:flex;align-items:center;gap:12px;min-width:max-content}.brand-mark{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,#fff,#eaf4ff);box-shadow:0 5px 20px rgba(7,88,189,.15)}.brand-mark img{width:49px;height:49px;object-fit:contain}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font:800 18px/1 Plus Jakarta Sans}.brand-copy strong em{color:var(--blue-700);font-style:normal}.brand-copy small{font-size:9px;color:#708299;margin-top:5px;font-weight:700}.desktop-nav{display:flex;align-items:center;gap:8px;margin-left:auto}.desktop-nav a{padding:10px 12px;font-size:13px;font-weight:700;color:#55677f;border-radius:10px}.desktop-nav a:hover,.desktop-nav a.active{color:var(--blue-800);background:#ecf6ff}.header-actions{display:flex;align-items:center;gap:9px}.icon-btn,.menu-btn,.member-btn{border:0;cursor:pointer}.icon-btn{position:relative;width:40px;height:40px;border-radius:14px;background:#edf6ff}.icon-btn i{position:absolute;width:7px;height:7px;border-radius:50%;background:#ffbc00;right:7px;top:7px;border:2px solid white}.member-btn{height:40px;padding:0 14px;background:var(--blue-800);color:white;border-radius:14px;font-weight:800;font-size:12px}.member-dot{font-size:8px;color:#74df9e;margin-right:6px}.menu-btn{display:none;width:40px;height:40px;background:#edf6ff;border-radius:14px;padding:11px}.menu-btn span{display:block;height:2px;background:#234a78;margin:4px 0;border-radius:2px} .hero{padding:54px 0 30px;display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:50px}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--blue-800);text-transform:uppercase}.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#25c66b;box-shadow:0 0 0 4px rgba(37,198,107,.12)}.hero h1{font:800 clamp(38px,5vw,62px)/1.03 Plus Jakarta Sans;margin:13px 0 14px;letter-spacing:-.045em}.hero h1 span{color:var(--blue-700)}.hero p{max-width:650px;margin:0;color:var(--muted);font-size:16px;line-height:1.65}.search-wrap{display:flex;gap:10px;align-items:center}.city-search{position:relative;display:flex;align-items:center;background:white;border:1px solid rgba(9,75,148,.10);box-shadow:var(--shadow-sm);border-radius:18px;padding:6px 6px 6px 16px;flex:1;min-width:0}.search-icon{font-size:24px;color:#7290ad;transform:rotate(-20deg)}.city-search input{min-width:0;flex:1;border:0;outline:0;padding:11px;font:600 14px Manrope;color:var(--ink);background:transparent}.city-search button{border:0;background:linear-gradient(135deg,var(--blue-800),var(--blue-700));color:white;border-radius:13px;padding:13px 16px;font-weight:800;cursor:pointer;white-space:nowrap}.geo-btn{width:50px;height:50px;border:1px solid rgba(9,75,148,.1);background:white;border-radius:17px;box-shadow:var(--shadow-sm);font-size:0;color:var(--blue-800);cursor:pointer}.geo-btn span{font-size:24px}.suggestions{position:absolute;left:0;right:0;top:calc(100% + 8px);background:white;border-radius:16px;box-shadow:0 18px 50px rgba(8,54,110,.18);padding:8px;z-index:20}.suggestion{width:100%;border:0;background:transparent;padding:12px 14px;border-radius:12px;display:flex;justify-content:space-between;gap:10px;text-align:left;cursor:pointer}.suggestion:hover{background:#eef7ff}.suggestion strong{font-size:13px}.suggestion span{font-size:11px;color:var(--muted)} .dashboard{padding:8px 0 14px}.favorites-row{display:flex;gap:10px;overflow:auto;padding:4px 1px 15px;scrollbar-width:none}.favorites-row::-webkit-scrollbar{display:none}.fav-chip,.add-fav{border:1px solid rgba(7,73,148,.10);background:rgba(255,255,255,.72);backdrop-filter:blur(12px);border-radius:15px;min-height:48px;padding:0 15px;display:flex;align-items:center;gap:12px;white-space:nowrap;color:#52677f;cursor:pointer}.fav-chip span{font-size:12px;font-weight:800}.fav-chip strong{font-size:17px;color:var(--ink)}.fav-chip.active{background:var(--blue-800);color:white;box-shadow:0 10px 30px rgba(7,88,189,.2)}.fav-chip.active strong{color:var(--gold)}.add-fav{font-size:24px;padding:0 15px;color:var(--blue-700)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px}.glass{position:relative;overflow:hidden;border-radius:var(--radius);color:white;background:radial-gradient(circle at 78% 24%,rgba(44,184,255,.58),transparent 26%),linear-gradient(145deg,#0b73e9 0%,#0861cd 44%,#064ba7 100%);box-shadow:0 20px 60px rgba(5,74,158,.24)}.glass:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 42%);pointer-events:none}.weather-card{padding:26px 28px}.weather-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.location-line{display:flex;align-items:center;gap:8px;font-size:23px}.location-line span{font-size:13px;color:var(--gold)}.weather-card-head p{margin:3px 0 0;color:rgba(255,255,255,.75);font-size:12px}.updated{display:flex;gap:9px;align-items:center;color:rgba(255,255,255,.75);font-size:10px;font-weight:700}.current-main{display:flex;justify-content:space-between;align-items:flex-end;padding:17px 0 21px}.temp-line{display:flex;align-items:center;gap:18px}.temp-line strong{font:800 74px/1 Plus Jakarta Sans;color:var(--gold);text-shadow:0 6px 16px rgba(0,0,0,.18)}.weather-emoji{font-size:68px;filter:drop-shadow(0 7px 9px rgba(0,0,0,.18))}.temp-block h2{font-size:20px;margin:7px 0 2px}.temp-block p{margin:0;color:rgba(255,255,255,.75);font-size:13px}.today-range{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.today-range span{font-size:10px;color:rgba(255,255,255,.65);font-weight:700;text-transform:uppercase}.today-range strong{font-size:20px}.current-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.16);padding-top:18px}.current-stats div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:2px 16px;border-right:1px solid rgba(255,255,255,.14)}.current-stats div:first-child{padding-left:0}.current-stats div:last-child{border:0}.stat-icon{grid-row:1/3;font-size:22px}.current-stats strong{font-size:14px}.current-stats small{font-size:9px;color:rgba(255,255,255,.67);font-weight:700}.vigilance-card{border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.vigilance-card.no-alert{background:linear-gradient(150deg,#f5fffa,#eaf9f1);border:1px solid rgba(30,164,91,.10)}.vigilance-card.alert-yellow{background:linear-gradient(150deg,#fff9df,#ffed9c)}.vigilance-card.alert-orange{background:linear-gradient(150deg,#fff1df,#ffc77d)}.vigilance-card.alert-red{background:linear-gradient(150deg,#fff0ef,#ffaaa4)}.vigilance-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#d9f5e5;color:#17864a;font-size:20px;font-weight:900;margin-bottom:18px}.vigilance-card small{font-size:9px;letter-spacing:.12em;font-weight:900;color:#6b7b8c}.vigilance-card h3{font:800 18px/1.25 Plus Jakarta Sans;margin:6px 0}.vigilance-card p{font-size:12px;line-height:1.55;color:#68798d;margin:0 0 18px}.vigilance-card a{font-size:11px;font-weight:900;color:var(--blue-800)} .section{padding:40px 0 5px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}.section-kicker{font-size:9px;letter-spacing:.15em;color:var(--blue-700);font-weight:900}.section-head h2{font:800 clamp(24px,3vw,32px)/1.1 Plus Jakarta Sans;margin:5px 0 0}.text-link,.primary-link{font-size:11px;font-weight:900;color:var(--blue-800)}.hourly-strip{display:grid;grid-template-columns:repeat(8,minmax(110px,1fr));gap:10px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}.hourly-strip::-webkit-scrollbar{display:none}.hour-card{min-width:110px;background:rgba(255,255,255,.82);border:1px solid var(--line);box-shadow:var(--shadow-sm);border-radius:18px;padding:16px 13px;text-align:center}.hour-card.now{background:linear-gradient(150deg,#0a72e7,#0757bb);color:white}.hour-card time{display:block;font-size:11px;font-weight:900}.hour-card .ico{display:block;font-size:31px;margin:11px 0 7px}.hour-card strong{font-size:20px}.hour-card small{display:flex;justify-content:center;gap:4px;margin-top:8px;font-size:9px;color:#6f8196}.hour-card.now small{color:rgba(255,255,255,.75)}.unit-toggle{border:1px solid var(--line);background:white;border-radius:12px;padding:4px;display:flex;gap:2px}.unit-toggle b,.unit-toggle span{padding:6px 9px;font-size:10px;border-radius:8px}.unit-toggle b{background:#eaf5ff;color:var(--blue-800)}.daily-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.day-card{background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 8px 28px rgba(3,54,114,.07)}.day-card.today{border-color:rgba(11,111,232,.25);box-shadow:0 10px 30px rgba(11,111,232,.12)}.day-top{display:flex;justify-content:space-between;gap:8px}.day-top div{display:flex;flex-direction:column}.day-top strong{font-size:13px}.day-top small{font-size:9px;color:var(--muted);margin-top:2px}.day-top .ico{font-size:31px}.day-temp{margin-top:15px;display:flex;align-items:baseline;gap:8px}.day-temp b{font-size:22px}.day-temp span{font-size:14px;color:#6e86a1}.day-rain{margin-top:10px;font-size:9px;font-weight:800;color:#5382ad} .service-grid{display:grid;grid-template-columns:1.1fr 1.1fr .8fr;gap:16px;padding-top:48px}.feature-card{background:white;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-sm);min-height:355px;display:flex;flex-direction:column}.feature-card-top{display:flex;justify-content:space-between;align-items:center;padding:17px 18px 0;font-size:9px;color:#7a889b;font-weight:800}.tag{font-size:8px;font-weight:900;letter-spacing:.12em;padding:7px 9px;border-radius:999px;background:#e4fff0;color:#12814a}.tag.gold{background:#fff4ce;color:#9f7600}.tag.blue{background:#e9f4ff;color:#075cbd}.radar-visual{margin:12px 15px 0;height:185px;border-radius:18px;background:radial-gradient(circle at 44% 42%,rgba(104,198,255,.75),transparent 22%),linear-gradient(145deg,#dcecf7,#aacde2);position:relative;overflow:hidden}.belgium-shape{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-8deg);width:120px;height:82px;border-radius:42% 58% 56% 44%/52% 42% 58% 48%;background:#e9f4ea;border:2px solid white;box-shadow:0 7px 25px rgba(20,83,120,.16);display:grid;place-items:center;font-size:12px;font-weight:900;color:#72927d}.rain{position:absolute;width:20px;height:20px;border-radius:50%;background:#1abc73;filter:blur(5px);opacity:.75}.r1{left:31%;top:30%;width:60px}.r2{left:48%;top:39%;width:35px;background:#ffcf35}.r3{left:61%;top:25%;width:50px}.r4{left:56%;top:58%;width:44px}.radar-scan{position:absolute;inset:-30%;background:conic-gradient(from 15deg,transparent 0 78%,rgba(255,255,255,.34) 89%,transparent 96%);animation:scan 6s linear infinite;transform-origin:center}@keyframes scan{to{transform:rotate(360deg)}}.feature-copy{padding:16px 20px 20px}.feature-copy h3{font:800 20px/1.2 Plus Jakarta Sans;margin:0 0 6px}.feature-copy p{font-size:11px;color:var(--muted);line-height:1.6;margin:0 0 14px}.timeline{display:flex;align-items:center;gap:8px;font-size:8px;color:#7b8da0;font-weight:700}.timeline i{height:3px;background:#dfeaf4;flex:1;border-radius:3px;position:relative}.timeline i b{position:absolute;left:70%;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--blue-700)}.expert-illustration{height:185px;margin:12px 15px 0;border-radius:18px;background:linear-gradient(160deg,#dff4ff,#a6d5f7);display:flex;justify-content:center;align-items:center;gap:-10px;overflow:hidden}.expert-illustration span{font-size:68px;filter:drop-shadow(0 7px 9px rgba(0,0,0,.14));margin:0 -10px}.indices-list{padding:17px}.indices-list>div{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:15px 0;border-bottom:1px solid #edf2f7}.indices-list>div:last-child{border-bottom:0}.indices-list>div>span{font-size:25px}.indices-list p{margin:0;font-size:11px;font-weight:900}.indices-list p small{display:block;color:#8897aa;font-size:8px;margin-top:3px}.indices-list strong{font-size:17px;color:var(--blue-800)}.info-grid{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:14px;padding-bottom:58px}.soft-card{border-radius:22px;padding:19px 20px;background:rgba(255,255,255,.78);border:1px solid var(--line);box-shadow:0 8px 25px rgba(3,54,114,.06);display:flex;align-items:center;gap:14px}.big-ico{font-size:33px}.soft-card small{font-size:8px;color:#7e8ea2;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.soft-card h3{font-size:14px;margin:4px 0}.soft-card p{font-size:9px;color:#718298;margin:0}.mail-card a{margin-left:auto;background:var(--blue-800);color:white;border-radius:11px;padding:10px 12px;font-size:9px;font-weight:900;white-space:nowrap}.footer{background:#062f69;color:white;padding:46px 0 110px}.footer-main{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:28px}.footer-brand img{width:76px;height:76px;object-fit:contain;background:white;border-radius:20px;padding:5px}.footer-brand p{font-size:11px;color:rgba(255,255,255,.65);max-width:270px;line-height:1.6}.footer h4{font-size:11px;margin:0 0 13px}.footer a{display:block;font-size:10px;color:rgba(255,255,255,.66);margin:9px 0}.footer-bottom{margin-top:35px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;color:rgba(255,255,255,.46);font-size:8px}.mobile-nav{display:none}.toast{position:fixed;right:22px;bottom:22px;background:#102b4e;color:white;border-radius:13px;padding:12px 15px;font-size:11px;font-weight:700;box-shadow:var(--shadow);transform:translateY(100px);opacity:0;transition:.3s;z-index:100}.toast.show{transform:none;opacity:1} @media(max-width:980px){.desktop-nav{display:none}.menu-btn{display:block}.hero{grid-template-columns:1fr;padding-top:38px;gap:26px}.dashboard-grid{grid-template-columns:1fr 250px}.daily-grid{grid-template-columns:repeat(3,1fr)}.service-grid{grid-template-columns:1fr 1fr}.indices-card{grid-column:1/-1;min-height:auto}.indices-list{display:grid;grid-template-columns:repeat(3,1fr)}.indices-list>div{border-bottom:0;border-right:1px solid #edf2f7;padding:8px 15px}.indices-list>div:last-child{border:0}.info-grid{grid-template-columns:1fr 1fr}.mail-card{grid-column:1/-1}.footer-main{grid-template-columns:repeat(3,1fr);gap:25px}.footer-brand{grid-column:1/-1}} @media(max-width:680px){body{padding-bottom:72px}.shell{width:min(100% - 24px,1180px)}.topbar-inner{height:66px}.brand-mark{width:44px;height:44px;border-radius:14px}.brand-mark img{width:42px;height:42px}.brand-copy strong{font-size:15px}.brand-copy small{display:none}.member-btn{display:none}.hero{padding:30px 0 20px}.hero h1{font-size:37px}.hero p{font-size:13px}.search-wrap{display:block}.city-search{border-radius:16px}.city-search button{font-size:0;padding:12px 15px}.city-search button span{font-size:17px}.geo-btn{display:none}.favorites-row{margin-right:-12px}.fav-chip{min-height:44px;padding:0 13px}.dashboard-grid{grid-template-columns:1fr}.weather-card{padding:21px 18px;border-radius:24px}.updated{display:none}.location-line{font-size:21px}.temp-line strong{font-size:65px}.weather-emoji{font-size:56px}.current-main{padding:15px 0 19px}.today-range{display:none}.current-stats{grid-template-columns:repeat(2,1fr);gap:15px 0}.current-stats div{padding:2px 10px}.current-stats div:nth-child(2){border-right:0}.current-stats div:nth-child(3){padding-left:0}.vigilance-card{min-height:168px;padding:19px 20px;display:grid;grid-template-columns:46px 1fr;gap:0 13px}.vigilance-icon{grid-row:1/3;width:42px;height:42px;margin:0}.vigilance-card a{grid-column:2}.section{padding-top:32px}.section-head h2{font-size:24px}.text-link{font-size:10px;white-space:nowrap}.hourly-strip{margin-right:-12px;grid-template-columns:repeat(8,100px)}.hour-card{min-width:100px}.daily-grid{display:flex;overflow-x:auto;margin-right:-12px;padding-bottom:10px;scrollbar-width:none}.day-card{min-width:155px}.service-grid{grid-template-columns:1fr;padding-top:38px}.feature-card{min-height:330px}.indices-card{grid-column:auto;min-height:auto}.indices-list{display:block}.indices-list>div{border-right:0;border-bottom:1px solid #edf2f7}.info-grid{grid-template-columns:1fr;padding-bottom:40px}.mail-card{grid-column:auto;align-items:flex-start}.mail-card a{align-self:center}.footer{padding-top:38px;padding-bottom:25px}.footer-main{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:5px}.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border:1px solid rgba(7,66,136,.10);box-shadow:0 12px 45px rgba(0,49,110,.22);border-radius:22px;padding:8px 6px}.mobile-nav a,.mobile-nav button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;color:#60738c;font:700 8px Manrope}.mobile-nav span{font-size:20px;line-height:22px}.mobile-nav .active{color:var(--blue-700)}.toast{right:12px;left:12px;bottom:90px;text-align:center}} /* ── Appoint branchements réels (fidèle au design d'origine) ── */ .wx-ico{width:1.3em;height:1.3em;vertical-align:-0.28em;object-fit:contain} .weather-emoji .wx-ico{width:86px;height:86px;vertical-align:middle} .hour-card .wx-ico{width:40px;height:40px} .day-card .wx-ico{width:38px;height:38px} .day-card .ico-pair{display:inline-flex;align-items:center;gap:1px} .day-card .ico-pair .arr{color:var(--gold);font-weight:900;font-size:11px} .day-card .ico-pair .wx-ico{width:30px;height:30px} /* défilement horizontal des prochaines heures (au lieu de 8 colonnes figées) */ .hourly-strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(110px,1fr)} @media(max-width:720px){.hourly-strip{grid-auto-columns:100px}} /* semaine : max en rouge, min en bleu */ .day-temp b{color:#E63946} .day-temp span{color:#1F7FD1} /* favoris : ✕ discret dans la pastille d'origine */ .fav-chip .rm{display:inline-grid;place-items:center;width:28px;height:28px;margin:0 -6px 0 2px;border-radius:50%;opacity:.55;font-weight:800;font-size:15px;background:rgba(10,50,110,.06)}.fav-chip .rm:hover{opacity:1;background:rgba(220,60,60,.12);color:#c53030} .fav-chip .rm:hover{opacity:1} .fav-empty{font-size:13px;color:var(--muted);font-weight:600;align-self:center} /* indices : la valeur ne déborde jamais de la carte */ .indices-list>div>strong{font-size:14px;white-space:nowrap;justify-self:end} @media(max-width:720px){.indices-list>div>strong{font-size:12.5px}} /* ── Itération 4 ── */ /* pluie/orage des 30 prochaines minutes, intégré à la carte bleue */ .nowcast-pill{display:inline-flex;align-items:center;gap:8px;margin-top:11px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);color:#fff;border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:800;backdrop-filter:blur(6px)} .nowcast-pill.storm{background:rgba(255,201,40,.26);border-color:rgba(255,201,40,.65);color:#ffe568} @media(max-width:680px){ /* topbar : logo + nom centrés (plus de burger ni de cloche) */ .topbar-inner{justify-content:center} /* semaine : icônes contenues dans la carte */ .day-card .wx-ico{width:26px;height:26px} .day-card .ico-pair .wx-ico{width:21px;height:21px} .day-card .day-top{gap:6px} } /* ── Itération 5 ── */ /* les champs et boutons héritent de la police du site (fini le rendu système) */ button, input, select, textarea { font-family: inherit; } /* suggestions de recherche : liste propre, nom + rattachement en dessous. Sélecteurs renforcés : « .city-search button » (le bouton bleu du formulaire) attrapait aussi ces boutons-ci → fond bleu illisible. */ .suggestions{padding:6px;max-height:330px;overflow-y:auto} .city-search .suggestions button.suggestion{ background:transparent;color:var(--ink);font-size:14px; flex-direction:column;align-items:flex-start;gap:3px; padding:11px 14px;border-radius:12px;height:auto; } .city-search .suggestions button.suggestion + button.suggestion{border-top:1px solid #f0f5fa;border-radius:0 0 12px 12px} .city-search .suggestions button.suggestion:hover, .city-search .suggestions button.suggestion:focus-visible{background:#eef7ff} .city-search .suggestions button.suggestion strong{font-size:14px;font-weight:800;color:var(--ink)} .city-search .suggestions button.suggestion span{font-size:11.5px;color:var(--muted);font-weight:600} /* pastille pluie 30 min : toujours présente, état calme quand rien à signaler */ .nowcast-pill[hidden]{display:none} .nowcast-pill.calm{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.85);font-weight:700} /* logo : AUCUN fond blanc autour (l'image est détourée, les conteneurs aussi) */ .brand-mark{background:transparent;box-shadow:none} .footer-brand img{background:transparent;border-radius:0;padding:0} /* ── Itération 6 ── */ .moon-times{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px} .fav-chip{touch-action:pan-y;user-select:none;-webkit-user-select:none} .fav-chip.dragging{opacity:.65;transform:scale(1.07);box-shadow:0 8px 22px rgba(3,54,114,.28);z-index:5} /* ── Itération 7 ── */ /* MÉTÉO en jaune comme le site actuel */ .brand-copy strong em.gold{color:#EFAF00;font-style:normal} /* max en rouge / min en bleu dans la carte actuelle : MÊME taille que le texte d'origine (b hérite de strong ; les span étaient rapetissés par .today-range span) */ .today-range strong b{font-size:inherit;font-weight:inherit} .today-range strong .tmax{color:#FF8A7A} .today-range strong .tmin{color:#8FD8FF} /* qualité de l'air : libellé + pastille de couleur */ #airValue .aq-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:1px} #airValue small{font-size:11px;font-weight:700;opacity:.8;margin-left:3px} /* ── Défilement VISIBLE sur mobile (façon app : carte coupée qui dépasse + fondu) ── */ @media(max-width:680px){ .hourly-strip, .daily-grid{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent); } /* largeurs volontairement fractionnaires : une carte reste toujours coupée au bord */ .hourly-strip{grid-auto-columns:96px} .day-card{min-width:150px} } /* ── Itération 9 : vigilance redessinée ── */ /* alerte : carte blanche sobre + liseré coloré à gauche (fini les gros dégradés) */ .vigilance-card.alert-yellow, .vigilance-card.alert-orange, .vigilance-card.alert-red{ background:#fff;border:1px solid var(--line);border-left:6px solid var(--vig-accent,#FFD400); } .vigilance-card.alert-yellow{--vig-accent:#F5C400} .vigilance-card.alert-orange{--vig-accent:#FF8A00} .vigilance-card.alert-red{--vig-accent:#E63946} .vigilance-card.alert-yellow .vigilance-icon{background:#FFF4C2;color:#8A6D00} .vigilance-card.alert-orange .vigilance-icon{background:#FFE7CC;color:#9A4E00} .vigilance-card.alert-red .vigilance-icon{background:#FFDDDA;color:#A31621} /* liste : une rangée par vigilance, niveau en pastille, pas de texte */ .vig-list{display:flex;flex-direction:column;gap:7px;margin:2px 0 14px} .vig-list .vig-row{display:flex;align-items:center;gap:9px} .vig-list .vig-name{flex:1;font-size:13px;font-weight:800;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vig-list .vig-level{font-size:10.5px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap} .vig-list .lvl-jaune{background:#FFF3B8;color:#7A6000} .vig-list .lvl-orange{background:#FFE3C2;color:#8F4700} .vig-list .lvl-rouge{background:#FFD9D6;color:#A31621} /* ── Itération 10 : bandeau NATIONAL de vigilance (dès qu'un aléa est actif dans le pays) ── */ .nat-vig{display:flex;align-items:center;gap:11px;padding:11px 0;text-decoration:none; border-bottom:1px solid rgba(0,0,0,.06)} .nat-vig[hidden]{display:none} .nat-vig > *{max-width:1180px} .nat-vig{padding-left:max(20px,calc((100% - 1180px)/2));padding-right:max(20px,calc((100% - 1180px)/2))} .nat-vig-ic{font-size:17px} .nat-vig-txt{flex:1;font-size:13px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nat-vig-txt b{text-transform:uppercase} .nat-vig-cta{font-size:12px;font-weight:900;white-space:nowrap} .nat-vig.lvl-jaune{background:linear-gradient(90deg,#FFF7D6,#FFF1B8);color:#6E5600} .nat-vig.lvl-jaune .nat-vig-cta{color:#8A6D00} .nat-vig.lvl-orange{background:linear-gradient(90deg,#FFEDD9,#FFE0BC);color:#7A3E00} .nat-vig.lvl-orange .nat-vig-cta{color:#9A4E00} .nat-vig.lvl-rouge{background:linear-gradient(90deg,#FFE3E0,#FFD3CF);color:#7E1119} .nat-vig.lvl-rouge .nat-vig-cta{color:#A31621} @media(max-width:680px){ .nat-vig{gap:8px;padding-top:9px;padding-bottom:9px} .nat-vig-txt{white-space:normal;font-size:12px;line-height:1.35} .nat-vig-cta{font-size:11px} } .nat-vig-sep{opacity:.45;margin:0 2px} .nat-vig-item{display:inline-flex;align-items:center;gap:6px} .nat-vig-item .vig-icons{display:inline-flex;align-items:center;gap:3px} .nat-vig-txt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;white-space:normal} /* ── Itération 13 : langues FR / NL / DE ── */ .lang-seg{display:inline-flex;background:#EDF6FF;border-radius:12px;padding:3px;gap:2px} .lang-seg button, .lang-seg a{border:0;background:transparent;cursor:pointer;font:800 11px Manrope;color:#55677f; padding:6px 9px;border-radius:9px;transition:all .12s;text-decoration:none;display:inline-block} .lang-seg button:hover, .lang-seg a:hover{color:var(--blue-800)} .lang-seg button.on, .lang-seg a.on{background:var(--blue-800);color:#fff} @media(max-width:680px){ /* marque centrée SANS chevauchement : un espace fantôme à gauche fait contrepoids au sélecteur de langue à droite */ .topbar-inner{justify-content:space-between;gap:6px} .topbar-inner::before{content:'';flex:0 0 96px} .header-actions{flex:0 0 auto} .lang-seg{background:#EDF6FF} .lang-seg button, .lang-seg a{padding:6px 7px;font-size:10.5px} .brand{min-width:0} .brand-copy strong{font-size:14px;white-space:nowrap} } /* ── Itération 18 : la semaine DÉFILE partout (comme les heures) ── */ .daily-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:188px; gap:12px;overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent)} .daily-grid{scrollbar-width:none} .daily-grid::-webkit-scrollbar{display:none} .day-card{scroll-snap-align:start} @media(max-width:680px){.daily-grid{grid-auto-columns:150px}} /* ── Itération 19 : « Mis à jour » visible aussi sur mobile (le zip le masquait) ── */ @media(max-width:680px){ .updated{display:inline-flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap} } /* ── Page PRÉVISIONS EXPERTISÉES (pv-) ── */ .pv-main{padding-top:18px} .pv-hero h1{color:var(--ink);font:800 clamp(30px,4vw,44px)/1.05 'Plus Jakarta Sans';margin:6px 0 8px;letter-spacing:-.03em} .pv-hero p{color:var(--muted);font-size:15px;margin:0 0 18px;max-width:640px} .pv-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none} .pv-days::-webkit-scrollbar{display:none} .pv-chip{flex:0 0 auto;border:1px solid rgba(9,75,148,.14);background:rgba(255,255,255,.8);color:#3d5675; font:800 13px Manrope;padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:all .12s} .pv-chip:hover{border-color:var(--blue-700)} .pv-chip.on{background:var(--blue-800);border-color:var(--blue-800);color:#fff} .pv-moments{display:flex;gap:6px;overflow-x:auto;padding:0 2px 16px;scrollbar-width:none} .pv-moments::-webkit-scrollbar{display:none} .pv-moment{flex:0 0 auto;border:0;background:#E8F2FC;color:var(--blue-800);font:800 12.5px Manrope; padding:8px 15px;border-radius:11px;cursor:pointer;transition:all .12s} .pv-moment.on{background:var(--gold);color:#5B4300} .pv-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:30px} @media(min-width:980px){.pv-grid{grid-template-columns:7fr 5fr;align-items:start}.pv-side{position:sticky;top:14px}} .pv-map-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px;border:1px solid var(--line)} .pv-map-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap} .pv-updated{font-size:11.5px;font-weight:700;color:var(--muted)} .pv-next{margin:12px 2px 0;font-size:12px;font-weight:700;color:var(--muted)} .pv-side{display:flex;flex-direction:column;gap:16px} .pv-bulletin{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;border:1px solid var(--line)} .pv-bulletin-top{margin-bottom:8px} .pv-bulletin h2{font:800 20px 'Plus Jakarta Sans';color:var(--ink);margin:0 0 12px} .pv-bulletin-body{font-size:14px;line-height:1.7;color:#33475e} .pv-bulletin-body p{margin:0 0 12px} .pv-bulletin-body h1,.pv-bulletin-body h2,.pv-bulletin-body h3{font:800 15px 'Plus Jakarta Sans';color:var(--ink);margin:16px 0 8px} .pv-bulletin-body img{max-width:100%;border-radius:12px} .pv-skel{height:13px;border-radius:7px;background:linear-gradient(90deg,#EDF3FA,#F7FAFD,#EDF3FA);background-size:200% 100%;animation:pvsk 1.2s infinite;margin-bottom:9px} .pv-skel.short{width:60%} @keyframes pvsk{0%{background-position:200% 0}100%{background-position:-200% 0}} .pv-indices{background:linear-gradient(160deg,var(--blue-800),var(--blue-900));border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px;color:#fff} .pv-indices h3{margin:0 0 12px;font:800 12.5px Manrope;letter-spacing:.7px;text-transform:uppercase;color:rgba(255,255,255,.8)} .pv-idx-list{display:flex;flex-direction:column;gap:9px} .pv-idx{display:flex;align-items:center;gap:10px} .pv-idx span{flex:1;font:800 13.5px Manrope} .pv-idx .stars{color:var(--gold);letter-spacing:2px;font-size:13px} .pv-idx .stars i{color:rgba(255,255,255,.25);font-style:normal} .pv-idx small{font:800 11px Manrope;color:rgba(255,255,255,.75);min-width:26px;text-align:right} body.pv-loading #pvMarkers{opacity:.4;transition:opacity .2s} .tag.gold{background:#FFF3CE;color:#8A6A00;border-radius:999px;padding:4px 11px;font:800 10.5px Manrope;letter-spacing:.6px} /* ===== Carte des prévisions : CSS VERBATIM de /previsions.php (ne pas retoucher) ===== */ :root{--brand-dark:#0D2233} .view-toggle { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; gap: 0; margin-bottom: 24px; background: #e5e7eb; padding: 4px; border-radius: 999px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; } .view-btn { padding: 12px 28px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; color: #6b7280; -webkit-transition: all 0.2s; transition: all 0.2s; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 8px; /* Fix Safari */ -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; white-space: nowrap; } .view-btn:hover { color: var(--brand-dark); } .view-btn.active { background: #fff; color: var(--brand-dark); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .map-hint { display: flex; align-items: flex-start; gap: 6px; max-width: 750px; margin: 8px auto 10px; padding: 0 4px; font-size: 12.5px; color: #6b7280; line-height: 1.5; } /* Map container */ .map-container { position: relative; max-width: 750px; margin: 0 auto 24px; border-radius: 24px; overflow: visible; box-shadow: 0 12px 40px rgba(0,0,0,0.15); border: 4px solid #fff; } .map-image { border-radius: 20px; } .map-background { background: linear-gradient(135deg, #87ceeb 0%, #b4d8e7 30%, #d4edfc 60%, #fef3c7 100%); position: relative; overflow: hidden; border-radius: 20px; } .map-background::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.04; pointer-events: none; } .map-image { width: 100%; height: auto; display: block; position: relative; z-index: 1; } /* City markers - TRANSPARENT without white background - CROSS-BROWSER FIX */ .city-marker { position: absolute; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) scale(var(--marker-scale, 1)); z-index: 10; text-align: center; cursor: pointer; -webkit-transition: transform 0.2s ease, z-index 0s; transition: transform 0.2s ease, z-index 0s; } .city-marker:hover { -webkit-transform: translate(-50%, -50%) scale(calc(var(--marker-scale, 1) * 1.15)); -ms-transform: translate(-50%, -50%) scale(calc(var(--marker-scale, 1) * 1.15)); transform: translate(-50%, -50%) scale(calc(var(--marker-scale, 1) * 1.15)); z-index: 30; } /* City marker as link */ .city-marker-link { text-decoration: none; color: inherit; display: block; } /* Icon without background - transparent - MÉTÉO - TAILLES FIXES CROSS-BROWSER */ .city-marker .icon-wrapper { width: 38px; height: 38px; min-width: 38px; min-height: 38px; max-width: 38px; max-height: 38px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; } .city-marker .icon-wrapper img { width: 42px; height: 42px; min-width: 42px; min-height: 42px; max-width: 42px; max-height: 42px; -o-object-fit: contain; object-fit: contain; -webkit-filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } /* TEMPÉRATURE - Taille réduite - TAILLES FIXES */ .city-marker .icon-wrapper.temp-icon { width: 34px; height: 34px; min-width: 34px; min-height: 34px; max-width: 34px; max-height: 34px; } .city-marker .icon-wrapper.temp-icon img { width: 34px; height: 34px; min-width: 34px; min-height: 34px; max-width: 34px; max-height: 34px; } /* Nom de ville — style épingle discret */ .city-marker .city-name { margin-top: -5px; font-size: 7.5px; font-weight: 600; font-family: 'Segoe UI', 'Arial', sans-serif; color: #ffffff; background: rgba(10, 20, 45, 0.55); padding: 1.5px 5px 1.5px 12px; border-radius: 8px; white-space: nowrap; letter-spacing: 0.8px; text-transform: uppercase; position: relative; z-index: 5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Épingle — supprimée (tige retirée) */ .city-marker .city-name::after { display: none; } /* Épingle — point noir à gauche */ .city-marker .city-name::before { content: ''; position: absolute; left: 4px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 5px; background: #1a1a1a; border: 1.2px solid #ffffff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } /* Ajustement pour température (icône plus petite) */ .city-marker .icon-wrapper.temp-icon + .city-name { margin-top: -6px; } .city-marker .no-data-dot { width: 14px; height: 14px; min-width: 14px; min-height: 14px; background: linear-gradient(135deg, #f87171, #ef4444); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(239,68,68,0.4); margin: 0 auto; } /* ========== WIND MARKERS - CROSS-BROWSER FIX ========== */ .wind-marker { position: absolute; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) scale(var(--marker-scale, 1)); z-index: 15; text-align: center; cursor: default; -webkit-transition: transform 0.2s ease; transition: transform 0.2s ease; } .wind-marker:hover { -webkit-transform: translate(-50%, -50%) scale(calc(var(--marker-scale, 1) * 1.2)); -ms-transform: translate(-50%, -50%) scale(calc(var(--marker-scale, 1) * 1.2)); transform: translate(-50%, -50%) scale(calc(var(--marker-scale, 1) * 1.2)); z-index: 35; } .wind-marker .wind-arrow-container { position: relative; width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .wind-marker .wind-arrow { width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; -webkit-transition: transform 0.3s ease; transition: transform 0.3s ease; -webkit-filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)) drop-shadow(0 0 1px rgba(255,255,255,0.8)); filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)) drop-shadow(0 0 1px rgba(255,255,255,0.8)); } .wind-marker .wind-speed { position: absolute; bottom: -14px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: rgba(255, 255, 255, 0.85); color: #1a1a2e; padding: 2px 6px; border-radius: 50px; font-size: 9px; font-weight: 600; white-space: nowrap; letter-spacing: 0.3px; -webkit-font-smoothing: antialiased; text-shadow: none; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .wind-marker .wind-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: rgba(30, 41, 59, 0.95); color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.2s, visibility 0.2s; transition: opacity 0.2s, visibility 0.2s; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .wind-marker .wind-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(30, 41, 59, 0.95); } .wind-marker:hover .wind-tooltip { opacity: 1; visibility: visible; } /* ========== OVERLAYS (DATE, LOGO) ========== */ .map-overlay { position: absolute; -webkit-transform: translate(-50%, -50%) scale(var(--marker-scale, 1)); -ms-transform: translate(-50%, -50%) scale(var(--marker-scale, 1)); transform: translate(-50%, -50%) scale(var(--marker-scale, 1)); transform-origin: center center; z-index: 25; pointer-events: none; } /* ========== DATE BADGE CALENDRIER MODERNE ========== */ .map-date-overlay .date-badge { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; background: rgba(10, 20, 40, 0.7); -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15); white-space: nowrap; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .map-date-overlay .date-badge-accent { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%); padding: 7px 14px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; min-width: 42px; position: relative; } .map-date-overlay .date-badge-accent::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%); } .map-date-overlay .date-badge-day-name { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.85); line-height: 1; text-transform: capitalize; letter-spacing: 0.5px; margin-bottom: 2px; } .map-date-overlay .date-badge-day-num { font-size: 22px; font-weight: 900; line-height: 1; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } .map-date-overlay .date-badge-info { padding: 8px 16px 8px 14px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .map-date-overlay .date-badge-month-year { font-size: 13px; font-weight: 700; color: #ffffff; line-height: 1.3; letter-spacing: 0.3px; } .map-logo-overlay { left: var(--logo-x, 5%); top: var(--logo-y, 5%); } .map-logo-overlay .logo-img { max-width: var(--logo-size, 120px); height: auto; border-radius: 4px; -webkit-filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } /* ========== INDICES MÉTÉO ========== */ /* responsive verbatim /previsions.php */ @media (max-width: 768px) { .view-btn { padding: 10px 18px; font-size: 13px; } .map-logo-overlay { left: var(--logo-x-mobile, var(--logo-x, 5%)); top: var(--logo-y-mobile, var(--logo-y, 5%)); } } /* adaptateurs V3 (hors verbatim) : le toggle est un