@import url('connexion.css'); /*Page connexion + inscription */
@import url('panier.css'); /*Page panier */
@import url('header.css'); /* Header */
@import url('product.css'); /* Page produit */
@import url('category.css'); /* Page category */ 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* --------- TYPO ---------- */
/* Texte global */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Titres principaux + titres de produits */
h1, h2, h3, h4, h5, h6,
.product-miniature .product-title {
  font-family: inherit;
  letter-spacing: 0.01em;
}

/* Titre produit dans la carte */
.product-miniature .product-title {
  margin: 12px 12px 2px;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #0f172a;
  line-height: 1.2;
}

/* Texte général (paragraphe, descriptions, petits textes) */
p,
.product-miniature .product-price-and-shipping,
.product-miniature .price,
.product-miniature .regular-price,
.product-description,
.product-short-description,
.product-information,
.current-price-value,
.tax-label {
    font-family: "DM Sans", sans-serif !important;
    letter-spacing: -0.01em;
}

.product-miniature .price {
    font-weight: 600;
    font-size: 1rem;
}

.product-miniature .regular-price {
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 500;
}


/*---------------------- ACCUEIL ---------------*/

/* Hover sur les produits */
@media (hover: hover) {
  .product-miniature {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .product-miniature:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 10;
  }
}

/* Prix barré - Réduction */
.product-miniature .price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #388e3c; /* vert promo */
}

.product-miniature .regular-price {
  color: #9e9e9e;
  text-decoration: line-through;
  font-size: 0.95rem;
  margin-right: 5px;
}

/* Titre produit */
.product-miniature .product-title {
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: capitalize;
  color: #212121;
  margin-bottom: 0.4rem;
}

/*  ---------------- Carte produit modernisée -------- */
/* Conteneur produit — grille responsive (4/3/2/1) */
.featured-products .products,
#products .products,
.product-accessories .products,
.block-category .products,
.products .product_list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 colonnes desktop */
  gap: 24px; /* Espacement horizontal + vertical */
}

/* Enfants directs des listes (li/article/div, y.c. classes Bootstrap) */
.featured-products .products > *,
#products .products > *,
.product-accessories .products > *,
.block-category .products > *,
.products .product_list > * {
  margin: 0 !important;   /* le gap gère l'espace */
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
  min-width: 0;           /* évite les overflow forcés par le contenu */
  padding: 0;             /* neutralise des paddings de thème éventuels */
}

/* Carte produit */
.product-miniature {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Image produit */
.product-miniature .thumbnail-container {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}

/* Titre produit */
.product-miniature .product-title {
  margin: 12px 12px 2px;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  line-height: 1.2;
  word-break: break-word;
}

/* Bloc prix */
.product-miniature .product-price-and-shipping {
  margin: 0 12px 12px;
  display: block;
}
.product-miniature .product-price-and-shipping .price {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

/* --- Ligne de prix : ancien prix barré + prix actuel --- */
.product-miniature .product-price-and-shipping {
  margin: 0 12px 12px;
  /*display: flex;*/
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* Ancien prix barré (s'il existe) */
.product-miniature .product-price-and-shipping .regular-price {
  display: inline-block;             /* ré-affiche le prix barré */
  font-size: 0.9rem;
  color: #9ca3af;
  text-decoration: line-through;
  margin-right: 4px;
}

/* Prix actuel */
.product-miniature .product-price-and-shipping .price {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

/* Masquer le discount */
.product-miniature .product-flag.discount,
.product-miniature li.product-flag.discount {
  display: none !important;
}

/* -------------- Flags porduits design  ------------- */
/* --- Position globale des flags sur la carte --- */
.product-miniature .thumbnail-container {
  position: relative; /* pour ancrer les badges dessus */
}

.product-miniature .product-flags {
  position: absolute;
  /*top: -6px;*/
  left: 4px;
  display: flex;
  flex-direction: column;
  /*gap: 6px;*/
  z-index: 5;
}

/* Style de base commun aux badges */
.product-miniature .product-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*padding: 3px 10px;*/
  border-radius: 999px;         /* pill */
  font-size: 0.2rem;
  text-transform: capitalize;
  line-height: 1;
  white-space: nowrap;
}

/* --- RUPTURE DE STOCK (noir + texte blanc) --- */
.product-miniature .product-flag.out_of_stock,
.product-miniature .product-flag.out-of-stock,
.product-miniature .product-flag.rupstock,
.product-miniature .product-flag.sold-out {
  background: #000;
  color: #fff;
}

/* --- EXCLUSIVITÉ WEB (même style pill noir) --- */
.product-miniature .product-flag.online-only,
.product-miniature .product-flag.online_only,
.product-miniature .product-flag.exclusivite-web,
.product-miniature .product-flag.exclusivite_web {
  background: #000;
  color: #fff;
}

/* --- PACK : texte rouge, badge clair bordé rouge --- */
.product-miniature .product-flag.pack {
  background: #fff;
  color: #ef4444;               /* rouge texte */
  border: 1px solid #ef4444;    /* contour rouge */
}

/* masquer la remise */
.product-miniature .product-flag.discount,
.product-miniature li.product-flag.discount {
  display: none !important;
}

/* Réduction générale des badges : 90% */
.product-miniature .product-flags .product-flag {
    transform: scale(0.9);
    transform-origin: top left;
}

/* Mobile : 70% */
@media (max-width: 576px) {
    .product-miniature .product-flags .product-flag {
    transform: scale(0.7);
    }
    
  .product-miniature .product-flag.online-only,
  .product-miniature .product-flag.online_only,
  .product-miniature .product-flag.exclusivite-web,
  .product-miniature .product-flag.exclusivite_web {
    position: relative;
    top: 175px !important;
  }
}


/** -----------             ----------------------------*/
/* Nettoyage marges parasites */
#products .products > *,
.products .product_list > *,
#products .products .product-miniature,
.products .product_list .product-miniature,
.featured-products .product-miniature,
.product-accessories .product-miniature,
.block-category .product-miniature {
  margin: 0 !important;
}

/* Responsive — colonnes et gap */
@media (max-width: 1199px) {
  .featured-products .products,
  #products .products,
  .product-accessories .products,
  .block-category .products,
  .products .product_list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .featured-products .products,
  #products .products,
  .product-accessories .products,
  .block-category .products,
  .products .product_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
/* Mobile : 2 produits par ligne */
@media (max-width: 576px) {
  .featured-products .products,
  #products .products,
  .product-accessories .products,
  .block-category .products,
  .products .product_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Optionnel : réduire un peu la taille du contenu interne */
  .product-miniature .product-title {
    font-size: 0.85rem;
  }
  .product-miniature .product-price-and-shipping .price {
    font-size: 0.9rem;
  }
}

/* Mobile : réduire l’icône du cœur */
@media (max-width: 576px) {
  .wishlist-button-add i.material-icons {
    font-size: 120%; 
  }

  /* Si le bouton a une taille fixe, on le réduit aussi */
  .wishlist-button-add {
    transform: scale(0.8);
    transform-origin: top right; /* pour garder l’alignement */
  }
}

/*---------------------- COULEUR BOUTONS ---------------*/
/* Boutons site web */
:root{
  --paz-cyan:#1FAEFD;
  --paz-violet:#835FFC;
  --paz-rose:#F859BB;
  --paz-indigo:#270161;
  --paz-night:#110327;

--paz-cyan-dark:   #0E86C9; /* cyan foncé */
  --paz-violet-dark: #5B3FEA; /* violet profond */
  --paz-rose-dark:   #D73A9B; /* magenta foncé */
  --paz-grad-brand-dark: linear-gradient(
    90deg,
    var(--paz-cyan-dark) 0%,
    var(--paz-violet-dark) 50%,
    var(--paz-rose-dark) 100%
  );
}

/* Bouton principal – version sombre + anim au hover */
.btn-primary, .btn.btn-primary{
  background-image: var(--paz-grad-brand-dark); /* <- dégradé plus foncé */
  background-size: 250% 100%;
  background-position: 0% 50%;
  border: 0;
  border-radius: .65rem;
  color: #F6F7FF;              /* texte un poil cassé (plus doux que #fff) */
  box-shadow: 0 8px 22px rgba(17,3,39,.35);
  transition: background-position .8s ease, transform .15s ease, filter .2s ease;
}
.btn-primary:hover, .btn.btn-primary:hover{
  animation: paz-move 1.6s ease infinite; /* le dégradé “glisse” */
  transform: translateY(-2px);
  filter: brightness(1.05);
}

@keyframes paz-move{
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Panier : NOIR vide */
#_desktop_cart .blockcart,
#_desktop_cart .blockcart > a,
#_mobile_cart .blockcart,
#_mobile_cart .blockcart > a,
a.blockcart{
  background-color:#111 !important;
  background-image:none !important;
  color:#fff !important;
}

/* Hover quand le panier est VIDE -> rester NOIR */
#_desktop_cart .blockcart.cart-preview.inactive:hover,
#_desktop_cart .blockcart.cart-preview.inactive > a:hover,
#_mobile_cart .blockcart.cart-preview.inactive:hover,
#_mobile_cart .blockcart.cart-preview.inactive > a:hover,
a.blockcart.cart-preview.inactive:hover{
  background-color:#111 !important;
  color:#fff !important;
}

/* Hover quand il y a des articles -> rester VERT */
#_desktop_cart .blockcart.cart-preview.active:hover,
#_desktop_cart .blockcart.cart-preview:not(.inactive):hover,
#_mobile_cart .blockcart.cart-preview.active:hover,
#_mobile_cart .blockcart.cart-preview:not(.inactive):hover,
a.blockcart.cart-preview.active:hover,
a.blockcart.cart-preview:not(.inactive):hover{
  background-color:#22C55E !important;
  color:#fff !important;
}

/* -------------- MASQUER CONTACTEZ-NOUS + DECO ------------- */

/* Masque le lien "Contactez-nous" du header */
.header .header-nav a[href*="contact"], 
.top-menu a[href*="contact"], 
#contact-link {
  display: none !important;
}

/* Masque le texte "Déconnexion" à côté de Mon compte */
.header a.logout, 
.header .user-info a.logout, 
#_desktop_user_info a.logout {
  display: none !important;
}