:root{
  /* Valeurs par défaut reprenant les couleurs du logo MAX-SHOP (orange + bleu marine).
     Ces valeurs sont de simples repli : elles sont surchargées dynamiquement selon
     les couleurs choisies par l'administrateur dans Réglages généraux. */
  --maxshop-blue: #FC7D0C;
  --maxshop-blue-dark: #E06C05;
  --maxshop-purple: #031C34;
  --maxshop-purple-dark: #021425;
  --maxshop-gradient: linear-gradient(135deg, var(--maxshop-blue) 0%, var(--maxshop-purple) 100%);
  --maxshop-bg: #F7F8FA;
  --maxshop-dark: #031C34;
  --maxshop-text: #031C34;
  --maxshop-cart: #FC7D0C;
}

body{ background:var(--maxshop-bg); font-family:'Segoe UI',Roboto,Arial,sans-serif; color:var(--maxshop-text); }
a{ transition:.15s ease; }

/* ===================== BOUTONS ===================== */
.maxshop-btn-primary{
  background:var(--maxshop-gradient); color:#fff !important; border:none; font-weight:600;
}
.maxshop-btn-primary:hover{ filter:brightness(1.08); color:#fff !important; }
.maxshop-btn-outline{
  border:2px solid var(--maxshop-purple); color:var(--maxshop-purple-dark) !important; background:#fff; font-weight:600;
}
.maxshop-btn-outline:hover{ background:var(--maxshop-purple); color:#fff !important; }

/* ===================== BANDEAU D'INFOS DÉFILANT (temps réel) ===================== */
.marquee-bar{
  background:linear-gradient(90deg, var(--maxshop-purple-dark), var(--maxshop-blue-dark));
  color:#fff; overflow:hidden; white-space:nowrap; padding:7px 0;
}
.marquee-track{ display:inline-flex; width:max-content; animation: marqueeScroll 28s linear infinite; }
.marquee-track span{ padding:0 40px; font-size:.8rem; font-weight:600; letter-spacing:.2px; }
.marquee-bar:hover .marquee-track{ animation-play-state:paused; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ===================== TIROIR DE CATÉGORIES (mobile, façon Jumia) ===================== */
.drawer-toggle-btn{
  background:none; border:none; color:#fff; font-size:1.25rem; width:40px; height:40px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.categories-drawer-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:299;
}
.categories-drawer-overlay.is-open{ display:block; }
.categories-drawer{
  position:fixed; top:0; bottom:0; left:-280px; width:280px; max-width:82vw; background:#fff; z-index:300;
  transition:left .25s ease; box-shadow:3px 0 15px rgba(0,0,0,.2); display:flex; flex-direction:column; overflow-y:auto;
}
.categories-drawer.is-open{ left:0; }
.categories-drawer-head{
  background:var(--maxshop-gradient); color:#fff; font-weight:700; padding:16px 14px; display:flex;
  align-items:center; justify-content:space-between; flex-shrink:0;
}
.categories-drawer-head button{ background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; }
.categories-drawer ul{ list-style:none; margin:0; padding:6px 0; }
.categories-drawer li a{
  display:flex; align-items:center; justify-content:space-between; padding:13px 16px; font-size:.9rem;
  color:var(--maxshop-text); border-bottom:1px solid #f2f2f2;
}
.categories-drawer li a:hover{ background:#f7f7f9; }
.categories-drawer li a i.fa-chevron-right{ font-size:.7rem; color:#ccc; }

/* ===================== TOPBAR / HEADER PUBLIC ===================== */
.topbar{ background:var(--maxshop-dark); color:#e8e4f7; font-size:.8rem; padding:6px 0; }
@media (max-width: 768px){ .topbar{ display:none; } }
.topbar a{ color:#e8e4f7; }
.main-header{ background:var(--maxshop-gradient); padding:16px 0; position:sticky; top:0; z-index:40; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.main-header .logo-text{ color:#fff; font-weight:800; font-size:1.6rem; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.main-header .logo-img{ max-height:46px; margin-right:10px; }
@media (max-width: 768px){
  .main-header .logo-text{ font-size:1.15rem; }
  .main-header .logo-img{ max-height:32px; margin-right:6px; }
}
@media (max-width: 360px){
  .main-header .logo-text{ font-size:.95rem; }
}
.search-bar input{ border-radius:6px 0 0 6px; border:none; height:42px; }
.search-bar button{ border-radius:0 6px 6px 0; height:42px; background:var(--maxshop-dark); border:none; color:#fff; }
.header-icon{ color:#fff; font-size:1.3rem; position:relative; }
.header-icon .fa-shopping-cart{ color:var(--maxshop-cart); }
.header-icon .badge{
  position:absolute; top:-8px; right:-10px; background:var(--maxshop-cart); color:#fff; border-radius:50%;
  font-size:.65rem; padding:1px 6px; font-weight:700;
}
.categories-bar{ background:#fff; border-bottom:1px solid #eee; overflow-x:auto; white-space:nowrap; }
.categories-bar a{ display:inline-block; padding:10px 16px; color:var(--maxshop-text); font-size:.88rem; font-weight:600; }
.categories-bar a:hover, .categories-bar a.is-active{ color:var(--maxshop-blue-dark); border-bottom:3px solid var(--maxshop-purple); }

/* ===================== CAROUSEL ===================== */
.hero-carousel{ position:relative; overflow:hidden; border-radius:10px; background:#fff; }
.hero-carousel .slide{ display:none; }
.hero-carousel .slide.is-active{ display:block; }
.hero-carousel img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-carousel .slide-caption{
  position:absolute; left:5%; bottom:8%; background:rgba(43,39,64,.7); color:#fff; padding:10px 18px; border-radius:8px; max-width:80%;
}
.carousel-dots{ position:absolute; bottom:10px; left:0; right:0; text-align:center; }
.carousel-dots span{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#fff9; margin:0 4px; cursor:pointer; }
.carousel-dots span.is-active{ background:#fff; }
.carousel-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.8); border:none; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1rem; z-index:5; }
.carousel-nav.prev{ left:10px; } .carousel-nav.next{ right:10px; }

/* ===================== CARROUSEL GALERIE PRODUIT ===================== */
.product-carousel{
  position:relative; overflow:hidden; border-radius:10px; background:#fff; aspect-ratio:1/1;
  border:1px solid #eef0f5;
}
.product-carousel .slide{ display:none; width:100%; height:100%; }
.product-carousel .slide.is-active{ display:block; }
.product-carousel .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-carousel .carousel-nav{ width:34px; height:34px; }
.product-carousel .badge-promo{
  position:absolute; top:10px; left:10px; background:#FF5252; color:#fff; font-size:.75rem; font-weight:700;
  padding:4px 10px; border-radius:20px; z-index:6;
}
.product-carousel .carousel-dots span{ background:#00000033; }
.product-carousel .carousel-dots span.is-active{ background:var(--maxshop-purple); }
/* Vignettes cliquables sous le carrousel, en plus du défilement automatique */
.product-thumbs{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.product-thumbs img{
  width:64px; height:64px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; opacity:.7;
}
.product-thumbs img.is-active{ border-color:var(--maxshop-purple); opacity:1; }

/* ===================== HERO JUMIA-STYLE (accueil) ===================== */
.hero-layout{ display:flex; gap:16px; margin-bottom:2.5rem; align-items:stretch; }
.hero-layout .hero-center{ flex:1; min-width:0; }
.hero-layout .hero-carousel{ height:100%; min-height:340px; }

/* Sidebar catégories, alignée à gauche */
.categories-sidebar{
  width:230px; flex-shrink:0; background:#fff; border-radius:10px; border:1px solid #eef0f5;
  overflow:hidden; display:flex; flex-direction:column;
}
.categories-sidebar .sidebar-title{
  background:var(--maxshop-gradient); color:#fff; font-weight:700; font-size:.85rem;
  padding:12px 14px; display:flex; align-items:center; gap:8px;
}
.categories-sidebar ul{ list-style:none; margin:0; padding:6px 0; overflow-y:auto; flex:1; }
.categories-sidebar li a{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 14px;
  font-size:.83rem; color:var(--maxshop-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.categories-sidebar li a:hover{ background:#f5f2fc; color:var(--maxshop-purple-dark); }
.categories-sidebar li a .cat-left{ display:flex; align-items:center; gap:10px; overflow:hidden; text-overflow:ellipsis; }
.categories-sidebar li a i.fa-chevron-right{ font-size:.65rem; color:#ccc; }

/* Bannières latérales (droite du carrousel) */
.hero-side-banners{ width:230px; flex-shrink:0; display:flex; flex-direction:column; gap:16px; }
.side-banner{
  position:relative; flex:1; border-radius:10px; overflow:hidden; display:block; background:#f0f2fa;
  min-height:160px;
}
.side-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.side-banner .banner-overlay{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px; background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);
  color:#fff;
}
.side-banner .banner-overlay .b-name{ font-size:.78rem; font-weight:600; display:block; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-banner .banner-overlay .b-price{ font-size:.85rem; font-weight:800; color:#fff; }
.side-banner .banner-badge{
  position:absolute; top:8px; left:8px; background:#FF5252; color:#fff; font-size:.68rem; font-weight:700;
  padding:2px 8px; border-radius:20px;
}

@media (max-width: 1023px){
  .hero-layout{ flex-direction:column; }
  .categories-sidebar{ width:100%; max-height:220px; }
  .hero-side-banners{ width:100%; flex-direction:row; }
  .hero-layout .hero-carousel{ min-height:220px; }
}
@media (max-width: 768px){
  /* Sur mobile, les catégories vivent dans le tiroir (☰) : on masque le bloc
     toujours-visible pour aller droit au carrousel, comme sur Jumia. */
  .categories-sidebar{ display:none; }
}

/* ===================== POPUP PROMOTION ===================== */
.promo-popup-overlay{
  position:fixed; inset:0; background:rgba(20,15,35,.72); z-index:300; display:none;
  align-items:center; justify-content:center; padding:16px;
}
.promo-popup-overlay.is-visible{ display:flex; }
.promo-popup{
  background:#fff; border-radius:14px; max-width:380px; width:100%; overflow:hidden; position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.35); animation:promoPopIn .25s ease;
}
@keyframes promoPopIn{ from{ transform:scale(.9); opacity:0; } to{ transform:scale(1); opacity:1; } }
.promo-popup .promo-popup-close{
  position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:#fff;
  border:none; cursor:pointer; z-index:5; box-shadow:0 2px 6px rgba(0,0,0,.2); font-size:.9rem;
}
.promo-popup .promo-popup-img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#f5f5f5; }
.promo-popup .promo-popup-badge{
  position:absolute; top:14px; left:14px; background:#FF5252; color:#fff; font-weight:800; font-size:.85rem;
  padding:5px 12px; border-radius:20px; z-index:4;
}
.promo-popup .promo-popup-body{ padding:16px 18px 20px; text-align:center; }
.promo-popup .promo-popup-eyebrow{ color:var(--maxshop-purple-dark); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; }
.promo-popup .promo-popup-name{ font-weight:700; font-size:1.05rem; margin:4px 0 8px; color:var(--maxshop-text); }
.promo-popup .promo-popup-price-new{ font-size:1.3rem; font-weight:800; color:var(--maxshop-blue-dark); }
.promo-popup .promo-popup-price-old{ color:#aaa; text-decoration:line-through; font-size:.9rem; margin-left:8px; }

/* ===================== SECTIONS ENCADRÉES (cadre + bandeau coloré + "Voir plus") ===================== */
.shop-section{ border-radius:10px; overflow:hidden; border:1px solid #eee; margin-bottom:2.2rem; background:#fff; box-shadow:0 2px 10px rgba(20,20,50,.04); }
.shop-section-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; color:#fff; }
.shop-section-head .head-title{ font-weight:800; font-size:1rem; display:flex; align-items:center; gap:8px; }
.shop-section-head a.head-more{ color:#fff; font-size:.78rem; font-weight:700; white-space:nowrap; }
.shop-section-head a.head-more:hover{ text-decoration:underline; }
.shop-section-body{ padding:18px 14px 6px; }
.shop-section-head.theme-flash{ background:linear-gradient(90deg,#E53935,#FF7043); }
.shop-section-head.theme-purple{ background:linear-gradient(90deg,var(--maxshop-purple-dark),var(--maxshop-purple)); }
.shop-section-head.theme-blue{ background:linear-gradient(90deg,var(--maxshop-blue-dark),var(--maxshop-blue)); }
.shop-section.theme-flash{ border-color:#ffd3cc; }

/* Compte à rebours ventes flash */
.flash-countdown{ display:flex; align-items:center; gap:6px; }
.flash-countdown .cd-box{
  background:rgba(255,255,255,.25); border-radius:6px; padding:3px 7px; min-width:30px; text-align:center;
  font-size:.8rem; font-weight:800; font-variant-numeric:tabular-nums;
}
.flash-countdown .cd-sep{ font-weight:800; }

/* Barre de stock restant */
.stock-bar{ background:#f0f0f0; border-radius:10px; height:6px; overflow:hidden; margin-top:6px; }
.stock-bar-fill{ background:linear-gradient(90deg,#FFA726,#FF5252); height:100%; border-radius:10px; }
.stock-text{ font-size:.68rem; color:#FF5252; font-weight:700; margin-top:3px; }

/* ===================== CHECKOUT : MODE DE LIVRAISON ===================== */
.delivery-mode-toggle{ display:flex; gap:10px; margin-bottom:16px; }
.delivery-mode-btn{
  flex:1; border:2px solid #eee; background:#fff; border-radius:10px; padding:12px 8px; cursor:pointer;
  font-weight:700; font-size:.95rem; color:var(--maxshop-text); transition:.15s ease; text-align:center;
}
.delivery-mode-btn:hover{ border-color:var(--maxshop-blue); }
.delivery-mode-btn.is-active{ border-color:var(--maxshop-blue); background:linear-gradient(135deg,#4FC3F711,#B497E711); color:var(--maxshop-blue-dark); }
.delivery-list{ max-height:320px; overflow-y:auto; border:1px solid #f0f0f0; border-radius:8px; }
.delivery-option{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px; cursor:pointer;
  border-bottom:1px solid #f2f2f2; transition:.12s ease;
}
.delivery-option:last-child{ border-bottom:none; }
.delivery-option:hover{ background:#f9f9fb; }
.delivery-option.is-selected{ background:linear-gradient(135deg,#4FC3F715,#B497E715); border-left:4px solid var(--maxshop-blue); padding-left:10px; }
.delivery-option-name{ font-size:.88rem; color:var(--maxshop-text); }
.delivery-option-fee{ font-weight:800; color:var(--maxshop-blue-dark); font-size:.92rem; white-space:nowrap; margin-left:10px; }

/* ===================== CARTES PRODUITS ===================== */
.product-card{
  background:#fff; border-radius:10px; overflow:hidden; border:1px solid #eef0f5; height:100%;
  transition:box-shadow .25s ease, transform .25s ease; display:flex; flex-direction:column; position:relative;
}
.product-card:hover{ box-shadow:0 10px 26px rgba(90,120,220,.22); transform:translateY(-5px); border-color:#e2dcf7; }
.product-card .img-wrap{ aspect-ratio:1/1; overflow:hidden; background:#f7f8fc; display:flex; align-items:center; justify-content:center; }
.product-card .img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.product-card:hover .img-wrap img{ transform:scale(1.1); }
.product-card .badge-promo{
  position:absolute; top:8px; left:8px; background:#FF5252; color:#fff; font-size:.72rem; font-weight:700;
  padding:3px 8px; border-radius:20px; z-index:2; animation:pulseBadge 1.7s ease-in-out infinite;
}
@keyframes pulseBadge{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
.product-card .badge-new{
  position:absolute; top:8px; right:8px; background:var(--maxshop-gradient); color:#fff; font-size:.65rem; font-weight:700;
  padding:3px 8px; border-radius:20px; z-index:2;
}
.product-card .body{ padding:10px 12px; flex:1; display:flex; flex-direction:column; }
.product-card .p-name{ font-size:.86rem; color:var(--maxshop-text); min-height:2.5em; line-height:1.25em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.product-card .p-desc{ font-size:.74rem; color:#8a8a8a; line-height:1.3em; margin:2px 0 6px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.product-card .p-price-new{ color:var(--maxshop-blue-dark); font-weight:800; font-size:1rem; }
.product-card .p-price-old{ color:#aaa; text-decoration:line-through; font-size:.78rem; margin-left:6px; }
.product-card .add-cart-btn{
  margin-top:auto; width:100%; border:none; background:var(--maxshop-gradient); color:#fff; padding:8px; border-radius:6px;
  font-weight:600; font-size:.82rem; cursor:pointer; transition:opacity .2s ease, transform .2s ease, filter .2s ease;
}
.product-card .add-cart-btn:hover{ filter:brightness(1.1); }
/* Le bouton apparaît au survol uniquement sur les appareils avec souris (desktop) ; toujours visible au tactile */
@media (hover:hover){
  .product-card .add-cart-btn{ opacity:0; transform:translateY(8px); }
  .product-card:hover .add-cart-btn{ opacity:1; transform:translateY(0); }
}

.section-title{ font-weight:800; color:var(--maxshop-text); border-left:5px solid var(--maxshop-purple); padding-left:12px; margin-bottom:1.2rem; }

/* ===================== PANIER FLOTTANT / TOAST ===================== */
#cartToast{
  position:fixed; bottom:20px; right:20px; background:var(--maxshop-dark); color:#fff; padding:12px 20px;
  border-radius:8px; z-index:200; display:none; box-shadow:0 4px 15px rgba(0,0,0,.25);
}

/* ===================== FOOTER ===================== */
.site-footer{ background:var(--maxshop-dark); color:#cfc9e8; padding:40px 0 20px; margin-top:50px; }
.site-footer a{ color:#cfc9e8; }
.site-footer a:hover{ color:#fff; }
.whatsapp-float{
  position:fixed; bottom:22px; left:22px; background:#25D366; color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; box-shadow:0 4px 14px rgba(0,0,0,.3); z-index:150;
}

/* ===================== ADMIN LAYOUT ===================== */
.admin-navbar{ background:var(--maxshop-dark) !important; }
.admin-layout{ display:flex; min-height:calc(100vh - 52px); }
.admin-sidebar{ width:230px; background:#fff; border-right:1px solid #eee; padding:16px 8px; flex-shrink:0; }
.admin-sidebar .menu-label{ color:var(--maxshop-purple-dark); font-size:.7rem; }
.admin-sidebar .menu-list a{ border-radius:6px; font-size:.87rem; }
.admin-sidebar .menu-list a.is-active{ background:var(--maxshop-gradient); color:#fff; }
.admin-content{ flex:1; padding:24px; max-width:100%; overflow-x:auto; }
.admin-body{ background:var(--maxshop-bg); }
.login-box{ border-top:5px solid var(--maxshop-purple); }
.admin-login-body{ background:var(--maxshop-gradient); }

.stat-card{ border-radius:10px; padding:18px; color:#fff; }
.stat-card .stat-num{ font-size:1.8rem; font-weight:800; }
.stat-card.bg1{ background:linear-gradient(135deg,#0B2A4D,#031C34); }
.stat-card.bg2{ background:linear-gradient(135deg,#26C6DA,#00ACC1); }
.stat-card.bg3{ background:linear-gradient(135deg,#FFB74D,#FF9800); }
.stat-card.bg4{ background:linear-gradient(135deg,#81C784,#4CAF50); }

.thumb-64{ width:56px; height:56px; object-fit:cover; border-radius:6px; }
.color-swatch{ width:28px; height:28px; border-radius:50%; display:inline-block; vertical-align:middle; border:2px solid #fff; box-shadow:0 0 0 1px #ddd; }

@media (max-width: 768px){
  .admin-sidebar{ position:fixed; left:-240px; top:52px; bottom:0; z-index:100; transition:.2s; box-shadow:2px 0 10px rgba(0,0,0,.15); }
  .admin-sidebar.is-open{ left:0; }
  .admin-content{ padding:14px; }
  .sidebar-toggle-btn{ display:inline-flex !important; }
}

.sidebar-toggle-btn{
  display:none; align-items:center; justify-content:center; background:none; border:none; color:#fff;
  font-size:1.2rem; width:44px; height:52px; cursor:pointer; order:-1;
}
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99;
}
.sidebar-overlay.is-open{ display:block; }