:root{
  --tech-dark:#3E2723;
  --tech-blue:#5D4037;
  --tech-cyan:#FFCC80;
  --tech-silver:#F5F5F5;
  --paper:#4E342E;
  --muted:#D7CCC8;
}
body{background:var(--tech-dark);color:var(--tech-silver);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;}
.brand-title{font-family:"Orbitron",sans-serif;letter-spacing:1px;color:var(--tech-cyan)}
.btn-tech{background:var(--tech-cyan);border-color:var(--tech-cyan);color:#3E2723;font-weight:600}
.btn-outline-tech{border-color:var(--tech-cyan);color:var(--tech-cyan)}
.btn-outline-tech:hover{background:var(--tech-cyan);color:#3E2723}
.badge-tech{background:rgba(255,204,128,.12);color:var(--tech-cyan)}
.navbar{background:var(--tech-blue);border-bottom:1px solid #3E2723}
.nav-link{color:var(--tech-silver)}
.hero{background:linear-gradient(180deg,#3E2723,#5D4037)}
.card{border:1px solid #5D4037;border-radius:1.25rem;overflow:hidden;background:#4E342E;color:#fff}
.card-img-top{height:210px;object-fit:cover}
.price{color:var(--tech-cyan);font-weight:700}
.section-title{font-family:"Orbitron",sans-serif;color:var(--tech-cyan)}
.pill{border:1px solid #5D4037;color:var(--tech-silver);background:transparent;border-radius:999px;padding:.5rem .9rem}
.pill.active{background:var(--tech-cyan);border-color:var(--tech-cyan);color:#3E2723}
.floating-wa{position:fixed;bottom:22px;right:22px;z-index:1040}
.floating-wa .btn{box-shadow:0 10px 20px rgba(0,0,0,.25);border-radius:999px}
.shadow-soft{box-shadow:0 10px 24px rgba(0,0,0,.25)}
.bg-paper{background:var(--paper)}
.footer{background:#3E2723}
.rating i{color:var(--tech-cyan)}
.form-control:focus,.form-select:focus{border-color:var(--tech-cyan);box-shadow:0 0 0 .2rem rgba(255,204,128,.4)}
.offcanvas{--bs-offcanvas-width:380px;background:#3E2723;color:#fff}
.whatsapp-logo{width:22px;height:22px}
.text-muted{color:var(--muted)!important}
.gallery-item{width:100%;height:220px;object-fit:cover;border-radius:1rem;box-shadow:0 4px 10px rgba(0,0,0,0.1)}
.video-link{position:relative;display:block}
.play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:50px;color:rgba(255,255,255,0.8);text-shadow:0 2px 8px rgba(0,0,0,0.6);pointer-events:none}

.flash-sale-banner{
  background:linear-gradient(135deg,#FF6B35,#F7931E);
  border-radius:1.25rem;
  padding:2rem;
  position:relative;
  overflow:hidden;
  animation:pulse 2s ease-in-out infinite;
}
.flash-sale-banner::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent);
  animation:shine 3s infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 20px rgba(255,107,53,0.5)}
  50%{box-shadow:0 0 40px rgba(255,107,53,0.8)}
}
@keyframes shine{
  0%{transform:translateX(-100%) translateY(-100%) rotate(45deg)}
  100%{transform:translateX(100%) translateY(100%) rotate(45deg)}
}
.flash-badge{
  background:#FF1744;
  color:#fff;
  padding:0.5rem 1rem;
  border-radius:999px;
  font-weight:700;
  animation:bounce 1s infinite;
}
@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.countdown{
  font-family:"Orbitron",sans-serif;
  font-size:2rem;
  font-weight:700;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,0.3);
}
.flash-card{
  border:3px solid #FF6B35;
  position:relative;
}
.flash-card::after{
  content:"FLASH";
  position:absolute;
  top:10px;
  right:10px;
  background:#FF1744;
  color:#fff;
  padding:0.25rem 0.75rem;
  border-radius:999px;
  font-weight:700;
  font-size:0.75rem;
}
.old-price{
  text-decoration:line-through;
  color:#999;
  font-size:0.9rem;
}

#address-suggestions {
  position:absolute;
  z-index:1000;
  max-height:300px;
  overflow-y:auto;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  border-radius:0.5rem;
  width:100%;
}

#address-suggestions .list-group-item {
  background:var(--tech-blue);
  color:var(--tech-silver);
  border-color:var(--tech-dark);
  cursor:pointer;
  transition:all 0.2s;
}

#address-suggestions .list-group-item:hover {
  background:var(--tech-cyan);
  color:var(--tech-dark);
}

.address-wrapper {
  position:relative;
}

/* Fix mobile panier - toujours visible */
@media (max-width: 768px) {
  .offcanvas {
    --bs-offcanvas-width: 100%;
  }

  .offcanvas-body {
    padding-bottom: 120px !important; /* Espace pour le bouton de commande */
  }

  .cart-footer {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--tech-dark);
    padding: 1rem;
    border-top: 2px solid var(--tech-cyan);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
    z-index: 1050;
  }
}