/* =========================================================
   GLOBALE ESTHETIQUE — BANNIERE « CODE PROMO » (06/10/2026)
   Design « rose poudré ». Slide générée automatiquement dans
   le carrousel d'accueil (includes/banniere-promo.php).
   ========================================================= */
.hero .hero-slide--promo{ overflow:hidden; }
.hero-slide--promo .hp{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:0 70px 18px;
  font-family:'DM Sans', sans-serif;
  color:#241712;
  background:
    radial-gradient(circle at 12% 110%, #f6d3d9 0%, transparent 42%),
    radial-gradient(circle at 92% -10%, #f3c7cf 0%, transparent 46%),
    linear-gradient(120deg, #FFF6F3 0%, #FBE9EA 100%);
}
.hero-slide--promo .hp-eyebrow{ color:#6E1B2C; font-size:11.5px; font-weight:700; letter-spacing:3px; }
.hero-slide--promo .hp-big{
  font-family:'Playfair Display', serif; font-weight:600; line-height:.95;
  font-size:clamp(60px, 6.6vw, 104px); color:#6E1B2C; margin:10px 0 8px;
}
.hero-slide--promo .hp-valeur{ white-space:nowrap; }
.hero-slide--promo .hp-big em{
  font-style:italic; font-weight:500; font-size:.36em; color:#241712;
  margin-left:8px; vertical-align:middle; white-space:nowrap;
}
/* Montant fixe (« -500 DA ») et livraison offerte : texte plus long, donc plus petit */
.hero-slide--promo-montant .hp-big{ font-size:clamp(46px, 5vw, 78px); }
.hero-slide--promo-livraison .hp-big{ font-size:clamp(40px, 4.4vw, 68px); font-style:italic; font-weight:500; }
.hero-slide--promo .hp-sub{ font-size:14.5px; color:#5d5050; }
.hero-slide--promo .hp-row{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.hero-slide--promo .hp-pill{
  display:flex; align-items:center; gap:16px;
  background:#fff; border:1.5px dashed #6E1B2C; border-radius:999px;
  padding:7px 8px 7px 24px; box-shadow:0 10px 26px rgba(110,27,44,.10);
}
.hero-slide--promo .hp-code{ font-weight:700; letter-spacing:4px; font-size:21px; line-height:1; color:#6E1B2C; user-select:all; }
.hero-slide--promo .hp-copy{
  display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer;
  border-radius:999px; background:#F6E4E6; color:#6E1B2C;
  font-family:inherit; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  padding:9px 16px; transition:background .2s ease, color .2s ease;
}
.hero-slide--promo .hp-copy:hover,
.hero-slide--promo .hp-copy.est-copie{ background:#6E1B2C; color:#fff; }
.hero-slide--promo .hp-cta{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:#6E1B2C; color:#fff; border-radius:999px;
  font-weight:700; font-size:12px; letter-spacing:1.6px; text-transform:uppercase;
  padding:14px 26px; transition:transform .2s ease, box-shadow .2s ease;
}
.hero-slide--promo .hp-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(110,27,44,.22); }

/* Sur fond clair, les points du carrousel reprennent la couleur du site */
@media (min-width:901px){
  .main-grid > .hero:has(.hero-slide--promo.active) .hero-dot{ background:rgba(110,27,44,.25) !important; box-shadow:none; }
  .main-grid > .hero:has(.hero-slide--promo.active) .hero-dot.active{ background:var(--pink) !important; }
}

/* ---------- Petits écrans PC ---------- */
@media (min-width:901px) and (max-width:1180px){
  .hero-slide--promo .hp-sub{ font-size:13px; }
  .hero-slide--promo .hp-row{ margin-top:12px; gap:10px; }
  .hero-slide--promo .hp-code{ font-size:17px; letter-spacing:3px; }
  .hero-slide--promo .hp-cta{ padding:11px 18px; font-size:11px; }
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .hero-slide--promo .hp{ padding:0 14px 14px; }
  .hero-slide--promo .hp-eyebrow{ font-size:8.5px; letter-spacing:2.2px; }
  .hero-slide--promo .hp-big{ font-size:clamp(34px, 11vw, 54px); margin:4px 0 3px; }
  .hero-slide--promo-montant .hp-big{ font-size:clamp(26px, 8.4vw, 42px); }
  .hero-slide--promo-livraison .hp-big{ font-size:clamp(22px, 7vw, 36px); }
  .hero-slide--promo .hp-big em{ font-size:.34em; margin-left:5px; }
  .hero-slide--promo .hp-sub{ font-size:10.5px; }
  .hero-slide--promo .hp-row{ margin-top:8px; gap:8px; }
  .hero-slide--promo .hp-pill{ gap:10px; padding:4px 5px 4px 14px; border-width:1px; }
  .hero-slide--promo .hp-code{ font-size:13.5px; letter-spacing:2.2px; }
  .hero-slide--promo .hp-copy{ font-size:9px; padding:6px 10px; gap:5px; }
  .hero-slide--promo .hp-copy svg{ width:11px; height:11px; }
  .hero-slide--promo .hp-cta{ display:none; }
}