:root{--primaire:#1e3a8a;--primaire2:#2563eb;--accent:#f59e0b;--vert:var(--primaire);--vert2:var(--primaire2);--fond:#f4f6fb;--carte:#fff;--texte:#0f172a;--gris:#64748b;--bord:#e2e8f0;--rouge:#b91c1c;--r:14px;--ombre:0 1px 2px rgba(15,23,42,.06),0 6px 18px rgba(15,23,42,.07)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fond);color:var(--texte);line-height:1.45}
a{color:var(--primaire2)}
main{flex:1;width:100%;max-width:1100px;margin:auto;padding:20px 16px}
h1{font-size:1.5rem;margin:.2em 0 .6em}h2{font-size:1.25rem;margin:1.6em 0 .6em}

/* en-tête + menu hamburger */
.entete{background:#fff;border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:20}
.entete .in{max-width:1100px;margin:auto;padding:12px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.entete .logo{font-weight:800;font-size:1.25rem;color:var(--primaire);text-decoration:none}
.entete nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.entete nav a{color:var(--texte);text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:500}
.entete nav a:hover{background:var(--fond)}
.entete nav a.actif{color:var(--primaire);background:#e8eeff}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--bord);border-radius:10px;padding:10px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--texte);margin:4px 0;border-radius:2px;transition:transform .2s,opacity .2s}
.entete.ouvert .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.entete.ouvert .burger span:nth-child(2){opacity:0}
.entete.ouvert .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:760px){
  .burger{display:block}
  .entete nav{display:none;width:100%;flex-direction:column;align-items:stretch;margin:0;padding-bottom:8px}
  .entete.ouvert nav{display:flex}
  .entete nav a{padding:12px}
}

/* bandeau d'accueil + recherche */
.hero{position:relative;color:#fff;padding:72px 16px 60px;background:linear-gradient(135deg,#0f2557,#1e3a8a 55%,#2563eb)}
.hero::before{content:"";position:absolute;inset:0;background:url(/img/hero.jpg) center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.55),rgba(15,23,42,.78))}
.hero .in{position:relative;z-index:1;max-width:1100px;margin:auto}
.hero h1{font-size:clamp(1.8rem,5vw,3rem);margin:0 0 .3em;color:#fff;line-height:1.15}
.hero p{margin:0 0 26px;opacity:.95;max-width:620px;font-size:1.05rem}
.barre{position:relative;max-width:860px}
.barre svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--gris);pointer-events:none}
.hero .barre input[type=search]{width:100%;padding:18px 20px 18px 52px;font-size:1.08rem;border:0;border-radius:999px;background:#fff;color:var(--texte);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hero .barre input[type=search]:focus{outline:3px solid var(--accent)}
.options{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;max-width:860px;align-items:center}
.hero .options .verre{flex:1 1 150px;width:auto;min-width:0;padding:11px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(4px)}
.hero .options .verre::placeholder{color:rgba(255,255,255,.75)}
.hero .options input[type=date]{color-scheme:dark}
.hero .options select.verre option{color:#0f172a}
.hero .options .verre:focus{outline:2px solid var(--accent)}
.chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;padding:11px 16px;cursor:pointer;font-weight:600}
.chip:hover{background:rgba(255,255,255,.26)}.chip.on{background:#fff;color:var(--primaire)}
#posEtat{font-size:.85rem;opacity:.9}
.logo{display:inline-flex;align-items:center;gap:8px}
#carte{height:420px;border-radius:var(--r);border:1px solid var(--bord);position:relative;z-index:0;box-shadow:var(--ombre)}
.pin{display:block;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.45)}
.leaflet-popup-content{margin:12px 14px}.leaflet-popup-content b{display:block;margin-bottom:2px}.leaflet-popup-content .btn{margin-top:8px;padding:7px 12px;font-size:.85rem}

/* pied de page */
.pied-site{background:#0f172a;color:#cbd5e1;margin-top:40px}
.pied-site .in{max-width:1100px;margin:auto;padding:32px 16px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pied-site h3{color:#fff;font-size:1rem;margin:0 0 10px}
.pied-site a{color:#cbd5e1;text-decoration:none;display:block;padding:3px 0}.pied-site a:hover{color:#fff;text-decoration:underline}
.pied-site p{margin:0;font-size:.92rem}
.pied-site .copy{border-top:1px solid #1e293b;text-align:center;padding:14px 16px;font-size:.85rem;color:#94a3b8}

/* composants */
.panneau{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:16px}
.grille{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.filtres{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}
label{display:block;font-size:.8rem;color:var(--gris);margin-bottom:3px}
input,select,button,textarea{font:inherit}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=password],input[type=search],input[type=number],select{width:100%;padding:10px 12px;border:1px solid var(--bord);border-radius:10px;background:#fff}
input:focus,select:focus{outline:2px solid var(--primaire2);border-color:transparent}
.coches{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.coches label{display:flex;align-items:center;gap:6px;color:var(--texte);font-size:.95rem;margin:0}
.btn{display:inline-block;background:var(--primaire);color:#fff;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;text-decoration:none;font-weight:600}
.btn:hover{background:var(--primaire2)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.clair{background:#fff;color:var(--primaire);border:1px solid var(--primaire)}
.btn.clair:hover{background:#e8eeff}
.btn.danger{background:var(--rouge)}
.btn.bloc{display:block;width:100%;text-align:center}
.voyage{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--ombre);transition:transform .15s}
.voyage:hover{transform:translateY(-2px)}
.voyage img.photo{width:100%;height:140px;object-fit:cover;background:#e2e8f0}
.voyage .corps{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.voyage .ag{display:flex;align-items:center;gap:8px;color:var(--gris);font-size:.85rem}
.voyage .ag img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.voyage .trajet{font-weight:700;font-size:1.05rem}
.voyage .prix{font-weight:800;color:var(--primaire);font-size:1.15rem}
.voyage .pied{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:6px}
.badge{display:inline-block;font-size:.72rem;padding:2px 8px;border-radius:99px;background:#e8eeff;color:var(--primaire);margin-right:4px}
.badge.vip{background:#fef3c7;color:#92400e}.badge.ko{background:#fee2e2;color:var(--rouge)}
.agence{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:14px;text-align:center;cursor:pointer}
.agence:hover{border-color:var(--primaire2)}
.agence img,.agence .sans{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:auto;background:#e2e8f0;display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.agence b{display:block;margin-top:8px}.agence small{color:var(--gris)}
.vide,.erreur{text-align:center;color:var(--gris);padding:24px}
.erreur{color:var(--rouge)}
.msg{border-radius:10px;padding:10px 12px;margin:10px 0}.msg.ko{background:#fee2e2;color:var(--rouge)}.msg.ok{background:#e8eeff;color:var(--primaire)}
.chrono{font-size:1.3rem;font-weight:800;color:var(--primaire)}.chrono.fin{color:var(--rouge)}
.champs{display:grid;gap:12px}
.ligne{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--bord)}
.ligne:last-child{border:0}.ligne span:first-child{color:var(--gris)}
.centre{text-align:center}#qr{display:inline-block;padding:10px;background:#fff;border:1px solid var(--bord);border-radius:12px}
.code{font-size:1.4rem;font-weight:800;letter-spacing:.06em}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:90%}
#toast.on{opacity:1}
.attente{text-align:center;padding:24px;color:var(--gris)}
@media(min-width:700px){.deux{display:grid;grid-template-columns:1fr 1fr;gap:16px}}

/* suggestions d'agences + lien de bascule */
.barre{position:relative}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;color:#1b2540;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;z-index:20;max-height:320px;overflow:auto}
.suggest[hidden]{display:none}
.suggest .titre{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;padding:8px 10px 4px}
.suggest .sg{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;padding:8px 10px;border-radius:10px;cursor:pointer;font:inherit;color:inherit}
.suggest .sg:hover,.suggest .sg:focus{background:#eef2ff;outline:none}
.suggest .sg img,.suggest .ini{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.suggest .ini{display:grid;place-items:center;background:#dbe4ff;color:#1e3a8a;font-weight:700}
.suggest small{display:block;color:#6b7280}
.lien{border:0;background:none;color:#1e3a8a;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:0 0 0 6px}

/* pages voyage / agence */
.carte-mini{height:260px;border-radius:var(--r);border:1px solid var(--bord);position:relative;z-index:0;margin-top:12px}

/* logo d'agence dans le coin de la photo */
.vignette{position:relative}
.vignette .coin{position:absolute;top:10px;left:10px;width:46px;height:46px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}

/* en-tête : boutons d'action */
.entete nav .nav-actions{display:flex;gap:8px;align-items:center;margin-left:6px;padding-left:12px;border-left:1px solid var(--bord)}
.entete nav .btn-nav{display:inline-block;padding:8px 16px;border-radius:999px;border:1px solid var(--primaire);background:var(--primaire);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.entete nav .btn-nav:hover{background:var(--primaire2);border-color:var(--primaire2);color:#fff}
.entete nav .btn-nav.sortie{background:#fff;color:var(--primaire)}
.entete nav .btn-nav.sortie:hover{background:#e8eeff;color:var(--primaire)}
@keyframes glisse{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .entete .in{position:relative}
  .entete nav{position:absolute;left:0;right:0;top:100%;width:auto;background:#fff;border-bottom:1px solid var(--bord);box-shadow:0 14px 24px rgba(15,23,42,.12);padding:8px 16px 16px;gap:2px}
  .entete.ouvert nav{animation:glisse .18s ease-out}
  .entete nav a{padding:13px 12px}
  .entete nav .nav-actions{flex-direction:column;align-items:stretch;border-left:0;margin:10px 0 0;padding:12px 0 0;border-top:1px solid var(--bord)}
  .entete nav .btn-nav{text-align:center;padding:12px 16px}
}

/* pied de page */
.pied-site{margin-top:48px;background:#0b1220}
.pied-site .in{grid-template-columns:1.6fr 1fr 1fr 1fr;padding:40px 16px 28px}
.pied-site .logo-pied{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:1.25rem;margin-bottom:10px}
.pied-site .pied-marque p{max-width:340px;line-height:1.55}
.pied-site h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:12px}
.pied-site .in a{padding:5px 0}
.pied-site .copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;max-width:1100px;margin:auto;padding:16px}
@media(max-width:860px){.pied-site .in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pied-site .in{grid-template-columns:1fr}.pied-site .copy{flex-direction:column;text-align:center}}

/* menu mobile : « Se déconnecter » aligné comme les autres liens */
@media(max-width:760px){
  .entete nav button:not(.btn-nav){display:block;width:100%;text-align:left;margin:0;padding:13px 12px;border:0;border-radius:10px;background:none;color:var(--texte);font:inherit;font-weight:500;cursor:pointer}
  .entete nav button:not(.btn-nav):hover{background:var(--fond)}
}

/* « Se déconnecter » dans le menu */
.entete nav a.deco{color:var(--gris)}
.entete nav a.deco:hover{color:var(--rouge);background:#fee2e2}
@media(max-width:760px){
  .entete nav a.deco{margin-top:8px;padding-top:15px;border-top:1px solid var(--bord);border-radius:0 0 10px 10px;text-align:left}
}

/* paiement : opérateurs Mobile Money */
.ops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.op { display: flex; align-items: center; gap: 10px; padding: 12px; border: 2px solid #d9dde3; border-radius: 12px;
  background: #fff; color: #1b1f24; cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, box-shadow .15s, background .15s; }
.op b { display: block; font-size: 1rem; }
.op small { display: block; color: #6b7280; font-size: .8rem; }
.op .logo-op { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; }
.op.mtn .logo-op { background: #ffcc00; color: #000; }
.op.orange .logo-op { background: #ff7900; color: #fff; text-transform: lowercase; font-size: .72rem; }
.op.mtn.actif { border-color: #ffcc00; background: #fff9db; box-shadow: 0 0 0 3px rgba(255,204,0,.35); }
.op.orange.actif { border-color: #ff7900; background: #fff1e5; box-shadow: 0 0 0 3px rgba(255,121,0,.30); }
.tel-pref { display: flex; align-items: stretch; }
.tel-pref span { display: flex; align-items: center; padding: 0 12px; background: #eef0f3; color: #374151; border: 1px solid #d9dde3; border-right: 0; border-radius: 8px 0 0 8px; font-weight: 600; }
.tel-pref input { border-radius: 0 8px 8px 0 !important; flex: 1; min-width: 0; }
#etapePaiement #montant { font-size: 1.35rem; }
#etapePaiement[data-op="MTN"] #btnPayer { background: #ffcc00; color: #000; border-color: #ffcc00; font-weight: 700; }
#etapePaiement[data-op="ORANGE"] #btnPayer { background: #ff7900; color: #fff; border-color: #ff7900; font-weight: 700; }
#etapePaiement #btnPayer:disabled { opacity: .55; }
@media (max-width: 420px) { .ops { grid-template-columns: 1fr; } }