/**
 * NOVA IP Design System - Composants
 * camera-videosurveillance.fr
 *
 * Import dans votre custom.css :
 * @import 'variables.css';
 * @import 'components.css';
 */

/* ==========================================
   BASE OVERRIDES - theme.css
   ========================================== */

/* Override theme.css : .page-content.page-cms ul, p { color: #7a7a7a; font-size: .9375rem } */
.page-content.page-cms ul,
p {
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--mx-body-color);
}

/* ==========================================
   BOUTONS
   ========================================== */

.mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.mx-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.mx-btn:active {
  transform: translateY(0);
}

/* Bouton Primary (CTA principal - Orange) */
.mx-btn-primary {
  background-color: #000;
  color: white !important;
}

.mx-btn-primary:hover,
.mx-btn-primary:focus {
  background-color: var(--mx-orange-500);
  color: white !important;
}

.mx-btn-primary:active {
  background-color: var(--mx-orange-700);
  color: white !important;
}

/* Bouton Secondary (Bleu) */
.mx-btn-secondary {
  background-color: var(--mx-blue-500);
  color: white;
}

.mx-btn-secondary:hover {
  background-color: var(--mx-blue-600);
}

.mx-btn-secondary:active {
  background-color: var(--mx-blue-700);
}

/* ==========================================
   BOUTONS TERTIAIRES (texte + icône)
   ========================================== */

.mx-btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--mx-gray-700);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  text-decoration: none;
  transition: all var(--transition-fast);
  padding: var(--space-2) 0;
  border: none;
  background: none;
  cursor: pointer;
}

.mx-btn-tertiary:hover {
  color: var(--mx-gray-900);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.mx-btn-tertiary svg,
.mx-btn-tertiary i {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

/* Variante avec icône à gauche */
.mx-btn-tertiary-left {
  flex-direction: row;
}

.mx-btn-tertiary-left:hover svg,
.mx-btn-tertiary-left:hover i {
  transform: translateX(-4px);
}

/* Variante avec icône à droite */
.mx-btn-tertiary-right {
  flex-direction: row;
}

.mx-btn-tertiary-right:hover svg,
.mx-btn-tertiary-right:hover i {
  transform: translateX(4px);
}

/* Variante avec icône en haut */
.mx-btn-tertiary-up {
  flex-direction: row;
}

.mx-btn-tertiary-up:hover svg,
.mx-btn-tertiary-up:hover i {
  transform: translateY(-4px);
}

/* Variante avec icône en bas */
.mx-btn-tertiary-down {
  flex-direction: row;
}

.mx-btn-tertiary-down:hover svg,
.mx-btn-tertiary-down:hover i {
  transform: translateY(4px);
}

/* Variante avec bordure en dessous (comme un lien souligné) */
.mx-btn-tertiary-underline {
  border-bottom: 1px solid var(--mx-gray-300);
  border-radius: 0;
  padding-bottom: var(--space-1);
}

.mx-btn-tertiary-underline:hover {
  border-bottom-color: var(--mx-gray-900);
}

/* Bouton Ghost (transparent) */
.mx-btn-ghost {
  background-color: transparent !important;
  color: var(--mx-gray-500) !important;
  border-color: var(--mx-gray-300) !important;
}

.mx-btn-ghost:hover {
  background-color: var(--mx-gray-50);
  border-color: var(--mx-gray-400);
}

.mx-btn-ghost:disabled,
.mx-btn-ghost[disabled] {
  color: var(--mx-gray-400);
  border-color: var(--mx-gray-200);
  background-color: var(--mx-gray-50);
  cursor: not-allowed;
}

.mx-btn-ghost:disabled,
.mx-btn-ghost[disabled],
.mx-btn-ghost:disabled:hover,
.mx-btn-ghost[disabled]:hover {
  color: var(--mx-gray-400);
  border-color: var(--mx-gray-200);
  background-color: var(--mx-gray-50);
  cursor: not-allowed;
  transform: none;
}

/* Bouton Outline (bordure colorée) */
.mx-btn-outline {
  background-color: white;
  color: var(--mx-blue-600);
  border-color: var(--mx-blue-500);
}

.mx-btn-outline:hover {
  background-color: var(--mx-blue-50);
  border-color: var(--mx-blue-600);
}

/* Boutons outline blanc et noir */
.mx-btn-light--outline {
  background-color: transparent;
  border: 1px solid white;
  color: white;
  transform: translateY(0);
}

.mx-btn-light--outline:hover {
  background-color: white;
  border: 1px solid white;
  color: black;
  transform: translateY(0);
}

.mx-btn-light--outline:focus {
  color: white !important;
}

.mx-btn-light--outline:focus:hover,
.mx-btn-light--outline:hover:focus {
  color: black !important;
}

.mx-btn-dark--outline {
  background-color: transparent;
  border: 1px solid var(--mx-black);
  color: var(--mx-black) !important;
}

.mx-btn-dark--outline:hover {
  background-color: var(--mx-blue-500);
  border: 1px solid var(--mx-blue-500);
  color: white !important;
}

/* Tailles de boutons */
.mx-btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}

.mx-btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-lg);
}

/* Bouton pleine largeur */
.mx-btn-block {
  display: flex;
  width: 100%;
}

/* ==========================================
   BADGES & TAGS
   ========================================== */

.mx-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Badges produits (flags) */
.mx-badge-new {
  background-color: var(--mx-blue-500);
  color: white;
}

.mx-badge-promo {
  background-color: var(--mx-orange-500);
  color: white;
}

.mx-badge-stock-out {
  background-color: var(--mx-error);
  color: white;
}

.mx-badge-stock-low {
  background-color: var(--mx-warning);
  color: white;
}

.mx-badge-success {
  background-color: var(--mx-success-light);
  color: var(--mx-success);
}

/* ==========================================
   🏷️ BADGES PRODUIT - OVERRIDE PRESTASHOP
   ========================================== */

/* Container des badges */
.product-flags {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 20; /* Au-dessus du zoom */
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2);
  width: auto !important;
  pointer-events: none;
  align-items: flex-start;
}

/* ✅ Badges positionnés sur la galerie, pas dans le container */
.mx-gallery-main > .product-flags {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 99; /* Au-dessus du zoom mais sous la sticky bar (999) */
  pointer-events: none;
}

.mx-gallery-main > .product-flags li.product-flag {
  pointer-events: none !important; /* ✅ Force AUCUNE interaction sur les badges */
}

/* ✅ Si tu veux que les badges soient cliquables UNIQUEMENT quand on ne survole PAS l'image */
.mx-main-image-container:not(:hover) ~ .product-flags,
.mx-main-image-container:not(:hover) ~ .product-flags * {
  pointer-events: auto; /* Les badges redeviennent cliquables quand on quitte l'image */
}

/* Badge individuel - Style global */
.product-flags li.product-flag {
  position: relative !important; /* ✅ Force relative (pour online-only) */
  display: inline-flex;
  align-items: center;
  min-width: 100px;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  margin: 0 !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-bold);
  line-height: 1;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: white;
  word-break: break-word;
  pointer-events: auto;
  top: auto !important; /* ✅ Reset top */
  right: auto !important; /* ✅ Reset right */
  left: auto !important; /* ✅ Reset left */
  bottom: auto !important; /* ✅ Reset bottom */
}

/* ✅ Icône laptop pour badge exclusivité web */
.product-flags li.product-flag.online-only::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: var(--space-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='12' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='2' x2='22' y1='20' y2='20'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* ✅ Badge NOUVEAU (bleu) */
.product-flags li.product-flag.new {
  background-color: var(--mx-blue-500);
}

/* ✅ Badge RÉDUCTION (rouge) */
.product-flags li.product-flag.discount {
  background-color: var(--mx-orange-500);
}

/* ✅ Badge PROMO on-sale (jaune Maxxilot, texte noir) */
.product-flags li.product-flag.on-sale {
  background-color: #f8ca32;
  color: #0a0a0a;
}

/* ✅ Badge PACK (vert) */
.product-flags li.product-flag.pack {
  background-color: var(--mx-green-500);
}

/* ✅ Badge EN LIGNE (bleu-foncé) */
.product-flags li.product-flag.online-only {
  background-color: var(--mx-blue-700);
}

/* ✅ Badge par défaut (bleu clair Prestashop) */
.product-flags li.product-flag:not(.new):not(.discount):not(.on-sale):not(.pack):not(.online-only) {
  background-color: var(--mx-primary);
}

/* ==========================================
   CARDS (Cartes produits)
   ========================================== */

.mx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: white;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}

/* .mx-card:hover {
  border-color: var(--mx-blue-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
} */

/* Image container dans la card */
.mx-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Image carrée */
  overflow: hidden;
  background-color: var(--mx-gray-50);
  margin-bottom: 0 !important; /* Override theme.css .thumbnail-container margin-bottom */
}

.mx-card-image .product-thumbnail {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  display: block;
  padding: 0 !important;
  margin: 0 !important;
}

.mx-card-image .product-thumbnail picture {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.mx-card-image img,
.product-miniature .mx-card-image .product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform var(--transition-slow);
}

.mx-card:hover .mx-card-image img {
  transform: scale(1.05);
}

/* Badges sur l'image */
.mx-card-badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 10;
}

/* Contenu de la card */
.mx-card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.mx-card-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
  margin: 0;
  line-height: var(--lh-tight);
}

.mx-card-title a {
  color: inherit;
  text-decoration: none;
}

.mx-card-title a:hover {
  color: var(--mx-blue-600);
}

.mx-card-description {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  margin: 0;
}

/* Prix dans la card */
.mx-card-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: auto;
}

.mx-card-price-current {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--mx-gray-900);
}

.mx-card-price-old {
  font-size: var(--fs-base);
  color: var(--mx-gray-500);
  text-decoration: line-through;
}

.mx-card-price-discount {
  position: relative;
  padding: 4px 12px 4px 24px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: white;
  background: var(--mx-orange-500);
  display: inline-block;
  border-radius: 0 4px 4px 0;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}

/* Trou circulaire */
.mx-card-price-discount::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
}

/* Footer de la card (bouton ajouter panier) */
.mx-card-footer {
  padding: var(--space-4);
  padding-top: 0;
}

/* ========================================
   QUICK VIEW (Aperçu rapide)
   ======================================== */

/* Positionner la card en relative pour contenir le bouton */
.mx-card {
  position: relative;
}

/* Bouton Quick View */
.mx-quick-view {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: white;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity var(--transition-fast);
  cursor: pointer;
  z-index: 10;
  border: none;
  text-decoration: none;
  color: var(--mx-gray-700);
}

.mx-quick-view:hover {
  box-shadow: var(--shadow-md);
}

/* Apparition au hover de la card */
.mx-card:hover .mx-quick-view {
  opacity: 1;
}

/* SVG à l'intérieur */
.mx-quick-view svg {
  display: block;
}

/* ==========================================
   INPUTS & FORMULAIRES
   → Styles de base déplacés vers form-elements.css
   → Ce fichier conserve uniquement les styles spécifiques composants
   ========================================== */

/* ==========================================
   FILTRES (Faceted Search)
   ========================================== */

.mx-filter-group {
  margin-bottom: var(--space-6);
}

.mx-filter-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--border-color);
}

.mx-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mx-filter-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.mx-filter-item:hover {
  color: var(--mx-blue-600);
}

.mx-filter-item label {
  flex: 1;
  cursor: pointer;
  font-size: var(--fs-sm);
}

.mx-filter-count {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
}

/* ==========================================
   BREADCRUMB (Fil d'Ariane)
   ========================================== */

.mx-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
}

.mx-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mx-breadcrumb-separator {
  color: var(--mx-gray-400);
}

.mx-breadcrumb-link {
  color: var(--mx-gray-600);
  transition: color var(--transition-fast);
}

.mx-breadcrumb-link:hover {
  color: var(--mx-blue-600);
}

.mx-breadcrumb-current {
  color: var(--mx-gray-900);
  font-weight: var(--fw-medium);
}

/* ==========================================
   PAGINATION
   ========================================== */

.mx-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) 0;
}

.mx-pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-700);
  background-color: white;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.mx-pagination-item:hover:not(.mx-pagination-active) {
  background-color: var(--mx-gray-50);
  border-color: var(--mx-gray-300);
}

.mx-pagination-active {
  background-color: var(--mx-blue-500);
  color: white;
  border-color: var(--mx-blue-500);
}

/* ==========================================
   MODAL / QUICK VIEW
   ========================================== */

.mx-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.mx-modal-backdrop.active {
  opacity: 1;
}

/* Bootstrap modal backdrop - override global (glassmorphism) - teinte rouge-noir Maxxilot */
.modal-backdrop {
  background-color: rgba(22, 5, 7, 0.72) !important;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}

.modal-backdrop.in,
.modal-backdrop.show {
  opacity: 1 !important;
}

.mx-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  max-width: 90vw;
  max-height: 90vh;
  width: 800px;
  background-color: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  opacity: 0;
  transition: all var(--transition-base);
  overflow: auto;
}

.mx-modal.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.mx-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: var(--border-width) solid var(--border-color);
}

.mx-modal-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.mx-close {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: #000;
  transition: all var(--transition-fast);
}

.mx-modal-body {
  padding: var(--space-6);
}

/* ===================================
   QUANTITY INPUT - Voir form-elements.css
   Utiliser la classe .mx-qty
   =================================== */

/* ===================================
   PRODUCT SELECTS (Variantes)
   =================================== */

.product-variants select,
.product-customization select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-900);
  background: white;
  border: 1px solid transparent !important;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; */
}

.product-variants select:hover,
.product-customization select:hover {
  border: 1px solid var(--mx-gray-300) !important;
}

.product-variants select:focus,
.product-customization select:focus,
.product-variants select:focus-visible,
.product-customization select:focus-visible {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(70, 188, 235, 0.1) !important;
}

/* Label au-dessus */
.product-variants .form-control-label,
.product-customization .form-control-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
  margin-bottom: var(--space-2);
  display: block;
}

/* ==========================================
   ALERTES / NOTIFICATIONS
   ========================================== */

.mx-alert {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid;
}

.mx-alert p {
  margin: 0;
}

.mx-alert-success {
  background-color: var(--mx-success-light);
  border-color: var(--mx-success);
  color: var(--mx-success-dark);
}

.mx-alert-warning {
  background-color: var(--mx-warning-light);
  border-color: var(--mx-warning);
  color: var(--mx-warning-dark);
}

.mx-alert-error {
  background-color: var(--mx-error-light);
  border-color: var(--mx-error);
  color: var(--mx-error-dark);
}

.mx-alert-info {
  background-color: var(--mx-info-light);
  border-color: var(--mx-info);
  color: var(--mx-info-dark);
}

/* Override p global pour alertes mx-* */
.mx-alert-success p { color: var(--mx-success-dark) !important; }
.mx-alert-warning p { color: var(--mx-warning-dark) !important; }
.mx-alert-error p { color: var(--mx-error-dark) !important; }
.mx-alert-info p { color: var(--mx-info-dark) !important; }

/* Alertes Bootstrap PrestaShop - Override avec design system */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  border-left: 4px solid;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

.alert ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.alert li {
  margin: 0;
}

.alert-success {
  background-color: var(--mx-success-light);
  border-color: var(--mx-success);
  color: var(--mx-success-dark);
}

.alert-danger {
  background-color: var(--mx-error-light);
  border-color: var(--mx-error);
  color: var(--mx-error-dark);
}

.alert-warning {
  background-color: var(--mx-warning-light);
  border-color: var(--mx-warning);
  color: var(--mx-warning-dark);
}

.alert-info {
  background-color: var(--mx-info-light);
  border-color: var(--mx-info);
  color: var(--mx-info-dark);
}

/* Override p global pour alertes Bootstrap */
.alert-success p { color: var(--mx-success-dark) !important; }
.alert-warning p { color: var(--mx-warning-dark) !important; }
.alert-danger p { color: var(--mx-error-dark) !important; }
.alert-info p { color: var(--mx-info-dark) !important; }

/* ==========================================
   INTL-TEL-INPUT - Indicatifs téléphone
   ========================================== */

.iti {
  width: 100%;
  /* Chemins des sprites */
  --iti-path-flags-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/flags.webp");
  --iti-path-flags-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/flags@2x.webp");
  --iti-path-globe-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/globe.webp");
  --iti-path-globe-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/img/globe@2x.webp");
  /* Dimensions du sprite v24 */
  --iti-flag-sprite-width: 3904px;
  --iti-flag-sprite-height: 12px;
  --iti-flag-width: 16px;
  --iti-flag-height: 12px;
}

/* IMPORTANT: Override des anciens CSS intl-tel-input (PayPal, Colissimo)
   Ces modules chargent une vieille version qui entre en conflit avec le CDN v24 */
.iti .iti__flag {
  width: var(--iti-flag-width) !important;
  height: var(--iti-flag-height) !important;
  background-image: var(--iti-path-flags-1x) !important;
  background-position: var(--iti-flag-offset) 0 !important;
  background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height) !important;
  background-color: transparent !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti .iti__flag {
    background-image: var(--iti-path-flags-2x) !important;
  }
}

/* Container du drapeau + indicatif */
.iti .iti__country-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

/* Bouton sélecteur de pays */
.iti .iti__country-container .iti__selected-country-primary {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 12px;
  height: 100%;
  background-color: var(--mx-gray-50);
  border-right: 1px solid var(--mx-gray-200);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* IMPORTANT: padding-left sur l'input pour décaler le texte après le drapeau */
.iti input,
.iti input.form-control,
.iti input[type="tel"],
.iti input.iti__tel-input,
body#checkout .iti input.form-control,
body .iti input.form-control {
  padding-left: 90px !important;
  box-sizing: border-box !important;
}

/* Indicatif affiché */
.iti .iti__selected-dial-code {
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
  margin-left: 4px;
}

/* Dropdown liste des pays */
.iti .iti__country-list {
  font-size: var(--fs-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--mx-gray-200);
  max-height: 250px;
  z-index: 1050;
}

.iti .iti__country.iti__highlight {
  background-color: var(--mx-gray-100);
}

/* Flèche dropdown */
.iti .iti__arrow {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--mx-gray-600);
  margin-left: 4px;
}

  /* Disponibilité produit */
  #product-availability {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
  }

  #product-availability .product-unavailable,
  #product-availability .product-last-items {
    color: var(--mx-orange-500);
  }

  #product-availability svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

/* ==========================================
   SKELETON LOADING
   ========================================== */

.mx-skeleton {
  background: linear-gradient(
    90deg,
    var(--mx-gray-200) 25%,
    var(--mx-gray-100) 50%,
    var(--mx-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.mx-skeleton-text {
  height: 1em;
  margin-bottom: var(--space-2);
}

.mx-skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: var(--space-3);
}

.mx-skeleton-image {
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* ==========================================
   TOOLTIPS
   ========================================== */

.mx-tooltip {
  position: relative;
  display: inline-block;
}

.mx-tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: var(--space-2) var(--space-3);
  background-color: var(--mx-gray-900);
  color: white;
  font-size: var(--fs-xs);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: var(--z-tooltip);
}

.mx-tooltip:hover .mx-tooltip-content {
  opacity: 1;
}

/* Flèche du tooltip */
.mx-tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--mx-gray-900);
}

/* ==========================================
   RATING (Étoiles)
   ========================================== */

.mx-rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.mx-rating-star {
  width: 1em;
  height: 1em;
  color: var(--mx-warning);
}

.mx-rating-star.empty {
  color: var(--mx-gray-300);
}

.mx-rating-count {
  margin-left: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--mx-gray-500);
}

/* ==========================================
   STOCK INDICATOR
   ========================================== */

.mx-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.mx-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mx-stock-available .mx-stock-dot {
  background-color: var(--mx-success);
}

.mx-stock-available {
  color: var(--mx-success);
}

.mx-stock-low .mx-stock-dot {
  background-color: var(--mx-warning);
}

.mx-stock-low {
  color: var(--mx-warning);
}

.mx-stock-out .mx-stock-dot {
  background-color: var(--mx-error);
}

.mx-stock-out {
  color: var(--mx-error);
}

/* ==========================================
   TABS (Onglets)
   ========================================== */

.mx-tabs {
  border-bottom: var(--border-width) solid var(--border-color);
}

.mx-tabs-list {
  display: flex;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.mx-tabs-item {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-600);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mx-tabs-item:hover {
  color: var(--mx-gray-900);
}

.mx-tabs-item.active {
  color: var(--mx-blue-600);
  border-bottom-color: var(--mx-blue-600);
}

/* ==========================================
   DIVIDER (Séparateur)
   ========================================== */

.mx-divider {
  height: var(--border-width);
  background-color: var(--border-color);
  border: none;
  margin: var(--space-6) 0;
}

/* ==========================================
   SPINNER / LOADER
   ========================================== */

.mx-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--mx-gray-200);
  border-top-color: var(--mx-blue-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.mx-spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.mx-spinner-lg {
  width: 3rem;
  height: 3rem;
  border-width: 4px;
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */

/* Hide/Show selon breakpoints */
.mx-hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .mx-hide-mobile {
    display: block;
  }
  .mx-hide-desktop {
    display: none;
  }
}

/* Spacing responsive */
@media (min-width: 768px) {
  .mx-container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  
  .mx-grid {
    gap: var(--space-8);
  }
}
/* ICONES */
.mx-cart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #000;
  border-radius: 50%;
  flex-shrink: 0;
}

.mx-cart-icon svg {
  display: block;
}

/* ===================================
   REASSURANCE BLOC PRODUIT
   =================================== */

.blockreassurance_product {
  margin: var(--space-8) 0;
}

/* Grid layout horizontal */
.mx-reassurance-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}

/* Items */
.mx-reassurance-item {
  flex: 1 1 calc(25% - var(--space-8));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

/* Icône */
.mx-reassurance-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mx-blue-500);
  border-radius: var(--radius-full);
}

.mx-reassurance-icon img,
.mx-reassurance-icon svg {
  width: 32px !important;
  height: 32px !important;
  max-width: none !important;
}

/* Forcer couleurs SVG */
.mx-reassurance-icon svg path,
.mx-reassurance-icon svg circle,
.mx-reassurance-icon svg rect,
.mx-reassurance-icon svg line {
  stroke: #fff !important;
  fill: transparent !important;
}

/* Texte */
.mx-reassurance-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mx-reassurance-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-500);
  line-height: 1.3;
  margin: 0;
}

.mx-reassurance-desc {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  line-height: 1.4;
  margin: 0;
}

/* ==========================================
   SLIDERS PRODUITS - Règles unifiées
   ========================================== */

   /* Boutons navigation slider */
.mx-slider-nav {
  transition: all 0.2s ease;
}

.mx-subcategories-slider {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mx-subcategories-slider::-webkit-scrollbar {
  display: none;
}

.mx-subcategories-slider .mx-product-slide {
  flex: 0 0 280px;
  min-width: 280px;
  max-width: 280px;
  display: flex;
}

.mx-subcategories-slider .mx-product-slide > div {
  width: 100%;
}

.mx-subcategories-slider .mx-product-slide .mx-card {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mx-subcategories-slider .mx-product-slide .mx-card-image {
  width: 100%;
}

.mx-subcategories-slider .mx-product-slide .mx-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mx-subcategories-slider .mx-product-slide .mx-card-body {
  flex: 1;
  overflow: hidden;
}

.mx-subcategories-slider .mx-product-slide .mx-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Slider - Override tablette (garder cards verticales) */
@media (min-width: 768px) and (max-width: 991px) {
  .mx-subcategories-slider .mx-product-slide .mx-card.product-miniature {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
  }
  
  .mx-subcategories-slider .mx-product-slide .mx-card-image {
    grid-column: unset;
    grid-row: unset;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  
  .mx-subcategories-slider .mx-product-slide .mx-card-body,
  .mx-subcategories-slider .mx-product-slide .mx-card-footer {
    grid-column: unset;
    grid-row: unset;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .mx-reassurance-item {
    flex: 1 1 calc(50% - var(--space-6));
  }
  
  .mx-reassurance-icon {
    width: 48px;
    height: 48px;
  }
  
  .mx-reassurance-icon img,
  .mx-reassurance-icon svg {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 480px) {
  .mx-reassurance-item {
    flex: 1 1 100%;
  }
}
/* FIX INTERIM : neutraliser les 4 .modal-backdrop ORPHELINS créés au chargement sur
   Maxxilot (absents de Nova IP = viennent d'un module non copié à l'identique ; à traiter
   à la SOURCE ultérieurement). Ces orphelins n'ont NI .in NI .show et bloqueraient tous
   les clics. Un backdrop réellement actif (quickview, modals) porte .in (activation
   Bootstrap 3-style, déjà reconnue par le CSS de base `.modal-backdrop.in`) ou .show
   -> on l'exclut pour préserver son fond sombre. */
.modal-backdrop:not(.show):not(.in) {
  display: none !important;
  pointer-events: none !important;
}