/* ============================================================
   Composants d'urgence & rareté — CSS
   (équivalents vanilla des composants React demandés)
   Palette: vert #10B981, tons chauds, design accueillant
   ============================================================ */

:root{
  --uv-green:#10B981;
  --uv-green-dark:#059669;
  --uv-green-light:#D1FAE5;
  --uv-red:#DC2626;
  --uv-red-light:#FEE2E2;
  --uv-amber:#F59E0B;
  --uv-amber-light:#FEF3C7;
  --uv-warm-bg:#FFF9F0;
  --uv-warm-border:#F3E5C7;
  --uv-ink:#2C2014;
  --uv-muted:#6B6558;
}

/* ---------- 1. EvergreenCountdown (bannière sticky haut) ---------- */
.uv-countdown{
  position:sticky;top:0;z-index:9999;
  background:linear-gradient(90deg,#059669 0%,#10B981 100%);
  color:#fff;text-align:center;
  padding:.6rem .75rem;font-weight:600;font-size:.95rem;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.4rem .75rem;line-height:1.35;
}
.uv-countdown__title{font-weight:700;letter-spacing:.02em}
.uv-countdown__time{
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.18);
  padding:.15rem .55rem;border-radius:6px;
  font-weight:800;font-size:1.02rem;
}
.uv-countdown--warning{animation:uvPulse 1.4s ease-in-out infinite}
.uv-countdown--expired{background:#6B6558}
.uv-countdown__reset{
  margin-left:.5rem;background:rgba(0,0,0,.25);color:#fff;
  border:0;border-radius:6px;padding:.15rem .5rem;font-size:.72rem;cursor:pointer;
}

@keyframes uvPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.15)}
}

/* ---------- 2. PlacesLimitees ---------- */
.uv-places{
  width:100%;height:100%;
  background:#fff;border:2px solid var(--uv-green);
  border-radius:16px;padding:1.5rem;
  box-shadow:0 4px 14px rgba(16,185,129,.12);
  display:flex;flex-direction:column;
}
.uv-places__title{
  margin:0 0 .5rem;font-size:1.1rem;font-weight:700;color:var(--uv-ink);
  text-align:center;
}
.uv-places__info{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.92rem;color:var(--uv-ink);margin-bottom:.5rem;flex-wrap:wrap;gap:.4rem;
}
.uv-places__info strong{color:var(--uv-green-dark);font-size:1.05rem}
.uv-places__bar{
  width:100%;height:14px;background:var(--uv-red-light);
  border-radius:999px;overflow:hidden;position:relative;
}
.uv-places__bar-fill{
  height:100%;background:linear-gradient(90deg,var(--uv-green) 0%,var(--uv-green-dark) 100%);
  transition:width .6s ease;border-radius:999px;
}
.uv-places__percent{
  text-align:right;font-size:.78rem;color:var(--uv-muted);margin-top:.3rem;
}
.uv-places__alert{
  margin-top:.75rem;padding:.55rem .8rem;
  background:var(--uv-red-light);color:var(--uv-red);
  border-radius:8px;font-weight:600;font-size:.9rem;text-align:center;
  animation:uvPulse 1.6s ease-in-out infinite;
}
.uv-places__cta{
  display:block;margin:auto auto 0;text-align:center;width:100%;
  background:var(--uv-green);color:#fff;font-weight:700;
  padding:.85rem 1.5rem;border-radius:999px;text-decoration:none;
  box-shadow:0 4px 12px rgba(16,185,129,.35);transition:transform .15s;
  margin-top:1rem;
}
.uv-places__cta:hover{transform:translateY(-2px)}

/* ---------- 3. NotificationsVentes ---------- */
.uv-notif{
  position:fixed;z-index:9998;max-width:300px;
  background:#fff;border:2px solid var(--uv-green);
  border-radius:12px;padding:.7rem .9rem;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:.85rem;color:var(--uv-ink);
  transition:opacity .4s ease, transform .4s ease;
}
.uv-notif--bottom-right{bottom:100px;right:16px}
.uv-notif--bottom-left{bottom:100px;left:16px}
.uv-notif--top-right{top:16px;right:16px}
.uv-notif--top-left{top:16px;left:16px}
.uv-notif--in{opacity:1;transform:translateY(0)}
.uv-notif--out{opacity:0;transform:translateY(20px);pointer-events:none}
.uv-notif__icon{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--uv-green-light);color:var(--uv-green-dark);
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.uv-notif__body{flex:1;line-height:1.35}
.uv-notif__body strong{color:var(--uv-green-dark)}
.uv-notif__time{display:block;font-size:.72rem;color:var(--uv-muted);margin-top:.15rem}
.uv-notif__close{
  background:none;border:0;color:var(--uv-muted);font-size:1.1rem;
  cursor:pointer;padding:0 .1rem;line-height:1;
}

/* ---------- 4. BonusActionRapide ---------- */
.uv-bonus{
  width:100%;height:100%;
  background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%);
  border:2px solid var(--uv-amber);
  border-radius:16px;padding:1.5rem;
  box-shadow:0 6px 18px rgba(245,158,11,.2);
  animation:uvSlideDown .5s ease-out;
  display:flex;flex-direction:column;
}
@keyframes uvSlideDown{
  from{opacity:0;transform:translateY(-16px)}
  to{opacity:1;transform:translateY(0)}
}
.uv-bonus__title{
  margin:0 0 .35rem;font-size:1.05rem;font-weight:800;color:#78350F;
}
.uv-bonus__desc{margin:0 0 .5rem;color:#78350F;font-size:.92rem;line-height:1.45}
.uv-bonus__timer{
  display:inline-block;background:#78350F;color:#fff;
  padding:.3rem .7rem;border-radius:8px;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:.9rem;margin-bottom:.75rem;
}
.uv-bonus__cta{
  display:block;text-align:center;background:#78350F;color:#fff;
  font-weight:700;padding:.85rem 1.5rem;border-radius:999px;
  text-decoration:none;box-shadow:0 4px 12px rgba(120,53,15,.35);
  margin-top:auto;
}

/* ---------- 5. AugmentationPrix ---------- */
.uv-price{
  width:100%;margin:1.5rem 0 0;
  background:var(--uv-warm-bg);border:1px solid var(--uv-warm-border);
  border-left:5px solid var(--uv-red);
  border-radius:14px;padding:1.5rem;
}
.uv-price__title{
  margin:0 0 .75rem;font-weight:700;color:var(--uv-red);font-size:1rem;
}
.uv-price__row{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;
  font-size:.95rem;color:var(--uv-ink);
}
.uv-price__now{color:var(--uv-green-dark);font-weight:800;font-size:1.35rem}
.uv-price__next{color:var(--uv-red);font-weight:700;text-decoration:line-through}
.uv-price__save{
  display:inline-block;margin-top:.5rem;background:var(--uv-green-light);
  color:var(--uv-green-dark);padding:.35rem .7rem;border-radius:8px;
  font-weight:700;font-size:.9rem;
}
.uv-price__countdown{
  margin-top:.75rem;font-size:.9rem;color:var(--uv-muted);font-variant-numeric:tabular-nums;
}
.uv-price--urgent{animation:uvPulse 1.6s ease-in-out infinite;border-left-color:#7F1D1D}

/* ---------- 6. BanniereUrgence (fixe bas) ---------- */
.uv-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:9997;
  background:linear-gradient(90deg,#059669 0%,#10B981 100%);
  color:#fff;padding:.65rem .9rem;
  box-shadow:0 -4px 14px rgba(0,0,0,.18);
  animation:uvSlideUp .4s ease-out;
}
@keyframes uvSlideUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
.uv-banner__inner{
  max-width:1100px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem 1.1rem;font-size:.88rem;font-weight:600;
}
.uv-banner__item{display:inline-flex;align-items:center;gap:.35rem}
.uv-banner__item strong{font-weight:800;font-variant-numeric:tabular-nums}
.uv-banner__cta{
  background:#fff;color:var(--uv-green-dark);
  padding:.5rem 1.1rem;border-radius:999px;font-weight:800;
  text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.15);
  white-space:nowrap;
}
.uv-banner__cta:hover{background:#F9FAFB}

/* Padding pour éviter que la bannière fixe cache le contenu */
body.uv-has-banner{padding-bottom:80px}
@media (max-width:640px){
  body.uv-has-banner{padding-bottom:120px}
  .uv-banner__inner{gap:.35rem .8rem;font-size:.8rem}
  .uv-notif{max-width:calc(100vw - 32px)}
  .uv-notif--bottom-right,
  .uv-notif--bottom-left{bottom:140px}
}

/* ---------- Section dédiée : Urgence & Rareté ---------- */
.uv-scarcity{
  background:#F9FAFB;
  padding:4rem 1.25rem;
  border-top:1px solid #E5E7EB;
  border-bottom:1px solid #E5E7EB;
}
.uv-scarcity__wrap{
  max-width:1100px;margin:0 auto;
}
.uv-scarcity__title{
  margin:0 0 .5rem;text-align:center;
  font-size:clamp(1.35rem,2.5vw,1.85rem);
  font-weight:800;color:#1F2937;letter-spacing:.01em;
}
.uv-scarcity__subtitle{
  margin:0 0 2rem;text-align:center;
  font-size:1rem;color:#6B7280;
}
.uv-scarcity__grid{
  display:grid;grid-template-columns:1fr;gap:1.5rem;
  align-items:stretch;
}
@media (min-width:1024px){
  .uv-scarcity__grid{grid-template-columns:1fr 1fr;gap:2rem}
}
.uv-scarcity__col{display:flex}
.uv-scarcity__full{margin-top:1.5rem}
.uv-scarcity__full--first{margin-top:0}
.uv-scarcity__full--first .uv-price{margin-top:0}
.uv-scarcity--price .uv-scarcity__wrap{max-width:820px}
@media (max-width:640px){
  .uv-scarcity{padding:3rem 1rem}
}