/* Empêche Safari de zoomer */
input, select, textarea, button { font-size:16px }
html, body { touch-action:pan-x pan-y }

/* Bannière livraison/retrait */
#delivery-info {
  background:#1f1f1f; color:#fff;
  text-align:center; padding:.75rem;
  font-size:.95rem;
}
#delivery-info strong { color:#8fc034 }

/* Grille catégories */
#categories {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1.5rem;
  margin:2rem 0;
  padding:1.5rem;
  border-radius:1.25rem;
  background:rgba(255,255,255,0.04);
}
.cat-btn {
  background:none;
  border:none;
  cursor:pointer;
  color:#f5f5f5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:200px;
  text-align:center;
}
.cat-btn img, .cat-btn .cat-icon-all {
  width:120px; height:120px;
  border-radius:50%;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  object-fit:contain;
  transition:border .2s, transform .2s;
  color: #555;
  font-size: xx-large;
}
.cat-btn img,
.cat-btn .cat-icon-all {
  margin-bottom:8px;
}
.cat-btn.selected img,
.cat-btn.selected .cat-icon-all {
  border:4px solid #8fc034;
}
.cat-btn span {
  display:block;
  margin-top:8px;
  font-weight:bold;
  color:#666;
}
.cat-btn:focus-visible {
  outline:2px solid #8fc034;
  outline-offset:4px;
}

@media (max-width:640px) {
  #categories {
    display:flex;
    overflow-x:auto;
    padding-bottom:0.75rem;
    gap:1rem;
    scroll-snap-type:x mandatory;
  }
  .cat-btn {
    flex:0 0 auto;
    scroll-snap-align:start;
  }
}

/* Tri par prix */
#sort-wrapper {
  text-align:center;
  margin-bottom:2rem;
}
#sort-wrapper .form-select {
  display:inline-block;
  width:auto;
}

/* Cartes */
.card {
  background:#fafafa;
  border:1px solid #ddd;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  border-radius:14px;
  box-shadow:0 3px 12px rgba(0,0,0,0.06);
  transition:transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
}
.card .card-title { color:#1f1f1f; }
.card .card-text { color:#555; }
.card strong { color:#1f1f1f; }

.card .card-img-top {
  width:100%;
  height:220px;
  object-fit:contain;
  padding:1rem;
  background:#fff;
  border-bottom:1px solid #eee;
}

.btn-success {
  background:#8fc034;
  border-color:#8fc034;
  color:#ffffff;
}
.btn-success:hover {
  background:#76a828; border-color:#76a828;
}

/* Modal détail */
#prodDetailModal .modal-body a.glightbox-thumb {
  display:inline-block; margin:4px;
  border:1px solid #8fc034;
  width:200px; height:200px; overflow:hidden;
}
#prodDetailModal .modal-body a.glightbox-thumb img {
  width:100%; height:100%; object-fit:cover; cursor:pointer;
}
.glightbox-container,
.glightbox-overlay { z-index:2100!important }

/* Cache SEO local */
.visually-hidden {
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden;
}

#products {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
}

#products > div {
  width:100%!important;
  padding:0!important;
  display:flex;
  justify-content:center;
}

#products > div > .card {
  max-width:260px;
}

@media (max-width:767.98px) {
  #products {
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  }
}

/* Compte client */
.account-panel {
  background:#262626;
  border:1px solid #353535;
  color:#ffffff;
}
.account-panel h2,
.account-panel strong {
  color:#ffffff;
}
.account-panel .info-list,
.account-panel .info-list li {
  color:#cccccc;
}
.account-panel .btn {
  background:#8fc034;
  color:#ffffff;
  border:none;
}
.account-panel .btn:hover {
  background:#76a828;
}

.account-orders .card-surface {
  background:#262626;
  border:1px solid #3c3c3c;
  color:#ffffff;
}

.account-orders .order-status {
  background:rgba(143,192,52,0.18);
  color:#ffffff;
  padding:0.2rem 0.9rem;
}

.account-orders .order-date,
.account-orders .order-tracking {
  color:#cccccc;
}

.account-orders .btn {
  background:#8fc034;
  color:#ffffff;
  border:none;
}

.account-orders .btn:hover {
  background:#76a828;
}