/* ============ Cap sur Kinshasa — feuille de style ============ */
:root{
  --sand:#F5ECD9; --cream:#FBF5E9; --ink:#1A1410;
  --terra:#C75B39; --terra-2:#E07A3E; --gold:#E8B24A; --gold-soft:#F1C76B;
  --forest:#16271E; --forest-2:#1E3A2C;
  --ok:#52A862; --vigilance:#E8A13A; --danger:#DD5046;
  --panel-bg:#16120E; --panel-glass:rgba(22,18,14,.86);
  --line:rgba(245,236,217,.14);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --r:16px;
  --font-d:'Fraunces',Georgia,serif; --font-b:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--font-b); color:var(--cream); background:#0c0a08;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
#map{position:fixed; inset:0; background:#0c0a08; z-index:1}

/* ---- Tuiles & route ---- */
.leaflet-container{background:#0c0a08; font-family:var(--font-b)}
.leaflet-control-attribution{background:rgba(0,0,0,.5)!important; color:#bbb!important; font-size:10px}
.leaflet-control-attribution a{color:#ddd!important}
.leaflet-bar a{background:#1c1712; color:var(--cream); border-color:#000}
.leaflet-bar a:hover{background:#2a2118}

/* ---- En-tête ---- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; gap:18px; padding:12px 18px;
  background:linear-gradient(180deg,rgba(12,10,8,.95) 0%,rgba(12,10,8,.6) 70%,transparent 100%);
  pointer-events:none; z-index:1200;
}
.topbar > *{pointer-events:auto}
.topbar__brand{display:flex; align-items:center; gap:11px}
.topbar__compass{font-size:30px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.topbar__title{font-family:var(--font-d); font-weight:900; font-size:24px; margin:0; line-height:1; letter-spacing:.2px;
  background:linear-gradient(92deg,var(--gold-soft),var(--terra-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.topbar__sub{margin:2px 0 0; font-size:12px; color:#cdbfa6; letter-spacing:.4px; text-transform:uppercase}
.topbar__stats{display:flex; gap:10px; margin-left:6px; flex:1; flex-wrap:wrap}
.stat{background:rgba(245,236,217,.06); border:1px solid var(--line); border-radius:12px; padding:6px 12px; backdrop-filter:blur(8px)}
.stat b{font-family:var(--font-d); font-size:17px; color:var(--gold-soft); display:block; line-height:1}
.stat span{font-size:10.5px; color:#bcae95; text-transform:uppercase; letter-spacing:.4px}
.topbar__actions{display:flex; align-items:center; gap:8px}

.seg{display:flex; background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:11px; padding:3px}
.seg__btn{font-family:var(--font-b); font-size:12.5px; font-weight:600; color:#cdbfa6; background:none; border:none; padding:6px 12px; border-radius:8px; cursor:pointer; transition:.18s}
.seg__btn.is-active{background:linear-gradient(92deg,var(--terra),var(--terra-2)); color:#fff; box-shadow:0 4px 14px rgba(199,91,57,.4)}

.iconbtn{width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:rgba(0,0,0,.35); color:var(--cream);
  font-size:16px; cursor:pointer; backdrop-filter:blur(8px); transition:.18s; display:grid; place-items:center}
.iconbtn:hover{background:rgba(232,178,74,.18); border-color:var(--gold)}

/* ---- Légende ---- */
.legend{position:fixed; left:18px; bottom:142px; z-index:900; display:flex; flex-direction:column; gap:5px;
  background:var(--panel-glass); border:1px solid var(--line); border-radius:12px; padding:9px 12px; font-size:11.5px; color:#d8ccb4; backdrop-filter:blur(10px)}
.legend .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle}
.dot--ok{background:var(--ok)} .dot--vigilance{background:var(--vigilance)} .dot--danger{background:var(--danger)}

/* ---- Marqueurs route ---- */
.pin{width:30px; height:30px; border-radius:50% 50% 50% 4px; transform:rotate(45deg);
  display:grid; place-items:center; box-shadow:0 5px 14px rgba(0,0,0,.55); border:2px solid #fff5e2; cursor:pointer; transition:.18s}
.pin b{transform:rotate(-45deg); font-family:var(--font-d); font-weight:700; font-size:13px; color:#fff}
.pin--ok{background:linear-gradient(150deg,#5fbf70,#3c7f49)}
.pin--vigilance{background:linear-gradient(150deg,#f0b454,#d2832a)}
.pin--danger{background:linear-gradient(150deg,#e8675c,#b8322a)}
.pin--final{background:linear-gradient(150deg,var(--gold),var(--terra)); width:40px; height:40px; border-color:var(--gold-soft); box-shadow:0 0 0 4px rgba(232,178,74,.3),0 6px 18px rgba(0,0,0,.6)}
.pin--final b{font-size:18px}
.pin-wrap:hover .pin{transform:rotate(45deg) scale(1.18)}
.pin-wrap.is-active .pin{transform:rotate(45deg) scale(1.25); box-shadow:0 0 0 5px rgba(232,178,74,.45),0 8px 20px rgba(0,0,0,.6)}

.hl-dot{width:14px; height:14px; border-radius:50%; background:var(--gold); border:2.5px solid #2a1d10; box-shadow:0 3px 8px rgba(0,0,0,.5); cursor:pointer; transition:.15s}
.hl-dot:hover{transform:scale(1.4); background:#fff}

/* popups Leaflet */
.leaflet-popup-content-wrapper{background:var(--panel-bg); color:var(--cream); border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow)}
.leaflet-popup-tip{background:var(--panel-bg)}
.leaflet-popup-content{margin:0; width:230px!important}
.pop img{width:100%; height:120px; object-fit:cover; border-radius:13px 13px 0 0; display:block}
.pop__b{padding:10px 12px}
.pop__b h4{margin:0 0 3px; font-family:var(--font-d); font-size:15px; color:var(--gold-soft)}
.pop__b p{margin:0; font-size:12px; line-height:1.4; color:#c9bca2}

/* ---- Panneau pays ---- */
.panel{
  position:fixed; top:58px; right:0; height:calc(100% - 58px); width:430px; max-width:92vw; z-index:1100;
  background:var(--panel-glass); backdrop-filter:blur(20px); border-left:1px solid var(--line);
  box-shadow:var(--shadow); transform:translateX(106%); transition:transform .42s cubic-bezier(.22,1,.36,1);
  overflow-y:auto; overscroll-behavior:contain;
}
.panel.is-open{transform:translateX(0)}
.panel::-webkit-scrollbar{width:9px} .panel::-webkit-scrollbar-thumb{background:rgba(232,178,74,.3); border-radius:8px}

.p-hero{position:relative; height:230px; background:#221a12}
.p-hero img{width:100%; height:100%; object-fit:cover; display:block}
.p-hero__grad{position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,10,8,.15) 0%,rgba(12,10,8,.2) 45%,rgba(22,18,14,.95) 100%)}
.p-hero__top{position:absolute; top:14px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:flex-start}
.p-close{width:36px; height:36px; border-radius:50%; border:none; background:rgba(0,0,0,.5); color:#fff; font-size:16px; cursor:pointer; backdrop-filter:blur(6px)}
.p-close:hover{background:var(--terra)}
.p-num{font-family:var(--font-d); font-weight:700; font-size:13px; color:#241a10; background:var(--gold); border-radius:20px; padding:5px 12px}
.p-hero__ttl{position:absolute; left:18px; right:18px; bottom:14px}
.p-flag{font-size:30px; line-height:1}
.p-hero__ttl h2{font-family:var(--font-d); font-weight:900; font-size:30px; margin:2px 0 4px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6)}
.p-role{font-size:13.5px; color:#e6d8bf; line-height:1.45; margin:0}

.p-body{padding:18px 18px 30px}
.p-badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:6px 11px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.04)}
.badge--ok{color:#8fe0a0; border-color:rgba(82,168,98,.4)} .badge--vigilance{color:#f3c579; border-color:rgba(232,161,58,.4)} .badge--danger{color:#f1948c; border-color:rgba(221,80,70,.45)}
.badge--time{color:var(--gold-soft); border-color:rgba(232,178,74,.35); transition:.2s}
.badge--on{background:linear-gradient(92deg,var(--terra),var(--terra-2)); color:#fff; border-color:transparent; box-shadow:0 4px 13px rgba(199,91,57,.45)}
.badge--km{color:#cdbfa6}

.sect{margin:18px 0 0}
.sect__h{font-family:var(--font-d); font-size:13px; letter-spacing:.6px; text-transform:uppercase; color:var(--gold-soft); margin:0 0 9px; display:flex; align-items:center; gap:7px}
.sect__h::after{content:""; flex:1; height:1px; background:var(--line)}
.sect__note{font-weight:400; text-transform:none; letter-spacing:0; font-size:10.5px; color:#a99c83}

/* coûts de l'étape */
.costs{display:flex; flex-direction:column; gap:8px}
.costrow{display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.035); transition:.2s}
.costrow.is-on{background:linear-gradient(100deg,rgba(199,91,57,.16),rgba(232,178,74,.1)); border-color:rgba(232,178,74,.45)}
.cr-mode{font-weight:600; font-size:13px; color:var(--cream); white-space:nowrap}
.cr-calc{flex:1; text-align:center; font-size:11.5px; color:#a99c83}
.cr-tot{font-family:var(--font-d); font-weight:700; font-size:16px; color:var(--gold-soft); white-space:nowrap}
.costrow.is-on .cr-tot{color:#fff}
.costcum{margin:9px 2px 0; font-size:11.5px; color:#a99c83; line-height:1.4}
.costcum b{color:var(--gold-soft)}

.kv{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.kv__c{background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.kv__c .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:#a99c83; display:flex; align-items:center; gap:5px}
.kv__c .v{font-size:13.5px; color:var(--cream); margin-top:3px; font-weight:600}

.info-row{font-size:13px; line-height:1.5; color:#ddd1ba; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:8px}
.info-row b{color:var(--gold-soft); font-weight:600}
.info-row--me{background:linear-gradient(100deg,rgba(82,168,98,.16),rgba(232,178,74,.08)); border-color:rgba(82,168,98,.4); color:#e9f5e4; font-weight:500}
.info-row--res{background:linear-gradient(100deg,rgba(199,91,57,.12),rgba(232,178,74,.06)); border-color:rgba(232,178,74,.3)}

/* rythme villes/jours */
.stops{display:flex; flex-direction:column; gap:0; position:relative; padding-left:6px}
.stop{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px 9px 22px; position:relative; border-left:2px solid rgba(232,178,74,.35)}
.stop::before{content:""; position:absolute; left:-6px; top:50%; transform:translateY(-50%); width:11px; height:11px; border-radius:50%; background:var(--gold); border:2px solid #16120e}
.stop:last-child{border-left-color:transparent}
.stop__city{font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--cream)}
.stop__days{font-size:12px; color:var(--gold-soft); font-weight:600; white-space:nowrap}

/* encadré avertissement modale */
.warnbox{display:flex; gap:12px; align-items:flex-start; margin-top:18px; background:linear-gradient(100deg,rgba(221,80,70,.16),rgba(232,161,58,.08)); border:1px solid rgba(221,80,70,.4); border-radius:14px; padding:13px 15px}
.warnbox span{font-size:20px} .warnbox p{font-size:13px; line-height:1.55; color:#f0e0d6}

.hl-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.hl-card{background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:.2s}
.hl-card:hover{transform:translateY(-3px); border-color:var(--gold); box-shadow:0 10px 24px rgba(0,0,0,.4)}
.hl-card__img{height:96px; background:linear-gradient(135deg,var(--forest-2),var(--terra)); position:relative}
.hl-card__img img{width:100%; height:100%; object-fit:cover; display:block}
.hl-card__noimg{position:absolute; inset:0; display:grid; place-items:center; font-size:26px; opacity:.6}
.hl-card__b{padding:9px 11px}
.hl-card__b h5{margin:0 0 3px; font-size:13px; font-family:var(--font-d); font-weight:600; color:#fff; line-height:1.15}
.hl-card__b p{margin:0; font-size:11.5px; color:#c2b598; line-height:1.35}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:12px; color:#e6d8bf; background:rgba(232,178,74,.1); border:1px solid rgba(232,178,74,.25); border-radius:18px; padding:5px 11px}
.chip .ar{color:var(--terra-2); margin:0 2px}

.tip{margin-top:18px; display:flex; gap:11px; background:linear-gradient(100deg,rgba(199,91,57,.18),rgba(232,178,74,.1)); border:1px solid rgba(232,178,74,.3); border-radius:14px; padding:13px 14px}
.tip__i{font-size:20px} .tip__t{font-size:13px; line-height:1.5; color:#f0e4cd}
.tip__t b{color:var(--gold-soft)}

.p-nav{display:flex; gap:9px; margin-top:22px}
.p-nav button{flex:1; font-family:var(--font-b); font-weight:600; font-size:12.5px; color:var(--cream); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:11px; padding:11px; cursor:pointer; transition:.18s}
.p-nav button:hover:not(:disabled){background:rgba(232,178,74,.18); border-color:var(--gold)}
.p-nav button:disabled{opacity:.3; cursor:default}

/* ---- Bandeau timeline ---- */
.strip{
  position:fixed; left:0; right:0; bottom:0; z-index:950; display:flex; gap:10px; padding:14px 18px 16px;
  overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;
  background:linear-gradient(0deg,rgba(12,10,8,.95) 0%,rgba(12,10,8,.7) 70%,transparent 100%);
  scrollbar-width:thin;
}
.strip::-webkit-scrollbar{height:7px} .strip::-webkit-scrollbar-thumb{background:rgba(232,178,74,.35); border-radius:8px}
.scard{
  flex:0 0 auto; width:158px; background:rgba(245,236,217,.05); border:1px solid var(--line); border-radius:14px;
  padding:11px 13px; cursor:pointer; transition:.2s; backdrop-filter:blur(8px); position:relative; overflow:hidden;
}
.scard:hover{transform:translateY(-4px); border-color:var(--gold)}
.scard.is-active{border-color:var(--gold); background:rgba(232,178,74,.14); box-shadow:0 8px 22px rgba(0,0,0,.4)}
.scard__top{display:flex; align-items:center; gap:8px}
.scard__num{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-d); font-weight:700; font-size:11px; color:#fff; flex:0 0 auto}
.scard__num--ok{background:var(--ok)} .scard__num--vigilance{background:var(--vigilance)} .scard__num--danger{background:var(--danger)}
.scard__flag{font-size:17px}
.scard__name{font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--cream); margin:7px 0 2px; line-height:1.1}
.scard__meta{display:flex; justify-content:space-between; font-size:11px; color:#a99c83}
.scard__meta b{color:var(--gold-soft); font-weight:600}
.scard--final{background:linear-gradient(135deg,rgba(232,178,74,.18),rgba(199,91,57,.16)); border-color:rgba(232,178,74,.4)}

/* ---- Modale ---- */
.modal{position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(6,5,3,.78); backdrop-filter:blur(6px)}
.modal.is-open{display:flex}
.modal__card{position:relative; width:min(720px,96vw); max-height:88vh; overflow-y:auto; background:var(--panel-bg);
  border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:30px 30px 34px}
.modal__close{position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.08); color:#fff; font-size:15px; cursor:pointer}
.modal__close:hover{background:var(--terra)}
.modal h2{font-family:var(--font-d); font-weight:900; font-size:27px; margin:0 0 4px; color:var(--gold-soft)}
.modal h3{font-family:var(--font-d); font-size:16px; color:var(--terra-2); margin:24px 0 10px; letter-spacing:.3px}
.modal p{font-size:13.5px; line-height:1.6; color:#d8ccb4}
.sc-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
.sc-card{border:1px solid var(--line); border-radius:16px; padding:16px; background:rgba(255,255,255,.03)}
.sc-card h4{font-family:var(--font-d); font-size:16px; margin:0 0 8px; color:var(--cream)}
.sc-card .big{font-family:var(--font-d); font-size:22px; color:var(--gold-soft); font-weight:700}
.sc-card .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#a99c83; margin-top:8px}
.rules{list-style:none; padding:0; margin:8px 0 0; display:grid; gap:8px}
.rules li{font-size:13px; color:#e0d4bd; padding-left:26px; position:relative; line-height:1.5}
.rules li::before{content:"➜"; position:absolute; left:0; color:var(--terra-2)}
.credit{margin-top:24px; font-size:11.5px; color:#8b8068; border-top:1px solid var(--line); padding-top:14px; line-height:1.6}

/* ---- Intro ---- */
.intro{position:fixed; inset:0; z-index:3000; display:grid; place-items:center; text-align:center; padding:24px;
  background:radial-gradient(120% 90% at 50% 10%,#23170d 0%,#0c0a08 70%); transition:opacity .7s, visibility .7s}
.intro.is-hidden{opacity:0; visibility:hidden}
.intro__inner{max-width:560px; animation:rise .9s cubic-bezier(.22,1,.36,1)}
@keyframes rise{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}
.intro__compass{font-size:62px; display:inline-block; animation:sway 4s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.intro__title{font-family:var(--font-d); font-weight:900; font-size:clamp(40px,8vw,72px); margin:8px 0 6px; line-height:1;
  background:linear-gradient(96deg,var(--gold-soft),var(--terra-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.intro__tagline{font-size:clamp(15px,2.4vw,19px); color:#e3d6bd; margin:0 0 4px; font-weight:500}
.intro__crew{font-size:13.5px; color:#a99c83; margin:0 0 26px}
.intro__btn{font-family:var(--font-b); font-weight:700; font-size:16px; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(95deg,var(--terra),var(--terra-2)); padding:15px 30px; border-radius:40px; box-shadow:0 12px 34px rgba(199,91,57,.5); transition:.2s}
.intro__btn:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 16px 40px rgba(199,91,57,.6)}
.intro__hint{margin-top:20px; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#7d735d}

/* ---- Responsive ---- */
@media (max-width:760px){
  .topbar{flex-wrap:wrap; gap:10px; padding:10px 12px}
  .topbar__stats{order:3; width:100%; margin:0}
  .stat{padding:5px 9px} .stat b{font-size:14px}
  .topbar__title{font-size:20px}
  .panel{width:100%; max-width:100%; top:auto; bottom:0; height:86vh; border-left:none; border-top:1px solid var(--line);
    border-radius:22px 22px 0 0; transform:translateY(106%)}
  .panel.is-open{transform:translateY(0)}
  .legend{bottom:206px; left:12px}
  .hl-grid{grid-template-columns:1fr 1fr}
  .strip{padding:10px 12px 12px}
  .scard{width:140px}
}
@media (max-width:420px){ .kv{grid-template-columns:1fr} }