/* Bonus Spotlight (Starter) — responsive, no overflow, multi-line clamp */
.pack-bonus-spotlight{
  border-radius:.75rem;
  padding:.875rem .875rem .5rem;
  margin:.5rem 0 1rem;
  background:linear-gradient(0deg,rgba(255,120,52,.10),rgba(255,120,52,.10));
  border:1px solid rgba(255,120,52,.25);
  box-sizing:border-box;
}

/* Header */
.pack-bonus-spotlight .bonus-head{
  display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem 0
}
.pack-bonus-spotlight .bonus-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:56px;height:20px;border-radius:999px;
  background:#ff6a3d;color:#fff;font-weight:700;font-size:.75rem;padding:.25rem .5rem
}
.pack-bonus-spotlight .bonus-title{margin:0;font-weight:800;font-size:.95rem;line-height:1.2}

/* Grid de pills — 1 col sur cartes étroites, 2 cols dès ~380px */
.pack-bonus-spotlight .bonus-pills{
  list-style:none;margin:.25rem 0 .25rem;padding:0;
  display:grid;grid-template-columns:1fr;gap:8px
}
@media (min-width:380px){
  .pack-bonus-spotlight .bonus-pills{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Pills : icône fixe, texte flexible, wrap & clamp 2 lignes */
.pack-bonus-spotlight .bonus-pill{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:12px;background:#fff;
  border:1px solid rgba(255,120,52,.35);box-sizing:border-box;min-width:0
}
.pack-bonus-spotlight .bonus-pill i{
  flex:0 0 16px;text-align:center;color:#c85424;opacity:.9
}
.pack-bonus-spotlight .bonus-pill span{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;word-break:break-word;white-space:normal;line-height:1.25
}

/* Bloc “plus” replié : même logique de texte */
.pack-bonus-spotlight .bonus-more{margin-top:.25rem}
.pack-bonus-spotlight .bonus-list{
  list-style:none;margin:0;padding:0;display:grid;gap:6px
}
.pack-bonus-spotlight .bonus-item{
  display:flex;align-items:flex-start;gap:8px;
  padding:6px 10px;border-radius:10px;background:#fff;
  border:1px dashed rgba(255,120,52,.25);box-sizing:border-box
}
.pack-bonus-spotlight .bonus-item i{
  flex:0 0 16px;text-align:center;color:#c85424;opacity:.9;margin-top:2px
}
.pack-bonus-spotlight .bonus-item span{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;word-break:break-word;white-space:normal;line-height:1.25
}

/* Bouton “Voir +N bonus” */
.pack-bonus-spotlight .bonus-toggle{
  appearance:none;background:transparent;border:0;cursor:pointer;
  color:#d5522d;font-weight:700;padding:.25rem 0 .125rem;text-decoration:underline
}
.pack-bonus-spotlight .bonus-toggle:hover{text-decoration:none}

/* Micro-impulsion en douceur du header (1x) */
@keyframes pulse-soft{0%{transform:scale(1)}15%{transform:scale(1.04)}30%{transform:scale(1)}100%{transform:scale(1)}}
.pack-bonus-spotlight .bonus-head--pulse{animation:pulse-soft .9s ease-out 1}

/* Petits écrans très étroits */
@media (max-width:330px){
  .pack-bonus-spotlight .bonus-pills{grid-template-columns:1fr}
  .pack-bonus-spotlight .bonus-pill{padding:7px 8px}
}