/*
Theme Name:   Poupi Créations Child
Theme URI:    https://poupicreations.com
Description:  Child theme de Storefront pour Poupi Créations — boutique artisanale belge
Author:       Poupi Créations
Author URI:   https://poupicreations.com
Template:     storefront
Version:      1.0.0
Text Domain:  poupi-child
*/

/* ============================================================
   IMPORT DES POLICES GOOGLE
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap');

/* ============================================================
   VARIABLES DE COULEURS — CHARTE POUPI CRÉATIONS
   ============================================================ */
:root {
  --poupi-rose:       #C9748A;   /* rose poudré principal */
  --poupi-rose-clair: #F2D5DC;   /* rose très clair / fond */
  --poupi-beige:      #F7F0E8;   /* beige chaud fond page */
  --poupi-beige-mid:  #EDE0D0;   /* beige moyen séparateurs */
  --poupi-brun:       #6B4C3B;   /* brun chaud textes titres */
  --poupi-brun-fonce: #3E2A20;   /* brun foncé texte corps */
  --poupi-or:         #C8A96E;   /* or accent boutons/bordures */
  --poupi-vert:       #7A9E7E;   /* vert sauge discret */
  --poupi-blanc:      #FDFAF7;   /* blanc chaud */

  --font-titre:  'Playfair Display', Georgia, serif;
  --font-corps:  'Lato', sans-serif;
  --radius:      6px;
  --transition:  0.25s ease;
}

/* ============================================================
   BASE GLOBALE
   ============================================================ */
body {
  background-color: var(--poupi-beige);
  color: var(--poupi-brun-fonce);
  font-family: var(--font-corps);
  font-size: 15px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titre);
  color: var(--poupi-brun);
  font-weight: 600;
  line-height: 1.3;
}

a {
  color: var(--poupi-rose);
  transition: color var(--transition);
}
a:hover {
  color: var(--poupi-brun);
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
  background-color: var(--poupi-blanc) !important;
  border-bottom: 2px solid var(--poupi-beige-mid);
  padding: 14px 0 !important;
}

.site-header .site-branding .site-title a {
  font-family: var(--font-titre);
  font-size: 1.6rem;
  color: var(--poupi-brun) !important;
  text-decoration: none;
  letter-spacing: 0.03em;
}

.site-header .site-branding .site-description {
  font-family: var(--font-corps);
  font-size: 0.78rem;
  color: var(--poupi-rose);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Menu principal */
.main-navigation ul li a {
  font-family: var(--font-corps);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--poupi-brun-fonce) !important;
  padding: 6px 14px !important;
  transition: color var(--transition);
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--poupi-rose) !important;
}

/* Sous-menu */
.main-navigation ul ul {
  background: var(--poupi-blanc);
  border: 1px solid var(--poupi-beige-mid);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.main-navigation ul ul li a {
  font-size: 0.8rem;
  padding: 8px 16px !important;
}

/* Icône panier */
.site-header-cart .cart-contents {
  color: var(--poupi-brun) !important;
}
.site-header-cart .cart-contents:hover {
  color: var(--poupi-rose) !important;
}
.site-header-cart .widget_shopping_cart {
  background: var(--poupi-blanc);
  border: 1px solid var(--poupi-beige-mid);
}

/* ============================================================
   HERO SECTION (page d'accueil)
   ============================================================ */
.poupi-hero {
  background: linear-gradient(135deg, var(--poupi-rose-clair) 0%, var(--poupi-beige) 60%);
  padding: 80px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.poupi-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(201,116,138,0.12), transparent 70%);
  border-radius: 50%;
}
.poupi-hero::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200,169,110,0.12), transparent 70%);
  border-radius: 50%;
}
.poupi-hero-badge {
  display: inline-block;
  font-family: var(--font-corps);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--poupi-rose);
  background: rgba(201,116,138,0.1);
  border: 1px solid rgba(201,116,138,0.3);
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.poupi-hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--poupi-brun);
  margin: 0 auto 16px;
  max-width: 700px;
  font-style: italic;
}
.poupi-hero p {
  font-size: 1rem;
  color: var(--poupi-brun-fonce);
  max-width: 520px;
  margin: 0 auto 32px;
  opacity: 0.85;
}
.poupi-hero-cta {
  display: inline-block;
  background: var(--poupi-rose);
  color: var(--poupi-blanc) !important;
  font-family: var(--font-corps);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 14px 36px;
  border-radius: 30px;
  transition: background var(--transition), transform var(--transition);
  box-shadow: 0 4px 18px rgba(201,116,138,0.35);
  margin-right: 12px;
}
.poupi-hero-cta:hover {
  background: var(--poupi-brun) !important;
  transform: translateY(-2px);
}
.poupi-hero-cta.secondary {
  background: transparent;
  color: var(--poupi-brun) !important;
  border: 2px solid var(--poupi-or);
  box-shadow: none;
}
.poupi-hero-cta.secondary:hover {
  background: var(--poupi-or) !important;
  color: var(--poupi-blanc) !important;
}
.poupi-hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.poupi-hero-stats span {
  font-size: 0.78rem;
  color: var(--poupi-brun);
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 6px;
}
.poupi-hero-stats span::before {
  content: '✓';
  color: var(--poupi-vert);
  font-weight: 700;
}

/* ============================================================
   BANDEAUX / TRUST BAR
   ============================================================ */
.poupi-trust-bar {
  background: var(--poupi-brun);
  color: var(--poupi-blanc);
  text-align: center;
  padding: 12px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.poupi-trust-bar span {
  opacity: 0.9;
}

/* ============================================================
   SECTIONS CATÉGORIES
   ============================================================ */
.poupi-categories {
  padding: 60px 40px;
  background: var(--poupi-blanc);
}
.poupi-section-title {
  text-align: center;
  margin-bottom: 40px;
}
.poupi-section-title h2 {
  font-size: 1.9rem;
  font-style: italic;
  color: var(--poupi-brun);
  margin-bottom: 8px;
}
.poupi-section-title p {
  font-size: 0.88rem;
  color: var(--poupi-rose);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
}
.poupi-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.poupi-cat-card {
  background: var(--poupi-beige);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  text-decoration: none !important;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid var(--poupi-beige-mid);
}
.poupi-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(107,76,59,0.12);
}
.poupi-cat-card .cat-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
  display: block;
}
.poupi-cat-card h3 {
  font-family: var(--font-titre);
  font-size: 1rem;
  color: var(--poupi-brun);
  margin: 0 0 6px;
}
.poupi-cat-card p {
  font-size: 0.78rem;
  color: var(--poupi-rose);
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ============================================================
   PRODUITS WOOCOMMERCE
   ============================================================ */
/* Grille produits */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
ul.products li.product {
  background: var(--poupi-blanc);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--poupi-beige-mid);
  transition: transform var(--transition), box-shadow var(--transition);
  padding: 0 0 16px !important;
}
ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(107,76,59,0.12);
}
ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  margin-bottom: 14px !important;
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-titre) !important;
  font-size: 0.95rem !important;
  color: var(--poupi-brun) !important;
  padding: 0 16px !important;
  margin-bottom: 6px !important;
}
ul.products li.product .price {
  color: var(--poupi-rose) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0 16px !important;
}
ul.products li.product .button {
  margin: 10px 16px 0 !important;
  width: calc(100% - 32px) !important;
  text-align: center !important;
}

/* Badges */
ul.products li.product .onsale {
  background: var(--poupi-rose) !important;
  border-radius: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
}

/* ============================================================
   BOUTONS WOOCOMMERCE
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
a.button, button.button {
  background-color: var(--poupi-rose) !important;
  color: var(--poupi-blanc) !important;
  font-family: var(--font-corps) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 30px !important;
  padding: 10px 22px !important;
  border: none !important;
  transition: background var(--transition), transform var(--transition) !important;
  box-shadow: 0 3px 12px rgba(201,116,138,0.3) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
a.button:hover, button.button:hover {
  background-color: var(--poupi-brun) !important;
  transform: translateY(-1px) !important;
}

/* Bouton alt (outline) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--poupi-brun) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--poupi-or) !important;
}

/* ============================================================
   PAGE PRODUIT INDIVIDUELLE
   ============================================================ */
.single-product .product_title {
  font-family: var(--font-titre) !important;
  font-size: 2rem !important;
  color: var(--poupi-brun) !important;
  font-style: italic;
}
.single-product .price {
  color: var(--poupi-rose) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}
.single-product .woocommerce-product-details__short-description {
  border-left: 3px solid var(--poupi-rose-clair);
  padding-left: 16px;
  color: var(--poupi-brun-fonce);
}
.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--poupi-rose) !important;
  border-bottom-color: var(--poupi-rose) !important;
}

/* ============================================================
   SECTION ABOUT / STORY (page d'accueil)
   ============================================================ */
.poupi-about {
  background: var(--poupi-rose-clair);
  padding: 70px 40px;
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.poupi-about-text {
  flex: 1;
  min-width: 280px;
}
.poupi-about-text .eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--poupi-rose);
  margin-bottom: 12px;
  display: block;
}
.poupi-about-text h2 {
  font-size: 1.8rem;
  font-style: italic;
  margin-bottom: 16px;
}
.poupi-about-text p {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--poupi-brun-fonce);
  margin-bottom: 24px;
}
.poupi-about-image {
  flex: 1;
  min-width: 260px;
  text-align: center;
}
.poupi-about-image img {
  border-radius: 12px;
  max-width: 100%;
  box-shadow: 0 12px 40px rgba(107,76,59,0.15);
}

/* ============================================================
   SECTION VALEURS / ICÔNES
   ============================================================ */
.poupi-valeurs {
  background: var(--poupi-beige);
  padding: 60px 40px;
  text-align: center;
}
.poupi-valeurs-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 32px auto 0;
}
.poupi-valeur-item {
  max-width: 180px;
}
.poupi-valeur-item .icon {
  font-size: 2rem;
  margin-bottom: 12px;
  display: block;
}
.poupi-valeur-item h4 {
  font-size: 0.9rem;
  font-family: var(--font-titre);
  color: var(--poupi-brun);
  margin-bottom: 6px;
}
.poupi-valeur-item p {
  font-size: 0.78rem;
  color: var(--poupi-brun-fonce);
  opacity: 0.7;
  margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--poupi-brun-fonce) !important;
  color: rgba(253,250,247,0.8) !important;
  padding: 50px 40px 24px !important;
}
.site-footer .widget-title {
  font-family: var(--font-titre) !important;
  color: var(--poupi-blanc) !important;
  font-size: 1rem !important;
  margin-bottom: 16px !important;
}
.site-footer a {
  color: rgba(253,250,247,0.6) !important;
  font-size: 0.85rem;
}
.site-footer a:hover {
  color: var(--poupi-rose) !important;
}
.site-footer .site-info {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(253,250,247,0.4) !important;
  font-size: 0.75rem !important;
  padding-top: 20px !important;
  margin-top: 30px !important;
  text-align: center;
}
.site-footer .site-info a {
  color: var(--poupi-rose) !important;
}

/* ============================================================
   FORMS (panier, caisse, contact)
   ============================================================ */
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form textarea,
.woocommerce form select {
  border: 1px solid var(--poupi-beige-mid) !important;
  border-radius: var(--radius) !important;
  background: var(--poupi-blanc) !important;
  color: var(--poupi-brun-fonce) !important;
  font-family: var(--font-corps) !important;
  padding: 10px 14px !important;
  transition: border-color var(--transition) !important;
}
.woocommerce form input:focus,
.woocommerce form textarea:focus {
  border-color: var(--poupi-rose) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,116,138,0.12) !important;
}

/* ============================================================
   PANIER & CHECKOUT
   ============================================================ */
.woocommerce-checkout #order_review {
  background: var(--poupi-blanc);
  border: 1px solid var(--poupi-beige-mid);
  border-radius: 12px;
  padding: 24px;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
  border-radius: var(--radius) !important;
}

/* ============================================================
   NOTIFICATIONS & MESSAGES
   ============================================================ */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--poupi-rose) !important;
  background: var(--poupi-rose-clair) !important;
}
.woocommerce-error {
  border-top-color: #c0392b !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .poupi-hero {
    padding: 50px 20px;
  }
  .poupi-hero h1 {
    font-size: 1.8rem;
  }
  .poupi-about {
    flex-direction: column;
    padding: 40px 20px;
    gap: 30px;
  }
  .poupi-categories,
  .poupi-valeurs {
    padding: 40px 20px;
  }
  .poupi-trust-bar {
    gap: 16px;
    font-size: 0.7rem;
  }
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 480px) {
  ul.products {
    grid-template-columns: 1fr !important;
  }
}