/* ============================================================
   IciOnDeal — Carrousel "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).
   Classes uniquement, jamais d'ID : le JS (querySelectorAll) pilote
   les deux instances indépendamment sans collision.

   Dégradation sans JS : chaque .fp2-highlight-item occupe 100% de la
   largeur (flex:0 0 100%) et le conteneur est en overflow:hidden, donc
   seul le premier point fort reste visible et lisible tant que le JS
   n'a pas appliqué de transform sur la piste.
   ============================================================ */

.fp2-highlights{
  position:relative;
  background:linear-gradient(180deg,#f0fdf4,#f7fef9);
  border:1px solid #bbf7d0;
  border-radius:10px;
  padding:10px 14px;
  margin:0 0 14px;
  overflow:hidden;
  touch-action:pan-y;
}

.fp2-highlights-track{
  display:flex;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}

.fp2-highlight-item{
  flex:0 0 100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

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

.fp2-highlight-item span:last-child{
  font-size:13.5px;
  font-weight:500;
  color:#166534;
  line-height:1.4;
}

.fp2-highlights-dots{
  display:flex;
  gap:5px;
  justify-content:center;
  padding-top:8px;
}

.fp2-highlights-dots i{
  width:5px;height:5px;border-radius:999px;
  background:#bbf7d0;
  display:block;font-style:normal;
  cursor:pointer;
  transition:width .2s,background .2s;
}

.fp2-highlights-dots i.on{
  width:14px;
  background:#16a34a;
}

/* Variante statique (1 seul point fort, voir fpRenderHighlights() dans fiche-produit.php) :
   pas de piste à faire glisser, le JS ignore ce bloc (pas de .fp2-highlights-dots à cibler). */
.fp2-highlights--static .fp2-highlights-track{
  transition:none;
}

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

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

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

/* Mode sombre — cohérent avec les autres tokens fp2-* de la fiche produit */
:root[data-theme="dark"] .fp2-highlights{
  background:linear-gradient(180deg,#0f2417,#0d1f14);
  border-color:#1c4a2e;
}
:root[data-theme="dark"] .fp2-highlight-item span:last-child{ color:#4ade80; }
:root[data-theme="dark"] .fp2-highlights-dots i{ background:#1c4a2e; }
:root[data-theme="dark"] .fp2-highlights-dots i.on{ background:#22c55e; }