/* ==========================================================================
   THEME-V80.CSS — CHARTE VISUELLE (ORANGE, BEIGE, IVOIRE & VERT FRAIS)
   ========================================================================== */

:root {
  /* Variables de couleurs principales */
  --yellow: #FF5C2B !important;
  --yellow-strong: #E94D20 !important;
  --bg: #FBF2D9 !important;
  --panel: #FFF9EA !important;
  --panel2: #F8E8C9 !important;
  --card: #FFFAEF !important;
  --text: #302A23 !important;
  --muted: #756B5D !important;
  --line: #E8D9B9 !important;
  --dark: #33332F !important;
  --green: #83BE8D !important;
  --danger: #D94A22 !important;
  --shadow: 0 10px 30px rgba(90, 65, 35, 0.10) !important;
  --shadow-hover: 0 16px 38px rgba(90, 65, 35, 0.16) !important;

  /* Aliases */
  --copper: #FF5C2B !important;
  --copper-dark: #D94A22 !important;
  --ivory: #FBF2D9 !important;
  --charcoal: #33332F !important;
  --graphite: #33332F !important;
}

/* Layout Global */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Composants principaux */
.menu,
.drawer,
.drawer-head,
.modal > div,
.modal-body,
.modal-foot,
.checkout .step {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.cats,
.category,
.cat,
.category-btn {
  border-color: var(--line) !important;
}

/* Boutons principaux & badges actifs */
.cats .cat.active,
.cats .active,
.category.active,
.cat.active,
.category-btn.active,
.install-btn,
.footer-order-link,
.btn-primary,
.add-to-cart,
.add-btn,
.cartbar button,
.checkout button.primary,
.add,
.primary {
  background:#f91b78;
  color: #ffffff !important;
  border-color:#F91A63;
}

button:hover,
.install-btn:hover,
.footer-order-link:hover,
.btn-primary:hover,
.add-to-cart:hover,
.add-btn:hover,
.add:hover,
.primary:hover {
  background: #f91b78;
  border-color: var(--copper-dark) !important;
}

/* Cartes Produits & Offres */
.product,
.product-card,
.item-card,
.menu-item,
.offer-card {
  background: var(--card) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}

.product:hover,
.offer-card:hover {
  box-shadow: var(--shadow-hover) !important;
}



/* Badges & Statuts */
.promo-badge,
.discount-badge,
.badge-promo,
.status,
.open-status,
.success,
.available {
  background: #60FF03 !important;
  color: #31543A !important;
}

.badge {
  background:#F00;
  color: #fff !important;
}

.whatsapp {
  background: #198754 !important;
  color: #fff !important;
}

/* Formulaires & Options */
.choice,
.formula-choice label,
.type,
.option-check-grid {
  background: var(--bg) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.choice:has(input:checked),
.formula-choice label:has(input:checked),
.type.active {
  background: #F4C487 !important;
  border-color: var(--copper) !important;
}

.choice label,
.formula-choice label,
.option-check-grid label {
  color: var(--text) !important;
}

.option-check-grid label,
.field input,
.field select,
.field textarea,
input, select, textarea {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.qty,
.step b {
  background: #F4C487 !important;
  color: var(--text) !important;
}

.step b.active {
  background: var(--copper) !important;
  color: #fff !important;
}


.language-flag:hover,
.language-flag.active {
  background: #C6DEB8 !important;
  color: #31543A !important;
  border-color: var(--green) !important;
}

/* Adaptations Responsive */
@media (max-width: 768px) {
  .menu,
  .menu-top,
  .search,
  .cats,
  .drawer,
  .drawer-head,
  .modal,
  .modal .modal-body,
  .modal > div {
    background: var(--panel) !important;
  }
}