/* ═══════════════════════════════════════════════════
   E-SHOPIA — Styles partagés (toutes les pages)
═══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', sans-serif;
  background: #fdf9f6;
  color: #1a1208;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* ── Animations ── */
@keyframes fadeUp  { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes shimmer { 0% { background-position:-200% center; } 100% { background-position:200% center; } }
@keyframes spin    { to { transform:rotate(360deg); } }
@keyframes pulse   { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@keyframes notifIn {
  0%   { transform:translateY(20px); opacity:0; }
  10%  { transform:translateY(0);    opacity:1; }
  88%  { transform:translateY(0);    opacity:1; }
  100% { transform:translateY(-20px);opacity:0; }
}

/* Staggered fade-up — deux conventions de nommage supportées (avec et sans tiret) */
.fade-up,
.fade-up1  { animation: fadeUp .6s ease forwards; }
.fade-up-2,
.fade-up2  { animation: fadeUp .6s .12s ease forwards; opacity:0; }
.fade-up-3,
.fade-up3  { animation: fadeUp .6s .25s ease forwards; opacity:0; }
.fade-up-4,
.fade-up4  { animation: fadeUp .6s .38s ease forwards; opacity:0; }
.fade-up-5,
.fade-up5  { animation: fadeUp .6s .5s  ease forwards; opacity:0; }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .65s ease, transform .65s ease; }
.reveal.in { opacity:1; transform:translateY(0); }

/* Social proof notif */
.notif-anim { animation: notifIn 4.5s ease infinite; }

/* Shimmer CTA */
.shimmer-btn {
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 50%, #16a34a 100%);
  background-size: 200% auto;
  animation: shimmer 2.8s linear infinite;
  transition: filter .2s ease, transform .12s ease, box-shadow .2s ease;
}
.shimmer-btn:hover  { filter: brightness(1.07); box-shadow: 0 12px 30px rgba(21,128,61,.38); }
.shimmer-btn:active { transform: scale(.97); }
/* Focus visible clavier (accessibilité) */
button:focus-visible,
a:focus-visible,
.pack-card:focus-visible {
  outline: 3px solid rgba(244,63,94,.55);
  outline-offset: 2px;
}

/* Spinner */
.spinner {
  width:20px; height:20px;
  border:3px solid rgba(255,255,255,.4);
  border-top-color:white;
  border-radius:50%;
  animation: spin .7s linear infinite;
  display:none;
}

/* Pack cards */
.pack-card { border:2px solid #e5ddd5; background:white; border-radius:18px; padding:18px; cursor:pointer; transition:border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .18s ease; }
.pack-card:hover  { border-color:#f9a8b8; transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.07); }
.pack-card.active { border-color:#f43f5e; background:#fff5f7; box-shadow:0 12px 30px rgba(244,63,94,.16); }
.pack-card:active { transform:scale(.99); }

/* Prix : chiffres alignés (évite le décalage visuel) */
.price-now, .price-old { font-variant-numeric: tabular-nums; }

/* Scrollbar cachée */
.no-sb::-webkit-scrollbar { display:none; }
.no-sb { -ms-overflow-style:none; scrollbar-width:none; }

/* Inputs */
input, textarea {
  font-family: 'DM Sans', sans-serif;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid #e5ddd5;
  background: #fffaf8;
  font-size: 15px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus {
  border-color: #f43f5e;
  box-shadow: 0 0 0 4px rgba(244,63,94,.1);
}

/* ── Accessibilité : respecter la préférence "réduire les animations" ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .fade-up, .fade-up1, .fade-up-2, .fade-up2, .fade-up-3, .fade-up3,
  .fade-up-4, .fade-up4, .fade-up-5, .fade-up5 { opacity: 1 !important; }
}