/* Cartes de la liste des jantes (modules/products_jantes.php, rendus PHP rp_jantes_carte() et JS renderItemHTML() jumeaux) :
   tailles en segments, dimensions de la variante ou « X variantes », prix en rouleaux (assets/pages/jantes-carte.js),
   remise (prix avant barré, pastille −X %, classes de assets/pages/products-action.css), bouton Voir. Police du site. */

.rp-jc { container-type: inline-size; padding: 12px 10px 8px; text-align: left; }

/* Image centrée : rupteur.css la passe en bloc à 90–95 % de largeur, sans marges automatiques (calée à gauche) */
.product-card .wheel_picture { margin-right: auto; margin-left: auto; }
/* Mobile : aucun filtre sur l'image, ni au survol qui reste collé après un toucher (rupteur.css : .grid-item:hover
   .wheel_picture). Un filtre (contraste, luminosité) faisait ressortir le fond blanc de l'image en cadre sur iPhone, même avec
   un blanc ramené sous 100 % (11.10.2026). */
@media (max-width: 767px) {
  .product-card .wheel_picture,
  .product-card:hover .wheel_picture { filter: none; }
}

/* Tailles et dimensions */
.rp-jc-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.rp-jc-tailles { display: inline-flex; flex: 0 1 auto; gap: 2px; min-width: 0; max-width: 100%; padding: 3px; overflow-x: auto;
  border-radius: 10px; background: #f1f1f4; scrollbar-width: none; }
.rp-jc-tailles::-webkit-scrollbar { display: none; }
.rp-jc-t { flex: 0 0 auto; margin: 0; padding: 5px 10px; border: 0; border-radius: 8px; background: transparent; color: #0f0f10;
  font-family: var(--font-bold); font-size: 1.05rem; font-weight: 400; line-height: 1.15; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.rp-jc-t:hover { background: rgba(15, 23, 42, .07); }
.rp-jc-t.is-actif { background: #111; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); cursor: default; }
.rp-jc-t:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.rp-jc-dim { margin-left: auto; color: #64748b; font-size: .9rem; line-height: 1.3; white-space: nowrap; }
@container (max-width: 250px) { .rp-jc-dim { font-size: .82rem; } }

/* Prix et bouton */
.rp-jc-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; }
.rp-jc-prixbloc { min-width: 0; }
.rp-jc-prix { display: inline-flex; align-items: flex-start; color: var(--color-primary); font-family: var(--font-bold);
  font-size: 2.3rem; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
@container (min-width: 0) { .rp-jc-prix { font-size: clamp(1.9rem, 14cqi, 3rem); } }
.rp-jc-num { display: inline-flex; }
.rp-jc-lib { margin-top: 2px; color: #64748b; font-size: .9rem; line-height: 1.3; }

/* Rouleaux (posés par le script au premier changement de taille) : une bande 0–9 puis 0 par chiffre, une case = 1,1 em */
.rp-jc-r { display: inline-block; height: 1.1em; overflow: hidden; }
.rp-jc-b { display: block; will-change: transform; }
.rp-jc-b > span { display: block; height: 1.1em; text-align: center; }
.rp-jc-prix.is-roule .rp-jc-r { -webkit-mask-image: linear-gradient(transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 20%, #000 80%, transparent 100%); }

/* Remise : prix avant barré et pastille, sous le prix */
.rp-act.rp-act--jc { display: flex; justify-content: flex-start; gap: 6px; margin: 3px 0 0; }
.rp-act--jc:empty { display: none; }
.rp-act--jc .rp-act-avant { color: #64748b; font-family: var(--font-bold); font-size: 1rem; }
.rp-act--jc .rp-act-pastille { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 7px; background-color: #e70000;
  color: #fff; font-family: var(--font-bold); font-size: .9rem; font-weight: 400 !important; line-height: 1.15; white-space: nowrap; }

.rp-jc-voir { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; margin-left: auto; padding: 6px 17px 6px 6px;
  border-radius: 999px; background: #111; color: #fff !important; font-family: var(--font-bold); font-size: 1.05rem; line-height: 1;
  white-space: nowrap; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); transition: background-color .15s ease, transform .15s ease; }
.rp-jc-voir:hover { background: #000; transform: translateY(-1px); }
.rp-jc-voir-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); font-size: .8rem; }

.rp-jc .rp-act-lignes--j { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .rp-jc-t, .rp-jc-voir { transition: none; }
}