:root{
  --ink:#142433;
  --ink-soft:#5B6B7A;
  --brand:#E8590C;
  --brand-dark:#C64510;
  --brand-tint:#FFF1E8;
  --green:#157F3C;
  --green-tint:#E8F6ED;
  --yellow:#FFB800;
  --deep:#0B3B60;
  --deep-2:#0A2E4D;
  --border:#E7E9EE;
  --radius:8px;
  --radius-lg:12px;
  --shadow:0 10px 26px -14px rgba(11,59,96,.22);
  --header-pad:1rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display-font{font-weight:900; letter-spacing:-.02em; color:var(--ink);}
.eyebrow{font-weight:800; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand);}
.text-brand{color:var(--brand)!important}
.text-green{color:var(--green)!important}
.bg-brand{background:var(--brand)!important}
a{text-decoration:none; color:inherit}
.btn-brand{background:var(--brand); border:1px solid var(--brand); color:#fff; font-weight:800; border-radius:8px; padding:.6rem 1.25rem; transition:.2s; white-space:nowrap;}
.btn-brand:hover{background:var(--brand-dark); border-color:var(--brand-dark); color:#fff;}
.btn-outline-deep{border:1.5px solid var(--border); color:var(--deep); font-weight:800; border-radius:8px; padding:.55rem 1.1rem; background:#fff;}
.btn-outline-deep:hover{background:var(--deep); color:#fff; border-color:var(--deep);}
.skip-link{position:absolute; left:-999px; top:0; background:var(--brand); color:#fff; padding:.6rem 1rem; z-index:2000;}
.skip-link:focus{left:10px; top:10px}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px;}
.section-pad{padding-top:3rem; padding-bottom:3rem}
@media (max-width:767.98px){ .section-pad{padding-top:2rem; padding-bottom:2rem} }

/* ===== Logo : zéro écart entre "auto" et ".bj" ===== */
.brand-logo{display:inline-flex; align-items:center; gap:.5rem;}
.brand-logo .brand-ic{
  width:36px;height:36px;border-radius:9px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex:0 0 auto;
  box-shadow:0 4px 10px -3px rgba(232,89,12,.55);
}
.brand-logo .brand-word{font-weight:900; font-size:1.45rem; color:var(--ink); letter-spacing:0; white-space:nowrap;}
.brand-logo .brand-word .dot{color:var(--brand)}

/* ===== Header (plus soigné / pro) ===== */
header.site-header{background:rgba(255,255,255,.97); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1030; box-shadow:0 1px 0 rgba(11,59,96,.03);}
.header-container{padding-left:var(--header-pad); padding-right:var(--header-pad); max-width:1320px; margin:0 auto; width:100%;}
.header-row1{padding:.75rem 0;}
@media (min-width:992px){ .header-row1{padding:.9rem 0;} }

.header-search{
  border:1.5px solid var(--border); border-radius:8px; overflow:hidden; display:flex; align-items:stretch; flex:1;
  transition:.15s; background:#fff;
}
.header-search:focus-within{border-color:var(--brand); box-shadow:0 0 0 .18rem rgba(232,89,12,.14);}
.header-search .hs-ic{display:flex;align-items:center;padding:0 .7rem;color:var(--ink-soft);font-size:.95rem;}
.header-search input{border:0; padding:.55rem .3rem .55rem 0; font-weight:600; flex:1; min-width:0; background:transparent;}
.header-search input:focus{outline:none;}
.header-search .hs-city{border:0; border-left:1px solid var(--border); padding:.55rem .7rem; font-weight:700; background:#fff; max-width:150px;}
.header-search button{border:0; background:var(--brand); color:#fff; padding:0 1.1rem; font-weight:800;}
.header-search button:hover{background:var(--brand-dark)}

.mobile-menu-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:0; background:none; color:var(--ink); font-weight:800; font-size:.6rem; line-height:1; padding:.3rem .5rem;
  border-radius:8px;
}
.mobile-menu-btn:active{background:var(--brand-tint)}
.mobile-menu-btn i{font-size:1.4rem; line-height:1;}

.icon-btn-sm{
  width:38px;height:38px;border-radius:8px;border:1.5px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:1.05rem;
}
.icon-btn-sm:hover{border-color:var(--brand); color:var(--brand);}

/* ===== Category nav strip (row2) with mega menu ===== */
.cat-nav{background:#fff; border-bottom:1px solid var(--border);}
.cat-nav .nav-link{font-weight:700; color:var(--ink); font-size:.88rem; padding:.65rem .85rem!important; white-space:nowrap;}
.cat-nav .nav-link:hover, .cat-nav .nav-link.show{color:var(--brand)}
.cat-nav .nav-link i{margin-right:.35rem}

.mega-panel{
  position:absolute; left:0; right:0; top:100%; background:#fff; border:1px solid var(--border);
  border-top:3px solid var(--brand); box-shadow:0 22px 40px -20px rgba(11,59,96,.28);
  padding:1.6rem var(--header-pad); display:none; z-index:1050; border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.cat-nav-item.open .mega-panel{display:block}
.mega-grid{display:grid; grid-template-columns:repeat(6,1fr) 1.15fr; gap:1.5rem; max-width:1320px; margin:0 auto;}
.mega-col h6{font-weight:800; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); margin-bottom:.7rem;}
.mega-col a{display:block; font-size:.85rem; font-weight:600; color:var(--ink-soft); padding:.26rem 0;}
.mega-col a:hover{color:var(--brand)}
.mega-promo{background:var(--deep); border-radius:var(--radius-lg); padding:1.3rem; color:#fff; display:flex; flex-direction:column; justify-content:space-between; min-height:210px;}
.mega-promo h6{color:#fff; font-weight:800; font-size:.95rem;}
.mega-promo p{font-size:.8rem; color:#cfe0ef; margin-bottom:1rem;}

/* ===== Hero v2 (compact, image de fond, formulaire pro) ===== */
.hero{
  position:relative; min-height:390px; display:flex; align-items:center;
  background:linear-gradient(100deg, rgba(11,36,54,.88) 0%, rgba(11,36,54,.58) 55%, rgba(11,36,54,.22) 100%),
             url('https://commons.wikimedia.org/wiki/Special:FilePath/Le_transport_avec_Taxi_%C3%A0_Cotonou_au_B%C3%A9nin.jpg?width=1600') center/cover no-repeat;
}
@media (max-width:767.98px){ .hero{min-height:auto; padding:2rem 0 1.75rem;} }
.hero h1{color:#fff; font-size:2rem;}
.hero p.lead-txt{color:#dbe6f0; max-width:480px;}

.search-card{background:#fff; border-radius:10px; box-shadow:var(--shadow); padding:.85rem; border:1px solid rgba(255,255,255,.5);}
.search-tabs{display:flex; gap:.4rem; margin-bottom:.75rem;}
.search-tabs button{
  flex:1; border:1.5px solid var(--border); background:#fff; border-radius:7px; padding:.4rem .5rem;
  font-weight:800; font-size:.8rem; color:var(--ink-soft);
}
.search-tabs button.active{background:var(--brand); border-color:var(--brand); color:#fff;}
.search-field{border:1.5px solid var(--border); border-radius:7px; padding:.4rem .65rem; background:#fff;}
.search-field label{display:block; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:.1rem;}
.search-field select, .search-field input{
  border:0; padding:0; font-weight:700; font-size:.88rem; width:100%; background:transparent; color:var(--ink);
}
.search-field select:focus, .search-field input:focus{outline:none;}
.search-card .btn-brand{border-radius:7px; padding:.65rem 1rem;}

/* ===== Categories horizontal scroll ===== */
.cat-scroll{display:flex; gap:.8rem; overflow-x:auto; padding:.35rem .1rem 1rem; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;}
.cat-scroll::-webkit-scrollbar{height:6px}
.cat-scroll::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px}
.cat-pill{flex:0 0 auto; width:100px; scroll-snap-align:start; text-align:center; border:1px solid var(--border); border-radius:var(--radius); padding:.8rem .4rem; transition:.15s;}
.cat-pill:hover{border-color:var(--brand); background:var(--brand-tint);}
.cat-pill .ic{width:42px;height:42px;border-radius:50%;background:var(--brand-tint);color:var(--brand); display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin:0 auto .45rem;}
.cat-pill span{display:block; font-size:.72rem; font-weight:800; color:var(--ink); line-height:1.2;}
.cat-pill small{display:block; font-size:.63rem; color:var(--ink-soft); font-weight:700; margin-top:2px;}

/* ===== Bannière pub images défilante ===== */
.ad-banner-wrap{background:var(--bg-soft,#F6F7F9); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:1rem 0;}
.ad-banner-label{font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:.5rem;}
.ad-banner-scroll{overflow:hidden; position:relative;}
.ad-banner-track{display:flex; gap:.9rem; width:max-content; animation:adscroll 38s linear infinite;}
.ad-banner-scroll:hover .ad-banner-track{animation-play-state:paused}
@keyframes adscroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .ad-banner-track{animation:none} }
.ad-card{
  flex:0 0 auto; width:290px; height:104px; border-radius:10px; padding:1rem 1.1rem; color:#fff; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; box-shadow:0 8px 18px -10px rgba(0,0,0,.35);
}
.ad-card i.bg-ic{position:absolute; right:-10px; bottom:-14px; font-size:4.2rem; opacity:.18;}
.ad-card .t{font-weight:900; font-size:.92rem; margin-bottom:.15rem;}
.ad-card .s{font-size:.74rem; font-weight:600; opacity:.92;}
.ad-1{background:linear-gradient(135deg,#0B3B60,#0A2E4D);}
.ad-2{background:linear-gradient(135deg,var(--brand),var(--brand-dark));}
.ad-3{background:linear-gradient(135deg,#157F3C,#0E5E2C);}
.ad-4{background:linear-gradient(135deg,#7B3FE4,#5A2AB0);}
.ad-5{background:linear-gradient(135deg,#0E7C8C,#0A5A66);}

/* ===== Listing cards ===== */
.listing-card{display:block; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; height:100%; transition:.18s;}
.listing-card:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:#DCE1E7;}
.listing-card .thumb{aspect-ratio:4/3; overflow:hidden; position:relative; background:#f2f3f5;}
.listing-card .thumb img{width:100%;height:100%;object-fit:cover; display:block; transition:.4s}
.listing-card:hover .thumb img{transform:scale(1.05)}
.badge-verified{position:absolute; top:8px; left:8px; background:var(--green); color:#fff; font-weight:800; font-size:.66rem; padding:.24rem .5rem; border-radius:20px; display:flex; align-items:center; gap:.25rem;}
.badge-cond{position:absolute; top:8px; left:8px; background:rgba(20,36,51,.78); color:#fff; font-weight:700; font-size:.66rem; padding:.24rem .5rem; border-radius:20px;}
.badge-verified + .badge-cond{ top:36px; }
.fav-btn{position:absolute; top:8px; right:8px; width:30px;height:30px;border-radius:50%;background:#fff; display:flex;align-items:center;justify-content:center; color:var(--ink-soft); font-size:.9rem; box-shadow:0 2px 6px rgba(0,0,0,.15); border:0;}
.listing-card .body{padding:.7rem .8rem .85rem;}
.listing-card .price{font-weight:900; color:var(--brand); font-size:1.05rem; line-height:1.2;}
.listing-card .title{font-weight:700; font-size:.86rem; color:var(--ink); margin:.15rem 0 .4rem; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.listing-card .specs{font-size:.72rem; color:var(--ink-soft); font-weight:700; margin-bottom:.35rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;}
.listing-card .specs .sep{color:var(--border)}
.listing-card .loc{font-size:.72rem; color:var(--ink-soft); font-weight:700; display:flex; justify-content:space-between; border-top:1px dashed var(--border); padding-top:.4rem;}
.listings-grid{--bs-gutter-x:.65rem; --bs-gutter-y:.65rem;}

/* ===== Pricing ===== */
.price-card{border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:1.4rem 1.15rem; height:100%; background:#fff; display:flex; flex-direction:column; transition:.18s; position:relative;}
.price-card.featured{border-color:var(--brand); box-shadow:var(--shadow); transform:translateY(-6px);}
.price-card .ribbon{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff; font-size:.68rem; font-weight:800; padding:.3rem .8rem; border-radius:20px; white-space:nowrap;}
.price-card h3{font-size:1rem; font-weight:800; margin-bottom:.15rem;}
.price-card .amount{font-size:1.7rem; font-weight:900; color:var(--ink); margin:.35rem 0;}
.price-card .amount small{font-size:.85rem; font-weight:700; color:var(--ink-soft);}
.price-card ul{list-style:none; padding:0; margin:0 0 1.1rem; flex:1;}
.price-card ul li{font-size:.82rem; font-weight:600; color:var(--ink-soft); padding:.3rem 0; display:flex; gap:.5rem;}
.price-card ul li i{color:var(--green); margin-top:.15rem}

/* ===== Sticky mobile CTA ===== */
.mobile-cta{position:fixed; bottom:0; left:0; right:0; z-index:1040; background:#fff; border-top:1px solid var(--border); padding:.6rem 1rem; box-shadow:0 -6px 18px rgba(0,0,0,.08); display:flex; gap:.6rem;}
@media (min-width:992px){ .mobile-cta{display:none!important} }
@media (max-width:991.98px){ body{padding-bottom:64px} }
.mobile-cta button.btn-outline-deep{border-radius:8px;}

/* ===== Offcanvas mobile menu (corrigé) ===== */
.offcanvas{width:min(360px,86vw)!important;}
.offcanvas-header{border-bottom:1px solid var(--border); padding:1rem 1.1rem;}
.offcanvas-body{padding:1.1rem;}
.mm-search-input{border:1.5px solid var(--border); border-radius:8px; display:flex; align-items:center; padding:.15rem .2rem .15rem .8rem; background:#fff;}
.mm-search-input:focus-within{border-color:var(--brand); box-shadow:0 0 0 .16rem rgba(232,89,12,.14);}
.mm-search-input i{color:var(--ink-soft); font-size:.95rem; margin-right:.5rem;}
.mm-search-input input{border:0; flex:1; padding:.6rem 0; font-weight:600; background:transparent; min-width:0;}
.mm-search-input input:focus{outline:none;}
.mm-search-input button{border:0; background:var(--brand); color:#fff; width:38px;height:38px;border-radius:6px; display:flex;align-items:center;justify-content:center; flex:0 0 auto;}
.mm-lang{border:1px solid var(--border); border-radius:8px; padding:3px; display:inline-flex;}
.mm-lang button{background:none;border:0;border-radius:6px;padding:.4rem .9rem;font-weight:800;font-size:.8rem; flex:1;}
.mm-lang button.active{background:var(--brand); color:#fff;}
.mm-link{display:flex; align-items:center; justify-content:space-between; padding:.8rem .1rem; border-bottom:1px solid var(--border); font-weight:700; font-size:.92rem;}
.mm-link i.bi-chevron-right{color:var(--ink-soft); font-size:.8rem;}
.mm-link .mm-ic{width:32px; color:var(--brand); font-size:1rem;}
.accordion-item{border:0; border-bottom:1px solid var(--border);}
.accordion-button{font-weight:800; font-size:.9rem; padding:.85rem .1rem; box-shadow:none!important;}
.accordion-button:not(.collapsed){color:var(--brand); background:none;}
.accordion-body{padding:0 .1rem .5rem;}

/* ===== Search modal (mobile élégant) ===== */
#searchModal .modal-content{border-radius:16px; border:0;}
#searchModal .modal-header{padding:1.25rem 1.25rem .5rem;}
#searchModal .modal-body{padding:.5rem 1.25rem 1.5rem;}
.search-chip{border:1.5px solid var(--border); border-radius:20px; padding:.35rem .85rem; font-size:.8rem; font-weight:700; color:var(--ink-soft); background:#fff;}
.search-chip:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-tint);}

/* ===== Breadcrumb ===== */
.breadcrumb-bar{background:#fbfbfc; border-bottom:1px solid var(--border); padding:.65rem 0;}
.breadcrumb-bar ol{margin:0; font-size:.8rem; font-weight:700;}
.breadcrumb-bar a{color:var(--ink-soft);}
.breadcrumb-bar a:hover{color:var(--brand);}
.breadcrumb-bar .active{color:var(--ink);}

/* ===== Annonce (page détail) ===== */
.gallery-main{border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10; background:#eee; position:relative;}
.gallery-main img{width:100%;height:100%;object-fit:cover;display:block;}
.gallery-thumbs{display:flex; gap:.5rem; margin-top:.5rem; overflow-x:auto; padding-bottom:.2rem;}
.gallery-thumbs img{width:84px;height:64px;object-fit:cover;border-radius:7px; flex:0 0 auto; cursor:pointer; border:2px solid transparent; opacity:.7; transition:.15s;}
.gallery-thumbs img:hover, .gallery-thumbs img.active{opacity:1; border-color:var(--brand);}
.gallery-badges{position:absolute; top:12px; left:12px; display:flex; gap:.4rem;}
.annonce-price{font-size:2rem; font-weight:900; color:var(--brand);}
.spec-table{width:100%; border-collapse:collapse; font-size:.88rem;}
.spec-table tr{border-bottom:1px solid var(--border);}
.spec-table td{padding:.6rem .2rem; font-weight:600;}
.spec-table td:first-child{color:var(--ink-soft); width:45%;}
.spec-table td:last-child{color:var(--ink); font-weight:800; text-align:right;}
.seller-card{border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; position:sticky; top:90px;}
.seller-avatar{width:52px;height:52px;border-radius:50%;background:var(--deep); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:900; font-size:1.1rem;}
.safety-box{background:var(--green-tint); border-radius:var(--radius); padding:1rem 1.1rem; font-size:.82rem; color:#0E5E2C; font-weight:600;}
.safety-box li{margin-bottom:.3rem;}

/* Footer */
footer{background:var(--deep-2); color:#B9CBDD;}
footer h6{color:#fff; font-weight:800; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem;}
footer a{color:#B9CBDD; font-size:.88rem; line-height:2.1;}
footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); font-size:.8rem;}
.social-ic{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25); display:flex;align-items:center;justify-content:center; color:#fff;}
.social-ic:hover{background:var(--brand); border-color:var(--brand)}
.pay-badge{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:.35rem .7rem; font-size:.75rem; font-weight:700; color:#dbe6f0;}

@media (max-width:575.98px){
  .header-container{padding-left:1.1rem; padding-right:1.1rem;}
}