/* =========================================================================
   LES BISCUITS DE MARJO' — Habillage PrestaShop (thème classic)
   À coller dans : themes/classic/assets/css/custom.css
   Puis vider le cache (Paramètres avancés > Performance > Vider le cache).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Nunito:wght@400;600;700;800&display=swap');

/* ---- Palette Marjo ---------------------------------------------------- */
:root{
  --marjo-framboise:#d81e5b;   /* bandeau, logo, prix, bordures */
  --marjo-framboise-fonce:#b81049;
  --marjo-rose:#e8487e;        /* boutons d'action (CTA) */
  --marjo-rose-hover:#d63a6e;
  --marjo-lavande:#b4a5e2;     /* panneaux de contenu */
  --marjo-lavande-clair:#c7baf0;
  --marjo-gris:#5c5c5c;        /* titres */
  --marjo-fond:#9c7c52;        /* fond caramel sur les bords */
}

/* ---- Base ------------------------------------------------------------- */
body{
  font-family:'Nunito',sans-serif;
  color:#4a4a4a;
  background-color:var(--marjo-fond);
  /* Fond photo de biscuits (optionnel) : décommente et mets l'URL de ton image
  background-image:url('/img/cms/fond-biscuits.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;   */
}

/* Titres en script manuscrit, comme le site d'origine */
h1,h2,h3,.h1,.h2,.h3,
.page-title,.product-title,
#main .page-header h1,
.featured-products .h2,
section .h1{
  font-family:'Dancing Script',cursive !important;
  color:var(--marjo-gris);
  font-weight:700;
  letter-spacing:.3px;
}

a{ color:var(--marjo-framboise); }
a:hover{ color:var(--marjo-framboise-fonce); }

/* ---- Panneau lavande central (le contenu posé sur le fond) ------------ */
#wrapper{
  background:var(--marjo-lavande);
  border-radius:18px;
  padding:24px 22px;
  margin-top:18px;
  margin-bottom:28px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.banner img{ border-radius:14px; }

/* Bannière d'accueil plus claire */
#index .elementor-section,
.page-home .block,
#content.page-home{
  background:var(--marjo-lavande-clair);
  border-radius:14px;
}

/* ---- Barre supérieure (avantages / réassurance) ----------------------- */
.header-top__top,
.header-banner,
#header .header-top{
  background:var(--marjo-framboise);
  color:#fff;
}
.header-top__top a,
.header-banner a{ color:#fff; }

/* ---- En-tête / logo / menu ------------------------------------------- */
#header{ background:transparent; }
#header .logo{ margin:0 auto; }                 /* logo centré */
.header__logo, #_desktop_logo{ text-align:center; }

#_desktop_top_menu .top-menu a{
  font-family:'Dancing Script',cursive;
  font-size:1.25rem;
  color:#fff;
  font-weight:700;
}
#_desktop_top_menu .top-menu a:hover{ color:var(--marjo-lavande-clair); }

/* Bouton "Commande rapide" / CTA d'en-tête */
.header-cta,.btn-commande{
  background:var(--marjo-rose);
  color:#fff;
  border-radius:30px;
  padding:10px 22px;
  font-weight:700;
}

/* ---- Boutons -------------------------------------------------------- */
.btn-primary,
.add-to-cart,
button.btn-primary,
.btn-primary:not(:disabled){
  background:var(--marjo-rose) !important;
  border-color:var(--marjo-rose) !important;
  color:#fff !important;
  border-radius:30px !important;
  font-weight:700;
  padding:11px 26px;
  transition:background .2s ease, transform .1s ease;
}
.btn-primary:hover,
.add-to-cart:hover{
  background:var(--marjo-rose-hover) !important;
  border-color:var(--marjo-rose-hover) !important;
  transform:translateY(-1px);
}

.btn-secondary,.btn-outline{
  border:2px solid var(--marjo-framboise) !important;
  color:var(--marjo-framboise) !important;
  background:transparent !important;
  border-radius:30px !important;
  font-weight:700;
}

/* Cœur "ajouter aux favoris" */
.wishlist-button-add,.product-add-to-favorites{
  background:var(--marjo-rose);
  color:#fff;
  border-radius:12px;
}

/* ---- Cartes produit ------------------------------------------------- */
.products .product-miniature .thumbnail-container,
.product-miniature .card{
  background:#fff;
  border:2px solid var(--marjo-framboise);
  border-radius:14px;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.products .product-miniature .thumbnail-container:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(216,30,91,.20);
}
.product-title a{
  font-family:'Dancing Script',cursive;
  color:var(--marjo-framboise);
  font-size:1.5rem;
  font-weight:700;
  text-decoration:underline;
}
.product-title a:hover{ color:var(--marjo-framboise-fonce); }

/* Prix */
.product-price,.current-price,.price,
.product-price-and-shipping .price{
  color:var(--marjo-gris);
  font-weight:800;
  font-size:1.3rem;
}

/* Badge "Épuisé" / labels */
.product-flag,.product-flags li span,.label{
  background:var(--marjo-gris);
  color:#fff;
  border-radius:20px;
  font-weight:700;
}
.product-flag.discount,.product-flag.on-sale{
  background:var(--marjo-framboise);
}

/* ---- Fiche produit -------------------------------------------------- */
.product-information .product-title,
.product-detail-name,
h1.product-name{
  font-family:'Dancing Script',cursive;
  color:var(--marjo-gris);
  font-size:2.6rem;
}
.product-variants .control-label,
.product-actions .control-label{
  color:var(--marjo-gris);
  font-weight:700;
}

/* ---- Pied de page --------------------------------------------------- */
#footer{
  background:var(--marjo-framboise);
  color:#fff;
  border-radius:18px 18px 0 0;
  padding-top:24px;
}
#footer a,#footer .h3,#footer h3{ color:#fff !important; }
#footer .h3{ font-family:'Dancing Script',cursive; }

/* ---- Responsive ----------------------------------------------------- */
@media (max-width:767px){
  #wrapper{ padding:16px 12px; border-radius:12px; margin-top:10px; }
  body{ background-attachment:scroll; }      /* perf mobile */
  .product-title a{ font-size:1.3rem; }
  .product-information .product-title{ font-size:2rem; }
  #_desktop_top_menu .top-menu a{ font-size:1.1rem; }
}

/* Petites touches gourmandes : coins arrondis sur images produit */
.product-miniature img,.product-cover img{ border-radius:10px; }

/* ---- Bloc "Bienvenue dans l'univers" (page d'accueil) ---------------- */
.marjo-welcome{
  background:var(--marjo-lavande-clair);
  border-radius:14px;
  padding:34px 28px;
  text-align:center;
  margin-bottom:24px;
}
.marjo-welcome h2{ font-size:2.4rem; margin-bottom:10px; }
.marjo-welcome p{ color:var(--marjo-framboise); font-size:1.1rem; }