@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Quicksand:wght@500;600;700&display=swap');

/* =====================================================================
   Vmode — habillage "mode rose / petit prix"
   Fichier autonome chargé automatiquement par PrestaShop (priorité 1000).
   Ne modifie aucun template ni le theme.css : surcharge pure via CSS.
   ===================================================================== */

:root {
  --vm-pink:        #ec1c8c;   /* magenta de marque (texte "Vmode") */
  --vm-pink-dark:   #c4147a;   /* magenta foncé (survols) */
  --vm-pink-mid:    #f368b3;   /* rose moyen / accents */
  --vm-pink-soft:   #fbd6e8;   /* rose clair (header) */
  --vm-pink-bg:     #fdeef6;   /* fond de page rosé */
  --vm-pink-card:   #f9cfe6;   /* fond rose des vignettes */
  --vm-pink-border: #f6cfe2;   /* liserés clairs */
  --vm-ink:         #4a2a3d;   /* texte prune foncé */
  --vm-ink-soft:    #8a6178;   /* texte secondaire */
  --vm-font-title:  'Poppins', 'Segoe UI', sans-serif;
  --vm-font-text:   'Quicksand', 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------------
   1. Fond rosé
   --------------------------------------------------------------------- */
body {
  background-color: var(--vm-pink-bg) !important;
  background-image:
    radial-gradient(circle at 18% 10%, rgba(236, 28, 140, .06), transparent 42%),
    radial-gradient(circle at 82% 60%, rgba(243, 104, 179, .05), transparent 46%);
  background-attachment: fixed;
  color: var(--vm-ink);
}
#wrapper,
#content-wrapper,
.page-content,
#main { background: transparent; }

/* ---------------------------------------------------------------------
   2. Header "rose tendre"
   --------------------------------------------------------------------- */
#header {
  background: #f06cb6 !important;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .28), transparent 55%),
    linear-gradient(180deg, #f99ad6 0%, #ea4fa6 100%) !important;
  border-bottom: 3px solid var(--vm-pink-dark);
  box-shadow: 0 3px 16px rgba(196, 20, 122, .28);
}
#header a,
#header .header-nav a,
#header .header-top a,
#header .top-menu a { color: var(--vm-ink); }
#header a:hover,
#header .top-menu a:hover { color: var(--vm-pink); }

/* barre du haut */
#header .header-nav {
  background: rgba(255, 255, 255, .35);
  border-bottom: 1px solid rgba(236, 28, 140, .15);
}

/* menu principal */
#header .top-menu a {
  font-family: var(--vm-font-title);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .9rem;
}
#header .top-menu a:hover { color: var(--vm-pink-dark); }
#header .top-menu .sub-menu,
#header .top-menu .popover {
  background: #fff;
  border: 1px solid var(--vm-pink-border);
}

/* recherche : pilule arrondie */
#search_widget form input[type=text] {
  background: #fff;
  border: 1.5px solid var(--vm-pink-border);
  border-radius: 22px;
  color: var(--vm-ink);
  padding-left: 1rem;
}
#search_widget form input[type=text]:focus {
  border-color: var(--vm-pink-mid);
  box-shadow: 0 0 0 3px rgba(243, 104, 179, .18);
}
#search_widget form button[type=submit] { color: var(--vm-pink); }
#search_widget form button[type=submit]:hover { color: var(--vm-pink-dark); }

/* icônes (panier / connexion) lisibles sur le rose soutenu */
#header .material-icons { color: var(--vm-ink); }
#header .material-icons:hover { color: #fff; }

/* logo plus grand + header resserré pour lui laisser la place */
#_desktop_logo img,
#header .logo,
.header-logo img,
.header-top .logo img,
img.logo {
  max-height: 120px !important;
  width: auto !important;
  height: auto !important;
  transition: transform .25s ease;
}
#_desktop_logo img:hover,
.header-logo img:hover { transform: scale(1.04); }

/* on réduit les marges/paddings autour du logo et du header-top */
#header .header-top {
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
}
#header .header-top #_desktop_logo,
#header .header-top .logo {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
}
#_desktop_logo { display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------------
   3. Titres + titre de section décoré
   --------------------------------------------------------------------- */
h1, h2, h3,
.h1, .h2, .h3,
#main .page-header h1 {
  font-family: var(--vm-font-title);
  font-weight: 700;
  color: var(--vm-ink);
}

.featured-products,
.product-accessories,
.products-section { text-align: center; }

/* titre type "MEILLEURES VENTES" avec liserés roses de part et d'autre */
.products-section-title,
.featured-products h2,
h2.products-section-title {
  display: inline-block;
  position: relative;
  font-family: var(--vm-font-title);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vm-ink);
  padding: .4rem 1.6rem;
}
.products-section-title::before,
.products-section-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--vm-pink), var(--vm-pink-mid));
}
.products-section-title::before { right: 100%; }
.products-section-title::after  { left: 100%; }

/* ---------------------------------------------------------------------
   4. Vignettes produits
   --------------------------------------------------------------------- */
.product-miniature .thumbnail-container,
.product-miniature .thumbnail-container .thumbnail-top,
.product-miniature .thumbnail-container .product-description {
  background: var(--vm-pink-card) !important;
}
.product-miniature .thumbnail-container {
  border: 1px solid var(--vm-pink-border);
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(236, 28, 140, .08);
  overflow: hidden;
  padding-bottom: .5rem;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.product-miniature .thumbnail-container:hover {
  box-shadow: 0 12px 26px rgba(236, 28, 140, .22);
  border-color: var(--vm-pink-mid);
  transform: translateY(-5px);
}
/* marge rose plus large autour de la photo */
.product-miniature .thumbnail-top { padding: .9rem .9rem .3rem; }
.product-miniature .thumbnail-top .thumbnail img { border-radius: 12px; }

.product-miniature .product-description {
  padding: .55rem .8rem .3rem;
  text-align: center;
}
.product-miniature .product-title { margin-bottom: .35rem; }
.product-miniature .product-title a {
  font-family: var(--vm-font-text);
  font-weight: 600;
  color: var(--vm-ink);
}
.product-miniature .product-title a:hover { color: var(--vm-pink); }
.product-miniature .product-price-and-shipping .price {
  font-family: var(--vm-font-title);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--vm-pink);
}
.product-miniature .regular-price { color: var(--vm-ink-soft); }

/* badge "RUPTURE DE STOCK" / promos : pastille rose arrondie */
.product-flags li.product-flag,
.product-flag {
  background: var(--vm-pink);
  background-image: linear-gradient(135deg, var(--vm-pink-mid), var(--vm-pink-dark));
  color: #fff;
  font-family: var(--vm-font-title);
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(196, 20, 122, .35);
}

/* bouton favori (coeur) : cercle blanc, coeur magenta */
.product-miniature .wishlist-button-add,
.wishlist-button-add {
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(236, 28, 140, .25);
}
.wishlist-button-add .material-icons,
.wishlist-button-add i { color: var(--vm-pink); }
.wishlist-button-add:hover { background: var(--vm-pink); }
.wishlist-button-add:hover .material-icons,
.wishlist-button-add:hover i { color: #fff; }

/* ---------------------------------------------------------------------
   5. Boutons
   --------------------------------------------------------------------- */
.btn-primary {
  background: var(--vm-pink);
  background-image: linear-gradient(135deg, var(--vm-pink-mid), var(--vm-pink));
  border-color: var(--vm-pink);
  color: #fff;
  border-radius: 24px;
  font-family: var(--vm-font-title);
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(236, 28, 140, .25);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--vm-pink-dark);
  border-color: var(--vm-pink-dark);
  color: #fff;
}
.btn-secondary,
.btn-outline-primary {
  border-color: var(--vm-pink);
  color: var(--vm-pink);
  border-radius: 24px;
  font-weight: 600;
}
.btn-secondary:hover,
.btn-outline-primary:hover {
  background: var(--vm-pink);
  color: #fff;
}

/* ---------------------------------------------------------------------
   6. Pied de page (rappel rose)
   --------------------------------------------------------------------- */
.footer-container,
#footer {
  background: #ea4fa6 !important;
  background-image: linear-gradient(180deg, #f06cb6 0%, #d92e93 100%) !important;
  color: #fff;
  border-top: 3px solid var(--vm-pink-dark);
}
.footer-container a,
#footer a { color: #ffffff; }
.footer-container a:hover,
#footer a:hover { color: var(--vm-ink); }
.footer-container h3,
.footer-container .h3 {
  font-family: var(--vm-font-title);
  color: #ffffff;
}

/* ---------------------------------------------------------------------
   7. Divers
   --------------------------------------------------------------------- */
.breadcrumb { background: transparent; }
.breadcrumb a { color: var(--vm-pink); }
a { color: var(--vm-pink); }
a:hover { color: var(--vm-pink-dark); }

/* ---------------------------------------------------------------------
   8. Smartphone uniquement — header ~2x (hauteur, logo, écritures)
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  #header .header-top {
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
  }
  /* logo ~2x plus grand */
  #_desktop_logo img,
  #header .logo,
  .header-logo img,
  .header-top .logo img,
  img.logo {
    max-height: 160px !important;
  }
  /* écritures du header plus grandes */
  #header .top-menu a,
  #header .header-nav a { font-size: 1.15rem !important; }
  #header .material-icons { font-size: 2.1rem !important; }
  #search_widget form input[type=text] {
    height: 48px;
    font-size: 1.05rem;
  }
}

/* ---------------------------------------------------------------------
   9. Slider : garder le texte DANS l'image quand elle se compresse
   (sélecteurs à confirmer selon le module slider réellement utilisé)
   --------------------------------------------------------------------- */
.homeslider .caption,
#homeslider .caption,
.slick-slide .caption,
.homeslider figcaption,
.homeslider-description {
  max-width: 92%;
  box-sizing: border-box;
  overflow: hidden;
}
@media (max-width: 991px) {
  .homeslider .caption,
  #homeslider .caption,
  .slick-slide .caption,
  .homeslider figcaption,
  .homeslider-description { font-size: 2.6vw; line-height: 1.2; }
  .homeslider .caption h1,
  .homeslider .caption h2,
  .homeslider-description h2 { font-size: 3.4vw; margin-bottom: .2em; }
}

/* ---------------------------------------------------------------------
   10. Encart Facebook (Bloc de texte) : 500px desktop / 340px mobile
        -> HTML du bloc : <div class="fb-feed"> avec deux iframes
           .fb-feed-desktop (width=500) et .fb-feed-mobile (width=340)
   --------------------------------------------------------------------- */
.fb-feed { max-width: 500px; margin: 0 auto; }
.fb-feed iframe { display: block; width: 100%; border: none; overflow: hidden; }
.fb-feed-mobile { display: none; }
@media (max-width: 520px) {
  /* full-bleed : la box prend toute la largeur de l'écran,
     on ignore ainsi le padding du bloc/thème qui la serrait */
  .fb-feed {
    max-width: none;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .fb-feed-desktop { display: none; }
  .fb-feed-mobile {
    display: block;
    max-width: 340px;   /* rentre sur tout téléphone >= 340px */
    margin: 0 auto;     /* centré, marges égales */
  }
}