/* ==========================================
   GLOBAL BRANDING & DESIGN SYSTEM
   ========================================== */
:root {
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;
  --color-bg: #fdfbf7;       /* Blanc cassé/crème très doux et luxueux */
  --color-dark: #1a1a1a;     /* Anthracite élégant pour les textes */
  --color-primary: #c84727;  /* Rouge brique / Terracotta chaud */
  --color-accent: #e67e22;   /* Orange chaleureux pour les boutons d'action */
  --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06);
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-dark);
  letter-spacing: -0.1px;
}

/* Transformation des titres principaux (Style Magazine) */
h1, h2, .logo {
  font-family: var(--font-serif) !important;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Le Logo GlowHer dans le Header */
.logo {
  font-size: 26px;
  color: var(--color-dark);
  font-style: italic;
}

/* La section Hero (Grand titre d'accueil) */
.hero h1 {
  font-size: 42px;
  line-height: 1.2;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.hero p {
  font-family: var(--font-sans);
  font-size: 16px;
  color: #555;
  max-width: 600px;
  line-height: 1.6;
}

/* Ajustement des prix dans le catalogue */
#grid .price, #grid p:has(strong) {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-primary) !important;
}

/* ==========================================
   1. STYLE DE LA BANNIÈRE PROMO (DESIGN INSPIRATION)
   ========================================== */
.promo-banner {
  background-color: #fbeee6;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1a1a1a;
}

.promo-badge-live {
  background-color: #ffffff;
  color: #c84727;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(200, 71, 39, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.promo-badge-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #c84727;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.4; }
  100% { transform: scale(0.9); opacity: 1; }
}

/* ==========================================
   2. STYLE RESTAURÉ ET AMÉLIORÉ DE LA FAQ
   ========================================== */
.faq-section {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: sans-serif;
}

.faq-title {
  text-align: center;
  margin-bottom: 30px;
  color: #1a1a1a;
}

.faq-item {
  border-bottom: 1px solid #eaeaea;
  padding: 15px 0;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px 0;
}

.faq-icon {
  font-size: 20px;
  transition: transform 0.3s ease;
  color: #c84727;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq-answer p {
  padding: 10px 0;
  color: #666;
  line-height: 1.6;
  font-size: 14px;
  margin: 0;
}

/* État ouvert géré par le JavaScript */
.faq-item.is-open .faq-icon {
  transform: rotate(45deg); /* Le + devient un x */
}
/* ==========================================
   3. ANIMATION DU TEXTE DÉFILANT (MARQUEE)
   ========================================== */
.promo-marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.promo-marquee-text {
  display: inline-block;
  padding-left: 100%;
  animation: marqueePromo 15s linear infinite;
  color: #1a1a1a;
  font-weight: 500;
}

@keyframes marqueePromo {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}
/* Bouton Ajouter au panier (Style Taly Market) */
.btn-add-to-cart {
  width: 100%;
  background-color: #e67e22; /* Orange chaleureux */
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px; /* Coins très arrondis */
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  margin-top: 10px;
  box-shadow: 0 4px 6px rgba(230, 126, 34, 0.15);
}

.btn-add-to-cart:hover {
  background-color: #d35400; /* Orange plus sombre au survol */
}

.btn-add-to-cart:active {
  transform: scale(0.98); /* Effet d'enfoncement au clic */
}
/* ==========================================
   4. DESIGN DU CATALOGUE STYLE E-COMMERCE PRO
   ========================================== */

/* Redéfinition de la grille pour l'aérer */
#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* La carte produit (chaque livre) */
#grid > div {
  background: #ffffff;
  border-radius: 16px; /* Coins arrondis pro */
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Ombre douce */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #f0f0f0;
}

#grid > div:hover {
  transform: translateY(-4px); /* Léger effet de survol */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Ajustement des images de couverture */
#grid img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 12px;
}

/* Titre du livre */
#grid h3, #grid .product-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 8px 0;
  line-height: 1.4;
}

/* Prix et réduction */
#grid .price, #grid p:has(strong) {
  font-size: 15px;
  font-weight: 700;
  color: #c84727; /* Rouge brique promotionnel */
  margin: 6px 0;
}

/* Bouton Ajouter au panier intégré à la carte */
.btn-add-to-cart {
  width: 100%;
  background-color: #e67e22; /* Orange Taly Market */
  color: #ffffff;
  border: none;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  margin-top: auto; /* Pousse le bouton en bas de la carte */
  transition: background 0.2s;
}

.btn-add-to-cart:hover {
  background-color: #d35400;
}
/* ==========================================
   5. BANDEAU DE GARANTIES & RÉASSURANCE
   ========================================== */
.guarantee-banner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  background-color: #ffffff;
  padding: 24px 16px;
  margin: 30px auto;
  max-width: 1200px;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #f0f0f0;
}

.guarantee-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 250px;
  justify-content: center;
}

.guarantee-icon {
  font-size: 24px;
  background: #fbeee6;
  padding: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
}

.guarantee-text strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 2px;
}

.guarantee-text p {
  margin: 0;
  font-size: 13px;
  color: #777;
}

/* Version Mobile */
@media (max-width: 768px) {
  .guarantee-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    margin: 20px;
  }
  .guarantee-item {
    justify-content: flex-start;
    width: 100%;
  }
}
/* ==========================================
   6. ICÔNE DE PANIER INTERACTIVE
   ========================================== */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-icon-container {
  position: relative;
  margin-right: 15px;
}

.cart-toggle-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  position: relative;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.cart-toggle-btn:hover {
  transform: scale(1.1);
}

.cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: var(--color-primary, #c84727);
  color: #ffffff;
  font-family: var(--font-sans), sans-serif;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* ==========================================
   7. PANIER LATÉRAL COULISSANT (DRAWER)
   ========================================== */
.cart-drawer {
  position: fixed;
  top: 0;
  right: -400px; /* Caché par défaut à droite */
  width: 100%;
  max-width: 400px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: -5px 0 25px rgba(0,0,0,0.1);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease-in-out;
}

.cart-drawer.is-open {
  right: 0; /* Aligné à l'écran quand ouvert */
}

.cart-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  z-index: 1999;
  display: none;
}

.cart-drawer-overlay.is-open {
  display: block;
}

.cart-drawer-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-drawer-header h3 {
  margin: 0;
  font-size: 20px;
}

.cart-drawer-close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
}

.cart-drawer-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* Style d'un article dans le panier */
.cart-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f8f8f8;
}

.cart-item-title {
  font-size: 14px;
  font-weight: 500;
  max-width: 70%;
}

.cart-item-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.cart-drawer-footer {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 15px;
}

.btn-checkout {
  width: 100%;
  background-color: var(--color-accent);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-checkout:hover {
  background-color: var(--color-primary);
}
/* ==========================================
   8. SECTION HERO PREMIUM (LOOK MAGAZINE)
   ========================================== */
.hero-premium {
  background-color: var(--color-bg);
  padding: 80px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}

.hero-content {
  flex: 1.2;
}

.hero-subtitle {
  display: block;
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.hero-content h1 {
  font-family: var(--font-serif) !important;
  font-size: 48px;
  line-height: 1.15;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.hero-content p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 30px;
}

.btn-hero-primary {
  display: inline-block;
  background-color: var(--color-dark);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 50px;
  transition: background 0.2s, transform 0.2s;
}

.btn-hero-primary:hover {
  background-color: var(--color-primary);
  transform: translateY(-2px);
}

/* Zone Visuelle Asymétrique */
.hero-visual {
  flex: 0.8;
  display: flex;
  justify-content: center;
  position: relative;
}

.hero-image-stack {
  position: relative;
  width: 280px;
  height: 380px;
}

.hero-img {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  object-fit: cover;
  transition: transform 0.3s;
}

.img-main {
  width: 240px;
  height: 340px;
  z-index: 2;
  top: 0;
  left: 0;
}

.img-sub {
  width: 200px;
  height: 290px;
  z-index: 1;
  bottom: -20px;
  right: -40px;
  transform: rotate(5deg);
}

/* Adaptabilité Écrans Mobiles */
@media (max-width: 968px) {
  .hero-premium {
    padding: 40px 20px;
  }
  .hero-container {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  .hero-image-stack {
    width: 200px;
    height: 280px;
    margin: 0 auto 30px auto;
  }
  .img-main { width: 180px; height: 250px; }
  .img-sub { width: 150px; height: 210px; right: -20px; }
}
/* Style du bouton de suppression dans le panier */
.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 80%;
}

.cart-item-remove {
  background: none;
  border: none;
  color: #c84727;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  padding: 0 8px;
  transition: transform 0.2s;
}

.cart-item-remove:hover {
  transform: scale(1.2);
}
/* ==========================================
   9. MODALE DE CHEKOUT / FORMULAIRE
   ========================================== */
.checkout-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  z-index: 3000;
  width: 90%;
  max-width: 450px;
  display: none;
  transition: transform 0.2s;
}
.checkout-modal.is-open { display: block; transform: translate(-50%, -50%) scale(1); }
.checkout-modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2999; display:none; }
.checkout-modal-overlay.is-open { display:block; }
.checkout-modal-close { position:absolute; top:15px; right:20px; background:none; border:none; font-size:28px; cursor:pointer; color:#999; }
.checkout-summary { background:#fbeee6; padding:15px; border-radius:10px; display:flex; justify-content:space-between; margin-bottom:20px; font-family:var(--font-sans); }
.form-group { margin-bottom:15px; text-align:left; }
.form-group label { display:block; font-size:14px; font-weight:600; margin-bottom:5px; color:#333; }
.form-group input { width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; box-sizing:border-box; font-family:var(--font-sans); }
.payment-methods { display:flex; gap:10px; margin-top:5px; }
.method-card { flex:1; border:1px solid #ddd; padding:12px; border-radius:8px; display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; }
.method-card input:checked + span { font-weight:600; color:var(--color-primary); }
.btn-submit-order { width:100%; background:var(--color-primary); color:white; border:none; padding:14px; border-radius:10px; font-weight:600; font-size:16px; cursor:pointer; margin-top:10px; }
/* ==========================================================================
   AJOUTS CONFIGURATION MISES À JOUR (AOÛT 2026)
   ========================================================================== */

/* 1. BANDEAU DÉFILANT "EN DIRECT" (MARQUEE) */
.promo-banner {
  background: #111;
  color: #fff;
  padding: 10px 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.marquee-content {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 25s linear infinite;
}
.marquee-content span {
  margin: 0 10px;
}
.marquee-content .separator {
  color: #e91e63; /* Couleur d'accentuation pour GlowHer */
  font-weight: bold;
}
@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* 2. RECHERCHE ET ACTIONS DU CATALOGUE */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
}
.card-footer-actions .btn-sm {
  border-radius: 4px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s;
}
.card-footer-actions .btn-sm:hover {
  opacity: 0.9;
}

/* 3. BULLE FLOTTANTE WHATSAPP & COOKIES */
#whatsappFloat {
  transition: transform 0.2s ease;
}
#whatsappFloat:hover {
  transform: scale(1.1);
}
#cookieBanner button {
  transition: filter 0.2s;
}
#cookieBanner button:hover {
  filter: brightness(1.1);
}

/* 4. STRUCTURE DU PANIER COULISSANT (DRAWER) */
#cartDrawer {
  font-family: sans-serif;
}
.cart-item {
  transition: background 0.2s;
}
.cart-item:hover {
  background: #f5f5f5 !important;
}
/* ============================================================
   CORRECTIF MOBILE — Pages produits individuelles
   Empile l'image et les infos verticalement sur petit écran,
   au lieu de forcer un défilement horizontal pour voir le
   bouton d'achat. Cible toutes les pages produits d'un coup
   via [style*="grid-template-columns"], sans modifier les
   fichiers HTML un par un.
   ============================================================ */
@media (max-width: 640px) {
  article[style*="grid-template-columns"] {
    display: block !important;
  }
  article[style*="grid-template-columns"] img {
    width: 100% !important;
    max-width: 280px;
    display: block;
    margin: 0 auto 20px auto;
  }
  article[style*="grid-template-columns"] > div:last-child {
    text-align: center;
  }
  article[style*="grid-template-columns"] button {
    width: 100%;
  }
}