/* ============================================================
   IciOnDeal — Bandeau défilant "Points forts" (.fp2-highlights)
   Scope : sélecteurs préfixés fp2-highlights-* / fp2-highlight-*
   uniquement, aucune règle globale.

   Rendu DEUX FOIS dans fiche-produit.php (mobile/tablette .fp2-page
   + colonne desktop .fp2-legacy-top) — une seule instance visible à
   la fois, pilotée par les media queries existantes de
   fp2-fiche-produit.css (jamais un display:none propre à ce fichier).

   Défilement continu en CSS pur (aucun JS) : la piste contient la liste des points forts
   dupliquée une fois (voir fpRenderHighlights() dans fiche-produit.php) et une animation
   translateX(0 → -50%) en boucle infinie fait glisser le second jeu exactement à la place du
   premier, sans à-coup ni retour visible. Dégradation sans CSS animations (très vieux
   navigateurs) : le conteneur est en overflow:hidden, donc seul le début de la liste reste
   visible et lisible.
   ============================================================ */

/* Fond "collé au texte" (design repris de .fp2-coupon-strip) : chaque point fort est une pilule
   qui n'entoure que son propre texte, plutôt qu'une carte pleine largeur derrière tous les
   points — le conteneur externe n'a plus de fond/bordure propre. */
.fp2-highlights{
  position:relative;
  margin:0 0 14px;
  overflow:hidden;
}

.fp2-highlights-track{
  display:flex;
  width:max-content;
  animation-name:fp2-highlights-scroll;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.fp2-highlights:hover .fp2-highlights-track{
  animation-play-state:paused;
}
@keyframes fp2-highlights-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.fp2-highlight-item{
  flex:0 0 auto;
  min-width:0;
  display:flex;
  padding-right:10px;
}

.fp2-highlight-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  background:var(--fp2-vert-clair,#E7F5EE);
  border-radius:999px;
  padding:7px 13px;
}

.fp2-highlight-check{
  flex-shrink:0;
  font-size:14px;
  line-height:1;
}

.fp2-highlight-pill span:last-child{
  font-size:13.5px;
  font-weight:500;
  color:#166534;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Variante statique (1 seul point fort, voir fpRenderHighlights() dans fiche-produit.php) :
   rien à faire défiler, pleine largeur. */
.fp2-highlights--static .fp2-highlights-track{
  animation:none;
}
.fp2-highlights--static .fp2-highlight-item{
  flex:0 0 100%;
  padding-right:0;
}

@media (prefers-reduced-motion:reduce){
  .fp2-highlights-track{ animation:none; }
}

/* Tablette 768–1024px : suit la colonne d'infos produit, texte légèrement plus grand */
@media (min-width:768px){
  .fp2-highlight-pill span:last-child{ font-size:14px; }
}

/* Desktop ≥1024px : colonne droite de la PDP (fp2-legacy-top) — jamais masqué ici, juste une
   pilule un peu plus généreuse ; la largeur reste bornée par la colonne parente. */
@media (min-width:1024px){
  .fp2-highlight-pill{ padding:8px 16px; }
}

/* Mode sombre — cohérent avec les autres tokens fp2-* de la fiche produit */
:root[data-theme="dark"] .fp2-highlight-pill{ background:#12291b; }
:root[data-theme="dark"] .fp2-highlight-pill span:last-child{ color:#4ade80; }