/* ============================================================
   TULIPE PALETTES - FICHE PRODUIT
   Géométrie reprise de l'écran validé (galerie 4:5, colonne d'infos, onglets,
   avis, barre d'achat mobile). Migration : rem → px (base 16 px de conception),
   couleurs = tokens, rayons = --r-*, bouton d'achat = --btn-height,
   H1/prix/onglets/avis en Fraunces, le reste en Work Sans.
   Variables locales scopées à .product-page (jamais sur :root).
   ============================================================ */
.product-page {
  --pp-gap: 96px;
  --pp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%; max-width: var(--container-max-width-wide); margin-inline: auto;
  padding: var(--page-top-gap) var(--container-padding-x) var(--section-padding-y);
}
.product-page .breadcrumb { margin-bottom: 24px; }

/* ---------- Bloc principal : galerie + informations ---------- */
.product { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--pp-gap); padding-bottom: 48px; }
.product__gallery { position: relative; flex: 1.15 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.product__badge { position: absolute; top: 24px; left: 24px; z-index: 1; padding: 8px 16px; border-radius: var(--r-badge); background: var(--color-ember); color: var(--color-paper); font-size: var(--fs-sm); font-weight: 700; box-shadow: var(--shadow-card); }
.product__image-note { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; }
.product__figure { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--color-surface-dim); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--color-ink) 12%, transparent); }
.product__image { width: 100%; height: 100%; object-fit: cover; }
.product__thumbnail-list { display: flex; flex-wrap: wrap; gap: 16px; }
.product__thumbnail-item { flex: 1 1 0; min-width: 100px; max-width: 160px; }
.product__thumbnail-button { width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 2px solid transparent; border-radius: var(--r-media); overflow: hidden; background: none; cursor: pointer; }
.product__thumbnail-button:hover { border-color: var(--color-border-field); }
.product__thumbnail-button[aria-current="true"], .product__thumbnail-button[aria-current="true"]:hover { border-color: var(--color-ember); }
.product__thumbnail-image { width: 100%; height: 100%; object-fit: cover; }

.product__info { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; }
.product__category { margin-bottom: 16px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-wood); }
.product__title { margin-bottom: 24px; font-size: var(--fs-page-title); font-weight: 500; line-height: 1.15; color: var(--color-forest); }
.product__rating { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; font-size: var(--fs-base); color: var(--color-ink); }
a.product__rating { text-decoration: none; }
a.product__rating:hover .product__rating-count { text-decoration: underline; text-underline-offset: 3px; }
.product__stars { color: var(--color-ember); letter-spacing: 0.1em; }
.product__rating-count { color: var(--color-text-muted); }
.product__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; }
.product__price-current { font-family: var(--font-serif); font-size: clamp(30px, 2.4vw + 18px, 44px); font-weight: 600; color: var(--color-forest); }
.product__price-original { font-family: var(--font-serif); font-size: 18px; color: var(--color-text-muted); }
.product__price-original[hidden] { display: none; }
.product__saving { margin: 8px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--color-ember); }
.product__saving[hidden] { display: none; }
.product__price-note { margin: 8px 0 32px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.product__price-note:has(+ .product__pellet) { margin-bottom: 16px; }

/* Granulés : prix à la tonne et prix livré, sous le prix. */
.product__pellet { margin: 0 0 32px; padding: 16px; display: flex; flex-direction: column; gap: 6px; max-width: 420px;
  background: color-mix(in srgb, var(--color-forest) 7%, var(--color-paper)); border-radius: var(--r-media); font-size: var(--fs-sm); }
.product__pellet[hidden] { display: none; }
.product__pellet-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.product__pellet dt { margin: 0; color: var(--color-text-muted); }
.product__pellet dd { margin: 0; font-weight: 600; color: var(--color-forest); white-space: nowrap; }
.product__pellet-unit { font-weight: 400; }
.product__pellet-note { margin: 4px 0 0; font-size: 12px; color: var(--color-text-muted); }

.product__specs-list { display: flex; flex-direction: column; margin-bottom: 32px; padding-inline: 24px; border-radius: var(--r-card); background: var(--color-paper); border: 1px solid var(--color-border); }
.product__specs-item { display: flex; align-items: center; gap: 16px; padding-block: 20px; }
.product__specs-item:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.product__specs-icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--color-forest); }
.product__specs-text { font-size: var(--fs-base); color: var(--color-ink); }

.product__order-form { display: flex; flex-direction: column; }
.product__notice { margin-bottom: 24px; padding: 14px 16px; border-radius: var(--r-control); background: var(--color-ember-tint); border: 1px solid var(--color-alert); color: var(--color-alert); font-size: var(--fs-sm); font-weight: 600; }
.product__variant { margin: 0 0 32px; padding: 0; border: 0; min-width: 0; } /* le reset du site ne neutralise pas fieldset */
.product__variant-legend, .product__quantity-label { display: block; padding: 0; margin-bottom: 16px; font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); }
/* Grille et non flex : toutes les cases d'une même rangée ont la même largeur ET la même hauteur,
   quelle que soit la longueur du libellé (« Résineux · demi-palette de 36 sacs » passe sur 3 lignes).
   Avant : hauteur FIXE de 52 px -> le texte débordait de la case et chevauchait les voisines. */
.product__variant-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: 16px; }
.product__variant-option { position: relative; display: flex; min-width: 0; }
.product__variant-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.product__variant-text { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 52px; padding: 10px 16px; line-height: 1.3; overflow-wrap: break-word; text-wrap: balance; border: 1.5px solid var(--color-border-field); border-radius: var(--r-control); background: var(--color-paper); font-size: var(--fs-base); font-weight: 500; color: var(--color-ink); text-align: center; cursor: pointer; }
.product__variant-option:hover .product__variant-text { border-color: var(--color-forest); }
.product__variant-input:checked + .product__variant-text { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-paper); }
.product__variant-input:focus-visible + .product__variant-text { outline: 2px solid var(--color-ember); outline-offset: 2px; }
.product__variant-input:disabled + .product__variant-text { opacity: 0.55; cursor: not-allowed; text-decoration: line-through; }

.product__quantity { margin-bottom: 32px; }
.product__quantity-control { display: inline-flex; align-items: stretch; width: 208px; height: 52px; border: 1.5px solid var(--color-border-field); border-radius: var(--r-control); overflow: hidden; background: var(--color-paper); }
.product__quantity-decrease, .product__quantity-increase { flex: 0 0 52px; border: 0; background: none; font-size: 18px; color: var(--color-ink); cursor: pointer; }
.product__quantity-decrease:hover:not(:disabled), .product__quantity-increase:hover:not(:disabled) { background: var(--color-surface-dim); }
.product__quantity-decrease:disabled, .product__quantity-increase:disabled { color: var(--color-text-muted); cursor: not-allowed; }
.product__quantity-input { flex: 1 1 auto; min-width: 0; border: 0; border-inline: 1px solid var(--color-border); background: transparent; text-align: center; font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); -moz-appearance: textfield; }
/* Focus du champ de quantité : c'est le cadre entier du sélecteur (− 1 +) qui s'encadre, pas l'input seul. */
.product__quantity-input:focus-visible { outline: none; box-shadow: none; border-color: var(--color-border); }
.product__quantity-control:has(.product__quantity-input:focus-visible) { border-color: var(--color-forest); box-shadow: 0 0 0 1px var(--color-forest); }
.product__quantity-decrease:focus-visible, .product__quantity-increase:focus-visible { outline-offset: -4px; } /* contour dans la boîte : overflow: hidden le rognerait */
.product__quantity-input::-webkit-outer-spin-button, .product__quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product__quantity-hint { margin-top: 8px; font-size: var(--fs-sm); color: var(--color-text-muted); }

.product__add-to-cart { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: var(--btn-height); margin-bottom: 12px; border: 0; border-radius: var(--r-control); background: var(--color-ember); color: var(--color-paper); font-size: var(--fs-base); font-weight: 600; cursor: pointer; }
.product__add-to-cart:hover:not(:disabled) { background: var(--color-ember-dark); }
.product__add-to-cart:disabled { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }
.product__add-to-cart.is-added, .product__mobile-bar-cta.is-added { background: var(--color-forest); color: var(--color-paper); }
.product__add-to-cart-icon { width: 20px; height: 20px; }
.product__view-cart { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--btn-height); margin-bottom: 24px; border: 1px solid var(--color-forest); border-radius: var(--r-control); background: transparent; color: var(--color-forest); font-size: var(--fs-base); font-weight: 600; text-decoration: none; }
.product__view-cart:hover { background: var(--color-surface-dim); }
.product__view-cart:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.product__trust-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.product__trust-item { display: flex; align-items: center; gap: 12px; padding-inline: 16px; font-size: var(--fs-sm); font-weight: 500; color: var(--color-ink); }
.product__trust-item:first-child { padding-inline-start: 0; }
.product__trust-item:not(:first-child) { border-inline-start: 1px solid var(--color-border); }
.product__trust-icon { flex: 0 0 auto; width: 28px; height: 28px; color: var(--color-forest); }

/* ---------- Barre d'achat mobile (≤ 767 px) : réutilise le formulaire via l'attribut form ---------- */
.product__mobile-bar { display: none; }

/* ---------- Onglets ---------- */
.product-details { padding-block: 40px; border-top: 1px solid var(--color-border); }
.product-details__tablist { position: relative; display: flex; flex-wrap: wrap; gap: 48px; margin-bottom: 40px; border-bottom: 1px solid var(--color-border); }
.product-details__tab { margin-bottom: -1px; padding: 16px 0; border: 0; border-bottom: 3px solid transparent; background: none; font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--color-text-muted); cursor: pointer; }
.product-details__tab:hover { color: var(--color-ink); }
.product-details__tab[aria-selected="true"] { color: var(--color-ember); border-bottom-color: transparent; }
.product-details__indicator { position: absolute; bottom: -1px; left: 0; height: 3px; width: var(--indicator-w, 0px); transform: translateX(var(--indicator-x, 0px)); background: var(--color-ember); transition: transform 250ms var(--pp-ease), width 250ms var(--pp-ease); }
.product-details__panel { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 24px; max-width: 992px; font-size: 17px; line-height: 1.7; color: var(--color-ink); }
.product-details__panel[hidden] { display: none; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { overflow-wrap: anywhere; padding: 14px 0; border-bottom: 1px solid var(--color-border); text-align: left; font-size: var(--fs-base); }
.spec-table th { width: 40%; font-weight: 600; padding-right: 16px; }
.delivery-list { display: flex; flex-direction: column; gap: 12px; padding-left: 20px; list-style: disc; }
.delivery-list a { color: var(--color-forest); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Avis ---------- */
.reviews { padding-block: 48px 0; }
.reviews__title { margin-bottom: 40px; font-size: var(--fs-section-title); font-weight: 500; color: var(--color-forest); }
.reviews__list { display: flex; flex-wrap: wrap; gap: 32px; }
.reviews__item { flex: 1 1 280px; }
.reviews__give { margin-top: 32px; }
.reviews__list + .reviews__give { text-align: center; }
.review { display: flex; flex-direction: column; height: 100%; padding: 32px; border-radius: var(--r-card); background: var(--color-paper); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.review__rating { margin-bottom: 16px; color: var(--color-ember); letter-spacing: 0.1em; }
.review__quote { overflow-wrap: anywhere; position: relative; flex: 1 1 auto; margin: 0 0 24px; padding-inline-start: 28px; font-family: var(--font-serif); font-size: 17px; font-style: italic; line-height: 1.5; color: var(--color-ink); }
.review__quote::before { content: "\201C"; position: absolute; left: 0; top: -0.35em; font-size: 32px; font-style: normal; color: var(--color-ember); opacity: 0.6; }
.review__footer { display: flex; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.review__avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--color-wood); opacity: 0.9; }
.review__author { min-width: 0; overflow-wrap: anywhere; font-style: normal; font-size: var(--fs-sm); font-weight: 500; }

/* ---------- Mouvement (transform / opacity uniquement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pp-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes pp-pill { 0% { transform: scale(0.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }
  @keyframes pp-tick { 0% { transform: none; } 40% { transform: scale(1.12); } 100% { transform: none; } }
  .product__gallery { animation: pp-fade-up 500ms var(--pp-ease-out) 60ms both; }
  .product__info { animation: pp-fade-up 500ms var(--pp-ease-out) 140ms both; }
  .product__image { transition: opacity 250ms var(--pp-ease); }
  .product__image.is-swapping { opacity: 0; }
  .product__thumbnail-button, .product__variant-text, .product__add-to-cart { transition: border-color 200ms var(--pp-ease), background-color 250ms var(--pp-ease), color 250ms var(--pp-ease); }
  .product__variant-input:checked + .product__variant-text { animation: pp-pill 250ms var(--pp-ease-out); }
  .product__quantity-input.is-updated { animation: pp-tick 250ms var(--pp-ease); }
  .product-details__panel { animation: pp-fade-up 250ms var(--pp-ease-out); }
  .review { transition: box-shadow 200ms var(--pp-ease); }
  .review__avatar, .review__rating { transition: transform 200ms var(--pp-ease), letter-spacing 200ms var(--pp-ease); }
  /* La carte ne bouge pas : seuls l'avatar et les étoiles réagissent. */
  .review:hover { box-shadow: var(--shadow-card-hover); }
  .review:hover .review__avatar { transform: scale(1.15); }
  .review:hover .review__rating { letter-spacing: 0.2em; }
}

/* ---------- Responsive ---------- */
@media (min-width: 1600px) { .product-page { --pp-gap: 112px; } .product__figure { aspect-ratio: 4 / 4.6; } }
@media (max-width: 1279px) { .product-page { --pp-gap: 48px; } .product-details__tablist { gap: 40px; } }
@media (max-width: 991px) {
  .product-page { --pp-gap: 40px; }
  .product__gallery { flex: 1 1 360px; } .product__info { flex: 1 1 340px; }
  .product__figure { aspect-ratio: 1 / 1; }
  .product__thumbnail-item { flex-basis: 28%; }
  .product-details__tablist { gap: 32px; }
  .reviews__list { gap: 24px; } .reviews__item { flex-basis: 260px; }
}
@media (max-width: 767px) {
  .product-page { --pp-gap: 32px; padding-bottom: 104px; } /* place pour la barre d'achat fixe */
  .product-page .breadcrumb { margin-bottom: 16px; }
  .product-page .breadcrumb__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .product-page .breadcrumb__list::-webkit-scrollbar { display: none; }
  .product-page .breadcrumb__item { flex: 0 0 auto; white-space: nowrap; }
  .product { flex-direction: column; padding-bottom: 32px; }
  .product__gallery, .product__info { flex-basis: auto; width: 100%; }
  .product__badge { top: 16px; left: 16px; }
  .product__thumbnail-list { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 8px; }
  .product__thumbnail-list::-webkit-scrollbar { display: none; }
  .product__thumbnail-item { flex: 0 0 auto; width: 76px; min-width: 0; scroll-snap-align: start; }
  .product__rating { margin-bottom: 24px; }
  .product__specs-list { margin-bottom: 24px; }
  .product__specs-item { padding-block: 16px; }
  .product__variant-options { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); }
  .product__variant-text { padding: 10px 8px; font-size: var(--fs-sm); }
  .product__quantity-control { width: 100%; max-width: 176px; }
  .product__trust-list { justify-content: flex-start; gap: 0; row-gap: 16px; }
  .product__trust-item { flex: 1 1 45%; padding-inline-start: 0; }
  .product__trust-item:not(:first-child) { border-inline-start: 0; }
  .cart-toast-region { bottom: calc(88px + env(safe-area-inset-bottom)); }
  /* Les boutons flottants (WhatsApp, panier) et l'annonce promo passent au-dessus de la barre d'achat fixe (ils recouvraient son bouton). `body …` : passe devant leurs feuilles, chargées après. */
  body .whatsapp-fab { bottom: calc(88px + env(safe-area-inset-bottom)); }
  body .cart-fab { bottom: calc(156px + env(safe-area-inset-bottom)); }
  body .promo-popup { bottom: calc(224px + env(safe-area-inset-bottom)); }
  .product__mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: fixed; inset-inline: 0; bottom: 0; z-index: 60; padding: 12px var(--container-padding-x); padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--color-paper); border-top: 1px solid var(--color-border); box-shadow: 0 -2px 8px color-mix(in srgb, var(--color-ink) 6%, transparent); }
  .product__mobile-bar-price { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--color-forest); white-space: nowrap; }
  .product__mobile-bar-cta { flex: 1 1 auto; max-width: 224px; min-height: 48px; border: 0; border-radius: var(--r-control); background: var(--color-ember); color: var(--color-paper); font-size: var(--fs-base); font-weight: 600; cursor: pointer; }
  .product__mobile-bar-cta:disabled { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }
  .product-details { padding-block: 32px; }
  .product-details__tablist { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 32px; margin-bottom: 32px; }
  .product-details__tablist::-webkit-scrollbar { display: none; }
  .product-details__tab:focus-visible { outline-offset: -4px; } /* contour dans la boîte : la rangée défilante le rognerait */
  .product-details__tab { flex: 0 0 auto; min-height: 44px; font-size: var(--fs-base); }
  .product-details__panel { font-size: var(--fs-base); line-height: 1.65; }
  .spec-table th { width: 46%; }
  .reviews { padding-block-start: 32px; }
  .reviews__list { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 24px; margin-inline: calc(var(--container-padding-x) * -1); padding: 0 var(--container-padding-x) 16px; }
  .reviews__item { flex: 0 0 auto; width: 82%; max-width: 352px; scroll-snap-align: center; }
}
@media (max-width: 575px) {
  .product__rating { flex-wrap: wrap; row-gap: 8px; }
  .product__price { align-items: center; }
  .product__trust-item { flex-basis: 100%; }
  .review { padding: 24px; }
  .review__quote { font-size: var(--fs-base); }
}