/* Observatoire GES — feuille de style dédiée à cette page.
   Dérivée de l'outil interne (ex Smart-Invest.IA), recolorée pour l'identité GEOM :
   fond et encre refroidis vers la famille bleu marine, chrome (masthead, logo, onglets)
   recouleé en navy/or GEOM. Les couleurs porteuses de sens (rouge=conflit, vert=croissance,
   bleu=taux, ambre=alerte/énergie, orange=énergie fossile, teal=climat) sont inchangées. */

:root{
  --bg:#F2F5FA;--bg2:#E8EEF6;--bg3:#DCE3ED;
  --wh:#FFFFFF;--wh2:#F8FAFC;
  --ms-ink:#14202E;--ink2:#233240;--ink3:#44536A;--ink4:#6B7A8C;--ink5:#9AA7B5;
  --ms-border:rgba(11,43,80,.12);--border2:rgba(11,43,80,.2);
  --amber:#C07818;--amber2:#E89830;--amber3:#FBF0DC;--amber4:rgba(192,120,24,.15);
  --brand:#0B2B50;--brand2:#1F4E8C;--brand3:#E8EEF6;
  --gold:#C9A24A;--gold3:#F6EED9;
  --red:#C01820;--red2:#E02830;--red3:#FDECED;--red4:rgba(192,24,32,.14);
  --green:#1A6830;--green2:#28A048;--green3:#EAF5EC;--green4:rgba(26,104,48,.12);
  --blue:#1640A0;--blue2:#2860D8;--blue3:#EBF0FB;--blue4:rgba(22,64,160,.12);
  --teal:#0A7878;--teal3:#E4F6F6;
  --orange:#C04808;--orange3:#FEF0E8;--orange4:rgba(192,72,8,.12);
  --ff:'Fraunces',Georgia,serif;
  --fb:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif;
  --fm:'IBM Plex Mono',monospace;
  --shadow:0 1px 4px rgba(26,21,16,.08);
  --shadow2:0 2px 12px rgba(26,21,16,.1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg);color:var(--ms-ink);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ── MASTHEAD ── */
.masthead{background:var(--wh);border-bottom:2px solid var(--gold);border-radius:10px 10px 0 0;box-shadow:var(--shadow)}
.mast-inner{max-width:1560px;margin:0 auto;display:flex;align-items:center;gap:14px;height:56px;padding:0 20px}
.logo{font-family:var(--ff);font-size:16px;font-weight:700;color:var(--ms-ink);letter-spacing:-.01em;white-space:nowrap;line-height:1.2}
.logo em{font-style:italic;color:var(--brand)}
.logo small{display:block;font-family:var(--fm);font-size:8px;color:var(--ink4);font-style:normal;font-weight:400;letter-spacing:.10em;text-transform:uppercase;margin-top:1px}
.sep{width:1px;height:28px;background:var(--border2);flex-shrink:0}
.tagline{font-family:var(--fm);font-size:8.5px;color:var(--ink4);letter-spacing:.09em;text-transform:uppercase;line-height:1.65;flex-shrink:0}
.mast-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.live{display:flex;align-items:center;gap:5px;font-family:var(--fm);font-size:10px;color:var(--red);letter-spacing:.06em;cursor:pointer;padding:4px 8px;border-radius:100px;border:1px solid transparent;transition:all .18s}
.live:hover{border-color:var(--red);background:var(--red3)}
.live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);animation:pp 1.8s ease infinite;flex-shrink:0}
.live.loading::before{background:var(--amber);animation:pp .6s ease infinite}
@keyframes pp{0%,100%{opacity:1}50%{opacity:.25}}
.mdate{font-family:var(--fm);font-size:10px;color:var(--ink4)}
.nav-pills{display:flex;gap:3px}
.npill{font-family:var(--fm);font-size:9px;padding:5px 11px;border:1px solid var(--border2);border-radius:100px;color:var(--ink4);cursor:pointer;letter-spacing:.06em;transition:all .18s;background:none;text-transform:uppercase}
.npill:hover{border-color:var(--gold);color:var(--brand)}
.npill.on{background:var(--brand);border-color:var(--brand);color:#fff}
.upd-badge{font-family:var(--fm);font-size:8.5px;color:var(--ink5);white-space:nowrap}

/* ── TICKER ── */
.ticker{background:var(--ink2);overflow:hidden;height:32px;display:flex;align-items:center}
.ticker-inner{display:flex;animation:tick 110s linear infinite;white-space:nowrap}
.ticker-inner:hover{animation-play-state:paused}
.ti{display:inline-flex;align-items:center;gap:7px;padding:0 22px;border-right:1px solid rgba(255,255,255,.1);font-family:var(--fm);font-size:11px;height:32px}
.ti-sym{color:rgba(255,255,255,.9);font-weight:500}
.ti-val{color:rgba(255,255,255,.6)}
.ti-up{color:#5FDB8A}.ti-dn{color:#FF7070}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── LAYOUT ── */
.page{max-width:1560px;margin:0 auto;padding:18px 24px 60px}

/* ── VIEW SECTIONS ── */
.view-section{display:block}
.view-section.hidden{display:none!important}

/* ── ALERT ── */
.alert{display:flex;align-items:center;gap:10px;padding:9px 16px;margin-bottom:16px;border-radius:6px;border:1px solid var(--amber);background:var(--amber3)}
.alert-pill{font-family:var(--fm);font-size:8.5px;background:var(--amber);color:var(--wh);padding:3px 9px;border-radius:100px;font-weight:500;flex-shrink:0;letter-spacing:.06em}
.alert-txt{font-family:var(--fb);font-size:13px;color:var(--amber);font-weight:600;flex:1;transition:opacity .22s}
.alert-btn{color:var(--amber);cursor:pointer;font-size:18px;padding:0 4px;opacity:.7;transition:opacity .2s;background:none;border:none;line-height:1}
.alert-btn:hover{opacity:1}

/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.gmap{display:grid;grid-template-columns:3fr 1.3fr;gap:14px;margin-bottom:14px}
.gevents{display:grid;grid-template-columns:2fr 1.2fr;gap:14px;margin-bottom:14px}

/* ── SECTION HEADER ── */
.sh{display:flex;align-items:center;gap:12px;margin:18px 0 12px}
.sh::after{content:'';flex:1;height:1px;background:var(--border2)}
.sh-label{font-family:var(--fm);font-size:9px;color:var(--ink4);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}

/* ── CARD ── */
.card{background:var(--wh);border:1px solid var(--border2);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.card.amber{border-top:3px solid var(--amber)}
.card.red{border-top:3px solid var(--red)}
.card.green{border-top:3px solid var(--green)}
.card.blue{border-top:3px solid var(--blue)}
.card.teal{border-top:3px solid var(--teal)}
.card.orange{border-top:3px solid var(--orange)}
.card-hd{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--ms-border)}
.card-title{font-family:var(--ff);font-size:13px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:7px}
.card-sub{font-family:var(--fm);font-size:9px;color:var(--ink5);letter-spacing:.06em;text-transform:uppercase}
.card-body{padding:13px 15px}

/* ── API STATUS ── */
.api-tag{font-family:var(--fm);font-size:7.5px;padding:2px 6px;border-radius:3px;letter-spacing:.06em}
.api-live{background:var(--green4);color:var(--green)}
.api-sim{background:var(--amber4);color:var(--amber)}
.api-err{background:var(--red4);color:var(--red)}

/* ── CLOCKS ── */
.clocks{display:flex;gap:8px;padding:12px 14px;flex-wrap:wrap}
.clock{flex:1;min-width:70px;text-align:center;padding:9px 6px;background:var(--bg2);border-radius:7px;border:1px solid var(--ms-border);transition:all .2s}
.clock:hover{border-color:var(--amber);background:var(--amber3)}
.clock.me{background:var(--amber3);border-color:var(--amber)}
.ck-city{font-family:var(--fm);font-size:7.5px;color:var(--ink4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.ck-time{font-family:var(--fm);font-size:18px;font-weight:500;color:var(--ms-ink);line-height:1}
.ck-tz{font-family:var(--fm);font-size:8px;color:var(--ink5);margin-top:3px}
.clock.me .ck-time{color:var(--amber)}

/* ── FX TABLE ── */
.fx{width:100%;border-collapse:collapse}
.fx th{font-family:var(--fm);font-size:8.5px;color:var(--ink4);padding:5px 10px;text-align:left;border-bottom:1px solid var(--ms-border);letter-spacing:.06em;text-transform:uppercase;background:var(--bg2)}
.fx td{padding:8px 10px;border-bottom:1px solid var(--ms-border);font-size:12.5px;vertical-align:middle}
.fx tr:last-child td{border-bottom:none}
.fx tr:hover td{background:var(--amber3)}
.fx-pair{font-family:var(--fm);font-size:11.5px;font-weight:500;color:var(--ink2)}
.fx-rate{font-family:var(--fm);font-size:13.5px;font-weight:500;transition:color .4s}
.fx-chg{font-family:var(--fm);font-size:11px;font-weight:500}
.up{color:var(--green2)}.dn{color:var(--red2)}

/* ── COMMO ── */
.commo{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;border:1px solid var(--ms-border);background:var(--wh2);margin-bottom:6px;transition:all .15s}
.commo:hover{background:var(--amber3);border-color:var(--amber)}
.commo-ico{font-size:15px;width:22px;flex-shrink:0}
.commo-name{font-family:var(--fb);font-size:12px;font-weight:500;flex:1}
.commo-unit{font-family:var(--fm);font-size:8.5px;color:var(--ink4)}
.commo-val{font-family:var(--fm);font-size:13.5px;font-weight:500;text-align:right;transition:color .4s}
.commo-chg{font-family:var(--fm);font-size:10.5px;font-weight:500;text-align:right}
.pbar{height:3px;background:var(--bg3);border-radius:2px;margin-top:3px;width:48px}
.pbar-fill{height:100%;border-radius:2px;transition:width .5s}

/* ── INDICES ── */
.idx-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--ms-border)}
.idx-row:last-child{border-bottom:none}
.idx-flag{font-size:15px}
.idx-name{font-family:var(--ff);font-size:12.5px;font-weight:700;color:var(--ink2)}
.idx-sub{font-family:var(--fm);font-size:8.5px;color:var(--ink4)}
.idx-val{font-family:var(--fm);font-size:14px;font-weight:500;margin-left:auto;text-align:right;transition:color .4s}
.idx-chg{font-family:var(--fm);font-size:11px;text-align:right}

/* ── MAP ── */
.map-wrap{background:var(--wh);border:1px solid var(--border2);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.map-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--ms-border);background:var(--bg2)}
.mf{font-family:var(--fm);font-size:8.5px;padding:4px 10px;border:1px solid var(--border2);border-radius:100px;cursor:pointer;background:var(--wh);letter-spacing:.05em;transition:all .18s}
.mf:hover{border-color:var(--amber)}
.mf.on.war{background:var(--red4);border-color:var(--red);color:var(--red)}
.mf.on.tension{background:var(--amber4);border-color:var(--amber);color:var(--amber)}
.mf.on.watch{background:var(--blue4);border-color:var(--blue);color:var(--blue)}
.map-svg{display:block;width:100%}
.map-legend{display:flex;gap:14px;flex-wrap:wrap;padding:7px 14px;border-top:1px solid var(--ms-border);background:var(--wh2)}
.ml-item{display:flex;align-items:center;gap:4px;font-family:var(--fm);font-size:9px;color:var(--ink4)}
.ml-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ── ZONE LIST ── */
.zone-item{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--ms-border);cursor:pointer;transition:all .15s}
.zone-item:last-child{border-bottom:none}
.zone-item:hover{padding-left:6px;background:var(--amber3);padding:9px 6px;border-radius:6px}
.zdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
.zsev{font-family:var(--fm);font-size:8px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:2px}
.zname{font-family:var(--ff);font-size:12.5px;font-weight:700;color:var(--ms-ink)}
.zdesc{font-family:var(--fb);font-size:11px;color:var(--ink4);line-height:1.5;margin-top:2px}
.ztag{display:inline-block;font-family:var(--fm);font-size:8px;padding:2px 7px;border-radius:3px;margin-top:4px}

/* ── EVENTS ── */
.ev{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--ms-border);transition:opacity .2s}
.ev:last-child{border-bottom:none}
.ev.filtered-out{display:none}
.ev-time{font-family:var(--fm);font-size:9px;color:var(--ink5);white-space:nowrap;margin-top:2px;min-width:52px}
.ev-cat{font-family:var(--fm);font-size:8px;padding:2px 7px;border-radius:3px;flex-shrink:0;margin-top:2px;font-weight:500;white-space:nowrap;cursor:pointer;transition:opacity .18s}
.ev-cat:hover{opacity:.7}
.cs{background:var(--red4);color:var(--red)}.ce{background:var(--green4);color:var(--green)}
.cg{background:var(--blue4);color:var(--blue)}.cc{background:var(--amber4);color:var(--amber)}
.cn{background:var(--orange4);color:var(--orange)}
.ev-title{font-family:var(--ff);font-size:12.5px;font-weight:700;color:var(--ms-ink);line-height:1.35;margin-bottom:2px}
.ev-src{font-family:var(--fm);font-size:9px;color:var(--ink5)}

/* ── EVENT FILTER PILLS ── */
.ev-filters{display:flex;gap:5px;flex-wrap:wrap}
.ef-pill{font-family:var(--fm);font-size:8px;padding:3px 9px;border-radius:100px;border:1px solid var(--border2);cursor:pointer;transition:all .18s;background:none;color:var(--ink4);letter-spacing:.05em}
.ef-pill:hover{border-color:var(--amber);color:var(--amber)}
.ef-pill.active-cs{background:var(--red4);border-color:var(--red);color:var(--red)}
.ef-pill.active-ce{background:var(--green4);border-color:var(--green);color:var(--green)}
.ef-pill.active-cg{background:var(--blue4);border-color:var(--blue);color:var(--blue)}
.ef-pill.active-cc{background:var(--amber4);border-color:var(--amber);color:var(--amber)}
.ef-pill.active-all{background:var(--bg3);border-color:var(--border2);color:var(--ink3)}

/* ── BARO ── */
.baro{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.baro-lbl{font-family:var(--fb);font-size:12px;color:var(--ink3);width:138px;flex-shrink:0}
.baro-track{flex:1;height:9px;background:var(--bg3);border-radius:5px;overflow:hidden}
.baro-fill{height:100%;border-radius:5px;transition:width .8s}
.baro-val{font-family:var(--fm);font-size:11px;font-weight:500;width:30px;text-align:right;flex-shrink:0}

/* ── MACRO ── */
.macro-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--ms-border)}
.macro-row:last-child{border-bottom:none}
.macro-lbl{font-family:var(--fb);font-size:12px;color:var(--ink3)}
.macro-val{font-family:var(--fm);font-size:12.5px;font-weight:500}

/* ── STAT CARDS ── */
.stat{background:var(--wh);border:1px solid var(--border2);border-radius:10px;padding:14px 16px;text-align:center;box-shadow:var(--shadow)}
.stat-n{font-family:var(--fm);font-size:26px;font-weight:500;line-height:1;margin-bottom:5px}
.stat-l{font-family:var(--fb);font-size:11px;color:var(--ink4)}
.stat-d{font-family:var(--fm);font-size:9.5px;margin-top:3px}

/* ── ENERGY SECTION ── */
.energy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.en-card{background:var(--wh2);border:1px solid var(--ms-border);border-radius:8px;padding:12px 14px;transition:all .15s}
.en-card:hover{border-color:var(--orange);background:var(--orange3)}
.en-ico{font-size:22px;margin-bottom:6px}
.en-name{font-family:var(--fb);font-size:12px;font-weight:600;color:var(--ink2)}
.en-unit{font-family:var(--fm);font-size:8px;color:var(--ink5);margin-bottom:4px}
.en-val{font-family:var(--fm);font-size:20px;font-weight:500;transition:color .4s}
.en-chg{font-family:var(--fm);font-size:10px;font-weight:500;margin-top:2px}

/* ── CLIMATE SECTION ── */
.clim-alert{display:flex;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--ms-border);background:var(--wh2);margin-bottom:8px;cursor:default;transition:background .15s}
.clim-alert:hover{background:var(--teal3);border-color:var(--teal)}
.clim-sev{font-family:var(--fm);font-size:8px;padding:2px 7px;border-radius:3px;flex-shrink:0;margin-top:2px;font-weight:500}
.clim-sev.high{background:var(--red4);color:var(--red)}
.clim-sev.med{background:var(--amber4);color:var(--amber)}
.clim-sev.low{background:var(--green4);color:var(--green)}
.clim-title{font-family:var(--ff);font-size:12.5px;font-weight:700;color:var(--ms-ink)}
.clim-desc{font-family:var(--fb);font-size:11px;color:var(--ink4);margin-top:2px}

/* ── SPARK ── */
.spark-svg{display:block}

/* ── FLASH ── */
@keyframes flash{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}
.data-flash{animation:flash .5s ease}

/* ── FOOTER ── */
.foot{background:var(--ink2);color:rgba(255,255,255,.4);padding:13px 24px;display:flex;align-items:center;justify-content:space-between;font-family:var(--fm);font-size:9.5px;flex-wrap:wrap;gap:10px}

/* ── ANIM ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.card,.map-wrap,.stat,.en-card{animation:fadeUp .3s ease both}
.view-section{animation:fadeIn .25s ease both}

@media(max-width:1200px){.gmap,.gevents{grid-template-columns:1fr}.g3{grid-template-columns:1fr 1fr}.energy-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.g2,.g3,.g4{grid-template-columns:1fr}.page{padding:12px 12px 40px}.mast-inner{padding:0 12px}.nav-pills{display:none}.energy-grid{grid-template-columns:1fr 1fr}}