/* === SOPHRINOU — LUXE MINIMAL (HEADER LAYOUT FINAL) === */

/* ---------- Polices ---------- */
@font-face{font-family:"Montserrat Ace";src:url("../fonts/Montserrat-Ace-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat Alt1";src:url("../fonts/MontserratAlt1-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lie To Me";src:url("../fonts/Lie-to-Me-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Palette ---------- */
:root{--lux-bg:#fff;--lux-ink:#0d1b44;--lux-accent:#c6156a;--lux-gold:#ffbd59}

/* ---------- Base ---------- */
body{background:var(--lux-bg);color:var(--lux-ink);font-family:"Montserrat Ace",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
h1,h2{font-family:"Montserrat Alt1","Montserrat Ace",sans-serif;letter-spacing:.2px}
h3,h4,h5{font-family:"Montserrat Ace",sans-serif}
a{color:var(--lux-accent)} a:hover{color:#a71054}

/* Boutons génériques */
.btn,.btn-primary,.btn.btn-primary{background:var(--lux-ink)!important;border-color:var(--lux-ink)!important;color:#fff!important}
.btn:hover,.btn-primary:hover{filter:brightness(1.08)}
.btn-outline-primary{color:var(--lux-ink);border-color:var(--lux-ink)}
.btn-outline-primary:hover{background:var(--lux-ink);color:#fff}

/* =========================================================
   HEADER — burger à gauche, compte à droite du header
   (juste avant le panier), panier tout à droite.
   Icônes alignées à ~10px du haut.
   Logo centré, décalé de 3px vers le bas.
   ========================================================= */
#header, #header .header-nav, #header .header-top{background:#0d1b44!important;color:#fff!important}
#header a, #header .material-icons{color:#fff!important}

/* Hauteur & zone de placement */
#header .header-nav{min-height:88px}
#header .header-nav .container{
  position:relative; display:block;
  padding:3px 120px 10px 120px; /* 3px top pour le logo + réserve latérale */
}

/* Burger — collé à gauche */
#menu-icon, .js-mobile-menu{
  position:absolute; left:4px; top:18px;      /* 10px sous le haut du header */
  display:flex; align-items:center; z-index:30;
}

/* COMPTE — à droite du header, juste avant le panier */
#_desktop_user_info, #_mobile_user_info{
  position:absolute; right:100px; top:18px;    /* 96px = largeur “panier” + marge */
  display:flex; align-items:center; z-index:30;
  background:transparent!important;
}

/* Panier — entièrement collé au bord droit */
#_desktop_cart, #_mobile_cart, #header .header-nav .right-nav{
  position:absolute; right:4px; top:18px;
  display:flex; align-items:center; gap:10px; z-index:30;
  background:transparent!important;
}
#header .blockcart, #header .blockcart .cart-preview{background:transparent!important}

#header .blockcart .cart-products-count {
  color: var(--lux-gold) !important;   /* Couleur dorée */
  font-weight: 700 !important;         /* Texte en gras */
  background: rgba(255,255,255,.15) !important; /* Conserve le fond neutre */
  border: 1px solid rgba(255,255,255,.45) !important;
  border-radius: 999px !important;
  padding: 2px 8px;
}

/* Pastille panier NEUTRE sur fond bleu */
#header .blockcart .cart-products-count{
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:999px!important;
}
#header .blockcart .cart-products-count::before {
  content: "";  /* Supprime la parenthèse ouvrante */
}

#header .blockcart .cart-products-count::after {
  content: "";  /* Supprime la parenthèse fermante */
}
/* Logo — centré et descendu de 3px */
#_desktop_logo, #_mobile_logo{
  position:absolute; left:50%; top:5px; transform:translateX(-50%); z-index:10;
}
#_desktop_logo img, #_mobile_logo img{max-height:75px!important;width:auto;height:auto}

/* Recherche header */
#search_widget form input[type="text"],
#search_widget form input[type="search"]{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
}
#search_widget form input::placeholder{color:rgba(255,255,255,.75)}

/* Menus */
.top-menu a{color:#fff!important}
.top-menu .sub-menu{background:#0b1638;border:1px solid rgba(255,255,255,.12)}
.top-menu .sub-menu a:hover{color:var(--lux-gold)!important}

/* =========================================================
   MENU MOBILE (burger)
   ========================================================= */
#mobile_top_menu_wrapper,
#mobile_top_menu_wrapper .js-top-menu,
#mobile_top_menu_wrapper .top-menu{background:#0d1b44!important}
#mobile_top_menu_wrapper a{color:#fff!important}
#mobile_top_menu_wrapper .top-menu>li{border-bottom:1px solid rgba(255,255,255,.15)}
#mobile_top_menu_wrapper .top-menu .sub-menu{background:#0b1638!important;border-top:1px solid rgba(255,255,255,.12)}
#mobile_top_menu_wrapper .popover{background:#0d1b44!important;color:#fff!important}

/* =========================================================
   FOOTER
   ========================================================= */
#footer, #footer .footer-container{background:#0d1b44!important;color:#fff!important}
#footer a{color:#fff!important;text-decoration:none} #footer a:hover{color:var(--lux-gold)!important}
#footer .h3, #footer h3, #footer h4{color:#fff;letter-spacing:.2px}
#footer .block-contact li, #footer .links li{border-color:rgba(255,255,255,.12)!important}
#footer .block_newsletter input[type="email"]{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important}
#footer .block_newsletter input::placeholder{color:rgba(255,255,255,.75)}
#footer .block_newsletter .btn{background:var(--lux-gold)!important;border-color:var(--lux-gold)!important;color:#331b00!important}
#footer .block_newsletter .btn:hover{filter:brightness(1.05)}
.footer-container{box-shadow:0 -1px 0 rgba(255,255,255,.08) inset}

/* =========================
   FOOTER MOBILE — Lisibilité des sous-menus
   ========================= */

/* Texte des sous-menus dépliés */
#footer .collapse,
#footer .collapse li,
#footer .collapse li a {
  color: var(--lux-ink) !important; /* Texte en bleu profond */
  font-weight: 500;
}

/* Ajout d'un léger padding pour l'air */
#footer .collapse li {
  padding: 6px 0;
}

/* Icônes / flèches de dépliage */
#footer .title .collapse-icons .add,
#footer .title .collapse-icons .remove {
  color: #fff !important; /* Les icônes restent blanches */
}

/* Survol des liens dans le footer */
#footer .collapse li a:hover {
  color: var(--lux-accent) !important; /* Framboise au survol */
}

/* Fond des sous-menus inchangé (blanc) pour contraste */
#footer .collapse {
  background-color: #fff !important;
  padding: 4px 0;
  border-radius: 0 0 6px 6px;
}

/* =========================================================
   LISTES PRODUITS — liseré doré (pas sur la page détail)
   ========================================================= */
.product-miniature .thumbnail-container{position:relative;border-radius:18px;overflow:hidden;background:#fff;transition:transform .18s ease, box-shadow .18s ease}
.product-miniature .thumbnail-container::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:18px;box-shadow:0 0 0 2px rgba(255,189,89,.65) inset}
.product-miniature .thumbnail-container:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(13,27,68,.10)}
.product-miniature .thumbnail-container img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px}
.product-flag.discount,.has-discount .discount{background:var(--lux-accent)!important;color:#fff!important;border-radius:8px}
.product-flag.new{background:var(--lux-ink)!important;color:#fff!important}

/* =========================================================
   PAGE PRODUIT
   ========================================================= */
/* Miniatures sous l'image principale — correctif */
#product .product-images .thumb{
  border:2px solid var(--lux-ink) !important; /* contour bleu */
  border-radius:10px !important;              /* coins arrondis */
  padding:1px;                                /* léger espace interne */
  background:#fff;
  overflow:hidden;                            /* pour que l'arrondi s’applique à l’image */
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

#product .product-images .thumb img{
  display:block;
  width:100%; height:auto;
  border-radius:8px; /* arrondi interne cohérent */
}

#product .product-images .thumb:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,189,89,.25); /* halo doré subtil au survol */
}

#product .product-images .thumb.selected{
  border-color: var(--lux-ink) !important;          /* reste bleu */
}



.product-flags .new,.product-flag.new{background:var(--lux-ink)!important;color:#fff!important}
.product-flags .discount,.product-flag.discount,
.product-flags .discount-percentage,.product-flag.discount-percentage{background:var(--lux-accent)!important;color:#fff!important}
.product-prices .current-price .price,.product-price,.current-price .price{color:var(--lux-accent)!important}
.product-cover img{border-radius:16px!important;box-shadow:none!important}
.product-add-to-cart .add-to-cart{background:var(--lux-gold)!important;border-color:var(--lux-gold)!important;color:#331b00!important;font-weight:700;border-radius:14px;box-shadow:0 6px 18px rgba(255,189,89,.35)}
.product-add-to-cart .add-to-cart:hover{filter:brightness(1.05)}
.input-group .input-group-btn-vertical .btn{background:var(--lux-ink)!important;border-color:var(--lux-ink)!important;color:#fff!important}

/* Contour doré sur la grande image de la page produit */
.product-cover img {
  border: 3px solid var(--lux-gold) !important; /* Contour doré */
  border-radius: 14px !important;               /* Coins légèrement arrondis */
  padding: 1px;                                /* Un léger espace interne */
  box-shadow: 0 4px 16px rgba(255, 189, 89, 0.25); /* Effet luxe subtil */
}
/* Miniatures sous l'image principale de la page produit */
.product-images .js-qv-product-images li img {
  border: 2px solid var(--lux-ink) !important;   /* Contour bleu profond */
  border-radius: 10px !important;                /* Coins arrondis */
  padding: 1px;                                 /* Léger espace interne */
  background-color: #fff;                       /* Fond blanc pour l'effet premium */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);    /* Effet luxe subtil */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Survol des miniatures : petit zoom + halo doré */
.product-images .js-qv-product-images li img:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(255, 189, 89, 0.25);
}

/* =========================================================
   Animations douces
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  .product-miniature .thumbnail-container img{opacity:0;transform:translateY(6px);animation:thumbIn .45s ease .05s forwards}
  @keyframes thumbIn{to{opacity:1;transform:translateY(0)}}
  .product-flag{transform:scale(.96);animation:flagPop .35s ease .15s forwards}
  @keyframes flagPop{60%{transform:scale(1.04)}100%{transform:scale(1)}}
  .product-miniature .thumbnail-container:hover::after{box-shadow:0 0 0 2px rgba(255,189,89,.85) inset}
}

/* =========================
   1) FAVORIS (cœur) — couleurs Sophrinou
   ========================= */

/* État par défaut (vide) dans les listes et sur la page produit */
.wishlist-button .material-icons,
.wishlist-button i,
.blockwishlist .wishlist-button,
.blockwishlist .wishlist-button i {
  color: var(--lux-ink) !important;            /* bleu profond */
  transition: color .2s ease, transform .2s ease;
}

/* Survol : petit accent doré */
.wishlist-button:hover .material-icons,
.wishlist-button:hover i {
  color: var(--lux-gold) !important;
  transform: scale(1.05);
}

/* Ajouté aux favoris (classes selon modules possibles) */
.wishlist-button.added .material-icons,
.wishlist-button.is-added .material-icons,
.wishlist-button.added i,
.wishlist-button.is-added i,
.blockwishlist .wishlist-button.added i {
  color: var(--lux-accent) !important;         /* framboise */
  font-weight: 700;
}

/* Cercle/puce autour du cœur (si présent) */
.wishlist-button,
.blockwishlist .wishlist-button {
  background: #fff;
  border: 1px solid rgba(13,27,68,.15);
  border-radius: 999px;
}

/* =========================
   2) TOAST "Produit ajouté" — doré + texte bleu
   (couvre les variantes growl/pnotify utilisées par PrestaShop)
   ========================= */

/* jQuery Growl */
.growl.growl-notice,
.growl.growl-success {
  background: var(--lux-gold) !important;
  color: var(--lux-ink) !important;
  border: 1px solid rgba(13,27,68,.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(255,189,89,.25);
}
.growl.growl-notice .growl-title,
.growl.growl-success .growl-title,
.growl.growl-notice .growl-message,
.growl.growl-success .growl-message {
  color: var(--lux-ink) !important;
}

/* PNotify (certaines versions) */
.ui-pnotify.ui-pnotify-container.alert-success,
.ui-pnotify.ui-pnotify-container .ui-pnotify-closer,
.ui-pnotify.ui-pnotify-container .ui-pnotify-sticker {
  background: var(--lux-gold) !important;
  color: var(--lux-ink) !important;
  border-color: rgba(13,27,68,.15) !important;
  border-radius: 12px !important;
}

/* =========================
   3) Espace COMPTE / WISHLIST — enlever le bleu ciel
   ========================= */
.page-my-account a,
.page-my-account .material-icons,
.page-my-account .link-item a,
.page-my-account .link-item i,
#module-blockwishlist-lists a,
#module-blockwishlist-lists .material-icons,
.blockwishlist a,
.blockwishlist .material-icons {
  color: var(--lux-accent) !important;   /* framboise */
}

/* Boutons secondaires dans le compte (ex. créer une liste) */
.page-my-account .btn-link,
#module-blockwishlist-lists .btn-link {
  color: var(--lux-accent) !important;
}
.page-my-account .btn-link:hover,
#module-blockwishlist-lists .btn-link:hover {
  color: var(--lux-ink) !important;
}

/* =========================
   4) Miniatures page produit — bord arrondi + espace interne
   (au cas où un style précédent bloque)
   ========================= */
.product-images .js-qv-product-images li img {
  border: 2px solid var(--lux-ink) !important;  /* bleu profond */
  border-radius: 10px !important;
  padding: 1px !important;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.product-images .js-qv-product-images li img:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(255,189,89,.25);
}

/* =========================
   5) Prix/étiquettes dans les listes — cohérence
   ========================= */
.product-price,
.current-price .price,
.product-prices .current-price .price {
  color: var(--lux-accent) !important; /* framboise */
}

/* Badges "NEUF" et "-XX%" sur vignettes */
.product-flag.new { background: var(--lux-ink) !important; color: #fff !important; }
.product-flag.discount,
.product-flag.discount-percentage { background: var(--lux-accent) !important; color: #fff !important; }