@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Playfair+Display:wght@500;600;700&display=swap');

/* =====================================================================
   Angel Maroquinerie — habillage "cuir / atelier"
   Fichier autonome chargé automatiquement par PrestaShop (priorité 1000).
   Ne modifie aucun template ni le theme.css : surcharge pure via CSS.
   ===================================================================== */

:root {
  --am-cream:        #f4ecda;   /* fond crème de la page */
  --am-cream-card:   #fbf7ee;   /* fond des vignettes */
  --am-cream-border: #e4d8bd;   /* liserés clairs */
  --am-leather:      #4a2f1f;   /* cuir (header) */
  --am-leather-dark: #2e1c12;   /* cuir foncé */
  --am-leather-mid:  #6b4630;   /* cuir clair / accents */
  --am-gold:         #c9a227;   /* doré */
  --am-gold-soft:    #bfa15e;
  --am-ink:          #3a2418;   /* texte brun foncé */
  --am-ink-soft:     #6e5a48;
  --am-font-title:   'Cinzel', Georgia, 'Times New Roman', serif;
  --am-font-serif:   'Playfair Display', Georgia, serif;
}

/* ---------------------------------------------------------------------
   1. Fond crème
   --------------------------------------------------------------------- */
body {
  background-color: var(--am-cream) !important;
  background-image:
    radial-gradient(circle at 22% 12%, rgba(120, 90, 60, .045), transparent 42%),
    radial-gradient(circle at 78% 65%, rgba(120, 90, 60, .035), transparent 46%);
  background-attachment: fixed;
  color: var(--am-ink);
}
#wrapper      { background: transparent; }
#content-wrapper,
.page-content,
#main         { background: transparent; }

/* ---------------------------------------------------------------------
   2. Header "cuir"
   --------------------------------------------------------------------- */
#header {
  color: #f0e6d2;
  background-color: var(--am-leather);
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .05), transparent 50%),
    radial-gradient(circle at 82% 72%, rgba(0, 0, 0, .22), transparent 55%),
    linear-gradient(180deg, #5a3a26 0%, #3f2819 100%);
  border-bottom: 3px solid var(--am-gold-soft);
  box-shadow: 0 3px 12px rgba(46, 28, 18, .35);
}
#header a,
#header .header-nav a,
#header .header-top a,
#header .top-menu a {
  color: #f0e6d2;
}
#header a:hover,
#header .top-menu a:hover {
  color: var(--am-gold);
}

/* fine barre du haut */
#header .header-nav {
  background: rgba(0, 0, 0, .18);
  border-bottom: 1px solid rgba(201, 162, 39, .25);
}

/* menu principal */
#header .top-menu a {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .9rem;
}
#header .top-menu .sub-menu,
#header .top-menu .popover {
  background: var(--am-leather-dark);
  border: 1px solid var(--am-gold-soft);
}

/* recherche */
#search_widget form input[type=text] {
  background: var(--am-cream-card);
  border: 1px solid var(--am-gold-soft);
  border-radius: 22px;
  color: var(--am-ink);
}
#search_widget form button[type=submit] {
  color: var(--am-leather);
}
#search_widget form button[type=submit]:hover { color: var(--am-gold); }

/* panier / connexion : icônes lisibles sur le cuir */
#header .material-icons { color: #f0e6d2; }

/* ---------------------------------------------------------------------
   3. Titres (sections + entêtes)
   --------------------------------------------------------------------- */
h1, h2, h3,
.h1, .h2, .h3,
#main .page-header h1 {
  font-family: var(--am-font-serif);
  color: var(--am-ink);
}

/* titre de section encadré : "COUPS DE COEUR DE L'ATELIER" */
.featured-products,
.product-accessories,
.products-section {
  text-align: center;
}
.products-section-title {
  display: inline-block;
  font-family: var(--am-font-title);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--am-ink);
  padding: .65rem 2.4rem;
  border: 2px solid var(--am-leather);
  border-radius: 3px;
  box-shadow: inset 0 0 0 4px var(--am-cream),
              inset 0 0 0 5px var(--am-gold-soft);
  background: var(--am-cream-card);
}

/* ---------------------------------------------------------------------
   4. Vignettes produits
   --------------------------------------------------------------------- */
.product-miniature .thumbnail-container {
  background: var(--am-cream-card);
  border: 1px solid var(--am-cream-border);
  border-radius: 12px;
  box-shadow: 0 2px 7px rgba(58, 36, 24, .08);
  overflow: hidden;
  padding-bottom: .4rem;
  transition: box-shadow .25s ease, transform .25s ease;
}
.product-miniature .thumbnail-container:hover {
  box-shadow: 0 10px 22px rgba(58, 36, 24, .20);
  transform: translateY(-4px);
}
.product-miniature .thumbnail-top { padding: .4rem .4rem 0; }
.product-miniature .thumbnail-top .thumbnail img {
  border-radius: 8px;
}
.product-miniature .product-description {
  padding: .5rem .8rem .2rem;
  text-align: center;
}
.product-miniature .product-title { margin-bottom: .35rem; }
.product-miniature .product-title a {
  font-family: var(--am-font-serif);
  font-weight: 500;
  color: var(--am-ink);
}
.product-miniature .product-title a:hover { color: var(--am-leather-mid); }
.product-miniature .product-price-and-shipping .price {
  font-family: var(--am-font-serif);
  font-weight: 700;
  color: var(--am-leather);
}
.product-miniature .regular-price { color: var(--am-ink-soft); }

/* bouton favori (si module liste de souhaits actif) */
.product-miniature .wishlist-button-add {
  background: var(--am-cream-card);
  border: 1px solid var(--am-cream-border);
  box-shadow: 0 1px 4px rgba(58, 36, 24, .15);
}

/* ---------------------------------------------------------------------
   5. Boutons
   --------------------------------------------------------------------- */
.btn-primary {
  background: var(--am-leather);
  border-color: var(--am-leather);
  color: #f4ecda;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--am-leather-dark);
  border-color: var(--am-leather-dark);
  color: #fff;
}
.btn-secondary,
.btn-outline-primary {
  border-color: var(--am-leather);
  color: var(--am-leather);
}
.btn-secondary:hover,
.btn-outline-primary:hover {
  background: var(--am-leather);
  color: #f4ecda;
}

/* ---------------------------------------------------------------------
   6. Pied de page (rappel cuir)
   --------------------------------------------------------------------- */
.footer-container {
  background: var(--am-leather);
  background-image: linear-gradient(180deg, #4a2f1f 0%, #2e1c12 100%);
  color: #e9ddc8;
  border-top: 3px solid var(--am-gold-soft);
}
.footer-container a { color: #e9ddc8; }
.footer-container a:hover { color: var(--am-gold); }
.footer-container h3,
.footer-container .h3 { color: #f4ecda; }

/* ---------------------------------------------------------------------
   7. Divers
   --------------------------------------------------------------------- */
.breadcrumb { background: transparent; }
.breadcrumb a { color: var(--am-leather-mid); }
a { color: var(--am-leather-mid); }
a:hover { color: var(--am-leather); }