/* ============================================================
   REPARE-MOI.CI — Refonte 2026 · SHELL PREMIUM
   Topbar + Header + Recherche + Méga-menu + Footer + CTA WA.
   Reprend la palette du design system (.rmx) : orange #FF6A00,
   encre bleu-nuit #0E1726, typo Sora + Manrope.

   Cascade : le header charge cette feuille APRÈS ses <style> inline
   (→ surcharge à spécificité égale). Le méga-menu et le footer ont
   leurs <style> inline en fin de <body>, chargés APRÈS cette feuille :
   leurs sélecteurs sont donc préfixés « body » pour rester prioritaires.
   N'affecte PAS le corps des pages (uniquement le shell global).
   ============================================================ */

:root{
  /* Bridge : unifie l'orange de tout le site sur la marque premium */
  --primary:#FF6A00;
  --primary-dark:#F26000;
  --rmx-brand:#FF6A00;
  --rmx-brand-2:#FF8A32;
  --rmx-brand-ink:#B44E07;
  --rmx-deep:#0E1726;
  --rmx-deep-2:#182338;
  --rmx-disp:'Sora','Manrope',system-ui,sans-serif;
  --rmx-body:'Manrope',system-ui,sans-serif;
}

/* ── Police de base du shell (texte) ── */
.topbar, .site-header, .main-nav, .rmn-meganav,
.site-footer, .footer-wa-cta, .mobile-bottom-nav, .acc-drawer{
  font-family:var(--rmx-body);
}

/* ════════════════════════════════════════════════════════
   TOPBAR — bandeau fin bleu-nuit premium
   ════════════════════════════════════════════════════════ */
.topbar{
  background:var(--rmx-deep);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:12.5px;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:20px}
.topbar a{
  color:#C9D4E6;text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  transition:color .15s;font-weight:500;
}
.topbar a:hover{color:#fff}
.topbar a i{color:var(--rmx-brand-2);font-size:12px}

/* ════════════════════════════════════════════════════════
   HEADER — blanc épuré, ombre douce, collant
   ════════════════════════════════════════════════════════ */
.site-header{
  background:#fff;
  border-bottom:1px solid #F0EAE2;
  box-shadow:0 2px 14px -8px rgba(14,23,38,.18);
  position:sticky;top:0;z-index:520;
}
.header-inner{display:flex;align-items:center;gap:24px;padding:12px 0}

/* Barre de recherche — pilule premium */
.search-bar{
  flex:1;display:flex;align-items:stretch;max-width:640px;
  background:#F6F1EA;
  border:1.6px solid #ECE3D8;
  border-radius:13px;overflow:hidden;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.search-bar:focus-within{
  background:#fff;
  border-color:var(--rmx-brand);
  box-shadow:0 0 0 4px rgba(255,106,0,.10);
}
.search-bar select{
  border:none;background:transparent;
  padding:0 12px;font-size:13px;font-weight:600;color:#5C6472;
  font-family:inherit;cursor:pointer;
  border-right:1px solid #E7DFD4;outline:none;
}
.search-bar input{
  flex:1;border:none;background:transparent;outline:none;
  padding:12px 14px;font-size:14.5px;color:#141922;font-family:inherit;
}
.search-bar input::placeholder{color:#9AA0AC}
.search-bar button{
  border:none;cursor:pointer;
  background:var(--rmx-brand);color:#fff;
  padding:0 20px;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.search-bar button:hover{background:var(--primary-dark)}

/* Actions header (panier / compte) */
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn-cart{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--rmx-deep);color:#fff;
  padding:11px 18px;border-radius:12px;
  font-size:14px;font-weight:700;text-decoration:none;
  position:relative;transition:transform .15s, background .15s;
}
.btn-cart:hover{background:var(--rmx-deep-2);transform:translateY(-1px)}
.btn-cart i{font-size:15px}
.btn-cart .cart-count{
  background:var(--rmx-brand);color:#fff;
  min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
.btn-compte-mobile{
  background:#F6F1EA;border:1.5px solid #ECE3D8;color:var(--rmx-deep);
}
.btn-compte-mobile:active{background:#EFE7DD}
.hd-avatar{background:var(--rmx-brand)}

/* ── Nav burger (mobile / tablette) ── */
.main-nav .nav-menu a.active,
.main-nav .nav-menu a:hover{color:var(--rmx-brand)}
.main-nav .has-dropdown .dropdown a:hover{background:#FFF3EA;color:var(--rmx-brand)}

/* ════════════════════════════════════════════════════════
   MÉGA-MENU — préfixé « body » (bat le <style> inline du body)
   ════════════════════════════════════════════════════════ */
body .rmn-meganav{
  background:#fff;
  border-bottom:1px solid #F0EAE2;
  box-shadow:0 1px 3px rgba(14,23,38,.05);
}
body .rmn-meganav .rmn-tab{
  font-family:var(--rmx-body);
  font-size:13.5px;font-weight:600;color:#3B434F;
  padding:14px 15px;border-bottom:3px solid transparent;
}
body .rmn-meganav .rmn-tab:hover,
body .rmn-meganav .rmn-tab.active{
  color:var(--rmx-brand);border-bottom-color:var(--rmx-brand);
}
body .rmn-meganav .rmn-new{background:var(--rmx-brand);color:#fff}
body .rmn-meganav .rmn-mega{
  border:1px solid #EFE7DD;border-radius:16px;
  box-shadow:0 28px 68px rgba(14,23,38,.18),0 6px 18px rgba(14,23,38,.07);
}
body .rmn-meganav .rmn-title{font-family:var(--rmx-disp);font-weight:700;color:#141922}
body .rmn-meganav .rmn-all{color:var(--rmx-brand)}
body .rmn-meganav .rmn-cat:hover,
body .rmn-meganav .rmn-cat.active{background:#FFF3EA;color:var(--rmx-brand)}
body .rmn-meganav .rmn-cat:hover .rmn-arrow,
body .rmn-meganav .rmn-cat.active .rmn-arrow{color:var(--rmx-brand)}
body .rmn-meganav .rmn-tile:hover{
  border-color:var(--rmx-brand);
  box-shadow:0 10px 24px rgba(255,106,0,.12);
}
body .rmn-meganav .rmn-tile-img{background:linear-gradient(135deg,#FFF6EE,#FFE7D3)}
body .rmn-meganav .rmn-tile-name{color:#26303b}
body .rmn-meganav .rmn-tile-all .rmn-tile-img{background:linear-gradient(135deg,#FFF0E2,#FFD7B3)}
body .rmn-meganav .rmn-tile-all .rmn-tile-name{color:var(--rmx-brand)}
/* Encart promo méga : dégradé bleu-nuit premium */
body .rmn-meganav .rmn-promo{
  background:linear-gradient(165deg,var(--rmx-deep) 0%,var(--rmx-deep-2) 100%);
  box-shadow:0 16px 34px rgba(14,23,38,.28);
}
body .rmn-meganav .rmn-promo::after{background:rgba(255,106,0,.14)}
body .rmn-meganav .rmn-pill-ill{opacity:.95}
body .rmn-meganav .rmn-p-title{font-family:var(--rmx-disp);color:#fff}
body .rmn-meganav .rmn-p-sub{color:#AEBBD0}
body .rmn-meganav .rmn-p-btn{
  background:var(--rmx-brand);color:#fff;
  box-shadow:0 8px 20px rgba(255,106,0,.4);
}
body .rmn-meganav .rmn-p-btn:hover{background:var(--primary-dark)}
body .rmn-meganav .rmn-p-links a{color:#C9D4E6}
body .rmn-meganav .rmn-p-links a:hover{color:var(--rmx-brand-2)}
body .rmn-meganav .rmn-p-links a i{color:#8493AC}

/* ════════════════════════════════════════════════════════
   BANDE CTA WHATSAPP (reste verte — marque WhatsApp)
   ════════════════════════════════════════════════════════ */
body .footer-wa-cta{background:linear-gradient(135deg,#0B3B2E,#0E5140)}
body .footer-wa-title{font-family:var(--rmx-disp);font-weight:700}

/* ════════════════════════════════════════════════════════
   FOOTER — bleu-nuit premium aligné au design system
   (préfixé « body » pour battre le <style> inline du footer)
   ════════════════════════════════════════════════════════ */
body .site-footer{background:var(--rmx-deep)}
body .footer-top{border-top:1px solid rgba(255,255,255,.06)}
body .footer-brand-desc{color:#8493AC}
body .footer-col h4{
  font-family:var(--rmx-disp);font-weight:700;color:#EAF0FA;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body .footer-col h4::before{background:var(--rmx-brand)}
body .footer-col ul li a{color:#9AA7BC}
body .footer-col ul li a i{color:var(--rmx-brand)}
body .footer-col ul li a:hover{color:var(--rmx-brand-2)}
body .footer-contact-mini a{color:#9AA7BC}
body .footer-contact-mini a:hover{color:var(--rmx-brand-2)}
body .footer-contact-mini i{color:var(--rmx-brand)}
body .social-btn{border-color:rgba(255,255,255,.12);color:#8493AC}
body .social-btn:hover{
  background:rgba(255,106,0,.16);border-color:var(--rmx-brand);color:var(--rmx-brand-2);
}
body .social-wa:hover{background:rgba(37,211,102,.16);border-color:#25D366;color:#25D366}
body .footer-bottom{background:#0A1018;border-top:1px solid rgba(255,255,255,.05)}
body .footer-copy{color:#6B7688}

/* ── Focus visible cohérent sur tout le shell ── */
.site-header a:focus-visible,
.rmn-meganav a:focus-visible,
.site-footer a:focus-visible,
.search-bar input:focus-visible{
  outline:2.5px solid var(--rmx-brand);outline-offset:2px;border-radius:6px;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .header-inner{gap:14px}
}
@media(max-width:768px){
  .search-bar{border-radius:11px}
  .btn-cart{padding:10px 14px}
}
