/* Actions (c/actions) sur les listes et fiches produits, dans le style d'origine : prix avant action barré en gris (remise
   >= 5 % ou écart > 20 CHF seulement), pastille rouge pleine « −X % » ou « 🔥 Action. Durée limitée », fine barre rouge
   animée ; « <nom> jusqu'au <date> », compte à rebours dans les dernières 24 h seulement. Rendu : render_discounts()
   (config/config.php), rp_action_fin_html() (api/products.api.php), includes/products.php (#globalprbanner),
   modules/products_jantes.php (cartes PHP et JS jumelles, bandeau). Script : assets/pages/products-action.js. */

/* Prix avant action barré (si barre_action) + pastille « −X % » ou « 🔥 Action. Durée limitée » (badge rouge plein de l'ancien rendu) */
.rp-act { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: 8px; vertical-align: middle; line-height: 1.2; }
.rp-act-avant { color: #64748b; font-size: 1rem; white-space: nowrap; text-decoration: line-through; }
.rp-act .rp-act-pastille { background-color: #e70000; color: #fff; }
.rp-act--fiche { margin-left: 10px; position: relative; top: -6px; }
.rp-act--fiche .rp-act-avant { font-size: 1.35rem; }

/* Fiche : fine barre rouge animée (.ui.tiny.active.red.progress, 6 px) et une ligne dessous « <nom> jusqu'au <date> » */
.rp-act-fiche { max-width: 420px; margin: 6px 0 14px; }
.rp-act-fiche .rp-act-barre { max-width: 350px; margin: 0 0 7px; }
.rp-act-lib { color: #0f172a; font-size: .95rem; line-height: 1.4; }
.rp-act-nom { font-weight: 700; }
/* Stock limité : la barre des pièces prend la place de celle du temps (une seule barre), « Plus que 41 pièces sur 300 »
   en tête, début de phrase en gras ; la ligne « <nom> jusqu'au <date> » suit sans barre */
.rp-act-fiche .rp-act-stock .rp-act-barre { height: 8px; margin: 5px 0 0; }
.rp-act-stock .rp-act-barre .bar { min-width: 0; height: 8px; }
.rp-act-pieces-lib { font-size: 1.15rem; line-height: 1.35; }
.rp-act-pieces-lib strong { font-weight: 800; }
.rp-act-stock + .rp-cd--fiche { margin-top: 8px; }
.rp-cd-val { color: #e70000; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-act-lib .rp-cd-txt, .rp-act-lib .rp-cd-date { white-space: nowrap; }   /* « se termine dans 08:12:33 » d'un seul tenant (mobile) */
.rp-cd--fin .rp-cd-txt { color: #64748b; font-weight: 600; white-space: normal; }

/* Barre du temps restant animée (rayures de l'ancien .ui.active.progress) : fiche en rouge, bandeaux en blanc */
.rp-act-barre.ui.progress.active .bar, .rp-band-barre .bar {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .38) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, .38) 75%, transparent 75%, transparent);
  background-size: 12px 12px;
  animation: rp-act-rayures .9s linear infinite;
}
.rp-band-barre .bar { background-image: linear-gradient(135deg, rgba(231, 0, 0, .28) 25%, transparent 25%, transparent 50%, rgba(231, 0, 0, .28) 50%, rgba(231, 0, 0, .28) 75%, transparent 75%, transparent); }
@keyframes rp-act-rayures { from { background-position: 0 0; } to { background-position: 12px 0; } }

/* Compte à rebours dans les dernières 24 h seulement (.rp-cd--24h, posé au rendu puis par products-action.js) : avant, la
   date « jusqu'au … » (fiche, bandeau) et rien sur les cartes ; ensuite le compte à rebours remplace la date. Fin : « Offre terminée ». */
.rp-cd .rp-cd-txt { display: none; }
.rp-cd--24h .rp-cd-txt, .rp-cd--fin .rp-cd-txt { display: inline; }
.rp-cd--24h .rp-cd-date, .rp-cd--fin .rp-cd-date { display: none; }
.rp-cd--carte:not(.rp-cd--24h):not(.rp-cd--fin) { display: none; }
.rp-cd--carte:not(.rp-cd--24h):not(.rp-cd--fin) + .rp-act-pieces .rp-act-sep { display: none; }
.rp-act-lignes.rp-act-lignes--vide { display: none; }   /* carte sans compte à rebours (plus de 24 h) ni stock limité : rendu vide, le script l'ouvre à 24 h de la fin */

/* Action terminée pendant la visite (products-action.js) : le prix d'action n'a plus cours, pastille, prix avant barré,
   « à ce prix » et label PROMO des jantes s'effacent */
.rp-act-fini .rp-act-pastille, .rp-act-fini .rp-act-avant, .rp-act-fini .rp-act-aprix, .rp-act-fini .rp-act-promo { display: none !important; }

/* Cartes (liste, grille, jantes) : une ligne courte sous le prix */
.rp-act-lignes { display: block; margin-top: 4px; color: #be123c; font-size: .85rem; font-weight: 600; line-height: 1.35; }
.rp-act-lignes:not(.rp-act-lignes--vide) + br { display: none; }   /* carte de liste : le <br> qui suit la ligne ferait une ligne vide */
.rp-act-lignes .rp-cd-val { color: inherit; }
.rp-act-lignes .fa-clock { margin-right: 1px; }
.rp-act-sep { color: #94a3b8; }

/* Vue grille des listes (rp_carte_grid) : sous le prix */
.rp-act-grille { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 2px; }
.rp-act-grille .rp-act { margin-left: 0; }
.rp-act-grille .rp-act-lignes { flex-basis: 100%; margin-top: 0; }

/* Cartes de la liste des jantes : prix barré et ligne alignés à droite */
.rp-act--j { margin-left: 0; justify-content: flex-end; }
.rp-act--j .rp-act-avant { font-size: .9rem; }
.rp-act-lignes--j { margin-top: 5px; }

/* Bandeaux de page sur fond rouge : liste des jantes (#wheels-promo-banner), catégorie (#globalprbanner) */
.rp-cd--bandeau { color: #fff; }
.rp-band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; text-align: center; }
.rp-band-nom { font-family: var(--font-bold); font-weight: 900; font-size: 1.4rem; line-height: 1.2; }
.rp-cd--bandeau .rp-cd-txt { font-size: .95rem; }
.rp-cd--bandeau .rp-cd-val { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 6px; background: #fff; color: #e70000; font-size: 1.05rem; }
.rp-cd--bandeau.rp-cd--fin .rp-cd-txt { color: #fff; }
.rp-band-in .rp-cd-date { font-size: 1rem; font-weight: 600; }
.rp-band-barre { max-width: 420px; height: 3px; margin: 9px auto 0; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.rp-band-barre .bar { height: 100%; border-radius: inherit; background: #fff; transition: width .25s ease; }
.rp-act-cat { margin: -20px 0 24px; padding: 12px 16px; border-radius: 12px; background: var(--color-red, #f1283b); color: #fff; }
@media (max-width: 767px) { .rp-band-nom { font-size: 1.1rem; } }

@media (prefers-reduced-motion: reduce) {
  .rp-act-barre .bar, .rp-band-barre .bar { transition: none !important; animation: none !important; }
}