/* Achat Direct - Styles personnalisés, animations & design premium */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;800;900&display=swap');

:root {
  --color-brand-blue: #0A2540;
  --color-brand-marine: #0e375e;
  --color-brand-emerald: #059669;
  --color-brand-accent: #0284c7;
  --color-brand-amber: #f59e0b;
  --site-max-width: 1320px;
}

/* Réduction globale harmonieuse de la taille de page pour un affichage plein écran optimal */
html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 1280px) {
  html {
    font-size: 14px;
  }
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: #1e293b;
  background-color: #f8fafc;
  scroll-behavior: smooth;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Réduction du cadre global du site pour un rendu plus compact, élégant et centré */
.max-w-7xl {
  max-width: var(--site-max-width) !important;
}

/* Ajustement harmonieux des titres pour un rendu moins imposant et plus élégant */
h1, .font-heading.text-4xl, .font-heading.text-5xl, .font-heading.text-6xl {
  font-size: clamp(1.8rem, 3.4vw, 2.65rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.025em;
}

h2, .font-heading.text-3xl {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
}

h3, .font-heading.text-2xl {
  font-size: clamp(1.15rem, 1.6vw, 1.38rem) !important;
  line-height: 1.3 !important;
}

/* Hauteur de la bande blanche de navigation avec tous les onglets (ultra-compacte & raffinée) */
header {
  padding-top: 0.05rem !important;
  padding-bottom: 0.05rem !important;
}
header .h-20, header .h-14, header .h-13, header .h-12, header .h-10 {
  height: 2.55rem !important; /* ~36-38px fin pour libérer l'écran et afficher un contenu complet */
}

/* Espacement vertical compact des sections pour tout voir sur une même page */
.py-16 {
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}

.sm\:py-24 {
  padding-top: 2rem !important;
  padding-bottom: 2.25rem !important;
}

/* Préservation de la netteté et clarté des petits textes */
.text-xs {
  font-size: 0.78rem !important;
}

h1, h2, h3, .font-heading {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Animations d'ouverture et tiroirs */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseSubtle {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes bounceSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-pulse-subtle {
  animation: pulseSubtle 2.5s infinite ease-in-out;
}

.animate-bounce-slow {
  animation: bounceSlow 3s infinite ease-in-out;
}

.cart-drawer-open {
  animation: slideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Barre de défilement stylisée */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Effets de cartes de produits */
.product-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(10, 37, 64, 0.12);
}

/* Placeholder pour images en chargement */
.img-fallback {
  background: linear-gradient(135deg, #0e375e 0%, #064e3b 100%);
}

/* Toast de notification */
.toast-item {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1), fadeOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) 3.7s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Hero Badge Glow */
.hero-glow {
  background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.18) 0%, rgba(10, 37, 64, 0) 70%);
}

/* Bouton WhatsApp Flottant */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 45;
  background-color: #25D366;
  color: white;
  border-radius: 50px;
  padding: 12px 20px;
  box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.5);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 15px 30px -5px rgba(37, 211, 102, 0.6);
  background-color: #20ba5a;
}
.whatsapp-float .ping-ring {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #EF4444;
  border: 2px solid white;
}

/* Bouton Wishlist Heart */
.wishlist-btn {
  transition: transform 0.2s ease, color 0.2s ease;
}
.wishlist-btn:hover {
  transform: scale(1.15);
}
.wishlist-btn.active {
  color: #EF4444;
}

/* Style de sélection des modes de paiement */
.payment-option-card {
  transition: border-color 0.2s, background-color 0.2s;
  cursor: pointer;
}
.payment-option-card.selected {
  border-color: #10B981;
  background-color: rgba(16, 185, 129, 0.05);
}

/* Animations de l'écran de verrouillage */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.animate-shake {
  animation: shake 0.4s ease-in-out;
}
.animate-fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

/* ================= ÉCRITURE GÉRANT EN ROUGE VIF ================= */
.gerant-text,
.text-gerant-rouge,
.role-badge-gerant {
  color: #ef4444 !important; /* Rouge écarlate vif */
  font-weight: 800 !important;
}

/* Règle stricte d'invisibilité pour les éléments masqués */
.hidden {
  display: none !important;
}

/* ================= MODE MAINTENANCE STRICT ================= */
/* Masquage total de la boutique : rien n'apparaît sur le site sauf l'écran de maintenance */
html.site-under-maintenance #site-main-store-wrapper,
body.site-under-maintenance #site-main-store-wrapper,
#site-main-store-wrapper.maintenance-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.site-under-maintenance #password-gate-overlay,
body.site-under-maintenance #password-gate-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.site-under-maintenance .whatsapp-float,
body.site-under-maintenance .whatsapp-float {
  display: none !important;
}

/* Verrouillage absolu de tous les tiroirs, modales et overlays pour le client */
html.site-under-maintenance .fixed:not(#maintenance-overlay):not(#maintenance-overlay *),
body.site-under-maintenance .fixed:not(#maintenance-overlay):not(#maintenance-overlay *) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.site-under-maintenance #maintenance-overlay,
body.site-under-maintenance #maintenance-overlay {
  display: flex !important;
  z-index: 999999 !important;
  position: fixed !important;
  inset: 0 !important;
  height: 100vh !important;
  max-height: 100dvh !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto;
}

/* Verrouillage strict du défilement : affichage juste écran sans ascenseur */
html.site-under-maintenance,
body.site-under-maintenance {
  height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.maintenance-screen-card {
  max-height: calc(100dvh - 1.5rem);
}

@media (min-height: 520px) {
  html.site-under-maintenance #maintenance-overlay,
  body.site-under-maintenance #maintenance-overlay {
    overflow-y: hidden !important;
  }
  .maintenance-screen-card {
    overflow-y: visible !important;
  }
}

/* Sécurité comptabilité : Masquage strict de la modale analytique hors ouverture explicite */
#accounting-modal {
  display: none !important;
}

#accounting-modal.modal-active {
  display: flex !important;
}

/* ================= GESTION DES COMMANDES CLIENTS PLEINE PAGE (SUR TOUTE LA PAGE) ================= */
#orders-modal:not(.hidden) {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background-color: #020617 !important;
  z-index: 99999 !important;
  overflow: hidden !important;
}

#orders-modal .orders-fullpage-card {
  width: 100vw !important;
  height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
}