/* ==========================================================================
   TULIPE PALETTES - COMPOSANT product-card
   Extrait de css/home/produits-vedettes.css (section 6) pour être partagé par la
   home, le catalogue et les produits associés. Les variables locales de la carte
   sont portées par .product-card lui-même (et non plus par .featured-products) :
   la carte a le même rendu quel que soit son conteneur.
   ========================================================================== */
.product-card {
  --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px;
  --card-padding-inline: 16px;
  --card-padding-block-end: 24px;
  --card-media-ratio: 8 / 9;
  --button-height: var(--btn-height); /* hauteur unique des boutons (tokens.css) */
  --color-text-secondary: color-mix(in srgb, var(--color-ink) 72%, var(--color-cream));
  --color-text-muted: color-mix(in srgb, var(--color-ink) 42%, var(--color-cream));
  --color-accent-red-dark: color-mix(in srgb, var(--color-ember) 82%, black);
  --shadow-badge: 0 1px 3px rgba(20, 15, 10, 0.06);
  --shadow-button: 0 2px 6px rgba(188, 32, 24, 0.18);
  --shadow-button-hover: 0 3px 8px rgba(188, 32, 24, 0.24);
  --fs-category: var(--fs-xs);
  --fs-card-title: clamp(18px, 17.3px + 0.19vw, 20px);
  --fs-specs: 14px;
  --fs-price-current: clamp(22px, 19.9px + 0.56vw, 28px);
  --fs-price-original: 16px;
  --fs-button: var(--fs-base);
}

/* --------------------------------------------------------------------------
   6. CARTE PRODUIT (composant réutilisable)
   -------------------------------------------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  width: 100%;

  background-color: var(--color-paper);
  border-radius: var(--r-card);
  /* Élévation douce et diffuse plutôt qu'un contour dur : c'est ce qui
     détache visuellement la carte du fond crème sur la maquette. */
  box-shadow: var(--shadow-card);
  overflow: hidden; /* l'image doit épouser le rayon du haut de carte */
  transition: box-shadow 0.25s ease;
}

/* La carte reste immobile au survol : seul son contenu réagit (zoom de l'image). */
.product-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* --- 6.1 Média : image + badges superposés ------------------------------ */

.product-card__media {
  width: 100%;
  /* Image pleine largeur, collée aux bords de la carte : elle épouse le
     rayon du haut de carte (overflow: hidden sur .product-card). */
  padding: 0;
}

.product-card__figure {
  position: relative; /* devient l'ancrage des badges superposés */
  width: 100%;
  aspect-ratio: var(--card-media-ratio);
  overflow: hidden;
  border-radius: 0; /* arrondi porté par la carte */
  background-color: var(--color-cream); /* visible tant que src="" */
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-card__image,
.product-card:focus-within .product-card__image {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .product-card__image { transition: none; }
  .product-card:hover .product-card__image,
  .product-card:focus-within .product-card__image { transform: none; }
}

.product-card__badges {
  position: absolute;
  /* Au-dessus de l'image : au survol elle reçoit un transform (zoom), qui la
     peint sinon par-dessus les badges (ils la précèdent dans le DOM). */
  z-index: 1;
  /* mesuré par rapport au coin de l'image : haut ≈ 8-12px, côtés ≈ 16-20px */
  top: var(--space-2);
  left: var(--space-3);
  right: var(--space-3);

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.product-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-badge);
  box-shadow: var(--shadow-badge);
}

.product-card__badge--discount {
  background-color: var(--color-amber); /* ambre : le rouge reste réservé au bouton d'action */
  color: var(--color-paper);
}

.product-card__badge--stock {
  background-color: var(--color-paper);
  color: var(--color-ink);
}

.product-card__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-moss);
  flex-shrink: 0;
}

.product-card__badge-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.product-card__badge--stock .product-card__badge-label {
  font-weight: 500;
}

/* --- 6.2 Corps de la carte ------------------------------------------------ */

.product-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* pousse le bouton en bas si les cartes sont étirées */

  /* Écart réel image → catégorie mesuré sur la maquette (~32px), et non le
     padding de 16px utilisé pour l'inset de l'image (voir §6.1) : ce sont
     deux respirations visuellement différentes, à ne pas confondre. */
  padding-block-start: var(--space-5);
  padding-inline: var(--card-padding-inline);
  padding-block-end: var(--card-padding-block-end);

  /* Écarts entre les grands groupes (info → offre → action) */
  gap: var(--space-4);
}

/* Regroupe catégorie + titre + caractéristiques : écarts internes plus
   serrés (~22-27px mesurés) que les écarts entre grands groupes. */
.product-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Catégorie → titre : un peu plus d'air que le reste du bloc */
.product-card__title { margin-block-start: 4px; }

.product-card__category {
  font-family: var(--font-sans);
  font-size: var(--fs-category);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.product-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
}

.product-card__specs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;

  font-family: var(--font-sans);
  font-size: var(--fs-specs);
  font-weight: 400;
  color: var(--color-text-secondary);
}

.product-card__spec {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.product-card__spec-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-forest);
}

/* --- Descriptif court (ajouté pour aider au choix) --- */
.product-card__excerpt {
  font-family: var(--font-sans);
  font-size: var(--fs-specs);
  line-height: 1.5;
  color: var(--color-text-secondary);
  /* 2 lignes maximum : les cartes gardent une hauteur maîtrisée */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__offer {
  /* Pousse prix + bouton en bas : les prix restent alignés d'une carte à
     l'autre même si le titre ou les caractéristiques passent sur 2 lignes. */
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* « À partir de » : petit libellé juste au-dessus du prix de la variante la moins chère. */
.product-card__from {
  font-family: var(--font-sans);
  font-size: var(--fs-specs);
  color: var(--color-text-secondary);
  line-height: 1.2;
}

.product-card__price-note {
  font-family: var(--font-sans);
  font-size: var(--fs-specs);
  color: var(--color-text-secondary);
}

.product-card__delivery {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block-start: var(--space-2);
  margin-block-start: var(--space-1);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--fs-specs);
  color: var(--color-text-secondary);
}

.product-card__delivery-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-forest);
}

.product-card__pricing {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-1);
  flex-wrap: wrap;

  font-family: var(--font-sans);
}

.product-card__price--current {
  /* Même écriture que tous les prix du site (fiche produit, panier, récap) :
     Fraunces 600, vert forêt. */
  font-family: var(--font-serif);
  font-size: var(--fs-price-current);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-forest);
}

.product-card__price--original {
  font-family: var(--font-serif);
  font-size: var(--fs-price-original);
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.product-card__action {
  /* Le bouton suit le prix (voir .product-card__pricing) : pas de second
     margin auto, sinon l'espace libre se répartirait entre les deux. */
  margin-block-start: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.product-card__action > .product-card__button { flex: 1 1 100%; width: auto; }
/* Deux actions : « Ajouter » (principale, plus large) + « Détails » ; elles passent l'une sous l'autre si la carte est étroite. */
.product-card__action--pair > .product-card__button { flex: 2 1 110px; }
.product-card__action--pair > .product-card__button--ghost { flex: 1 1 80px; }
.product-card__button-icon { width: 18px; height: 18px; margin-inline-end: 6px; flex: none; }

.product-card__button {
  width: 100%;
  min-height: var(--button-height);   /* min- et non height : un libellé long peut passer sur 2 lignes sans déborder du bouton */
  padding-block: 8px;
  text-align: center;
  line-height: 1.25;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--color-ember);
  color: var(--color-paper);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-button);

  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: 600;
  line-height: 1.2;

  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card__button:hover {
  background-color: var(--color-accent-red-dark);
  box-shadow: var(--shadow-button-hover);
}

.product-card__button:active {
  box-shadow: var(--shadow-button);
}

.product-card__button:focus-visible {
  outline: 2px solid var(--color-forest);
  outline-offset: 2px;
}


/* --- Responsive de la carte (extrait de la section 7 de produits-vedettes.css) --- */
@media (max-width: 767px) { .product-card__figure { aspect-ratio: 1 / 1; } }

/* --- États ajoutés à l'intégration (catalogue, panier, rupture) --- */
.product-card__image-link { display: block; width: 100%; height: 100%; }
.product-card__title a { color: inherit; }
.product-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.product-card__badge--out { background-color: var(--color-paper); }
.product-card__badge--out .product-card__badge-dot { background-color: var(--color-alert); }
a.product-card__button { text-align: center; }
/* Bouton-LIEN vers la fiche (« Voir les options », « Voir le produit ») : contour, comme .btn--outline du site.
   Le plein rouge est réservé à l'action qui ajoute réellement au panier. */
.product-card__button--ghost {
  background-color: transparent; color: var(--color-ink); box-shadow: none;
  border: 1.5px solid var(--color-ink);
}
.product-card__button--ghost:hover { background-color: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.product-card__button--ghost:active { box-shadow: none; }
.product-card__button.is-added { background-color: var(--color-moss); box-shadow: none; }
.product-card__button[disabled],
.product-card__button[aria-disabled="true"] {
  background-color: var(--color-border); color: var(--color-text-muted); box-shadow: none;
  cursor: not-allowed; transform: none;
}
.product-card__figure.is-out .product-card__image { filter: grayscale(0.6); opacity: 0.75; }

/* --- Mobile (< 600px) : carte COMPACTE, 2 par ligne ---------------------------
   La carte complète (extrait, caractéristiques, livraison, note de prix…) ne tient pas
   dans ~165px de large. On garde l'essentiel pour choisir : image, titre, note, prix,
   bouton. Le détail (extrait, specs, livraison, TVA/unité) est sur la fiche produit.
   Le HTML ne change pas : tout est masqué en CSS, donc la carte complète reste intacte
   à partir de 600px. Cibles tactiles : bouton ≥ 44px, titre cliquable. */
@media (max-width: 599px) {
  .product-card {
    --card-padding-inline: 10px;
    --card-padding-block-end: 10px;
    --fs-card-title: 14px;
    --fs-price-current: 18px;
    --fs-price-original: 13px;
    --fs-specs: 12px;
    --fs-button: 13px;
  }

  /* Badges : remise seule (le « En stock » est la norme, seule la rupture est signalée) */
  .product-card__badges { top: 6px; left: 6px; right: 6px; }
  .product-card__badge { padding: 3px 7px; }
  .product-card__badge-label { font-size: 12px; }
  .product-card__badge--stock:not(.product-card__badge--out) { display: none; }

  /* Corps resserré */
  .product-card__body { padding-block-start: 10px; gap: 8px; }
  .product-card__info { gap: 4px; }
  .product-card__category,
  .product-card__excerpt,
  .product-card__specs,
  .product-card__delivery { display: none; }

  /* Titre : 2 lignes max, pour garder des cartes de hauteur régulière */
  .product-card__title {
    margin-block-start: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Prix : les deux montants peuvent passer à la ligne plutôt que déborder */
  .product-card__offer { gap: 2px; }
  .product-card__from { font-size: 12px; }
  .product-card__price-note { font-size: 12px; line-height: 1.2; } /* unité : « Par lot », « Par palette »… sans elle le prix est ambigu */
  .product-card__pricing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }

  /* Bouton compact mais tactile (44px) */
  body .product-card .product-card__button { min-height: 44px; padding-inline: 4px; font-size: var(--fs-button); } /* body … : passe devant typography.css */
}