/* ============================================================
   Carte produit.

   La carte était une fiche de catalogue : image, titre, prix. Elle devient
   un objet. Le casque occupe la carte, le club le situe, le modèle le
   nomme, le tour de tête répond à la seule question qui bloque un achat de
   casque, et le prix ferme.

   Rien d'indispensable ne dépend du survol. La seconde vue, le déplacement
   du casque et le bouton d'ajout sont des suppléments : sur un téléphone,
   la carte se lit entièrement sans interaction.
   ============================================================ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
}

/* Peu de cartes (le même modèle dans deux autres clubs) : les colonnes
   vides restent réservées, les cartes gardent la taille d'une grille pleine. */
.product-grid--fill { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.pcard {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  background: var(--surface);
  transition: box-shadow var(--motion-state), transform var(--motion-state);
}

.pcard:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }

/* ---------- Le casque ---------- */

.pcard__media {
  position: relative;
  display: grid;
  grid-template-areas: "shot";
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: clamp(14px, 2vw, 26px);
  background: var(--paper);
  overflow: hidden;
}

.pcard__front,
.pcard__back {
  grid-area: shot;
  width: 92%;
  height: 92%;
  object-fit: contain;
  /* Les photos produit sont sur fond blanc, le papier ne l'est pas : sans
     ce fondu, chaque casque flotte dans un rectangle plus clair que la
     carte. Le fond de la vignette doit donc rester un aplat de papier.
     Voir PRODUCT_TRANSPARENT_ASSET_REQUIRED dans docs/LAUNCH_BLOCKERS.md. */
  mix-blend-mode: multiply;
  transition:
    opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-quint);
}

.pcard__back { opacity: 0; }

/* Le casque se rapproche et tourne d'un degré : l'objet bouge, la carte
   reste immobile. */
.pcard:hover .pcard__front,
.pcard:focus-within .pcard__front { opacity: 0; transform: scale(1.04) rotate(-1deg); }

.pcard:hover .pcard__back,
.pcard:focus-within .pcard__back { opacity: 1; transform: scale(1.04) rotate(-1deg); }

/* Sans seconde vue, le casque se contente de s'approcher. */
.pcard__media:not(:has(.pcard__back)) .pcard__front { opacity: 1; }

.pcard:hover .pcard__media:not(:has(.pcard__back)) .pcard__front,
.pcard:focus-within .pcard__media:not(:has(.pcard__back)) .pcard__front { opacity: 1; }

.pcard__placeholder {
  grid-area: shot;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--ink-12);
}

.pcard__crest { position: relative; display: inline-block; flex: none; width: 18px; height: 22px; }

.pcard__crest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.pcard__flag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  background: var(--ink);
  color: #fff;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pcard--sold .pcard__front,
.pcard--sold .pcard__back { filter: grayscale(.7); opacity: .72; }

/* ---------- Le texte ---------- */

.pcard__body {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 16px clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px);
}

.pcard__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pcard__name {
  margin: 2px 0 0;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 1.38rem;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.012em;
  text-transform: uppercase;
}

/* Cible d'au moins 24 px de haut (WCAG 2.5.8), même quand le titre tient
   sur une ligne. */
.pcard__name a { display: inline-flex; align-items: center; min-height: 28px; }

/* La cible de clic couvre toute la carte, mais le lien reste le titre :
   un lecteur d'écran annonce un lien nommé, pas une zone. */
.pcard__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pcard { position: relative; }

.pcard__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 4px 0 0;
  font-size: .76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pcard__size {
  padding: 3px 8px;
  background: var(--surface-sunken);
  color: var(--ink);
}

.pcard__age {
  padding: 3px 0;
  color: var(--ink-70);
}

.pcard__price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 8px 0 0;
  font-size: 1.04rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pcard__price s { color: var(--ink-70); font-size: .84rem; font-weight: 400; }

/* ---------- L'action ---------- */

.pcard__action { margin-top: 12px; }

.pcard__form { margin: 0; }

.pcard__add,
.pcard__choose {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: Barlow, Arial, sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--motion-state), color var(--motion-state);
}

.pcard__choose { background: none; color: var(--ink); }

.pcard__add:hover { background: var(--ink-70); border-color: var(--ink-70); }
.pcard__choose:hover { background: var(--ink); color: #fff; }

.pcard__add[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Ajouté : l'état se lit sur le bouton, pas dans une bulle qui disparaît. */
.pcard__add[data-added="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

/* Verdict de taille écrit, peint par size-finder.js quand une mesure est
   connue. Jamais la couleur seule : le texte dit « Compatible » ou
   « Hors plage ». */
.pcard__fit {
  margin: 6px 0 0;
  padding-left: 8px;
  border-left: 3px solid var(--ink-12);
  font-size: .78rem;
  font-weight: 700;
}
.pcard__fit[hidden] { display: none; }
.pcard__fit[data-state="in"] { border-left-color: var(--focus); }

.products-section__help {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 24px 0 0;
  color: var(--ink-70);
  font-size: .9rem;
}

@media (max-width: 560px) {
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pcard { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: auto; }
  .pcard__media { min-height: 100%; aspect-ratio: auto; padding: 10px; }
  .pcard__front, .pcard__back { width: 100%; height: 100%; }
  .pcard__body { padding: 14px 13px; gap: 4px; }
  .pcard__name { font-size: 1.26rem; }
  .pcard__action { align-self: end; margin-top: 8px; }
  .pcard__add,
  .pcard__choose { min-height: 44px; font-size: .72rem; padding: 10px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard,
  .pcard__front,
  .pcard__back { transition: none; }
  .pcard:hover { transform: none; }
  .pcard:hover .pcard__front,
  .pcard:focus-within .pcard__front,
  .pcard:hover .pcard__back,
  .pcard:focus-within .pcard__back { transform: none; }
}

/* Sous la fiche, les titres de section restent sous le H1 du casque. */
.product-recommendations .section-heading h2 { font-size: var(--fs-h3); }
.product-recommendations .section-heading p { margin: 10px 0 0; color: var(--ink-70); }