/* ==========================================================================
   packs.css — Page « Nos packs » + bannière d'accès aux packs.
   Charge après theme.css / components.css / animations.css.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Bannière d'accès aux packs (haut de la page Produits, teaser Accueil)
   -------------------------------------------------------------------------- */
.packs-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background:
    linear-gradient(100deg, rgba(226, 209, 88, .16), transparent 55%),
    var(--c-cream);
  border: 1px solid var(--c-gold);
  border-radius: var(--radius-lg);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.packs-banner::before {
  /* liseré doré animé sur le bord gauche */
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--c-gold), var(--c-sage), var(--c-gold));
  background-size: 100% 200%;
  animation: packs-lisere 3.2s ease-in-out infinite;
}
@keyframes packs-lisere {
  0%, 100% { background-position: 0 0; }
  50%      { background-position: 0 100%; }
}
.packs-banner__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-violet);
  color: var(--c-gold);
  font-size: 1.375rem;
  box-shadow: var(--shadow);
}
.packs-banner__texte { display: grid; gap: 2px; min-width: 0; }
.packs-banner__texte strong {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-olive);
  font-size: var(--fs-500);
}
.packs-banner__texte span { color: var(--c-ink-soft); font-size: var(--fs-400); }
.packs-banner__texte em {
  font-style: normal;
  font-weight: 700;
  color: var(--c-danger);
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger);
  border-radius: var(--radius-pill);
  padding: 0 8px;
  white-space: nowrap;
}
.packs-banner__cta { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.packs-banner__cta i { transition: transform var(--t); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .packs-banner:hover { box-shadow: var(--shadow); border-color: var(--c-gold-hover); }
  .packs-banner:hover .packs-banner__cta i { transform: translateX(4px); }
  .packs-banner:hover .packs-banner__icon { animation: packs-wiggle .5s var(--ease-spring); }
}
@keyframes packs-wiggle {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-8deg) scale(1.06); }
  70%      { transform: rotate(8deg) scale(1.06); }
}
@media (max-width: 600px) {
  .packs-banner { flex-wrap: wrap; padding: var(--sp-4); }
  .packs-banner__cta { width: 100%; justify-content: center; margin-left: 0; }
}

.ecatalogue-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.ecatalogue-banner__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--c-olive);
  color: #fff;
  font-size: 1.25rem;
}
.ecatalogue-banner__text { display: grid; gap: 2px; min-width: 0; }
.ecatalogue-banner__text strong {
  color: var(--c-olive);
  font-family: var(--font-head);
  font-size: var(--fs-500);
  text-transform: uppercase;
}
.ecatalogue-banner__text span { color: var(--c-ink-soft); font-size: var(--fs-400); }
.ecatalogue-banner__cta { flex: 0 0 auto; gap: var(--sp-2); margin-left: auto; white-space: nowrap; }
.ecatalogue-banner:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
@media (hover: hover) {
  .ecatalogue-banner:hover { transform: translateY(-2px); border-color: var(--c-olive); box-shadow: var(--shadow); }
}
@media (max-width: 600px) {
  .ecatalogue-banner { flex-wrap: wrap; padding: var(--sp-4); }
  .ecatalogue-banner__cta { width: 100%; justify-content: center; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   2. Héro de la page packs (dégradé de marque + stats animées + ticker)
   -------------------------------------------------------------------------- */
.pack-hero {
  background:
    radial-gradient(900px 320px at 12% -20%, rgba(226, 209, 88, .28), transparent 60%),
    linear-gradient(120deg, var(--c-olive-deep), var(--c-violet) 78%);
  color: #fff;
  overflow: hidden;
}
.pack-hero__inner {
  padding-block: clamp(40px, 6vw, 72px) var(--sp-6);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
}
.pack-hero h1 {
  margin: 0;
  font-size: var(--fs-900);
  color: var(--c-gold);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.pack-hero .text-serif { color: rgba(255, 255, 255, .85); }
.pack-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-3);
}
.stat { display: grid; gap: 2px; justify-items: center; }
.stat__valeur {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--c-gold);
  line-height: 1;
}
.stat__label {
  font-size: var(--fs-300);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .8);
}
.pack-hero__note {
  font-size: var(--fs-300);
  color: rgba(255, 255, 255, .62);
  margin: var(--sp-2) 0 0;
}

/* Ticker défilant (bandeau bas du héro) */
.ticker {
  border-block: 1px solid rgba(226, 209, 88, .35);
  background: rgba(0, 0, 0, .22);
  overflow: hidden;
  padding-block: 10px;
}
.ticker__piste {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .ticker__piste { animation: packs-ticker 26s linear infinite; }
}
@keyframes packs-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker__piste span {
  padding-inline: 18px;
  font-family: var(--font-head);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold);
}

/* --------------------------------------------------------------------------
   3. Grille des packs
   -------------------------------------------------------------------------- */
.pack-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .pack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pack-grid { grid-template-columns: repeat(3, 1fr); } }

.pack-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pack-card__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(320px 180px at 85% 0%, rgba(226, 209, 88, .25), transparent 60%),
    var(--c-aloe-clair);
  border-bottom: 1px solid var(--c-line-soft);
}
.pack-card__media img {
  max-width: 62%;
  max-height: 82%;
  object-fit: contain;
  transition: transform .45s var(--ease-out);
}
.pack-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--c-violet);
  color: var(--c-gold);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .875rem;
  letter-spacing: .04em;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pack-card__badge::after {
  /* reflet qui balaie la remise */
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg) translateX(-160%);
  animation: packs-shine 3.4s var(--ease-out) infinite;
}
@keyframes packs-shine {
  0%, 55%   { transform: skewX(-20deg) translateX(-160%); }
  85%, 100% { transform: skewX(-20deg) translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .pack-card__badge::after { animation: none; }
}
.pack-card__ruban {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(48, 40, 88, .85);
  color: #fff;
  font-size: var(--fs-300);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pack-card__corps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  flex: 1;
}
.pack-card__nom {
  margin: 0;
  font-size: var(--fs-600);
  color: var(--c-olive);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pack-card__volume { margin: 0; color: var(--c-muted); font-size: var(--fs-300); }
.pack-card__slogan {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-muted);
  font-size: var(--fs-400);
}
.pack-card__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pack-card__liste li {
  font-size: var(--fs-300);
  color: var(--c-ink-soft);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.pack-card__liste b { color: var(--c-olive); }
.pack-card__prix {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.pack-card__neuf {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--c-violet);
}
.pack-card__prix-note { color: var(--c-muted); font-size: var(--fs-300); }
.pack-card__actions { padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-2); }
.pack-card__note { font-size: var(--fs-300); color: var(--c-muted); text-align: center; }
.pack-updated { margin-top: var(--sp-4); text-align: right; font-size: var(--fs-300); }