/* packs-jantes.css — packs jantes + pneus de la fiche jante (includes/products.php, modules/packs_jantes.php) : bandeau titre, filtre
   (taille, saison en tuiles .vt-sd de vitrine.css comme le filtre des listes de pneus, marque), trois cartes par ligne ; pneu puis jante en
   deux carrés reliés par un « + » (dessiné en CSS, centré sur la rangée des images), description de chacun dessous ; prix et bouton panier
   compact sur une ligne, options (capteurs, montage) dans un panneau ouvert au clic sur le panier. Charte du site public. */
.pk-section{ margin-top:40px; background:#fff; }
.pk-in{ max-width:1440px; margin:0 auto; padding:0 40px; }
.pk-bandeau{ background:var(--color-primary, #f1283b); color:#fff; overflow:hidden; }
.pk-bandeau-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:28px; padding-bottom:28px; }
.pk-bandeau-txt{ min-width:0; }
.pk-section .pk-titre{ margin:0 0 6px; padding:0; color:#fff; font-family:var(--font-bold); font-weight:normal; font-size:clamp(1.3rem, 2.2vw, 1.9rem); line-height:1.15; }
.pk-intro{ font-size:15px; line-height:1.45; color:rgba(255,255,255,.9); }
.pk-robot{ flex:none; width:118px; height:118px; margin:-16px 0 -30px; align-self:flex-end; }
.pk-zone{ padding:22px 0 40px; }

/* Filtre : taille et saison (liens vers les listes de pneus, filtrés sur place par packs-jantes.js), marque (côté navigateur) */
.pk-filtres{ display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"taille saison" "marque marque"; gap:14px 28px; margin:0 0 20px; padding:16px 20px; border-radius:18px; background:#f4f4f6; }
.pk-f{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.pk-f--taille{ grid-area:taille; } .pk-f--saison{ grid-area:saison; } .pk-f--marque{ grid-area:marque; }
.pk-f-lib{ font-size:13px; font-weight:700; color:var(--color-ink); }
.pk-f-choix, .pk-filtres .vt-sd-grille{ display:flex; flex-wrap:wrap; gap:8px; }
.pk-filtres .vt-sd{ flex:0 1 auto; min-width:140px; padding:7px 12px 7px 8px; gap:8px; font-size:14px; }
.pk-filtres .vt-sd i.icon{ width:28px; height:28px; font-size:13px; border-radius:8px; }
.pk-filtres .vt-sd span{ overflow:visible; text-overflow:clip; }
.pk-puce{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; border-radius:14px; background:#fff; border:1px solid rgba(15,23,42,.08); color:var(--color-ink); font-family:inherit; font-size:14px; font-weight:600; line-height:1; white-space:nowrap; text-decoration:none; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.pk-puce:hover{ border-color:rgba(15,23,42,.22); box-shadow:0 4px 14px rgba(15,23,42,.08); color:var(--color-ink); }
.pk-puce b{ font-weight:700; font-size:13px; color:#64748b; font-variant-numeric:tabular-nums; }
.pk-puce.is-actif, .pk-puce.is-actif:hover{ background:var(--color-ink); border-color:var(--color-ink); color:#fff; }
.pk-puce.is-actif b{ color:rgba(255,255,255,.75); }
.pk-puce:focus-visible, .pk-filtres .vt-sd:focus-visible{ outline:2px solid var(--color-ink); outline-offset:2px; }
.pk-packer.is-charge .pk-grille, .pk-packer.is-charge .pk-vide{ opacity:.45; pointer-events:none; }
.pk-vide{ display:flex; align-items:center; gap:14px; padding:22px 24px; border-radius:18px; border:1px dashed rgba(15,23,42,.18); color:#475569; }
.pk-vide i{ flex:none; font-size:26px; color:var(--color-primary, #f1283b); }
.pk-vide p{ margin:0; }

.pk-grille{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin:0 0 16px; transition:opacity .15s; }
.pk-carte[hidden]{ display:none; }
.pk-carte{ display:flex; flex-direction:column; gap:16px; padding:18px; border-radius:18px; background:#fff; border:1px solid rgba(15,23,42,.08); min-width:0; color:var(--color-ink); transition:border-color .2s, box-shadow .2s; }
.pk-carte:hover{ border-color:rgba(15,23,42,.14); box-shadow:0 10px 28px -16px rgba(15,23,42,.25); }

/* Pneu | jante, chacun avec sa description ; le « + » chevauche les deux carrés */
.pk-duo{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.pk-carre--pneu{ grid-area:1 / 1; }
.pk-carre--jante{ grid-area:1 / 2; }
.pk-info--pneu{ grid-area:2 / 1; }
.pk-info--jante{ grid-area:2 / 2; }
.pk-plus{ grid-area:1 / 1 / 2 / 3; justify-self:center; align-self:center; position:relative; z-index:1; width:32px; height:32px; border-radius:50%; background:var(--color-ink); box-shadow:0 0 0 4px #fff; }
.pk-plus::before, .pk-plus::after{ content:''; position:absolute; top:50%; left:50%; width:14px; height:2px; margin:-1px 0 0 -7px; border-radius:1px; background:#fff; }
.pk-plus::after{ transform:rotate(90deg); }

.pk-carre{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; border-radius:14px; background:#f4f5f7; overflow:hidden; text-decoration:none; }
.pk-carre img{ width:84%; height:84%; object-fit:contain; mix-blend-mode:multiply; transition:transform .25s ease; }
a.pk-carre:hover img{ transform:scale(1.04); }
.pk-saison{ position:absolute; top:8px; left:8px; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#fff; font-size:14px; box-shadow:0 1px 3px rgba(15,23,42,.1); }
.pk-saison i{ margin:0; }
.pk-saison.pk-ete{ color:#d97706; } .pk-saison.pk-hiver{ color:#0284c7; } .pk-saison.pk-allseason{ color:#16a34a; }
.pk-gamme{ position:absolute; top:8px; right:8px; padding:4px 9px; border-radius:999px; background:#fff; color:var(--color-ink); font-size:11.5px; font-weight:700; line-height:1.2; box-shadow:0 1px 3px rgba(15,23,42,.1); }

.pk-info{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
.pk-nom{ font-family:var(--font-bold); font-weight:normal; font-size:1.05rem; line-height:1.25; color:var(--color-ink); text-decoration:none; overflow-wrap:break-word; max-width:100%; }
a.pk-nom:hover{ color:var(--color-ink); text-decoration:underline; }
.pk-dim{ font-size:13.5px; font-weight:600; line-height:1.35; color:#475569; text-decoration:none; }
a.pk-dim:hover{ color:var(--color-primary, #f1283b); text-decoration:underline; }
.pk-fin{ font-size:13px; line-height:1.35; color:#64748b; }

/* Étiquette UE compacte (rp_pk_etiquette) : pictogramme + flèche de la classe */
.pk-eu{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px; }
.pk-eu-i{ display:inline-flex; align-items:center; gap:4px; }
.pk-eu-i img{ width:auto; height:16px; }
.pk-eu-cl, .pk-eu-db{ display:inline-block; height:20px; padding:0 6px 0 11px; border-radius:0 3px 3px 0; font:700 12.5px/20px Arial, Helvetica, sans-serif; color:#fff; white-space:nowrap; clip-path:polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%); }
.pk-eu-db{ padding-right:7px; background:#0f172a; }
.pk-eu-a{ background:#33a64c; } .pk-eu-b{ background:#9eca2d; color:#0f172a; } .pk-eu-c{ background:#fdf100; color:#0f172a; } .pk-eu-d{ background:#f7b800; color:#0f172a; }
.pk-eu-e{ background:#e3151a; } .pk-eu-f{ background:#eb422c; } .pk-eu-g{ background:#ea2039; }
.pk-eu-3pmsf{ width:auto; height:20px; }

/* Prix + bouton panier compact */
.pk-pied{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid rgba(15,23,42,.07); }
.pk-prix{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pk-prix span{ font-size:13px; color:#64748b; }
.pk-prix strong{ font-family:var(--font-bold); font-weight:normal; font-size:1.45rem; line-height:1.15; color:var(--color-primary, #f1283b); white-space:nowrap; }
.pk-acheter{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:54px; height:48px; padding:0; border:0; border-radius:14px; background:var(--color-primary, #f1283b); color:#fff; font-size:20px; cursor:pointer; transition:filter .15s, transform .15s; }
.pk-acheter:hover{ filter:brightness(.92); }
.pk-acheter:active{ transform:scale(.96); }
.pk-acheter:focus-visible{ outline:2px solid var(--color-ink); outline-offset:2px; }
.pk-acheter i{ margin:0; }
.pk-carte.is-ouvert .pk-acheter{ display:none; }

/* Options du pack, ouvertes par le bouton panier */
.pk-form{ display:contents; }   /* ses champs cachés et le panneau fermé ne créent pas d’écart dans la carte */
.pk-options{ display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:12px; background:#f6f7f9; }
.pk-options[hidden]{ display:none; }
.pk-option{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.35; cursor:pointer; }
.pk-option input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--color-ink); }
.pk-option span{ flex:1 1 auto; }
.pk-option b{ flex:none; font-weight:700; color:var(--color-ink); white-space:nowrap; }
.pk-form .pk-valider{ margin-top:4px !important; }

/* Powerpay (powerpay_box de config/functions.inc.php) : ligne discrète dans la carte */
.pk-powerpay .ui.fluid.message.hlbox{ --hlbox-h:40px; --hlbox-padding:8px 12px; --hlbox-media-w:64px; --hlbox-media-h:20px; --hlbox-font-size:13px; --hlbox-right-w:18px; margin:0 !important; background-color:#f6f7f9 !important; border-radius:10px !important; font-weight:600 !important; }
.pk-powerpay .hlbox-text{ font-weight:600; color:#334155; }

@media (max-width:1180px){ .pk-grille{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:900px){ .pk-filtres{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"taille" "saison" "marque"; } }
@media (max-width:767px){
    .pk-in{ padding:0 16px; }
    .pk-robot{ display:none; }
    .pk-bandeau-in{ padding-top:22px; padding-bottom:22px; }
    .pk-filtres{ margin:0 -16px 16px; padding:14px 16px; border-radius:0; }
    .pk-f-choix, .pk-filtres .vt-sd-grille{ flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:0 16px 2px; scrollbar-width:none; }
    .pk-f-choix::-webkit-scrollbar, .pk-filtres .vt-sd-grille::-webkit-scrollbar{ display:none; }
    .pk-puce, .pk-filtres .vt-sd{ flex:none; min-width:0; }
}
@media (max-width:700px){ .pk-grille{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:480px){
    .pk-carte{ padding:14px; gap:14px; }
    .pk-duo{ gap:10px; }
    .pk-nom{ font-size:.98rem; }
    .pk-prix strong{ font-size:1.3rem; }
}