/**
 * ------------------------------------------------------------------------
 * PRODUCT — Fiche produit Blondeau v3.0
 * ------------------------------------------------------------------------
 *
 * Inspiré Etoffe.com — premium textile.
 * Utilise EXCLUSIVEMENT les tokens CSS du thème Blondeau.
 * Aucune couleur codée en dur.
 *
 * Tokens utilisés :
 *   --color-primary       #1C1F3B  (navy)
 *   --color-accent        #CCA63B  (or)
 *   --color-text          #1E1E1E
 *   --color-text-muted    #6B7280
 *   --color-bg            #FFFFFF
 *   --color-bg-alt        #F8F7F5  (ivoire chaud)
 *   --color-border        #E5E1D8  (beige)
 *   --color-border-dark   #C8C3BA
 *
 * @author  Pietro Giacomini
 * @package Blondeau
 * @file    product.css
 * @version 3.10.0 — mobile : nom du produit avec la marque au-dessus de la galerie ; logo de marque entier (contain) — 2026-11-02
 * @version 3.9.0 — mobile : marque au-dessus de la galerie, sous le fil d'Ariane — 2026-10-27
 * @version 3.8.2 — logo de marque de la fiche produit : remplit sa zone, sans vide — 2026-10-27
 * @version 3.8.1 — focus clavier unifié : bord or foncé + halo or collé, comme les champs (DETTE-398) — 2026-10-23
 * @version 3.8.0 — champs de formulaire : contour au seuil 3:1, focus contour or foncé + halo or (DETTE-391) — 2026-10-23
 * @version 3.7.0 — modale échantillon : encadré « Coloris envoyé » + « Changer de coloris » — 2026-10-20
 * @version 3.6.3 —référence produit (méta) : icône Référence (.bp-product__ref-label) — 2026-10-20
 * @version 3.6.2 — sélecteur de coloris : options sur toute la largeur de la liste — 2026-10-16
 * @version 3.6.1 — coloris calés sur toute la largeur ; survol composition sans décalage du texte — 2026-10-16
 * @version 3.6.0 — composition : palette alternée foncé/clair, au-delà de 5 matières en boucle, mise en avant au survol — 2026-10-16
 * @version 3.5.3 — description et onglets texte : intertitres et listes de l'éditeur mis à l'échelle — 2026-10-16
 * @version 3.5.2 — Certifications & normes : rendu identique aux caractéristiques
 *                  techniques (sans encadré ni couleur) — 2026-10-16
 * @version 3.5.1 — liste Entretien : pictogrammes de la bibliothèque (svg) — 2026-10-15
 * @version 3.5.0 — icônes du jeu commun : caractéristiques, onglets, normes,
 *                  coloris, icône Référence du sélecteur — 2026-10-15
 * @version 3.4.1 — sélection : encadré doré seul, liseré bleu retiré — 2026-10-15
 * @version 3.4.0 — galerie : 4 vignettes alignées sur l'image (3 en mobile) avec
 *                  défilement, flèches et loupe au modèle des modales révélées
 *                  au survol, pastille X / Y, liseré non rogné — 2026-10-15
 * @version 3.3.1 — sélection coloris/galerie : or de charte + liseré bleu au lieu de l'or foncé — 2026-10-15
 * @version 3.3.0 — vignettes de galerie au cadre des coloris, sélection or foncé (WCAG 1.4.11) — 2026-10-14
 * ------------------------------------------------------------------------
 */

/* ========================================================================
 * WRAPPER GLOBAL
 * Fond blanc — propre et lisible.
 * ===================================================================== */

.blondeau-product-wrapper {
  background: var(--color-bg);
  width: 100%;
}

/* ========================================================================
 * CONTENEUR INTERNE
 * ===================================================================== */

.bp-product {
  /* Le .container parent gère le centrage et les marges horizontales */
  padding: var(--space-6) 0;
}

/* ========================================================================
 * GRILLE PRINCIPALE — mobile 1 col, desktop 2 cols asymétriques
 * ===================================================================== */

.bp-product__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

/* min-width:0 nécessaire à toutes les largeurs : sans lui, la colonne
 * prend la largeur intrinsèque du strip de miniatures (voir .bp-gallery__thumb)
 * et déborde le viewport mobile (grid-template-columns:1fr sinon = auto). */
.bp-product__gallery-col {
  min-width: 0;
}

@media ( min-width: 900px ) {
  .bp-product__grid {
    grid-template-columns: 40fr 60fr;
    gap: var(--space-12);
    align-items: start;
  }

  /* Galerie sticky : reste en vue pendant le scroll du résumé */
  .bp-product__gallery-col {
    position: sticky;
    top: calc( var(--header-total-height, 120px) + var(--space-6) );
  }
}

/* ========================================================================
 * GALERIE — inspiré Etoffe.com
 * Image principale portrait, strip de miniatures en dessous.
 * ===================================================================== */

.bp-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  min-width: 0; /* empêche le strip de miniatures d'imposer sa largeur au parent */
}

/* ---- Image principale ---- */

.bp-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-bg);
  overflow: hidden;
}

/*
 * Spécificité (0,2,0) > WC (0,1,1) — annule height: auto de woocommerce-layout.css
 * sur toutes les images de la galerie et des swatches.
 */
.blondeau-product-wrapper .bp-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  cursor: zoom-in;
}

/* Loupe (en haut à droite, comme au calculateur) : modèle
   .blondeau-media-zoom__btn (main.css), classe posée dans le gabarit —
   refonte 2026-10-15. Ici, seulement le plan d'empilement. */
.bp-gallery__zoom {
  z-index: 3;
}

/* Pastille « ‹ X / Y › » : modèle .blondeau-pager (main.css), en bas à gauche */
.bp-gallery__pager {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 3;
}

/* ---- Slider miniatures — wrapper + flèches ---- */

/* Flèches superposées aux extrémités de la bande (2026-10-15) : elles ne
   prennent plus de largeur — la bande a exactement la largeur de l'image
   principale (avant : flèche de 28 px à côté, 3,9 vignettes visibles). */
.bp-gallery__thumbs-slider {
  position: relative;
  min-width: 0; /* idem .bp-gallery : évite que les miniatures forcent la largeur */
}

/* Valeurs de .blondeau-media-zoom__btn (main.css) : même bouton rond blanc
   que la loupe — toute évolution est à répercuter aux deux. */
.bp-gallery__thumbs-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(15, 28, 53, 0.18);
  cursor: pointer;
  min-width: 0 !important;
  min-height: 0 !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.bp-gallery__thumbs-btn--prev { left: var(--space-2); }
.bp-gallery__thumbs-btn--next { right: var(--space-2); }

.bp-gallery__thumbs-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

.bp-gallery__thumbs-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--color-field-halo);
}

.bp-gallery__thumbs-btn[hidden] { display: none; }

/* ---- Strip de miniatures ---- */

/* 4 vignettes sur la largeur de l'image (3 sous 640 px), défilement au-delà.
   1 px de marge intérieure compensé par une marge négative : le liseré de
   sélection n'est plus rogné en haut et à gauche par le défilement. */
.bp-gallery__thumbs {
  --bp-thumbs-cols: 4;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--bp-thumbs-cols) - 1) * var(--space-2)) / var(--bp-thumbs-cols));
  gap: var(--space-2);
  min-width: 0;
  padding: 1px;
  margin: 0 -1px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

@media ( max-width: 640px ) {
  .bp-gallery__thumbs { --bp-thumbs-cols: 3; }
}

.bp-gallery__thumbs::-webkit-scrollbar { display: none; }

/* Cadre harmonisé sur les coloris (.bp-swatch) le 2026-10-14 : 2 px d'espace
   intérieur sur fond ivoire, bordure grise au survol, or + liseré bleu à la
   sélection.
   Même cadre dans l'aide Guide d'achat (calculator.css, .blc-aide-img__frame /
   .blc-info-modal-media__thumb) et la visionneuse (main.css,
   .blondeau-viewer__thumb) — toute évolution est à répercuter partout. */
.bp-gallery__thumb {
  aspect-ratio: 1 / 1;
  min-width: 0;
  border: 2px solid transparent;
  padding: 2px;
  background: var(--color-bg-alt);
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.bp-gallery__thumb:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--color-field-halo);
}

/* Animation (2026-10-15, demande atelier) : loupe, pastille et flèches de la
   bande apparaissent au survol — souris uniquement. Au doigt (pas de survol)
   elles restent affichées ; au clavier, dès que le focus entre dans la zone. */
@media ( hover: hover ) and ( pointer: fine ) {
  .bp-gallery__main .bp-gallery__zoom,
  .bp-gallery__main .bp-gallery__pager,
  .bp-gallery__thumbs-btn {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background var(--transition-fast), color var(--transition-fast);
  }

  .bp-gallery__main:hover .bp-gallery__zoom,
  .bp-gallery__main:hover .bp-gallery__pager,
  .bp-gallery__main:focus-within .bp-gallery__zoom,
  .bp-gallery__main:focus-within .bp-gallery__pager,
  .bp-gallery__thumbs-slider:hover .bp-gallery__thumbs-btn,
  .bp-gallery__thumbs-slider:focus-within .bp-gallery__thumbs-btn {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

.blondeau-product-wrapper .bp-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.bp-gallery__thumb:hover { border-color: var(--color-border-dark); }

/* Sélection = encadré doré des coloris (.bp-swatch), sans liseré bleu —
   décision atelier du 2026-10-15, identique pour toute sélection d'image du
   site (galerie, aide, visionneuse, coloris du calculateur). */
.bp-gallery__thumb.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}


/* ========================================================================
 * COLONNE INFO PRODUIT
 * ===================================================================== */

.bp-product__info-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Mobile et tablette (colonnes empilées) : la marque passe au-dessus de tout,
 * juste sous le fil d'Ariane — y compris au-dessus de la galerie. La colonne
 * info est « dépliée » (display: contents, div sans rôle) pour que son en-tête
 * marque + favoris remonte en tête de la grille ; espacements inchangés
 * (space-8 sous la galerie, space-4 entre les blocs info). */
@media ( max-width: 899px ) {
  .bp-product__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .bp-product__info-col {
    display: contents;
  }

  /* Marque puis nom du produit au-dessus de la galerie (2026-11-02) ; même
   * ordre que le DOM, l'ordre de lecture et de tabulation reste cohérent */
  .bp-product__header,
  .bp-product__title {
    order: -1;
  }

  .bp-product__gallery-col {
    margin-bottom: var(--space-4);
  }
}

/* ---- Marque + favoris : marque centrée, favoris en absolu ---- */

.bp-product__header {
  position: relative;
  text-align: center;
  padding: var(--space-2) 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-product__brand {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* --color-accent-text (5.13:1) au lieu de --color-accent (2.31:1, sous le
     seuil de 3:1 même en grand caractère) — WCAG 1.4.3, 2026-10-01 */
  color: var(--color-accent-text);
  /* Réserve symétriquement (gauche/droite) la place du bouton favoris
   * (position:absolute, right:0, ~26px) : sans cette limite, le texte
   * centré d'une marque longue ("CLARKE AND CLARKE") passait sous l'icône
   * au lieu de passer à la ligne — BUG-160. */
  display: inline-block;
  max-width: calc(100% - 68px);
}

/* Logo image de marque : centré */
.bp-product__brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* contain (demande atelier 2026-11-02, remplace le cover du 2026-10-27) :
   le logo n'est jamais coupé ni déformé. Taille bornée (300 × 120) en
   gardant ses proportions ; même règle que le bandeau des marques
   (main.css, .brand-item__img). */
.blondeau-product-wrapper .bp-product__brand-img {
  width: auto;
  height: auto;
  max-width: min(300px, 100%);
  max-height: 120px;
  object-fit: contain;
  object-position: center;
}

/* Favoris — même style que les cartes catalogue (sans bordure) */
.bp-product__favorite {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: none !important;
  border: none !important;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
  line-height: 0;
}

.bp-product__favorite svg path {
  fill: currentColor;
  fill-opacity: 0;
  transition: fill-opacity 0.35s ease;
}

.bp-product__favorite:hover {
  color: var(--color-heart);
}

.bp-product__favorite:hover svg path {
  fill-opacity: 0.15;
}

/* État actif — cœur plein */
.bp-product__favorite.is-active,
.bp-product__favorite[aria-pressed="true"] {
  color: var(--color-heart);
}

.bp-product__favorite.is-active svg path,
.bp-product__favorite[aria-pressed="true"] svg path {
  fill-opacity: 1;
}

/* Pas de transition lors de l'initialisation côté PHP (chargement de page) */
.bp-product__favorite.is-init svg path {
  transition: none !important;
}

/* Keyframes identiques au catalogue (catalog.css non chargé sur les fiches) */
@keyframes blondeau-heart-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  65%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}

@keyframes blondeau-heart-wiggle {
  0%   { transform: rotate(0deg)   scale(1);    }
  20%  { transform: rotate(-14deg) scale(1.12); }
  40%  { transform: rotate(11deg)  scale(1.08); }
  60%  { transform: rotate(-7deg)  scale(1.04); }
  80%  { transform: rotate(4deg)   scale(1.01); }
  100% { transform: rotate(0deg)   scale(1);    }
}

/* Animation POP au clic */
.bp-product__favorite.is-popping svg {
  animation: blondeau-heart-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Animation WIGGLE */
.bp-product__favorite.is-wiggling svg {
  animation: blondeau-heart-wiggle 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Tooltip au survol : affiche le aria-label (marque + nom + réf) */
.bp-product__favorite::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-text, #1C1F3B);
  color: #fff;
  font-family: var(--font-family-base);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 20;
}
.bp-product__favorite:hover::after,
.bp-product__favorite:focus-visible::after {
  opacity: 1;
}

/* ---- Titre ---- */

.bp-product__title {
  font-family: var(--font-family-heading);
  font-size: clamp( var(--font-size-lg), 1.8vw, var(--font-size-xl) );
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
  margin-bottom: 0;
  text-align: center;
}

/* ---- Référence SKU ---- */

.bp-product__ref {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Icône Référence à la place de « Réf. » — même alignement que
   .bp-variant-picker__opt-sku-label (2026-10-20) */
.bp-product__ref-label {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
}

.bp-product__ref strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

/* ---- Description courte ---- */

.bp-product__short-desc {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-text-muted);
}

.bp-product__short-desc p:last-child { margin-bottom: 0; }

/* ---- Séparateur ---- */

.bp-divider {
  display: none;
}

/* ========================================================================
 * SWATCHES / VARIANTES
 * ===================================================================== */

.bp-variants__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.bp-variants__count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.bp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Taille : 52 px par défaut, ajustée par product.js (layoutSwatches,
   --bp-swatch-size) pour que la rangée occupe toute la largeur (2026-10-16) */
.bp-swatch {
  width: var(--bp-swatch-size, 52px);
  height: var(--bp-swatch-size, 52px);
  border: 2px solid transparent;
  padding: 2px;
  background: var(--color-bg-alt);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.blondeau-product-wrapper .bp-swatch img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.bp-swatch__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

.bp-swatch:hover { border-color: var(--color-border-dark); }

/* Encadré doré d'origine — référence de toute sélection d'image du site (2026-10-15) */
.bp-swatch.is-active,
.bp-swatch[aria-checked="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* Swatches masqués (au-delà de la limite configurable) */
.bp-swatch--hidden { display: none; }
.bp-swatch--hidden.bp-swatch--visible { display: block; }

/* Variante hors stock — visible mais non sélectionnable */
.bp-swatch--oos {
  opacity: 0.35;
  cursor: not-allowed;
  position: relative;
}

/* Barre diagonale sur le swatch OOS */
.bp-swatch--oos::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    var(--color-border-dark) calc(50% - 1px),
    var(--color-border-dark) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

/* Option picker OOS */
.bp-variant-picker__option--oos {
  opacity: 0.5;
  cursor: not-allowed;
}

.bp-variant-picker__opt-oos {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 8px;
}

/* Bouton "+N" inline — même visuel que les mini-variantes catalogue */
.bp-swatches-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bp-swatch-size, 52px);
  height: var(--bp-swatch-size, 52px);
  background: var(--color-bg-alt);
  border: 2px solid transparent;
  padding: 2px;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* Masqué quand tous les coloris tiennent sur une rangée (layoutSwatches, product.js) */
.bp-swatches-more[hidden] { display: none; }

.bp-swatches-more:hover {
  background: var(--color-border);
  color: var(--color-primary);
}

/* ========================================================================
 * BLOC COMMANDE
 * ===================================================================== */

.bp-order {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Conteneur de requête : la ligne prix / quantité / total s'adapte à la
     largeur RÉELLE du bloc commande (colonne produit), pas à celle de
     l'écran — voir @container bp-order plus bas (2026-10-01). */
  container: bp-order / inline-size;
}

/* ---- Bloc prix / quantité / total : 3 colonnes ---- */

.bp-order__pricing {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.bp-order__price-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* empêche ce bloc "1fr" de forcer sa largeur de contenu sur toute la grille */
}

.bp-order__total-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
  align-items: flex-end;
  min-width: 0; /* idem .bp-order__price-col */
}

.bp-order__price-label,
.bp-order__total-label {
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Volontairement plus discret que .bp-order__total-value : même taille/
   graisse/couleur que le total, le prix unitaire donnait l'impression d'un
   doublon (les deux affichent "215,00 €" tant que la quantité vaut 1, cas
   par défaut à l'arrivée sur la fiche) — le total (ce que le client va
   réellement payer) doit être l'information dominante (audit UX 2026-08). */
.bp-order__price-value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Normalize rendu WooCommerce */
.bp-order__price-value .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.bp-order__price-value ins { text-decoration: none; }
.bp-order__price-value del { opacity: 0.5; font-size: var(--font-size-md); }

/* Prix précédent barré — ligne propre entre label et prix promo */
.bp-order__price-old[hidden],
.bp-order__total-spacer[hidden] {
  display: none !important;
}

.bp-order__price-old {
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
  font-weight: var(--font-weight-normal, 400);
  opacity: 0.5;
  text-decoration: line-through;
}

.bp-order__price-old .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Spacer côté total pour aligner le prix total avec le prix promo */
.bp-order__total-spacer {
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
  visibility: hidden;
}

.bp-order__total-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  /* --color-accent-text et non --color-accent (2.31:1 sur blanc) — WCAG
     1.4.3 / RGAA 3.2, 2026-10-01 */
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Pas d'étiquette au-dessus du stepper (retirée — audit UX 2026-08, la
   fiche produit doit reprendre EXACTEMENT le même stepper que le panier,
   qui n'a lui-même aucune étiquette). L'alignement avec les deux blocs de
   prix (étiquette + montant empilés) passe par .bp-order__pricing
   { align-items: center } ci-dessus plutôt que par une étiquette miroir. */
.bp-order__qty-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stepper quantité — repris du panier (.wc-block-components-quantity-selector,
   woocommerce.css du thème) plutôt que le style "premium" d'origine
   (cadre navy épais, séparateurs internes, bouton inversé au survol) :
   l'atelier préfère désormais le rendu plus discret et minimal du panier,
   décliné ici sur les fiches produit (audit UX 2026-08). Un seul cadre fin
   translucide, pas de séparateurs internes, boutons sans fond. */
/* Valeurs codées en dur (pas de tokens du thème) : reproduction EXACTE du
   stepper du panier (.wc-block-components-quantity-selector, non surchargé
   par le thème — cf. woocommerce.css) mesuré en direct dans le navigateur :
   boîte 107×46, boutons 30×44, border rgba(30,30,30,.3), radius 4px. Utiliser
   les tokens du thème (--color-border, --radius-sm) aurait donné un rendu
   proche mais pas identique — l'atelier veut le même visuel, pas un visuel
   similaire (audit UX 2026-08, 2e correctif).
   2026-10-23 (DETTE-391) : cadre et focus alignés sur les champs du site
   (--color-field-border au seuil 3:1, focus or foncé + halo) ; le stepper du
   panier reprend les mêmes valeurs (woocommerce.css) — toute évolution est à
   répercuter aux deux endroits. */
.bp-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--color-field-border);
  background: transparent;
  height: 46px;
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* Focus du sélecteur de quantité = focus des champs (DETTE-391) : le cadre
   passe en or foncé + halo, le champ et les boutons internes n'ajoutent rien
   d'autre qu'un contour or foncé discret sur le bouton actif. */
.bp-qty:focus-within {
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}
.bp-qty .bp-qty__input:focus-visible {
  box-shadow: none;
}
.bp-qty .bp-qty__btn:focus-visible {
  outline: 2px solid var(--color-field-focus);
  outline-offset: -4px;
  box-shadow: none;
}

.bp-qty__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px; /* la règle d'accessibilité globale (button{min-width:44px}, accessibility.css) l'emporterait sinon : min-width n'est jamais battu par width, quelle que soit la spécificité */
  height: 44px;
  font-size: 12.6px;
  font-weight: var(--font-weight-normal);
  color: rgb(30, 30, 30);
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast);
}

.bp-qty__btn:hover {
  color: var(--color-accent);
}

/* Spécificité (0,2,1) > main.css input[type="number"] (0,1,1) */
.bp-qty .bp-qty__input[type="number"] {
  width: 45px;
  min-width: 45px;
  height: 44px;
  display: inline-block;
  text-align: center;
  border: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: var(--font-weight-normal);
  color: rgb(30, 30, 30);
  background: transparent;
  /* DETTE — 16px de padding horizontal sur une case de 45px ne laissait que
     13px de contenu : la quantité (2 chiffres) était visuellement tronquée.
     Corrigé le 2026-09-14. */
  padding: 12px 4px;
  min-height: unset;
  -moz-appearance: textfield;
}

.bp-qty .bp-qty__input[type="number"]::-webkit-inner-spin-button,
.bp-qty .bp-qty__input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Indicateur d'unité "m" — n'existe pas côté panier (quantités toujours
   entières), ajouté ici car nécessaire (vente au mètre) ; même typo que
   les boutons +/- pour rester discret et ne pas casser l'unité visuelle
   du reste du stepper. */
.bp-qty__unit {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 8px 0 0;
  font-size: 12.6px;
  font-weight: var(--font-weight-normal);
  color: rgb(30, 30, 30);
  background: none;
  border: none;
  white-space: nowrap;
}

/* (total now inside .bp-order__total-col — see above) */

/* Bouton Ajouter au panier — pleine largeur */
.bp-add-to-cart { width: 100%; }

/* Boutons secondaires + configurateurs — une seule ligne */
.bp-order__secondary {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
}

.bp-order__secondary .btn {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-3);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Boutons configurateurs — style primary avec taille identique aux secondaires */
.bp-btn-conf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.bp-btn-conf svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* Icône du bouton Échantillon en or de charte — décorative (aria-hidden,
   libellé texte visible), l'or --color-accent est donc admis ici.
   Reste lisible au survol (fond primaire foncé de .btn--outline:hover). */
.bp-btn-conf[data-bp-sample] svg {
  color: var(--color-accent);
  opacity: 1;
}

@media ( max-width: 640px ) {
  .bp-order__secondary {
    flex-wrap: wrap;
  }
  .bp-order__secondary .btn {
    flex: 1 1 calc(50% - var(--space-2));
  }
}

@media ( max-width: 380px ) {
  .bp-order__secondary .btn {
    flex: 1 1 100%;
  }
}

/* ========================================================================
 * DESCRIPTION — onglet (contenu enrichi)
 * ===================================================================== */

.bp-tabs__description-block {
  margin-bottom: var(--space-6);
}

.bp-tabs__description-content {
  line-height: var(--line-height-loose);
  color: var(--color-text-muted);
}

.bp-tabs__description-content p:last-child { margin-bottom: 0; }

/* Intertitres et listes saisis dans l'éditeur (description du produit,
   onglets Livraison, Retour… des réglages) : sans ces règles, un h3 prenait
   la taille des titres de page et les listes perdaient leurs puces
   (2026-10-16). Intertitre toujours plus discret que le titre de section
   (.bp-textile-data__title) : même taille, sans filet. */
.bp-tabs__description-content :is(h2, h3, h4, h5, h6),
.bp-tabs__text-content :is(h2, h3, h4, h5, h6) {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primary);
  margin: var(--space-4) 0 var(--space-2);
}

.bp-tabs__description-content > :first-child,
.bp-tabs__text-content > :first-child {
  margin-top: 0;
}

.bp-tabs__description-content :is(ul, ol),
.bp-tabs__text-content :is(ul, ol) {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}

.bp-tabs__description-content ul,
.bp-tabs__text-content ul { list-style: disc; }

.bp-tabs__description-content ol,
.bp-tabs__text-content ol { list-style: decimal; }

.bp-tabs__description-content li::marker,
.bp-tabs__text-content li::marker {
  color: var(--color-accent-text);
}

/* ========================================================================
 * META PRODUIT + FORMULAIRE WC CACHÉ
 * ===================================================================== */

.bp-product__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.bp-product__meta .sku_wrapper,
.bp-product__meta .posted_in,
.bp-product__meta .tagged_as {
  display: block;
  margin-bottom: var(--space-1);
}

/* Formulaire WC piloté par JS — invisible */
.bp-product__wc-form { display: none !important; }

/* ========================================================================
 * STATUT STOCK
 * ===================================================================== */

.bp-product__stock {
  font-size: var(--font-size-xs);
}

.bp-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-medium);
}

.bp-stock::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bp-stock--instock  { color: var(--color-success, #3b6d11); }
.bp-stock--instock::before  { background: var(--color-success, #3b6d11); }

.bp-stock--backorder { color: var(--color-warning, #b45309); }
.bp-stock--backorder::before { background: var(--color-warning, #b45309); }

.bp-stock--outofstock { color: var(--color-error, #b91c1c); }
.bp-stock--outofstock::before { background: var(--color-error, #b91c1c); }

/* ========================================================================
 * DESCRIPTION LONGUE — migrée dans l'onglet Description
 * Les règles visuelles sont dans .bp-tabs__description-content (section ONGLETS)
 * ===================================================================== */

/* ========================================================================
 * ONGLETS
 * ===================================================================== */

.bp-product__tabs {
  border-top: 1px solid var(--color-border);
  padding-top: 0;
}

.bp-tabs__nav {
  display: flex;
  /* Retour à la ligne plutôt que défilement horizontal masqué (2026-10-01) :
     jusqu'à 1024px, 4 onglets sur 6 étaient hors de vue sans aucun indice
     visuel (barre de défilement masquée) — contenu non découvrable. Les
     onglets passent sur plusieurs lignes ; sur une seule ligne quand ils
     tiennent (rendu ordinateur inchangé). */
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
}

.bp-tabs__nav::-webkit-scrollbar { display: none; }

.bp-tabs__btn {
  /* Icône + libellé (2026-10-15) */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  /* Sans flex-shrink:0, le flex compresse chaque bouton en dessous de la
   * largeur de son texte (nowrap) : le libellé déborde alors visuellement
   * sur les onglets voisins au lieu de déclencher le scroll horizontal déjà
   * prévu par .bp-tabs__nav (overflow-x:auto) — BUG-161. */
  flex-shrink: 0;
  transition: var(--transition-colors);
}

.bp-tabs__btn:hover { color: var(--color-primary); }

.bp-tabs__btn.is-active,
.bp-tabs__btn[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.bp-tabs__count {
  font-weight: var(--font-weight-normal);
  opacity: 0.7;
  margin-left: var(--space-1);
}

.bp-tabs__panel {
  padding: var(--space-5) 0;
}

.bp-tabs__panel[hidden] { display: none; }

.bp-tabs__text-content {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-text-muted);
}

/* Override du max-width global p/li dans tous les onglets description */
.bp-tabs__description-content p,
.bp-tabs__description-content li,
.bp-tabs__text-content p,
.bp-tabs__text-content li,
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li {
  max-width: none;
}

/* ========================================================================
 * DONNÉES TEXTILES — onglet Caractéristiques
 * ===================================================================== */

.bp-textile-data {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Titres de groupe — visibles sans être trop imposants */
.bp-textile-data__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: 0.03em;
  text-transform: none;
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* ---- Layout 2 colonnes : Caractéristiques (gauche) | Composition + Usages + Entretien (droite) ---- */

.bp-textile-data__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-10);
  align-items: start;
}

.bp-textile-data__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---- Caractéristiques : liste puce label — valeur ---- */

.bp-chars {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.bp-char {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  background: none;
  flex: none;
}

.bp-char:last-child {
  border-bottom: none;
}

.bp-char dt {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
  line-height: 1.5;
  flex-shrink: 0;
}

/* Icônes du jeu commun devant chaque caractéristique (2026-10-15) ; même
   couleur que le libellé, comme au calculateur et au panier. La puce or
   d'origine devient un espace de même largeur pour les lignes sans icône
   (Origine) : libellés alignés. */
.bp-char dt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.bp-char dt::before {
  content: '';
  width: 16px;
  flex-shrink: 0;
}

.bp-char dt:has(.bp-char__icon)::before {
  display: none;
}

.bp-char__icon,
.bp-tabs__icon,
.bp-norme__icon,
.bp-variants__icon {
  flex-shrink: 0;
}

.bp-char dd {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: 1.5;
  text-align: right;
}

/* ---- Composition : barre empilée animée ---- */

.bp-comp-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Barre unique contenant tous les segments */
.bp-comp-bar__track {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--color-border);
  gap: 2px;
}

/* Chaque segment part de 0 → animé via JS */
.bp-comp-seg {
  height: 100%;
  width: 0;
  transition: width 0.7s cubic-bezier( 0.4, 0, 0.2, 1 );
  flex-shrink: 0;
}

/* Palette (2026-10-16) : foncé et clair alternés pour que deux matières
   voisines ne se confondent jamais ; au-delà de 5 matières, les couleurs
   reprennent dans le même ordre (5n+k). Arrondis portés par la piste
   (overflow: hidden). Mêmes couleurs, même ordre que la fiche tissu du
   calculateur (calculator.css, .blc-modal-comp__seg) : toute évolution
   est à répercuter aux deux. */
.bp-comp-seg:nth-child(5n+1) { background: var(--color-accent);       }
.bp-comp-seg:nth-child(5n+2) { background: var(--color-primary);      }
.bp-comp-seg:nth-child(5n+3) { background: var(--color-border-dark);  }
.bp-comp-seg:nth-child(5n+4) { background: var(--color-slate);        }
.bp-comp-seg:nth-child(5n+5) { background: var(--color-accent-light); }

/* Légende sous la barre */
.bp-comp-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.bp-comp-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.bp-comp-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Couleurs des dots alignées sur les segments */
.bp-comp-legend__item:nth-child(5n+1) .bp-comp-legend__dot { background: var(--color-accent);       }
.bp-comp-legend__item:nth-child(5n+2) .bp-comp-legend__dot { background: var(--color-primary);      }
.bp-comp-legend__item:nth-child(5n+3) .bp-comp-legend__dot { background: var(--color-border-dark);  }
.bp-comp-legend__item:nth-child(5n+4) .bp-comp-legend__dot { background: var(--color-slate);        }
.bp-comp-legend__item:nth-child(5n+5) .bp-comp-legend__dot { background: var(--color-accent-light); }

/* Survol d'une matière (barre ou légende — product.js, initCompHover) :
   les autres segments s'estompent, le nom est mis en avant dans la légende.
   Le texte de la légende n'est jamais estompé (contrastes). Même rendu dans
   la fiche tissu du calculateur (calculator.css, .blc-modal-comp). */
.bp-comp-seg,
.bp-comp-legend__item {
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.bp-comp-bar.is-comp-hover .bp-comp-seg:not(.is-comp-active) {
  opacity: 0.3;
}

.bp-comp-legend__item {
  padding: 2px var(--space-2);
  border-radius: var(--radius-full, 999px);
  cursor: default;
}

.bp-comp-legend__item.is-comp-active {
  background: var(--color-bg-alt);
}

/* Pas de changement de graisse (le nom s'élargissait et décalait la
   légende) : trait épaissi sans effet sur la largeur (2026-10-16) */
.bp-comp-legend__item.is-comp-active .bp-comp-legend__name {
  color: var(--color-primary);
  -webkit-text-stroke: 0.4px currentColor;
}

@media ( prefers-reduced-motion: reduce ) {
  .bp-comp-seg,
  .bp-comp-legend__item { transition: none; }
}

.bp-comp-legend__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.bp-comp-legend__pct {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

.bp-composition-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
  line-height: 1.5;
}

/* ---- Usages + Entretien : icône gauche, label droite ---- */

.bp-icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
}

.bp-icon-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.bp-icon-item img {
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  object-fit: contain;
  opacity: 0.7;
}

/* Pictogramme de la bibliothèque Entretien (svg en ligne, 2026-10-15) :
   même taille que les images, au bleu du site. Repris à l'identique dans
   la fiche tissu du calculateur (calculator.css, .blc-fabric-modal__care). */
.bp-icon-item svg {
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}

.bp-icon-item span {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-snug);
}

@media ( max-width: 767px ) {
  .bp-textile-data__layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ---- Normes / certifications ---- */

/* Même rendu que les lignes « Caractéristiques techniques » (.bp-char /
   .bp-char dt ci-dessus), sans valeur à droite : ni encadré ni couleur
   d'alerte (demande atelier 2026-10-16). Toute évolution de .bp-char est à
   répercuter ici et dans la fiche tissu du calculateur. */
.bp-normes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bp-norme {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.bp-norme:last-child {
  border-bottom: none;
}

/* ========================================================================
 * COMPATIBILITÉ FALLBACK WC (approche B)
 *
 * WooCommerce génère des éléments frères du wrapper custom — on les masque.
 * ===================================================================== */

.blondeau-product-wrapper ~ .summary.entry-summary,
.blondeau-product-wrapper ~ .woocommerce-tabs,
.blondeau-product-wrapper ~ .up-sells,
.blondeau-product-wrapper ~ .related { display: none !important; }

/* ========================================================================
 * LIGHTBOX — visionneuse plein écran de la fiche produit
 * Refonte 2026-10-03 (demande atelier) : même présentation que la
 * visionneuse du calculateur (.blc-calc-lightbox, calculator.css) —
 * fond sombre, image arrondie avec ombre, bouton × rond blanc sur le
 * coin de l'image, flèches rondes blanches sur les côtés, compteur en
 * pastille. Image en pleine résolution (product.js). Toute évolution
 * est à répercuter à .blc-calc-lightbox.
 * ===================================================================== */

.bp-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-lightbox[hidden] { display: none; }

/* Fond identique à .blc-calc-lightbox */
.bp-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 28, 0.88);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bp-lightbox.is-open .bp-lightbox__backdrop { opacity: 1; }

.bp-lightbox__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 76px;
  pointer-events: none; /* le fond reste cliquable autour de l'image */
}

.bp-lightbox__img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  pointer-events: auto;
  transform: scale(0.97);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.bp-lightbox.is-open .bp-lightbox__img-wrap {
  transform: scale(1);
  opacity: 1;
}

.bp-lightbox__img {
  display: block;
  max-width: min(1400px, calc(100vw - 152px));
  max-height: calc(100vh - 112px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* Bouton × — valeurs de .blc-calc-lightbox__close */
.bp-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary, #1C1F3B);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.bp-lightbox__close:hover {
  background: var(--color-primary, #1C1F3B);
  color: #fff;
}

/* Flèches — même pastille blanche que le bouton ×, cible de 44 px */
.bp-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary, #1C1F3B);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.bp-lightbox__nav:hover {
  background: var(--color-primary, #1C1F3B);
  color: #fff;
}

.bp-lightbox__nav--prev { left: 16px; }
.bp-lightbox__nav--next { right: 16px; }

.bp-lightbox__nav[hidden] { display: none; }

/* Compteur « 2 / 5 » — pastille claire sur fond sombre (contraste > 7:1) */
.bp-lightbox__counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.bp-lightbox__counter:empty { display: none; }

@media ( max-width: 600px ) {
  .bp-lightbox__inner { padding: 64px 16px 72px; }
  .bp-lightbox__img {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 136px);
  }
  /* Flèches sous l'image : elles ne recouvrent pas la photo */
  .bp-lightbox__nav {
    top: auto;
    bottom: 12px;
    transform: none;
  }
  .bp-lightbox__nav--prev { left: calc(50% - 104px); }
  .bp-lightbox__nav--next { right: calc(50% - 104px); }
  .bp-lightbox__counter { bottom: 24px; }
}

/* ========================================================================
 * ACCESSIBILITÉ — préférence de mouvement réduit
 * ===================================================================== */

@media ( prefers-reduced-motion: reduce ) {
  .bp-gallery__thumb,
  .bp-gallery__zoom,
  .bp-gallery__pager,
  .bp-gallery__thumbs-btn,
  .bp-swatch,
  .bp-product__favorite,
  .bp-qty__btn,
  .bp-swatches-more,
  .bp-tabs__btn,
  .bp-lightbox__close,
  .bp-lightbox__nav,
  .bp-lightbox__backdrop,
  .bp-lightbox__img-wrap { transition: none; }
  .bp-lightbox__img-wrap { transform: none; }
  .bp-gallery__main .bp-gallery__zoom,
  .bp-gallery__main .bp-gallery__pager,
  .bp-gallery__thumbs-btn { transform: none; }
  .bp-gallery__thumbs { scroll-behavior: auto; }
}

/* ========================================================================
 * LAYOUT PRODUIT WC NATIF (produits non-textile)
 *
 * Utilisé par product-woocommerce.php — délègue le rendu à WooCommerce.
 * Layout 2 colonnes desktop, 1 colonne mobile.
 * ===================================================================== */

.wc-product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-10) var(--container-px);
}

@media ( min-width: 768px ) {
  .wc-product-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
  }
}

.wc-product-layout__gallery { width: 100%; }
.wc-product-layout__summary { width: 100%; }

/* ========================================================================
 * VARIANT PICKER — dropdown custom image + SKU
 * Pleine largeur de la colonne info.
 * ===================================================================== */

.bp-variant-picker {
  position: relative;
  width: 100%;
  margin-bottom: var(--space-2);
}

/* Déclencheur (bouton visible) */
.bp-variant-picker__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border-dark);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-fast);
}

.bp-variant-picker__trigger:hover,
.bp-variant-picker__trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
}

/* Contenu du trigger : image + SKU + nom de la variante sélectionnée */
.bp-variant-picker__value {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.bp-variant-picker__placeholder {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.bp-variant-picker__sel-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  /* Spécificité (0,2,0) > WC (0,1,1) */
}

.blondeau-product-wrapper .bp-variant-picker__sel-img {
  max-width: none;
  height: 40px;
  width: 40px;
}

.bp-variant-picker__sel-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bp-variant-picker__sel-sku {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: 0.04em;
}

/* Icône Référence à la place de « Réf : » (2026-10-15) */
.bp-variant-picker__sel-sku-label,
.bp-variant-picker__opt-sku-label {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-1);
  vertical-align: -2px;
}

.bp-variant-picker__sel-sku-label {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.bp-variant-picker__sel-name {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-variant-picker__sel-oos {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 8px;
}

/* Chevron */
.bp-variant-picker__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.bp-variant-picker__trigger[aria-expanded="true"] .bp-variant-picker__chevron {
  transform: rotate(180deg);
}

/* Dropdown liste */
.bp-variant-picker__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--color-bg);
  border: 1px solid var(--color-border-dark);
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: var(--shadow-dropdown);
}

.bp-variant-picker__list[hidden] { display: none; }

/* Option dans le dropdown */
.bp-variant-picker__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  /* Largeur max. des li du thème (texte courant, main.css) neutralisée :
     le survol et la sélection s'arrêtaient avant le bord droit (2026-10-16) */
  max-width: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.bp-variant-picker__option:hover,
.bp-variant-picker__option.is-selected {
  background: var(--color-bg-alt);
}

.bp-variant-picker__option[aria-selected="true"] {
  background: var(--color-bg-alt);
}

/* Image option */
.bp-variant-picker__opt-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.blondeau-product-wrapper .bp-variant-picker__opt-img {
  max-width: none;
  height: 40px;
  width: 40px;
}

.bp-variant-picker__opt-img--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

/* Infos option : SKU + nom */
.bp-variant-picker__opt-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bp-variant-picker__opt-sku {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: 0.04em;
}

.bp-variant-picker__opt-sku-label {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.bp-variant-picker__opt-name {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   MODAL ÉCHANTILLON
   ============================================================ */

.bp-sample-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Marge d'écran identique à .exit-modal (main.css) */
  padding: var(--space-6);
}

.bp-sample-modal[hidden] {
  display: none;
}

.bp-sample-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 53, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bp-sample-modal.is-open .bp-sample-modal__backdrop {
  opacity: 1;
}

.bp-sample-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-8);
  width: min(480px, 90vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow:
    0 8px 32px rgba(15, 28, 53, 0.10),
    0 2px 8px rgba(15, 28, 53, 0.06);
  /* Liseré or 1 px (rgba 204,166,59 / 14 %) retiré le 2026-10-03 : sur fond
     blanc il se lisait comme un filet blanc autour de la photo (demande atelier). */
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

/* Avec photo : même gabarit que la modale « Avant de partir » (680 px,
   grille photo / contenu — .has-media, main.css). La largeur fixe de 480 px
   ci-dessus écrasait ce gabarit : colonne de texte de 234 px, titre coupé
   (2026-10-02). */
.bp-sample-modal__panel.has-media {
  width: 100%;
}

.bp-sample-modal.is-open .bp-sample-modal__panel {
  transform: translateY(0);
  opacity: 1;
}

/* Bouton fermer — pas de fond par défaut, cohérent avec les autres modales */
.bp-sample-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted, #6B7280);
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0;
  z-index: 2;
}

.bp-sample-modal__close:hover {
  background: var(--color-bg-alt, #f5f5f3);
  color: var(--color-primary);
}

/* Titre, texte et actions : styles portés par .exit-modal__title /
   .exit-modal__text / .exit-modal__actions / .exit-modal__dismiss (main.css),
   ajoutés dans sample-modal.php — modale alignée sur « Avant de partir »
   (2026-10-02). Ne restent ici que les écarts propres à l'échantillon ;
   les anciennes valeurs (texte 12 px, marges nulles, prix en or #CCA63B à
   2,3:1) écrasaient ces styles communs. */
.bp-sample-modal__title {
  padding-right: var(--space-8); /* place du bouton × */
}

/* Ligne « Tissu · prix » sous le titre — or de charte LISIBLE
   (--color-accent-text, 4,5:1 minimum ; --color-accent est décoratif). */
.bp-sample-modal__price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-accent-text);
  margin: 0 0 var(--space-4);
}

/* Coloris envoyé (échantillon par coloris, 2026-10-20) — encadré repris du
   sélecteur de coloris de la fiche (.bp-variant-picker__trigger : bordure
   --color-border-dark, sans arrondi ; vignette 40 px = .bp-variant-picker__opt-img).
   Toute évolution du sélecteur est à répercuter ici. */
.bp-sample-modal__coloris {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border-dark);
}

body img.bp-sample-modal__coloris-img {
  width: 40px;
  height: 40px;
  max-width: none;
  object-fit: cover;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.bp-sample-modal__coloris-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 10rem;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.bp-sample-modal__coloris-label {
  color: var(--color-text-muted); /* 4,8:1 sur blanc */
  font-size: var(--font-size-xs);
}

.bp-sample-modal__coloris-name {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* Lien d'action discret, cible ≥ 24 px (WCAG 2.5.8) */
.bp-sample-modal__coloris-change {
  min-height: 24px;
  padding: var(--space-1) 0;
  background: none;
  border: 0;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bp-sample-modal__coloris-change:hover {
  text-decoration-thickness: 2px;
}

/* Deux paragraphes .exit-modal__text consécutifs (description + conditions) :
   seul le dernier garde la grande marge avant les boutons. */
.bp-sample-modal__description.exit-modal__text {
  margin-bottom: var(--space-3);
}

/* Pas de min-height : le bloc doit s'effacer complètement quand il est vide
 * (le succès ferme la modale et affiche un toast — seule l'erreur reste
 * affichée ici) pour que .bp-sample-modal__actions reste le dernier élément
 * visuel réel, ancré en bas de la modale. */
.bp-sample-modal__feedback {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  /* Placé avant les boutons depuis le 2026-10-02 : espace avant les actions */
  margin-bottom: var(--space-6);
}
.bp-sample-modal__feedback:empty {
  display: none;
}

.bp-sample-modal__feedback--error {
  color: var(--color-error);
}

/* Panier mixte : avertissement avant confirmation (« Ajouter quand même »).
   Même code couleur que le bandeau .wc-block-components-notice-banner.is-warning
   du panier (woocommerce.css) — toute évolution est à répercuter aux deux. */
.bp-sample-modal__feedback--warning {
  color: #92400E;
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-warning);
}

/* ---- Badge Nouveau / Promo — intégré inline avec le titre ---- */

/*
 * Grid 3 colonnes [1fr / auto / 1fr] + ::before comme spacer symétrique :
 * le h1 (auto) reste centré, le badge occupe la col 3 sans décaler le texte.
 * Sans badge, la col 3 est vide → centrage identique.
 */
.bp-product__title-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}

.bp-product__title-wrap::before {
  content: '';
}

/* Wrapper des badges — 3ème colonne du grid titre */
.bp-product__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-self: start;
}

.bp-product__badge[hidden] {
  display: none !important;
}

.bp-product__badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 2px;
  line-height: 1.6;
}

.bp-product__badge--promo {
  background: var(--color-accent);
  color: #fff;
}

.bp-product__badge--new {
  background: var(--color-primary);
  color: #fff;
}

/* ---- Formulaire WooCommerce natif (panier simple) ---- */

.bp-wc-form .quantity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bp-wc-form .qty {
  width: 72px;
  height: 44px;
  border: 1.5px solid var(--color-field-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-bg);
  text-align: center;
}

.bp-wc-form .qty:focus {
  outline: none;
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}

/* Bouton Ajouter au panier natif WooCommerce → style bouton primaire Blondeau */
.bp-wc-form button[type="submit"].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-on-primary, #fff);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
  min-height: 0 !important; /* contrecarre accessibility.css */
}

.bp-wc-form button[type="submit"].button:hover {
  background-color: color-mix(in srgb, var(--color-primary) 85%, black);
  color: var(--color-on-primary, #fff);
}

.bp-wc-form button[type="submit"].button:disabled,
[data-bp-add-to-cart]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Layout quantité + bouton côte à côte */
.bp-wc-form form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Description courte sous le bloc commande */
.bp-product__short-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: var(--space-5);
}

.bp-product__short-desc p:last-child {
  margin-bottom: 0;
}


/* ========================================================================
 * FICHE PRODUIT — BLOC COMMANDE ÉTROIT (2026-10-01)
 * Prix/m, quantité et total restent sur UNE SEULE LIGNE en mobile (demande
 * atelier) : le total (« 186,00 € » et au-delà) chevauchait le sélecteur de
 * quantité (grille trop étroite : 4 à 68px de chevauchement de 414 à 320px).
 * Sous 480px de largeur de bloc : montants et espacements resserrés,
 * sélecteur compacté (boutons 28×44px — cible ≥ 24px, WCAG 2.5.8 ; la
 * reproduction exacte du stepper du panier reste la règle au-delà).
 * Garde-fou : un montant exceptionnel passe à la ligne DANS sa colonne
 * (overflow-wrap) au lieu de déborder — aucun chevauchement possible.
 * ===================================================================== */
@container bp-order (max-width: 479px) {
  .bp-order__pricing {
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    column-gap: var(--space-2);
  }
  .bp-order__price-col,
  .bp-order__total-col { min-width: 0; }
  .bp-order__price-value,
  .bp-order__total-value { overflow-wrap: anywhere; }
  .bp-order__price-value { font-size: 0.9375rem; } /* 15px */
  .bp-order__total-value { font-size: 1.0625rem; } /* 17px */
  .bp-order__pricing .bp-qty__btn {
    width: 28px;
    min-width: 28px;
  }
  /* Spécificité 0,4,0 : passe devant `.woocommerce .bp-qty .bp-qty__input`
     (woocommerce.css, flex 0 0 45px) et `.bp-qty .bp-qty__input[type=number]`.
     36px suffisent pour « 250 » ou « 12,5 » avec 2px de marge intérieure. */
  .bp-order__pricing .bp-qty .bp-qty__input[type="number"] {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    padding-left: 2px;
    padding-right: 2px;
  }
}
@container bp-order (max-width: 319px) {
  .bp-order__price-value { font-size: 0.875rem; } /* 14px */
  .bp-order__total-value { font-size: 1rem; }      /* 16px */
  .bp-order__pricing { column-gap: 6px; }
  /* La colonne prix est dimensionnée par son libellé « PRIX / M » (68px) :
     interlettrage resserré pour rendre au total la place de son « € ». */
  .bp-order__price-label,
  .bp-order__total-label { letter-spacing: 0.04em; }
  .bp-order__pricing .bp-qty__unit { padding-right: 4px; }
  /* Total ≥ 10 000 € (classe posée par product.js, updateTotal) */
  .bp-order__total-value.is-long { font-size: 0.875rem; } /* 14px */
}

/* Onglets — largeur de la zone onglets (et non de l'écran) */
.bp-product__tabs {
  container: bp-tabs / inline-size;
}
@container bp-tabs (max-width: 979px) {
  /* Plusieurs lignes : chaque ligne occupe toute la largeur, libellés centrés */
  .bp-tabs__btn {
    flex: 1 1 auto;
    text-align: center;
    padding: var(--space-3) var(--space-4);
  }
}