/* Kousvit — estil pataje (wouj premium #D32F2F + nwa), mobile-first */
:root{
  --jon:#D32F2F; --jon-fonce:#B71C1C; --nwa:#141414; --nwa2:#1F1F1F;
  --blan:#FFFFFF; --gri:#F4F4F4; --gri-bò:#E0E0E0; --tèks:#222; --tèks-feb:#777;
  --vèt:#1B9E57; --wouj:#D32F2F; --wouj-fonce:#B71C1C; --ble:#1976D2;
  --lonbraj:0 2px 10px rgba(0,0,0,.12); --lonbraj-wouj:0 4px 14px rgba(211,47,47,.35);
  --reyon:12px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--gri); color:var(--tèks); font-size:16px; line-height:1.45;
}
.kontene{max-width:480px;margin:0 auto;min-height:100vh;background:var(--blan);
  display:flex;flex-direction:column;position:relative;}
/* Antèt */
.antet{background:var(--nwa);color:var(--blan);padding:14px 16px;
  display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;
  border-bottom:3px solid var(--wouj);}
.antet .logo{width:38px;height:38px;border-radius:10px;background:var(--wouj);
  color:#fff;font-weight:900;font-size:22px;display:flex;align-items:center;
  justify-content:center;flex:none;box-shadow:var(--lonbraj-wouj);}
.antet h1{font-size:17px;margin:0;font-weight:800;letter-spacing:.5px;}
.antet h1 span{color:var(--jon);}
.antet .sou-tit{font-size:11px;color:#BBB;margin:0;}
.antet .espas{flex:1;}
/* Selektè lang */
.selekte-lang{display:flex;gap:4px;}
/* Wonn KOREK-PREZANTASYON: pil lang yo = sib taktil >= 48px (anvan ~22px). */
.selekte-lang button{background:transparent;border:1px solid #555;color:#DDD;
  border-radius:6px;padding:0 10px;min-height:48px;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;cursor:pointer;}
.selekte-lang button.aktif{background:var(--jon);border-color:var(--jon);color:#fff;}
/* Kò */
.kò{flex:1;padding:16px;padding-bottom:90px;}
.kat{background:var(--blan);border:1px solid var(--gri-bò);border-radius:var(--reyon);
  padding:14px;margin-bottom:12px;box-shadow:var(--lonbraj);}
.kat h2,.kat h3{margin:0 0 10px;font-size:16px;}
.tit-jon{border-left:5px solid var(--jon);padding-left:10px;}
/* Bouton */
.btn{display:block;width:100%;padding:14px;border:none;border-radius:var(--reyon);
  font-size:16px;font-weight:800;cursor:pointer;text-align:center;text-decoration:none;
  transition:transform .1s, box-shadow .2s;
  /* Wonn KOREK-PREZANTASYON: bouton estanda >= 52px wotè toupatou (anvan ~47px). */
  min-height:52px;}
.btn:active{transform:scale(.98);}
.btn-jon{background:var(--jon);color:#fff;box-shadow:var(--lonbraj-wouj);}
.btn-jon:active{background:var(--jon-fonce);}
.btn-nwa{background:var(--nwa);color:var(--blan);}
.btn-blan{background:var(--blan);color:var(--nwa);border:2px solid var(--nwa);}
.btn-vèt{background:var(--nwa);color:#fff;}
.btn-wouj{background:var(--wouj);color:#fff;box-shadow:var(--lonbraj-wouj);}
.btn-gri{background:var(--gri-bò);color:var(--tèks);}
.btn-gwo{padding:18px;font-size:18px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.ranje{display:flex;gap:8px;}
.ranje .btn{flex:1;}
/* Fòmilè */
label{display:block;font-size:13px;font-weight:700;margin:10px 0 4px;color:#444;}
input,select,textarea{width:100%;padding:12px;border:1.5px solid var(--gri-bò);
  border-radius:10px;font-size:16px;background:#fff;color:var(--tèks);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--jon);
  box-shadow:0 0 0 3px rgba(211,47,47,.15);}
.erè{color:var(--wouj);font-size:13px;margin-top:6px;min-height:18px;}
.siksè{color:var(--vèt);font-size:13px;margin-top:6px;}
/* Badj estati */
.badj{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:800;}
.badj-jon{background:#FFEBEE;color:#B71C1C;}
.badj-vèt{background:#D4EDDA;color:#155724;}
.badj-wouj{background:#F8D7DA;color:#721C24;}
.badj-gri{background:#E2E3E5;color:#383D41;}
.badj-ble{background:#D1ECF1;color:#0C5460;}
/* Lis */
.lis-ranje{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--gri-bò);}
.lis-ranje:last-child{border-bottom:none;}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--nwa);color:var(--jon);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;flex:none;}
/* Navigasyon anba */
.nav-anba{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;
  max-width:480px;background:var(--nwa);display:flex;z-index:60;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  border-top:2px solid var(--wouj);}
.nav-anba a{flex:1;text-align:center;color:#AAA;text-decoration:none;font-size:10px;
  padding:6px 2px;font-weight:700;min-width:0;overflow:hidden;}
.nav-anba a .ikòn{font-size:20px;display:block;margin-bottom:2px;}
/* Wonn 252: etikèt lyen nav-anba yo (egz. « Se déconnecter ») pa depase
   lyen yo ni ekran an ankò sou ti lajè — yo koupe pwòp ak « … » si yo
   pa antre, olye yo pouse paj la deyò (mezire: +5 a +7px sou 360–430). */
.nav-anba a span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-anba a.aktif{color:var(--jon);}
/* Kat Leaflet */
#kat{height:320px;border-radius:var(--reyon);z-index:1;}
#kat.gran{height:420px;}
.lejann{background:rgba(20,20,20,.85);color:#fff;border-radius:8px;padding:6px 10px;
  font-size:12px;font-weight:700;}
/* Zetwal */
.zetwal{font-size:34px;cursor:pointer;color:#CCC;letter-spacing:4px;}
.zetwal.chwazi,.zetwal.limyè{color:var(--jon);}
/* Chat */
.chat-bwat{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;
  padding:8px;background:var(--gri);border-radius:var(--reyon);}
.msg{max-width:80%;padding:9px 12px;border-radius:14px;font-size:14px;}
.msg-mwen{background:var(--jon);color:#fff;align-self:flex-end;}
.msg-li{background:#fff;border:1px solid var(--gri-bò);align-self:flex-start;}
.chat-antre{display:flex;gap:8px;margin-top:10px;}
.chat-antre input{flex:1;}
.chat-antre button{flex:none;width:52px;border-radius:10px;border:none;
  background:var(--nwa);color:var(--jon);font-size:20px;}
/* KPI */
.griy-kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.kpi{background:var(--nwa);color:#fff;border-radius:var(--reyon);padding:14px;
  border-top:3px solid var(--wouj);}
.kpi .valè{font-size:24px;font-weight:900;color:var(--jon);}
.kpi .etikèt{font-size:12px;color:#BBB;}
/* Tab */
.tab{display:flex;background:var(--gri);border-radius:10px;padding:4px;margin-bottom:12px;}
/* Wonn KOREK-PREZANTASYON: onglet yo >= 48px wotè (anvan ~36px). */
.tab button{flex:1;border:none;background:transparent;padding:10px;min-height:48px;font-weight:800;
  font-size:14px;border-radius:8px;cursor:pointer;color:var(--tèks-feb);}
.tab button.aktif{background:var(--nwa);color:var(--jon);}
/* Gwoup telefòn ak prefiks +509 fiks (wouj/nwa premium) */
.tel-gwoup{display:flex;align-items:stretch;width:100%;border:1.5px solid var(--gri-bò);
  border-radius:10px;background:#fff;overflow:hidden;}
.tel-gwoup:focus-within{border-color:var(--jon);box-shadow:0 0 0 3px rgba(211,47,47,.15);}
.tel-prefiks{display:flex;align-items:center;padding:0 14px;background:var(--nwa);color:#fff;
  font-weight:800;font-size:16px;flex:none;letter-spacing:.5px;border-right:2px solid var(--wouj);}
.tel-gwoup input{border:0;border-radius:0;flex:1;min-width:0;}
.tel-gwoup input:focus{outline:none;box-shadow:none;}
/* Pwogrè */
.pwogrè{height:8px;background:var(--gri-bò);border-radius:4px;overflow:hidden;}
.pwogrè div{height:100%;background:var(--jon);transition:width .5s;}
.santre{text-align:center;}
.ti-tèks{font-size:12px;color:var(--tèks-feb);}
.mt{margin-top:12px;} .mb{margin-bottom:12px;}
@media(min-width:520px){
  body{background:#DDD;}
  .kontene{box-shadow:0 0 30px rgba(0,0,0,.2);}
}

/* ===== Wonn 125: kouch PREMIUM (tout sifas: kliyan, chofè, patnè,
   branch, admin — menm estil.css la) ===== */
.hero-premium{background:linear-gradient(120deg,#0d0d0d 0%,#4a0d0d 52%,#D32F2F 135%);
  color:#fff;border-radius:18px;padding:20px 20px;margin:12px 12px 0;
  border:1px solid rgba(255,193,7,.45);
  box-shadow:0 12px 32px rgba(183,28,28,.35),0 4px 14px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:space-between;gap:10px;}
.hero-premium .mak{font-size:27px;font-weight:900;letter-spacing:3px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);}
.hero-premium .mak span{color:#FFC107;}
.hero-premium .eslogan{font-size:13.5px;opacity:.95;font-weight:700;margin-top:2px;}
.hero-premium .badj24{background:linear-gradient(135deg,#FFC107,#FF8F00);color:#141414;
  border-radius:999px;padding:6px 13px;font-size:13px;font-weight:900;
  white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.4);}
.kat{border-radius:16px !important;box-shadow:0 4px 18px rgba(0,0,0,.10) !important;}
.btn-wouj{background:linear-gradient(135deg,#E53935,#B71C1C) !important;
  box-shadow:0 4px 14px rgba(211,47,47,.35) !important;}
.nav-anba{box-shadow:0 -4px 18px rgba(0,0,0,.14) !important;}
.nav-anba a.aktif{color:#D32F2F !important;font-weight:800;}

/* WONN130 — Desktop plen lajè: mwens espas vid, fòm web sou òdinatè */
@media (min-width: 1024px){
  .kontene{max-width:1440px !important;}
  .kò{padding:26px 30px 90px;}
}

/* WONN212 — Antèt app yo sou telefòn: anyen pa koupe, anyen pa debòde.
   Si liy la pa antre, rès la desann sou yon 2e liy pwòp. */
@media (max-width: 640px){
  .antet{flex-wrap:wrap;row-gap:8px;padding:10px 12px;}
  .antet .espas{display:none;}
  .antet>div{min-width:0;}
  .antet h1{font-size:16px;}
  .selekte-lang{margin-left:auto;flex:none;}
}

/* ============================================================
   KOUSVIT — WONN213: KOUCH RESPONSIVE JENERIK PÈMANAN (NALA 2026-10-14)
   Règ pèmanan: telefòn kou laptop, tout bagay dwe parèt an antye,
   anyen pa dwe koupe — epi lè w ajoute yon lòt bagay, layout la
   dwe ranje tèt li OTOMATIKMAN, san reparasyon detanzantan.
   Règ sa yo JENERIK: nenpòt nouvo eleman (kat, tablo, bouton,
   banyè, imaj, fòmilè) eritye konpòtman an otomatikman.
   ADITIF SÈLMAN: yo pa retire ni defèt okenn lojik/estil ki egziste.
   ============================================================ */

/* 1) Debòdman orizontal: paj la pa janm defile sou kote.
      'clip' (pa 'hidden') pou position:sticky yo kontinye mache. */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

/* 2) Tout eleman rete anndan bwat li */
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas { max-width: 100%; height: auto; }
svg, iframe { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; }

/* 3) Kontenè flex yo: timoun yo ka retresi epi liy la vlope pwòp
      olye l debòde (kòz prensipal « Se co… » koupe yo) */
.antet, .ranje, .lis-ranje, .chat-antre, .tab, .selekte-lang,
.nav-anba, .hero-premium, .pz-ranje, .tel-gwoup { min-width: 0; }
.antet > *, .ranje > *, .lis-ranje > *, .chat-antre > *, .tab > *,
.nav-anba > *, .hero-premium > *, .pz-ranje > *, .griy-kpi > *,
.tel-gwoup > * { min-width: 0; }
.ranje { flex-wrap: wrap; }
.selekte-lang { flex-wrap: wrap; }

/* 4) Tablo: yo pa janm pouse paj la deyò — tablo a defile ANDEDAN
      pwòp bwat li sou ti ekran, epi li rete yon tablo nòmal sou laptop */
table { max-width: 100%; }
.tab-wrap, .tablo-vlope { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 860px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
}
@media print {
  table { display: table; overflow: visible; width: auto; }
}

/* 5) Tèks long (non, imèl, lyen, referans) vlope olye yo koupe paj la */
p, li, td, th, .kat, .kpi, .ti-tèks, .badj { overflow-wrap: break-word; }

/* 6) Bouton ak banyè sou telefòn: tèks la vlope, anyen pa koupe */
@media (max-width: 640px) {
  .hero-premium { flex-wrap: wrap; }
  .hero-premium .badj24 { white-space: normal; }
  .btn { white-space: normal; }
  .antet h1, .antet .sou-tit { overflow-wrap: break-word; }
}

/* 7) Gri yo: timoun yo pa janm fòse kolòn yo deyò ekran an */
.griy-kpi > *, .vwati-grid > *, .kat-grid > *, .etap-grid > *,
.griy-kat > *, .stats-andan > *, .pye-andan > * { min-width: 0; }

/* Wonn 225: garanti KOLE (paste) — chan tèks yo dwe toujou asepte
   seleksyon + kole (Ctrl+V, klik dwat, long-press) nan tout app yo. */
input, textarea { -webkit-user-select: text !important; user-select: text !important; }
/* Wonn 225: sou òdinatè (kote meni bò a egziste ak Senkronize +
   Dekonekte ladan l), bouton menm non ki anlè kontni app lokal la se
   DOUBLON — yo kache sou gwo ekran, yo rete sou ti ekran kote pa gen
   meni bò. Fonksyon yo pa retire: yo rete aksesib nan meni bò a. */
@media (min-width: 1024px) {
  .app-ba #bSenkro, .app-ba #bDekonekte { display: none !important; }
}

/* ===== WONN KAT (2026-10-17, lòd NALA — mezi pwofesyonèl): etikèt ba anba
   yo parèt NÈT sou tout app yo — yo vlope sou 2 liy si sa nesesè olye yo
   koupe ak « … » (anvan: « Histor… », « Se déc… » sou telefòn 390px).
   Tay lèt la 9.5px, espas yo mezire; ajisteman otomatik anplis nan
   app-kliyan.js / api-chofe.js pou mo ki pi long yo. ===== */
/* Wonn KOREK-PREZANTASYON: nav la desann a 6 atik (app-kliyan.js /
   api-chofe.js / paj estatik chofe yo) — etikèt yo gen plis plas: 10.5px. */
.nav-anba a{font-size:10.5px;padding:6px 1px;line-height:1.12;}
.nav-anba a .ikòn{font-size:19px;margin-bottom:1px;}
.nav-anba a span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.12;}

/* ===== Wonn KOREK-PREZANTASYON: chips peryòd yo (Istorik + Wallet) —
   anvan yo te <button> brit stil navigatè (~21px); kounye a chips stil
   app la, sib taktil >= 48px. Skope sou ID kontenè yo sèlman pou
   chips fèy rezèvasyon dashboard la (menm klas .chips-peman, lòt
   desen) pa janm afekte. Fonksyonalite v289 la pa manyen. ===== */
#filtChips, #walFiltChips{display:flex;flex-wrap:wrap;gap:8px;}
#filtChips .chip, #walFiltChips .chip{min-height:48px;padding:10px 16px;border-radius:999px;
  border:2px solid var(--nwa);background:#fff;color:var(--tèks);font-weight:700;font-size:14px;
  font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
#filtChips .chip.chwazi, #walFiltChips .chip.chwazi{background:var(--jon);border-color:var(--jon);color:#fff;}