/* custom.css — ce que Tailwind CDN ne couvre pas (mobile, safe-area, anims). */

:root {
  --dp-primary: #781444;
  --dp-primary-dark: #5e0f35;
  --dp-accent: #F3E8EE;
  --dp-bg: #FAF7F8;
}

body { font-family: 'Poppins', sans-serif; }

/* Masque la scrollbar des onglets catégories mobiles */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

html { scroll-behavior: smooth; }

/* Highlight de la catégorie active (sidebar) */
.side-link.active { background-color: var(--dp-primary); color: #fff; }
.side-link.active i { color: #fff; }

/* Onglet mobile actif */
.cat-tab.active { background-color: var(--dp-primary); color: #fff; border-color: var(--dp-primary); }

/* Panier plein écran mobile : hauteur dynamique + safe-area iOS */
#cart-drawer .drawer-panel { height: 100dvh; }
#mobile-cart-bar { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }

/* Animation compteur panier */
.cart-pulse { animation: cartPulse 0.15s ease; }
@keyframes cartPulse { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Modale produit : apparition */
.modal-enter { animation: modalIn 0.18s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Badge indispo */
.badge-indispo { filter: grayscale(1); opacity: 0.55; }

/* Toast */
#dp-toast {
  position: fixed; left: 50%; bottom: 5rem; transform: translateX(-50%) translateY(1rem);
  background: #111; color: #fff; padding: 0.7rem 1.1rem; border-radius: 0.75rem; font-size: 0.9rem;
  opacity: 0; pointer-events: none; transition: all 0.25s ease; z-index: 60; box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
#dp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* -------------------------------------------------------------------------
   Champs de formulaire (page commande). CSS pur : le CDN Tailwind v4 ne
   traite pas @apply dans un fichier externe. Réutilise --dp-primary.
   ------------------------------------------------------------------------- */
.dp-field { display: flex; flex-direction: column; gap: 0.35rem; }
.dp-label { font-size: 0.8rem; font-weight: 600; color: #4b5563; }
.dp-label .req { color: #dc2626; margin-left: 0.15rem; }
.dp-input {
  width: 100%; border: 1px solid #e5e7eb; border-radius: 0.75rem;
  padding: 0.625rem 1rem; outline: none; background: #fff; color: #1f2937;
  transition: border-color 0.15s ease;
}
.dp-input::placeholder { color: #9ca3af; }
.dp-input:focus { border-color: var(--dp-primary); }
.dp-input.err { border-color: #dc2626; }
.dp-input-err { font-size: 0.75rem; color: #dc2626; }

/* Barre de réassurance (bas de page commande) */
.dp-trust { background: var(--dp-accent); }
.dp-trust i { color: var(--dp-primary); }

/* Segments « pilule » (mode, coupe, piment, créneau) : cible tactile ≥ 44 px
   sur mobile, taille de texte confortable. */
.dp-seg { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Logos de paiement : hauteur constante, jamais de débordement. */
.pay-logo { height: 22px; width: auto; max-width: 96px; object-fit: contain; }