/**
 * ------------------------------------------------------------------------
 * CALCULATEUR BLONDEAU — Styles wizard accordion
 * @version 2.11.3 — mobile : schéma de la forme au-dessus des champs de l'étape Dimensions — 2026-10-27
 * @version 2.11.2 —carte Découpe spéciale : compteur de formes sur l'image (.blc-shape-complexe-card__count) — 2026-10-27
 * @version 2.11.1 — image de prise de mesures rideau : support de la loupe (.blc-measure-guide__media) — 2026-10-23
 * @version 2.11.0 — schéma des formes : alerte coin trop grand (.blc-dims-figure__warn) — 2026-10-23
 * @version 2.10.0 — champs de formulaire : contour au seuil 3:1, focus contour or foncé + halo or (DETTE-391) — 2026-10-23
 * @version 2.9.5 — sous-lignes du détail du prix (coussins assortis) (DETTE-CALC-120) — 2026-10-19
 * @version 2.9.4 — tri des tissus : apparence portée par la pastille commune .blondeau-sort (thème) — 2026-10-17
 * @version 2.9.3 — fermeture des filtres mobiles en 36 px (taille de .exit-modal__close) — 2026-10-15
 * @version 2.9.2 — code mort retiré (règles sans aucun élément ciblé), rendu identique — 2026-10-14
 * ------------------------------------------------------------------------
 */

/* ── Variables locales ───────────────────────────────────────────────── */
.blc-wizard {
  --blc-accent:      var(--color-accent,   #CCA63B);
  --blc-accent-text: var(--color-accent-text, #866A1E); /* même recette que main.css DETTE-91 : --blc-accent (2.31:1) échoue WCAG AA en texte sur blanc */
  --blc-primary:     var(--color-primary,  #1C1F3B);
  --blc-border:      var(--color-border,   #e5e5e5);
  --blc-surface:     var(--color-surface,  #fff);
  --blc-muted:       var(--color-text-muted, #888);
  --blc-radius:      10px;
  --blc-step-num-sz: 26px; /* réduit — entête d'étape sur une seule ligne (UX 2026-07) */
  --blc-anim:        0.28s ease;
}

/* ── Layout global ───────────────────────────────────────────────────── */
.blc-wizard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  font-family: inherit;
  position: relative;
}
@media (min-width: 780px) {
  .blc-wizard {
    /* Sidebar (preview) à gauche 2/5 — wizard principal à droite 3/5 */
    grid-template-columns: 2fr 3fr;
  }
  .blc-wizard__sidebar { grid-column: 1; grid-row: 1 / span 3; }
  .blc-wizard__main    { grid-column: 2; }
  .blc-wizard__error   { grid-column: 1 / -1; }
}

/* ── Header (barre de progression) ──────────────────────────────────── */
.blc-wizard__header {
  margin-bottom: 16px;
}
.blc-progress-bar {
  height: 4px;
  background: var(--blc-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.blc-progress-bar__fill {
  height: 100%;
  background: var(--blc-accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}
.blc-progress-label {
  font-size: 0.72rem;
  color: var(--blc-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Liste des étapes (ol) ───────────────────────────────────────────── */
.blc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* ── Étape individuelle ──────────────────────────────────────────────── */
.blc-steps .blc-step {
  list-style: none; /* neutralise ol > li { list-style: decimal } du thème */
}
.blc-step {
  background: var(--blc-surface);
  /* Pas de border-radius ni de box-shadow — le thème gère le visuel */
  border: none;
  overflow: visible;
}
.blc-step--active  { border-color: transparent; box-shadow: none; }
.blc-step--complete{ border-color: transparent; }
.blc-step--pending {
  /* Toutes les étapes restent interactives — pas de pointer-events: none */
  opacity: 0.55;
}
.blc-step--pending .blc-step__header { cursor: default; }

/* ── En-tête de l'étape — une seule ligne (UX 2026-07) ───────────────── */
.blc-step__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background var(--blc-anim);
}
.blc-step__header:hover {
  background: color-mix(in srgb, var(--blc-accent) 5%, transparent);
}
.blc-step--active .blc-step__header {
  background: color-mix(in srgb, var(--blc-accent) 6%, transparent);
}

/* Numéro */
.blc-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  var(--blc-step-num-sz);
  height: var(--blc-step-num-sz);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--blc-border);
  color: var(--blc-muted);
  transition: background var(--blc-anim), color var(--blc-anim);
}
.blc-step--active   .blc-step__num { background: var(--blc-accent); color: #fff; }
.blc-step--complete .blc-step__num { background: var(--blc-accent); color: var(--blc-primary); }
.blc-step--complete .blc-step__num::after { content: '✓'; }
.blc-step--complete .blc-step__num span   { display: none; }

/* Infos (titre + desc + chip) */
.blc-step__info { flex: 1; min-width: 0; }
.blc-step__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blc-primary);
  margin: 0 0 2px;
  line-height: 1.2;
}
/* Chip résumé (affiché quand l'étape est complète et fermée) */
.blc-step__chip {
  display: none;
  font-size: 0.78rem;
  color: var(--blc-primary);
  background: color-mix(in srgb, var(--blc-accent) 15%, transparent);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blc-step--complete:not(.blc-step--open) .blc-step__chip { display: inline-block; }

/* Chevron */
.blc-step__chevron {
  flex-shrink: 0;
  color: var(--blc-muted);
  transition: transform var(--blc-anim), color var(--blc-anim);
  font-size: 0.8rem;
}
.blc-step--open    .blc-step__chevron { transform: rotate(180deg); }
.blc-step--active  .blc-step__chevron { color: var(--blc-accent); }
.blc-step--pending .blc-step__chevron { opacity: 0.4; }

/* ── Corps de l'étape (toujours visible — accordéon désactivé) ───────── */
.blc-step__body {
  display: block;
  overflow: visible;
}
.blc-step__body-inner {
  padding: 4px 18px 18px;
}

/* Zone de contenu de l'étape */
.blc-step__content { margin-bottom: 16px; }

/* ── Boutons wizard ──────────────────────────────────────────────────── */
.blc-wizard__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, opacity 0.15s;
  line-height: 1;
}
.blc-wizard__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Ajouter au panier */
.blc-wizard__btn--cart {
  width: 100%;
  justify-content: center;
  background: var(--blc-accent);
  color: var(--blc-primary);
  padding: 14px 22px;
  font-size: 1rem;
  margin-top: 16px;
  border-radius: 8px;
}
.blc-wizard__btn--cart:hover:not(:disabled) {
  background: color-mix(in srgb, var(--blc-accent) 85%, #000);
}

/* ── Grille de choix (shapes, types, densités…) ──────────────────────── */
.blc-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.blc-choice {
  position: relative;
  cursor: pointer;
}
.blc-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.blc-choice__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2px solid var(--blc-border);
  border-radius: 8px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--blc-primary);
  background: var(--blc-surface);
  transition: border-color 0.18s, background 0.18s, transform 0.12s;
  cursor: pointer;
  min-height: 90px;
  user-select: none;
}
.blc-choice input:checked + .blc-choice__label {
  border-color: var(--blc-accent);
  background: color-mix(in srgb, var(--blc-accent) 10%, transparent);
}
.blc-choice__label:hover {
  border-color: var(--blc-primary);
}
.blc-choice__sub {
  font-size: 0.7rem;
  color: var(--blc-muted);
}
/* Image de forme — cadre ratio 4/3, jamais de troncature (contain).
 * L'image occupe toute la largeur disponible du cadre (au lieu d'une
 * taille fixe 72×72 qui laissait une grande marge morte autour) — la
 * hauteur du cadre suit le ratio 4/3, plus compacte qu'un cadre carré. */
.blc-shape-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
/* Ancre pour l'overlay rond barré (.blc-choice__no-icon) des formes désactivées */
.blc-shape-choice .blc-choice__label {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: unset;
  padding: 6px 6px 8px;
}
/* Uniformisation : toutes les cartes cliquables ont la même hauteur minimale
 * (sauf formes, cf. règle ci-dessus qui prime par spécificité). */
.blc-choice__label {
  min-height: 110px;
  box-sizing: border-box;
}

/* ── Carte Découpe spéciale + panneau (classes .blc-*complexe* historiques) ── */
.blc-shape-complexe-card {
  cursor: pointer;
  /* align-self:start (au lieu du stretch hérité de la grille) — sans ça,
   * cette carte (seule .blc-choice de la grille à être un <div>, pas un
   * <label>, sans <input> radio direct) était étirée ~8px plus haute que
   * les autres cartes forme, cassant le ratio 16/9 du cadre image malgré
   * un CSS par ailleurs identique (aspect-ratio, flex-grow…) — vérifié
   * empiriquement (webtool) : align-self:start seul suffit à corriger la
   * hauteur (215,98px, identique aux autres) sans toucher au reste. */
  align-self: start;
}
/* Compteur du dossier (2026-10-27) — effet filigrane : grand chiffre sur
 * fond blanc légèrement transparent, sans bordure, coin bas droit de
 * l'image (le cadre .blc-choice__label est déjà en position: relative).
 * Gris clair du thème --color-field-border (#9B9489, 3:1 sur blanc) :
 * admis car le chiffre est en grand texte (≥ 24px, WCAG 1.4.3) — ne pas
 * réduire la taille sous 1.5rem. */
.blc-shape-complexe-card__count {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 2;
  min-width: 1.6em;
  padding: 4px 8px;
  box-sizing: border-box;
  border-radius: var(--radius-md, 6px);
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
  color: var(--color-field-border, #9B9489);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: color 0.2s ease;
}
/* Carte ouverte : le fond teinté or fait tomber le gris sous 3:1 —
 * or de texte de la charte (--color-accent-text), harmonieux avec l'encadré */
.blc-shape-complexe-card.blc-choice--active .blc-shape-complexe-card__count {
  color: var(--color-accent-text, #866A1E);
}
/* Formes verrouillées (usage non choisi) : pastille estompée avec la carte */
.blc-shape-complexe-card.blc-choice--disabled .blc-shape-complexe-card__count {
  opacity: 0.5;
}
.blc-shape-complexe-card.blc-choice--active .blc-choice__label {
  border-color: var(--blc-accent);
  background: color-mix(in srgb, var(--blc-accent) 10%, transparent);
}
.blc-complexe-panel {
  display: none;
  margin-top: 10px;
}
.blc-complexe-panel--open {
  display: block;
}

/* ── Dimensions ──────────────────────────────────────────────────────── */
.blc-dims {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.blc-dim-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.blc-dim-col {
  flex: 1;
  min-width: 0;
}
.blc-dim-field {}
.blc-dim-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blc-muted);
  margin-bottom: 6px;
}
.blc-dim-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-field-border, #9B9489);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.blc-dim-input-wrap:focus-within { border-color: var(--color-field-focus, #A8842C); box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18)); }
.blc-dim-input-wrap input:focus-visible { box-shadow: none; }
/* Décoratif : largeur verrouillée sur le_cm — champ visible mais grisé */
.blc-dim-col--locked .blc-dim-input-wrap {
  background: color-mix(in srgb, var(--blc-border) 40%, transparent);
  border-color: var(--blc-border);
}
.blc-dim-col--locked .blc-dim-input-wrap input[type="number"] {
  background: transparent;
  color: var(--blc-muted);
  cursor: not-allowed;
}
.blc-dim-input-wrap input[type="number"] {
  flex: 1;
  padding: 10px 12px;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: inherit;
  background: var(--blc-surface);
  -moz-appearance: textfield;
}
.blc-dim-input-wrap input::-webkit-outer-spin-button,
.blc-dim-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; }
.blc-dim-unit {
  padding: 0 10px;
  line-height: 45px;
  font-size: 0.78rem;
  color: var(--blc-muted);
  white-space: nowrap;
  background: color-mix(in srgb, var(--blc-border) 50%, transparent);
}
.blc-dim-field input[aria-invalid="true"] { border-color: #e53e3e; }

/* ── Dimensions : champs à gauche, schéma coté à droite (2026-10-13) ──
 * Schéma dessiné par blc-shape-diagram.js (même dessin que l'éditeur de
 * formes du backoffice), aux couleurs du thème par les variables
 * --blc-shape-*. Lettre de cote : même pastille devant le champ et, quand
 * le champ est en cours de saisie, sur le schéma. */
.blc-dims-layout--figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 24px;
  align-items: start;
}
/* Un champ par ligne dans la colonne de saisie (le thème impose une grille
 * multi-colonnes sur .blc-dims) */
.blc-dims-layout--figure .blc-dims {
  grid-template-columns: minmax(0, 1fr) !important;
}
.blc-dims-layout--figure .blc-dim-field label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blc-dim-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blc-primary, #1C1F3B);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.blc-dims-figure {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--blc-border, #E5E1D8);
  border-radius: 8px;
  background: var(--color-bg-alt, #F8F7F5);
  /* Palette du schéma : bleu nuit et or de la charte (traits ≥ 3:1 et
   * textes ≥ 4.5:1 sur ce fond) */
  --blc-shape-top: #FBF6E6;
  --blc-shape-side: #EBD9A0;
  --blc-shape-front: var(--blc-accent, #CCA63B);
  --blc-shape-line: var(--blc-primary, #1C1F3B);
  --blc-shape-plan: #F6EDD3;
  --blc-shape-plan-soft: #FBF6E6;
  --blc-shape-plan-line: var(--blc-primary, #1C1F3B);
  --blc-shape-bbox: var(--blc-accent-text, #866A1E);
  --blc-shape-letter: var(--blc-primary, #1C1F3B);
  --blc-shape-letter-plan: var(--blc-primary, #1C1F3B);
  --blc-shape-note: #5F6673;
  /* Cote en cours de saisie (pastille + arête) : bleu nuit de la charte ;
   * l'arête se détache des contours par son épaisseur et sa pulsation */
  --blc-shape-active: var(--blc-primary, #1C1F3B);
  --blc-shape-active-text: #ffffff;
}
.blc-dims-figure__views {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.blc-dims-figure__view {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--blc-primary, #1C1F3B);
  border-radius: 16px;
  background: #fff;
  color: var(--blc-primary, #1C1F3B);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.blc-dims-figure__view:hover {
  background: color-mix(in srgb, var(--blc-primary, #1C1F3B) 8%, #fff);
}
.blc-dims-figure__view[aria-pressed="true"] {
  background: var(--blc-primary, #1C1F3B);
  color: #fff;
}
.blc-dims-figure__stage svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 440px;
  margin: 0 auto;
}
/* Arête de la cote en cours de saisie : 3 pulsations puis trait épais fixe.
 * Durée finie (< 5 s) : pas de mouvement permanent à côté de la saisie
 * (WCAG 2.2.2) ; aucune animation si le visiteur a demandé à les réduire. */
.blc-dims-figure .blc-shape-edge {
  animation: blc-shape-edge-pulse 0.9s ease-in-out 3;
}
@keyframes blc-shape-edge-pulse {
  0%, 100% { stroke-width: 4.5px; stroke-opacity: 1; }
  50%      { stroke-width: 9px; stroke-opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .blc-dims-figure .blc-shape-edge { animation: none; }
}
/* Coin trop grand pour son côté (atelier des formes, 2026-10-23) : rouge
 * foncé, 6:1 sur le fond du schéma (le rouge d'erreur du thème y est
 * à la limite des 4.5:1) */
.blc-dims-figure__warn {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #B42318;
}
.blc-dims-figure__warn:empty { display: none; }
.blc-dims-figure__caption {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #5F6673;
}
/* Rideau : largeur et hauteur l'une sous l'autre à gauche, image d'aide à la
 * mesure (type de tringle) à droite, entière et sans recadrage */
.blc-dims-layout--figure .blc-dim-row {
  flex-direction: column;
  gap: 16px;
}
.blc-dims-layout--figure .blc-dim-col {
  width: 100%;
}
/* Champs sur toute la colonne, comme ceux de la mousse et du coussin */
.blc-dims-layout--figure .blc-dim-field--compact .blc-dim-input-wrap {
  width: 100%;
  max-width: none;
}
.blc-dims-layout--figure > .blc-section,
.blc-dims-layout--figure > .blc-measure-guide {
  margin: 0;
}
.blc-dims-layout--figure .blc-measure-guide__fig img {
  height: auto;
  object-fit: contain;
}
@media (max-width: 640px) {
  .blc-dims-layout--figure {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  /* Mobile : la forme (schéma ou guide de mesure) au-dessus des champs */
  .blc-dims-layout--figure > .blc-dims-figure,
  .blc-dims-layout--figure > .blc-measure-guide {
    order: -1;
  }
}

/* ── Barre de filtres tissu — bouton unique (UX 2026-09) ───────────────
 * Un seul déclencheur « Filtrer » ouvre un panneau à accordéon (ancré sous
 * le bouton en desktop/tablette, feuille glissante depuis le bas en mobile
 * ≤640px — cf. media query plus bas), au lieu d'une pastille par filtre qui
 * débordait sur 2-3 lignes une fois le filtre Type et le tri ajoutés.
 * Validé par Pietro le 2026-09-10 (maquette « bouton unique »). */
.blc-filters-wrap {
  /* Ancre de positionnement de .blc-filters-panel (position:absolute) — sans
   * ce conteneur, le panneau se positionne par rapport au premier ancêtre
   * positionné rencontré en remontant le DOM (souvent aucun avant <body>) et
   * s'ouvre hors-écran, tout en bas du document. */
  position: relative;
}
.blc-filters-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.blc-filters-trigger,
.blc-filters-fav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  border: 1.5px solid var(--blc-border);
  border-radius: 20px;
  background: var(--blc-surface);
  color: var(--blc-primary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
/* Largeur du déclencheur (pas la hauteur, cible tactile WCAG 2.5.8 déjà
 * conforme) — demande atelier 2026-09-21, BUG-CALC-235. .blc-filters-fav
 * (cœur favoris) garde son propre padding:0 (règle dédiée plus bas). */
.blc-filters-trigger { padding: 0 44px; }
.blc-filters-fav { padding: 0 15px; }
.blc-filters-trigger svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.75; }
.blc-filters-trigger:hover,
.blc-filters-trigger--active {
  border-color: var(--blc-accent);
  background: color-mix(in srgb, var(--blc-accent) 8%, transparent);
}
.blc-filters-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--blc-accent);
  color: var(--blc-primary);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}
/* [hidden] doit rester prioritaire sur le display:inline-flex ci-dessus —
 * une règle d'auteur sur la classe l'emporterait sinon sur le [hidden] du
 * user-agent et le badge resterait visible à 0. */
.blc-filters-badge[hidden] { display: none; }
/* Tri : apparence portée par la pastille commune .blondeau-sort (main.css du
 * thème, 2026-10-17), identique au catalogue et aux avis — le span porte les
 * deux classes (calculator.js). Ici, seule la largeur maximale du libellé. */
.blc-filters-sort select { max-width: 40vw; }
.blc-filters-spacer { flex: 1 1 auto; min-width: 4px; }
.blc-filters-fav {
  width: 40px;
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
}
.blc-filters-fav svg { width: 15px; height: 15px; }
/* Cœur à deux tracés superposés (contour fin ↔ plein), au lieu d'un simple
 * changement de couleur — le contour est visible au repos, le plein prend
 * sa place (avec un petit "pop") dès que le tissu est marqué favori. */
.blc-filters-fav { position: relative; }
.blc-filters-fav__heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.blc-filters-fav__heart--line { position: static; transform: none; }
.blc-filters-fav__heart--fill { display: none; color: #d64545; }
.blc-filters-fav:hover .blc-filters-fav__heart--line { color: #d64545; }
.blc-filters-fav.is-active {
  border-color: color-mix(in srgb, #d64545 35%, var(--blc-border));
  background: color-mix(in srgb, #d64545 6%, var(--blc-surface));
}
.blc-filters-fav.is-active .blc-filters-fav__heart--line { display: none; }
.blc-filters-fav.is-active .blc-filters-fav__heart--fill {
  display: block;
  animation: blc-fav-pop 0.4s ease;
}
@keyframes blc-fav-pop {
  0%   { transform: translate(-50%, -50%) scale(0.6); }
  45%  { transform: translate(-50%, -50%) scale(1.25); }
  70%  { transform: translate(-50%, -50%) scale(0.95); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .blc-filters-fav.is-active .blc-filters-fav__heart--fill { animation: none; }
}
.blc-filters-fav--none { opacity: 0.45; cursor: not-allowed; }

/* ── Panneau à accordéon — dropdown (desktop/tablette) ─────────────────── */
/* z-index 149/150 — palier « dropdowns internes » (cf. commentaire de
   .blc-sticky-bar--visible, calculator.css thème) : la feuille/dropdown de
   filtres passait au-dessus de la barre sticky (z-index 160) au scroll,
   alors qu'elle doit rester sous elle, comme tout dropdown interne du
   calculateur. Corrigé le 2026-09-14. */
.blc-filters-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 42, 0.42);
  z-index: 149; /* sous .blc-sticky-bar (160) */
}
.blc-filters-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(400px, calc(100vw - 24px));
  background: var(--blc-surface);
  border: 1.5px solid var(--blc-primary);
  border-radius: 12px;
  box-shadow: 0 20px 44px -14px rgba(20, 22, 42, 0.35);
  z-index: 150; /* sous .blc-sticky-bar (160) */
  max-height: min(64vh, 460px);
  overflow-y: auto;
  padding: 6px;
}
.blc-filters-panel.is-open { display: block; }
.blc-filters-panel__handle { display: none; }
.blc-filters-panel__head { display: none; }
.blc-filters-panel__body { display: flex; flex-direction: column; }
.blc-filters-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 8px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--blc-border);
}
.blc-filters-panel__resetlink {
  background: var(--blc-accent);
  color: var(--blc-primary);
  border: none;
  border-radius: var(--radius-md, 6px);
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.blc-filters-panel__resetlink:hover { background: var(--blc-primary); color: #fff; }
.blc-filters-panel__apply {
  background: var(--blc-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 6px);
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.blc-filters-panel__apply:hover { background: var(--blc-accent); color: var(--blc-primary); }
.blc-filters-panel__close { display: none; }

/* ── Sections accordéon (Type / Couleurs / Motifs / Marque / Prix / Martindale) */
.blc-filters-acc { border-bottom: 1px solid var(--blc-border); }
.blc-filters-acc:last-child { border-bottom: none; }
.blc-filters-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blc-primary);
  text-align: left;
}
.blc-filters-acc__chev {
  color: var(--blc-muted);
  font-size: 0.68rem;
  transition: transform 0.18s;
}
.blc-filters-acc.is-open .blc-filters-acc__chev { transform: rotate(180deg); }
.blc-filters-acc__body { display: none; padding: 2px 10px 14px; }
.blc-filters-acc.is-open .blc-filters-acc__body { display: block; }
.blc-filters-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.blc-filters-opt-list { display: flex; flex-direction: column; gap: 2px; }

/* ── Feuille mobile ≤640px — même contenu, habillage bottom-sheet ──────── */
@media (max-width: 640px) {
  .blc-filters-scrim.is-open { display: block; }
  .blc-filters-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 82vh;
    border-radius: 18px 18px 0 0;
    border: none;
    box-shadow: 0 -14px 30px -8px rgba(20, 22, 42, 0.3);
    transform: translateY(102%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 150; /* sous .blc-sticky-bar (160), même palier que le dropdown desktop */
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .blc-filters-panel.is-open { display: flex; transform: translateY(0); }
  /* Zone de préhension généreuse (28px, cible tactile) — seule une barre
     36×4 y est dessinée via ::after. touch-action:none : le glisser-déposer
     (initSheetDrag, calculator.js) gère lui-même le défilement vertical. */
  .blc-filters-panel__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    margin: 0;
    flex-shrink: 0;
    touch-action: none;
    cursor: grab;
  }
  .blc-filters-panel__handle::after {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--blc-border);
  }
  .blc-filters-panel__handle:active {
    cursor: grabbing;
  }
  .blc-filters-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--blc-border);
    font-weight: 700;
    color: var(--blc-primary);
    flex-shrink: 0;
  }
  /* Même convention que .exit-modal__close / .fav-login-modal__close
     (thème, main.css) : pas de fond par défaut, juste l'icône — toutes les
     modales du site suivent ce principe. */
  .blc-filters-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 36 px : taille de .exit-modal__close (était 28 px) — 2026-10-15 */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-text-muted, #6B7280);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .blc-filters-panel__close:hover {
    background: var(--color-bg-alt, #F8F7F5);
    color: var(--blc-primary);
  }
  .blc-filters-panel__body { padding: 6px 16px; overflow-y: auto; flex: 1; }
  .blc-filters-panel__foot { padding: 12px 16px 16px; flex-shrink: 0; }
  .blc-filters-panel__apply { flex: 1; }
}

.blc-filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 12px 7px 9px;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--blc-primary);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.blc-filter-option:hover {
  background: color-mix(in srgb, var(--blc-accent) 8%, transparent);
}
/* Distinct du survol (fond 8%) : fond plus soutenu + liseré + coche —
   le simple texte doré (2.31:1 sur blanc, DETTE-91) ne suffisait pas à
   distinguer « sélectionné » de « survolé ». */
.blc-filter-option--active {
  background: color-mix(in srgb, var(--blc-accent) 18%, transparent);
  border-left-color: var(--blc-accent);
  color: var(--blc-accent-text);
  font-weight: 700;
}
/* Pas de coche sur les swatches couleur : l'anneau + zoom sur le rond
   (.blc-filter-option--swatch.blc-filter-option--active plus bas) est déjà
   l'indicateur de sélection — ajouter un ✓ en plus faisait doublon. */
.blc-filter-option--active:not(.blc-filter-option--swatch)::after {
  content: '\2713';
  flex-shrink: 0;
  color: var(--blc-accent-text);
  font-weight: 700;
}
.blc-filter-option--disabled,
.blc-filter-option[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}
.blc-filter-count {
  font-size: 0.72em;
  color: var(--blc-muted, #9e9589);
  font-weight: 400;
  margin-left: 2px;
}
/* ── Tissus catalogue ────────────────────────────────────────────────── */
.blc-fabrics-wrap { position: relative; min-height: 80px; }
.blc-fabrics-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
  color: var(--blc-muted);
  font-size: 0.85rem;
}
.blc-loading-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--blc-border);
  border-top-color: var(--blc-accent);
  border-radius: 50%;
  animation: blc-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes blc-spin { to { transform: rotate(360deg); } }

/* ── Prix en cours de calcul (devis serveur, au-delà de 300 ms) ──────────
 * Même spinner que le chargement des tissus, réduit à la hauteur d'un
 * montant. Couleurs explicites : la barre sticky est hors de .blc-wizard
 * (variables --blc-* indisponibles) ; or sur fond sombre ≥ 3:1. */
.blc-sidebar__price-row .blc-loading-spinner,
.blc-sticky-bar__price .blc-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: var(--color-accent, #CCA63B);
  vertical-align: -2px;
}
.blc-price--pending .blc-sidebar__detail {
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .blc-sidebar__price-row .blc-loading-spinner,
  .blc-sticky-bar__price .blc-loading-spinner { animation-duration: 2s; }
}

/* ── Wizard bloqué : aucun tissu disponible pour la catégorie/le type ──
 * Visuel calqué sur l'état "panier vide" de WooCommerce Blocks (icône ronde
 * 120px, titre 24px/700 centré, séparateur en pointillés ~400px) — mêmes
 * valeurs relevées en direct sur /panier/ (2026-08-19), pour rester cohérent
 * avec le reste du site plutôt qu'un simple message texte. */
/* Neutralise le min-height:100vh du thème (calculator.css, !important, pensé
   pour le wizard normal) quand le wizard n'affiche que ce court message —
   sélecteur plus spécifique (2 classes) donc prioritaire malgré le !important
   du thème (même poids de spécificité requis pour départager deux règles
   !important). */
.blc-wizard.blc-wizard--empty-state {
  min-height: 0 !important;
}

.blc-wizard-empty {
  /* .blc-wizard devient une grille 2 colonnes (sidebar 2fr / main 3fr) dès
     780px — sans placement explicite, ce bloc (seul enfant restant une fois
     le wizard remplacé) n'occupe que la 1ère piste (2fr) et laisse la 2nde
     vide : span complet pour occuper toute la largeur de la page, même
     règle que .blc-wizard__error juste au-dessus. */
  grid-column: 1 / -1;
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 24px;
  text-align: center;
}
.blc-wizard-empty__icon {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  color: var(--blc-primary);
}
.blc-wizard-empty__icon svg { display: block; width: 100%; height: 100%; }
.blc-wizard-empty__title {
  margin: 32px 0 16px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blc-primary);
}
.blc-wizard-empty__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--blc-muted);
}
.blc-wizard-empty__sep {
  width: 100%;
  max-width: 400px;
  margin: 32px auto;
  border: none;
  border-top: 2px dotted var(--blc-border);
}
/* Boutons : classes .btn/.btn--primary/.btn--outline du thème réutilisées
 * telles quelles (main.css) — même effet shimmer/ripple/ombre au survol que
 * partout ailleurs sur le site (demande atelier 2026-08-19 : « TOUS les
 * boutons doivent garder le même visuel »). .blc-wizard-empty__cta ne porte
 * plus que la mise en page propre à ce bloc. */
.blc-wizard-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.blc-wizard-empty__cta {
  white-space: normal;
}
/* Variante compacte, dans l'étape Tissu (filtres sans résultat) — même
 * visuel que l'écran « Aucun tissu disponible », en réduit (inventaire des
 * messages M29/M30, 2026-09-30). */
.blc-wizard-empty--compact {
  max-width: 420px;
  padding: 28px 16px;
}
.blc-wizard-empty--compact .blc-wizard-empty__icon {
  width: 72px;
  height: 72px;
}
.blc-wizard-empty--compact .blc-wizard-empty__title {
  margin: 20px 0 8px;
  font-size: 1.2rem;
}
.blc-wizard-empty--compact .blc-wizard-empty__sep {
  margin: 20px auto;
}

/* ── Pagination grille tissu (nb de tissus/page réglable en admin,
   Réglages calculateur > Catalogue tissu) — flèches + puces rondes
   (harmonisé avec Catalogue et Mon compte — UX 2026-08-20) ───────────── */
.blc-fabrics-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--blc-border);
}
.blc-fabrics-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--blc-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.blc-fabrics-page-btn--arrow {
  font-size: 1.1rem;
  color: var(--blc-primary);
}
.blc-fabrics-page-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--blc-accent) 12%, transparent);
  color: var(--blc-primary);
}
.blc-fabrics-page-num--current {
  background: var(--blc-accent);
  color: var(--blc-primary);
}
.blc-fabrics-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.blc-fabrics-page-num--current:disabled {
  opacity: 1;
  cursor: default;
}
.blc-fabrics-page-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 2rem;
  color: var(--blc-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

/* ── Grille produits tissu (4 colonnes max) ──────────────────────────── */
.blc-fabrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .blc-fabrics-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .blc-fabrics-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Carte tissu produit — miroir exact de .blondeau-card ─────────────
   Utilise les variables du thème (--color-*) pour une cohérence totale */
.blc-fabric-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #fff);
  padding: 0.55rem;
  overflow: visible; /* critique : permet au dropdown de sortir de la carte */
  cursor: default;
}

/* Ombre portée animée via opacity (même technique que .blondeau-card::after) */
.blc-fabric-card::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  z-index: -1;
}
.blc-fabric-card:hover::after { opacity: 1; }

/* État sélectionné — contour accent */
.blc-fabric-card--selected {
  outline: 2px solid var(--color-accent, #CCA63B);
  outline-offset: 0;
}

/* Zone image — overflow hidden uniquement ici pour le zoom */
.blc-fabric-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-alt, #F8F7F5);
  overflow: hidden;
  flex-shrink: 0;
}
.blc-fabric-card__img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  /* cover (pas contain) : la zone image est carrée mais les photos tissu
     ne le sont pas toujours — contain laissait des bandes blanches en
     haut/bas sur les visuels rectangulaires (demande atelier 2026-09-21) */
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.blc-fabric-card:hover .blc-fabric-card__img { transform: scale(1.06); }
.blc-fabric-card__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  background: var(--color-bg-alt, #F8F7F5);
}

/* Contenu sous l'image */
.blc-fabric-card__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  padding-top: 0.3rem;
}
/* Ligne du haut : coloris à gauche, prix/m à droite */
.blc-fabric-card__header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 2px;
}
.blc-fabric-card__variants-count {
  font-size: 0.68rem;
  color: var(--color-text-muted, #6B7280);
  letter-spacing: 0.03em;
  line-height: 1.1;
}
.blc-fabric-card__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary, #1C1F3B);
  margin: 0 !important; /* annule .entry-content h3 { margin-top: 2rem } du thème */
  line-height: 1.3;
}
.blc-fabric-card__brand {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-muted, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 !important; /* annule p { margin-bottom: 1rem } du thème */
  line-height: 1;
  min-height: 1rem;
  max-width: none !important; /* annule p { max-width: 70ch } du thème */
}
.blc-fabric-card__price {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-accent, #CCA63B);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Sélection du coloris — ouvre la modale (UX 2026-09) ────────────────
 * Remplace l'ancien menu déroulant local (.blc-fvp), qui débordait de
 * l'écran sur les petites hauteurs et le rendait quasi inutilisable. Deux
 * états bien distincts :
 *  - aucun coloris choisi  : simple mot cliquable, pas d'encart ;
 *  - coloris choisi        : image + réf + nom sur 2 lignes (identique à
 *    l'affichage précédent), sans chevron — ce n'est plus un menu déroulant.
 * Couleurs (fond blanc ↔ bleu, inverse du bouton Infos) définies côté thème. */

.blc-fabric-select.is-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--color-border, #E5E1D8);
  border-radius: 6px;
  background: var(--color-bg, #fff);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--color-primary, #1C1F3B);
  text-align: left;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.blc-fabric-select__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.blc-fabric-select__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blc-fabric-select__sku {
  font-size: 0.64rem;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bouton Infos — à droite du nom/marque (titre de la carte), mieux mis en
 * valeur (fond plein) qu'un simple lien discret ; couleur toujours inverse
 * de l'état de la sélection plus bas dans la carte, définie côté thème
 * via :has(). */
.blc-fabric-info-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: inherit;
  white-space: nowrap;
  align-self: flex-start;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* ── Onglet Coloris de la modale Infos — grille en colonnes ─────────────
 * Rangée pleine largeur remplacée par une grille de vignettes carrées :
 * gagne de la place quand un produit a beaucoup de coloris, et le défilement
 * reste celui, déjà en place, de .blc-fabric-modal__body (pane bornée par le
 * panneau — jamais la modale entière qui grandirait avec le nombre de
 * coloris). Image bord à bord dans chaque vignette (object-fit: cover). */
.blc-fabric-color-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}
.blc-fabric-color-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background 0.12s, border-color 0.12s;
}
.blc-fabric-color-row:hover { background: var(--color-bg-alt, #F8F7F5); }
.blc-fabric-color-row.is-active {
  border-color: var(--blc-accent, #CCA63B);
  background: color-mix(in srgb, var(--blc-accent, #CCA63B) 10%, transparent);
}
.blc-fabric-color-row__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0; /* jamais d'arrondi sur les images tissu — convention du site */
  background: var(--color-bg-alt, #F8F7F5);
}
.blc-fabric-color-row__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.blc-fabric-color-row__info {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.blc-fabric-color-row__sku {
  font-size: 0.62rem;
  color: var(--blc-muted, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Rond doré + trait blanc — même habillage que la coche du bandeau
 * (.blc-fabric-select__check) : un seul langage pour "sélectionné" entre
 * la carte et la modale (audit visuel 2026-09-16). */
.blc-fabric-color-row__check {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px;
  border-radius: 50%;
  background: var(--blc-accent, #CCA63B);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  color: #fff;
  visibility: hidden;
}
.blc-fabric-color-row.is-active .blc-fabric-color-row__check { visibility: visible; }

/* ── Filtre couleur avec swatches (grille .blc-filters-opt-grid) ───────── */
.blc-filter-option--swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--blc-primary);
  text-align: left;
  transition: background 0.12s;
}
.blc-filter-option--swatch:hover {
  background: color-mix(in srgb, var(--blc-accent) 8%, transparent);
}
/* Même recette que le swatch couleur du catalogue (.bf-color-item.is-active
   .bf-color-swatch, catalog.css) : anneau + zoom sur le rond, pas seulement
   un fond dilué — invisible entre survol et sélection sinon. */
.blc-filter-option--swatch.blc-filter-option--active {
  background: color-mix(in srgb, var(--blc-accent) 18%, transparent);
  font-weight: 700;
}
.blc-filter-option--swatch.blc-filter-option--active .blc-swatch {
  outline: 2px solid var(--blc-accent);
  outline-offset: 2px;
  transform: scale(1.1);
}
.blc-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  transition: outline 0.15s, transform 0.15s;
}
.blc-swatch-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Range slider (section accordéon Prix / Martindale) ────────────────── */
.blc-range-slider {
  position: relative;
  height: 4px;
  background: var(--blc-border);
  border-radius: 2px;
  margin: 20px 0 16px;
}
.blc-range-fill {
  position: absolute;
  height: 100%;
  background: var(--blc-accent);
  border-radius: 2px;
  pointer-events: none;
}
.blc-range-input {
  position: absolute;
  width: 100%;
  height: 4px;
  top: 0;
  left: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
}
.blc-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blc-accent);
  cursor: pointer;
  pointer-events: all;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  transition: transform 0.12s;
}
.blc-range-input::-webkit-slider-thumb:hover { transform: scale(1.2); }
.blc-range-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blc-accent);
  cursor: pointer;
  pointer-events: all;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
.blc-range-display {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blc-primary);
  text-align: center;
  margin-bottom: 10px;
}
.blc-range-apply {
  display: block;
  width: 100%;
  padding: 7px;
  border: none;
  border-radius: 5px;
  background: var(--blc-accent);
  color: var(--blc-primary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.blc-range-apply:hover {
  background: color-mix(in srgb, var(--blc-accent) 80%, #000);
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.blc-wizard__sidebar { position: sticky; top: 140px; align-self: start; }

.blc-sidebar {
  background: var(--blc-primary);
  border: none;
  border-radius: 12px;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Ligne titre + bouton toggle mode */
.blc-sidebar__title-row {
  padding: 12px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.entry-content .blc-sidebar__title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* 0.45 ne passait pas le contraste AA (≈4,25:1, il faut 4,5:1 pour un texte
     de cette taille) — 0.65 remonte à ≈7,5:1 sur fond --blc-primary/#1C1F3B. */
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* Zone recap — box blanche scrollable */
.blc-sidebar__recap {
  list-style: none;
  background: #fff;
  margin: 10px 10px 0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 36px;
}
.blc-sidebar__recap-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82rem;
  gap: 8px;
}
.blc-sidebar__recap-item span { color: var(--blc-muted); font-size: 0.75rem; }
.blc-sidebar__recap-item strong { text-align: right; font-size: 0.82rem; color: var(--blc-primary); }
.blc-sidebar__recap-empty {
  font-size: 0.78rem;
  color: var(--blc-muted);
  font-style: italic;
}

/* Zone prix — sur fond navy */
.blc-sidebar__price {
  padding: 12px 16px 4px;
  border-top: none;
}
/* Décomposition du calcul (rideau) */
.blc-sidebar__detail {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
}
.blc-sidebar__price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.blc-sidebar__price-row span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); }
.blc-sidebar__price-row strong { font-size: 0.9rem; font-weight: 700; color: rgba(255, 255, 255, 0.88); }
/* Ligne "principale" — TTC par défaut, HT pour un compte pro (isPro) : voir
 * commentaire équivalent dans le CSS thème (surcouche effective en prod). */
.blc-sidebar__price-row--primary {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.blc-sidebar__price-row--primary span { color: rgba(255, 255, 255, 0.65); font-size: 0.88rem; }
.blc-sidebar__price-row--primary strong { font-size: 1.3rem; color: var(--blc-accent); }

/* Boutons intégrés dans la sidebar — repris/surchargé par le CSS thème
 * (calculator.css thème) qui place panier + impression côte à côte via
 * .blc-sidebar__actions ; base conservée ici en repli si le CSS thème
 * ne se charge pas. */
.blc-sidebar__actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 10px 10px 0;
}
/* NE PAS ÉDITER SANS VÉRIFIER wp-content/themes/blondeau/assets/css/calculator.css
   — cette règle y est dupliquée avec !important et l'emporte réellement en
   production (cf. audit UX 2026-08). Gabarit repris du .btn standard du
   thème (padding 12px 24px / font-size 16px / min-height 44px). */
.blc-sidebar .blc-wizard__btn--cart {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  justify-content: center;
  background: var(--blc-accent);
  color: var(--blc-primary);
  padding: 12px 24px;
  min-height: 44px;
  font-size: 1rem;
  border-radius: 6px;
  font-weight: 600;
}
.blc-sidebar .blc-wizard__btn--cart:hover:not(:disabled) {
  background: color-mix(in srgb, var(--blc-accent) 82%, #000);
}
.blc-sidebar .blc-wizard__btn--print {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0 16px;
  font-size: 0.85rem;
  border-radius: 8px;
}
.blc-sidebar .blc-wizard__btn--print:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ── Erreur globale ──────────────────────────────────────────────────── */
/* Simple conteneur depuis l'inventaire des messages (M26-M28, 2026-09-30) :
 * le rendu vient du bandeau unifié .blc-notice--error injecté par
 * _showWizardError() (calculator.js) — fond, bordure et couleur neutralisés
 * ici pour ne pas doubler le cadre (ancien rouge #dc2626 à 4,2:1). */
.blc-wizard__error {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: inherit;
  font-size: 0.9rem;
}
.blc-wizard__error > .blc-notice { margin: 0; }

/* ── Loader initial ──────────────────────────────────────────────────── */
@keyframes blc-spin { to { transform: rotate(360deg); } }

/* ── Aperçu produit (sidebar) ────────────────────────────────────────── */
.blc-sidebar__preview {
  margin-bottom: 18px;
  border-radius: calc(var(--blc-radius) - 2px);
  overflow: hidden;
  background: color-mix(in srgb, var(--blc-border) 35%, var(--blc-surface));
  border: 1px solid var(--blc-border);
  /* Hauteur fixe nécessaire pour que le canvas Babylon.js puisse calculer ses dimensions */
  height: 260px;
  position: relative;
  transition: background 0.3s;
}

/* Légende des dimensions sous le canvas 3D */
.blc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--blc-bg-alt, #f7f7f7);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--blc-text, #333);
  line-height: 1.4;
}
.blc-legend-item strong {
  display: inline-block;
  min-width: 1.2em;
  font-weight: 600;
  color: var(--blc-accent, #2b6cb0);
}

.blc-preview__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
}
.blc-preview__empty svg {
  width: 54px;
  height: 44px;
  opacity: 0.35;
}
.blc-preview__empty span {
  font-size: 0.73rem;
  color: var(--blc-muted);
  font-style: italic;
}

/* Swatch tissu à plat — tissus non seamless (raccord visible si plaqué sur mesh/scène) */
.blc-preview__fabric-swatch {
  display: block;
  width: 100%;
  height: 100%;
  /* cover (pas contain) : remplit tout le cadre de la sidebar, plus jamais
     de bande vide au-dessus/en-dessous sur un tissu non carré — demande
     atelier 2026-09-21, BUG-CALC-223 */
  object-fit: cover;
}

/* ── Étapes auto-avancement (sans footer) ────────────────────────────── */

/* Feedback visuel sur sélection radio avant navigation */
.blc-choice input:checked + .blc-choice__label {
  animation: blc-select-pulse 0.22s ease forwards;
}
@keyframes blc-select-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blc-accent) 35%, transparent); }
  100% { transform: scale(1.02); }
}

/* Étape en cours de navigation (pendant le délai 320ms) */
.blc-step--transitioning {
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

/* ── Scroll doux ─────────────────────────────────────────────────────── */
/* Défilement doux pour toutes les ancres de la page calculateur */
html { scroll-behavior: smooth; }
/* Offset sticky bar (48px) + marge visuelle pour toutes les étapes */
.blc-step {
  scroll-margin-top: 70px;
}
.blc-step--active {
  scroll-margin-top: 70px;
}

/* ── Image des cartes de choix ────────────────────────────────────────── */
.blc-choice__img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
}

/* ── Label de section dans les étapes rideau ─────────────────────────── */
.blc-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--blc-muted);
  margin: 0 0 10px;
}
/* ── Étape Options rideau ────────────────────────────────────────────── */
.blc-rideau-options .blc-choices {
  gap: 10px;
}

/* ── Étape Finition tête du rideau ───────────────────────────────────── */
.blc-finition .blc-choices {
  gap: 10px;
}

/* Panneau produits finition (ouverture animée sous les choix) */
.blc-fin-products-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.32s ease, opacity 0.22s ease, margin 0.22s ease;
  margin-top: 0;
}
.blc-fin-products-panel.is-open {
  max-height: 800px;
  opacity: 1;
  margin-top: 14px;
}

/* ── Cartes carrées — toutes les étapes rideau ───────────────────────── */
.blc-rideau-options .blc-choice__label,
.blc-finition .blc-choice__label,
.blc-bas-rideau .blc-choice__label {
  aspect-ratio: 1 / 1;
  min-height: unset;
  padding: 6px 6px 10px;
  justify-content: flex-start;
  gap: 4px;
}

.blc-rideau-options .blc-choice__img {
  width: 100%;
  flex: 1;
  min-height: 0;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}
/* Finition tête / Doublure / Finition au sol — remplissage complet du cadre
 * (demande explicite : ces cartes doivent être pleines, pas de letterboxing),
 * contrairement au reste du calculateur (jamais tronqué par défaut).
 * `.blc-finition`/`.blc-doublure` (anciens sélecteurs) ne correspondaient à
 * aucun élément réel du DOM — remplacés par les classes `.blc-choices--fin-tete`
 * / `.blc-choices--doublure` réellement posées sur le conteneur (calculator.js).
 * BUG-CALC — corrigé le 2026-09-10 : `height: auto` calait la hauteur de
 * l'image sur son ratio naturel (largeur 100% recalculée en hauteur), au lieu
 * de remplir le cadre carré — `object-fit: cover` n'a d'effet que si l'image
 * fait déjà 100% de large ET de haut. Constaté en direct (webtool) : cadre
 * 147.8×147.8, image rendue 147.8×98.5 — un tiers du cadre resté vide. */
.blc-choices--fin-tete .blc-choice--img .blc-choice__img,
.blc-choices--doublure .blc-choice--img .blc-choice__img,
.blc-bas-rideau .blc-choice--img .blc-choice__img,
.blc-choices--fin-housse .blc-choice--img .blc-choice__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
/* Type de tringle — même principe (remplissage complet) */
.blc-tringle-type-panel .blc-choice--img .blc-choice__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Étape Bas du rideau ─────────────────────────────────────────────── */
.blc-bas-rideau .blc-choices {
  gap: 10px;
  max-width: 360px;
}

/* ── Hover tissu catalogue ───────────────────────────────────────────── */
.blc-fabric-card__img[data-hover-src] {
  transition: opacity 0.18s;
}

/* ── Étapes composites rideau (v3 — structure 1/2/3/4) ──────────────── */

/* Bloc de sous-section à l'intérieur d'une étape composite */
.blc-section {
  margin-bottom: 24px;
}
.blc-section:last-child {
  margin-bottom: 0;
}

/* Message du type de tringle (étape Dimensions) : placé entre deux .blc-section,
 * même espacement que celles-ci pour ne pas coller à la section « Tringle » */
.blc-rideau-dimensions > .blc-tringle-warning {
  margin-bottom: 24px;
}

/* Badge "Optionnel" inline */
.blc-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blc-muted);
  background: color-mix(in srgb, var(--blc-border) 50%, transparent);
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 6px;
}

/* Bouton pill compact — texte sur 2 lignes (titre + sous-texte), hauteur naturelle */
.blc-choice--pill .blc-choice__label {
  aspect-ratio: unset !important;
  height: unset !important;
  min-height: unset !important;
  max-height: unset !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 6px 11px !important;
  gap: 2px !important;
  text-align: left !important;
  overflow: visible !important;
}
/* Annuler la troncature du thème */
.blc-choice--pill .blc-choice__label > span:not(.blc-choice__icon):not(.blc-choice__sub) {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}
.blc-choice--pill .blc-choice__sub {
  display: block;
  font-size: 0.7rem;
  white-space: normal !important;
}
/* État sélectionné : fond accent + texte blanc.
   body.has-calculator donne spécificité (0,4,1) > règle thème (0,3,1) avec !important */
body.has-calculator .blc-choice--pill input:checked + .blc-choice__label {
  border-color: var(--color-primary, #1C1F3B) !important;
  background: var(--color-primary, #1C1F3B) !important;
  color: #fff !important;
}
body.has-calculator .blc-choice--pill input:checked + .blc-choice__label .blc-choice__sub {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ── Carte image : structure frame (bordure) + caption (texte hors sélection) ── */

/* Le label parent ne porte plus la bordure */
.blc-choice--img {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  border: none !important;
  padding: 0 !important;
  background: none !important;
  min-height: unset !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  gap: 0 !important;
}

/* Zone de sélection : bordure uniquement autour de l'image */
.blc-choice--img .blc-choice__frame {
  border: 2px solid var(--blc-border, #e0ddd8);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--blc-surface, #faf9f7);
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  position: relative;
}

/* Sélectionné : bordure colorée autour du frame uniquement */
.blc-choice--img input:checked ~ .blc-choice__frame {
  border-color: var(--blc-accent);
  background: color-mix(in srgb, var(--blc-accent) 8%, var(--blc-surface, #faf9f7));
  box-shadow: inset 0 0 0 1px var(--blc-accent);
}

/* Hover */
.blc-choice--img:not(.blc-choice--disabled):hover .blc-choice__frame {
  border-color: var(--blc-primary);
}

/* Image dans le frame — jamais tronquée, quelles que soient ses proportions */
.blc-choice--img .blc-choice__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 3px;
}

/* Texte sous l'image — hors zone de sélection, non cliquable */
.blc-choice--img .blc-choice__caption {
  padding: 6px 2px 0;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--blc-primary);
  line-height: 1.3;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.blc-choice--img .blc-choice__name {
  display: block;
  white-space: normal;
}

.blc-choice--img .blc-choice__sub {
  display: block;
  font-size: 0.7rem;
  color: var(--blc-muted);
  margin-top: 2px;
  white-space: normal;
  text-align: center;
}

/* Caption flex : remonte vers le haut et comble l'espace dans les cartes sans sous-titre */
.blc-choices--img .blc-choice--img .blc-choice__caption {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Désactivé : ensemble atténué, curseur non-autorisé */
.blc-choice--disabled {
  opacity: 0.38;
  pointer-events: none;
  cursor: not-allowed;
}

/* Grille cartes image rideau */
.blc-choices--img {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

/* ── Cartes « Densité » : cadre ratio 16/9 (au lieu de carré), moins haut
 * — même principe que les formes. Toujours 3 colonnes désormais (cf.
 * calculator.js), donc même largeur de carte que les formes → même
 * hauteur, quel que soit le métier (référence visuelle : Découpe mousse).
 * object-fit:cover volontaire (demande explicite) : Densité doit être
 * remplie entièrement, contrairement aux formes (jamais tronquées).
 * Spécificité (4 classes) volontairement supérieure à .blc-choices--3col
 * .blc-choice--img .blc-choice__img (exclue de ce cas par :not(), cf. règle
 * plus bas) pour rester seule autorité sur ces cartes. */
.blc-choices--density.blc-choices--img .blc-choice--img .blc-choice__frame {
  aspect-ratio: 16 / 9;
  padding: 5px;
}
.blc-choices--density.blc-choices--img .blc-choice--img .blc-choice__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grille pills — auto-fill pour s'adapter à 2 ou 3 options */
.blc-choices--pill {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* Hint champ métrages — 13 px gris foncé #4b5563 (7,5:1), inventaire des
 * messages M16/M17 (2026-09-30). Le hint hauteur ci-dessous garde son style. */
.blc-dim-hint {
  font-size: 0.8125rem;
  color: #4b5563;
  margin-top: 6px;
}
/* Hint hauteur (sol — dessous de tringle) : bien visible */
.blc-dim-hint[data-hauteur-hint]:not(:empty) {
  color: var(--blc-accent, #CCA63B);
  font-size: 0.82rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
}
/* Hint hauteur placé juste à droite du titre "Hauteur" (au lieu d'être sous le champ) */
.blc-dim-hint--inline {
  margin-top: 0;
  margin-left: 8px;
  font-size: 0.72rem;
}

/* Sélecteur type de tringle (conditionné par finition) */
.blc-tringle-type-panel {
  margin-top: 14px;
}
.blc-tringle-type-panel .blc-section-label {
  margin-bottom: 8px;
}

/* Champ de saisie compact (largeur tringle, hauteur) */
.blc-dim-field--compact .blc-dim-input-wrap {
  max-width: 220px;
}
.blc-tringle-products-panel {
  margin-top: 0;
}

/* ── Bouton info « pilule (i)+info, fond accent » (2026-09-21, BUG-CALC-226) ──
   Structure : <button class="blc-info-btn"><span class="blc-info-btn__i">i</span>info</button>
   Un seul élément cliquable (pas 2 boutons séparés, cf. tentative BUG-CALC-224) —
   la pastille (i) est imbriquée dans la pilule, fond jaune accent.
   Valeur par défaut, réécrite en !important côté thème (blondeau/assets/css/calculator.css) — garder les deux synchronisées. */
.blc-info-btn {
  /* Annule min-height:44px injecté par WooCommerce/thème (WCAG 2.5.8) */
  min-height: 0 !important;
  min-width: 0 !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  padding: 0 8px 0 2px;
  border-radius: 999px;
  background: var(--blc-accent);
  border: 1.5px solid var(--blc-accent);
  color: var(--blc-primary);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  transition: background 0.13s, color 0.13s, transform 0.1s;
}
.blc-info-btn__i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blc-primary);
  color: var(--blc-accent);
  font-style: italic;
  font-family: Georgia, serif;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}
.blc-info-btn:hover,
.blc-info-btn:focus-visible {
  background: var(--blc-primary);
  border-color: var(--blc-primary);
  color: #fff;
  transform: scale(1.04);
}
.blc-info-btn:hover .blc-info-btn__i,
.blc-info-btn:focus-visible .blc-info-btn__i {
  background: var(--blc-accent);
  color: var(--blc-primary);
}
.blc-info-btn:focus-visible {
  outline: 2px solid var(--blc-accent);
  outline-offset: 3px;
}
/* Zone de clic élargie (invisible) */
.blc-info-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
}
@media (max-width: 768px) {
  .blc-info-btn { height: 22px; margin-left: 6px; }
  .blc-info-btn__i { width: 17px; height: 17px; }
}

/* ── Modale info ─────────────────────────────────────────────────────── */
.blc-info-modal-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 53, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 20px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.blc-info-modal-overlay[hidden] {
  display: none;
}
.blc-info-modal-overlay.is-open {
  opacity: 1;
}
.blc-info-modal-box {
  background: #fff;
  /* Rayon/ombre identiques à toutes les modales du site (exit-intent, popup
   * favoris, échantillon, confirmation) — référence commune. */
  border-radius: var(--radius-lg, 8px);
  width: 100%;
  max-width: 640px;
  box-shadow:
    0 8px 32px rgba(15, 28, 53, 0.10),
    0 2px 8px rgba(15, 28, 53, 0.06);
  overflow: hidden;
  margin: auto;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.blc-info-modal-overlay.is-open .blc-info-modal-box {
  transform: translateY(0);
  opacity: 1;
}
/* Panneau latéral — mini-galerie alimentée par les images de la section
 * Guide d'achat correspondante (blondeau_aide_extract_blocks). Layout
 * équivalent à .blondeau-modal-media/.blondeau-modal-content du thème,
 * dupliqué ici sous des classes propres au plugin (pas de dépendance
 * croisée plugin → thème). */
.blc-info-modal-box.has-media {
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: stretch;
  max-width: 860px;
}
.blc-info-modal-media {
  position: relative;
  min-height: 220px;
  background: var(--blc-border, #e0ddd8);
}
.blc-info-modal-media__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.blc-info-modal-media__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--blc-primary, #1C1F3B);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blc-info-modal-media__nav--prev { left: 8px; }
.blc-info-modal-media__nav--next { right: 8px; }
.blc-info-modal-media__dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.blc-info-modal-media__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.blc-info-modal-media__dot.is-active { background: #fff; }
.blc-info-modal-content {
  min-width: 0;
}
@media (max-width: 640px) {
  .blc-info-modal-box.has-media {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .blc-info-modal-media {
    min-height: 160px;
  }
}
.blc-info-modal-hd {
  position: relative;
  background: #fff;
  color: var(--blc-primary, #1C1F3B);
  padding: 20px 56px 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Titre — même typo que les autres modales du site */
.blc-info-modal-title {
  font-size: var(--font-size-lg, 1.25rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary, #1C1F3B);
  margin: 0;
}
/* Bouton fermer — pas de fond par défaut, cohérent avec les autres modales */
.blc-info-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, 0.15s), color var(--transition-fast, 0.15s);
  padding: 0;
}
.blc-info-modal-close:hover {
  background: var(--color-bg-alt, #f5f5f3);
  color: var(--color-primary, #1C1F3B);
}
.blc-info-modal-close svg { width: 16px; height: 16px; }
.blc-info-modal-body {
  padding: 0 20px 20px;
  /* police et couleur héritées du thème */
}
/* Contenu Gutenberg dans la modale — texte et titres réduits pour le panel 480px. */
#blc-info-modal .blc-info-modal-body > *:first-child { margin-top: 0; }
#blc-info-modal .blc-info-modal-body > *:last-child  { margin-bottom: 0; }
#blc-info-modal .blc-info-modal-body h2 { font-size: var(--font-size-lg, 1.25rem);  margin-top: 14px; margin-bottom: 6px; }
#blc-info-modal .blc-info-modal-body h3 { font-size: var(--font-size-base, 1rem);   margin-top: 12px; margin-bottom: 5px; }
#blc-info-modal .blc-info-modal-body h4 { font-size: var(--font-size-sm, 0.875rem); margin-top: 10px; margin-bottom: 4px; }
#blc-info-modal .blc-info-modal-body p,
#blc-info-modal .blc-info-modal-body ul,
#blc-info-modal .blc-info-modal-body ol,
#blc-info-modal .blc-info-modal-body li { font-size: var(--font-size-sm, 0.875rem); line-height: 1.6; }
#blc-info-modal .blc-info-modal-body img { max-width: 100%; height: auto; }
/* Colonnes Gutenberg (ex. 2 images côte à côte) — la modale est maintenant
 * assez large pour les accueillir en ligne ; on ne les empile que sur les
 * très petits écrans (voir media query 640px plus bas). */
#blc-info-modal .blc-info-modal-body .wp-block-columns { display: flex; flex-direction: row; gap: 16px; }
#blc-info-modal .blc-info-modal-body .wp-block-column { flex: 1; min-width: 0; }
@media (max-width: 480px) {
  #blc-info-modal .blc-info-modal-body .wp-block-columns { flex-direction: column; gap: 0; }
}
/* Spinner + message de chargement lazy (évite une modale muette sur connexion lente) */
.blc-info-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
  color: var(--color-accent, #CCA63B);
}
.blc-info-loading__spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--color-accent, #CCA63B) 25%, transparent);
  border-top-color: var(--color-accent, #CCA63B);
  animation: blc-spin 0.8s linear infinite;
}
@keyframes blc-spin { to { transform: rotate(360deg); } }
.blc-info-loading__text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--blc-muted, #767676);
  text-align: center;
}
.blc-info-loading__sub {
  display: block;
  font-size: 0.74rem;
  margin-top: 2px;
}

/* ── Sigle "Aucun" universel ─────────────────────────────────────────── */
.blc-choice--none .blc-choice__frame {
  background: var(--blc-surface, #faf9f7);
}
.blc-choice__none-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44%;
  height: 44%;
  color: color-mix(in srgb, var(--blc-muted, #aaa) 70%, transparent);
}
.blc-choice__none-icon svg {
  width: 100%;
  height: 100%;
}
/* Quand sélectionné, le cercle barré prend la teinte accent */
.blc-choice--none input:checked ~ .blc-choice__frame .blc-choice__none-icon {
  color: var(--blc-accent);
}

/* ── Overlay rond barré sur les éléments non sélectionnables (disabled) ─ */
.blc-choice__no-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 2;
}
.blc-choice__no-icon svg {
  width: 36%;
  height: 36%;
  color: rgba(60, 60, 60, 0.38);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REFONTE RIDEAU — MODÈLE ATELIER (UX 2026-07, réf. configurateur client)
   Nouveaux composants : 2 colonnes, swatches œillets, guide de mesure,
   quantités coussins, note de commande, décomposition sidebar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grille 2 colonnes pleine largeur (Fonctionnel/Décoratif, Au sol/Cassant) ── */
.blc-choices--2col {
  grid-template-columns: repeat(2, 1fr) !important;
}
.blc-choices--2col .blc-choice--img .blc-choice__img,
.blc-choices--2col .blc-choice__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── Swatches œillets (coloris backoffice) ── */
.blc-oeillets__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.blc-oeillet-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  /* Encarts agrandis (demande atelier 2026-09-21, BUG-CALC-231, puis encore
     agrandis BUG-CALC-236) : 72px → 92px → 120px, wrapper élargi d'autant
     pour garder le libellé sur une ligne. */
  width: 120px;
  text-align: center;
}
.blc-oeillet-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.blc-oeillet-swatch__img {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: contain;
  border: 2px solid var(--blc-border);
  transition: border-color var(--blc-anim), transform var(--blc-anim);
  background: var(--blc-border);
}
.blc-oeillet-swatch:hover .blc-oeillet-swatch__img { transform: scale(1.06); border-color: var(--blc-accent); }
.blc-oeillet-swatch.is-selected .blc-oeillet-swatch__img {
  border-color: var(--blc-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blc-primary) 35%, transparent);
}
.blc-oeillet-swatch__label {
  font-size: 0.72rem;
  color: var(--blc-muted);
  line-height: 1.2;
}
.blc-oeillet-swatch.is-selected .blc-oeillet-swatch__label {
  color: var(--blc-primary);
  font-weight: 600;
}

/* ── Guide de mesure (image du type de tringle choisi) ── */
.blc-measure-guide { margin-bottom: 14px; }
.blc-measure-guide__fig {
  margin: 0;
  border: 1px solid var(--blc-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
/* Support de la loupe (.blc-choice__zoom-btn, positionnée en absolu) */
.blc-measure-guide__media {
  position: relative;
  display: block;
}
.blc-measure-guide__fig img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  background: #fff;
}
.blc-measure-guide__fig figcaption {
  padding: 6px 12px;
  font-size: 0.78rem;
  color: var(--blc-muted);
  border-top: 1px solid var(--blc-border);
  /* Le reset typographique global (p, li, figcaption { max-width: 70ch })
   * plafonnait ce texte à une colonne étroite alors que l'image juste
   * au-dessus occupe déjà toute la largeur — DETTE-CALC-147. */
  max-width: 100%;
}

/* ── Coussins assortis — cartes-image (« encart »), réf. .blc-choice--img
 * (Doublure / Finition au sol ci-dessus, cf. _mkImgCard) : mêmes frame/caption,
 * complétées par un stepper de quantité sous la légende (plusieurs coussins
 * possibles, contrairement aux autres cartes à sélection unique). Toute
 * évolution du composant .blc-choice--img doit être répercutée ici aussi. */
.blc-choice--coussin-qty .blc-choice__frame { cursor: pointer; }
.blc-choice--coussin-qty { box-sizing: border-box; }
.blc-choice__qty-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-top (pas padding-top) : le fond navy de sélection (BUG-CALC-230,
   * thème) est posé sur .blc-choice__caption et .blc-choice__qty-ctrl
   * séparément (2 éléments distincts) — une marge entre eux laisse voir le
   * fond de la carte au travers, une fine ligne claire visible à l'usage
   * (constaté au webtool, BUG-CALC-234). padding-top garde le même espacement
   * visuel SANS créer de coupure entre les deux blocs navy. */
  padding: 8px 8px 8px;
  box-sizing: border-box;
  width: 100%;
}
/* Stepper .bp-qty — copie exacte du composant de la fiche produit (thème,
 * réf. product.css:687-737 et product-blondeau.php:582-605), sans l'unité
 * "m" : demande explicite (« même présentation que la fiche produit »).
 * Copié tel quel plutôt que réutilisé via le fichier du thème car
 * product.css n'est chargé que sur les fiches produit, pas sur le
 * calculateur — vérifié en direct (le calculateur ne charge que
 * accessibility.css). Toute évolution de .bp-qty (thème) doit être
 * répercutée ici aussi. */
.blc-choice__qty-ctrl .bp-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--color-field-border, #9B9489);
  background: transparent;
  height: 46px;
  border-radius: 6px;
  max-width: 100%;
}
/* `.blc-choice input { position:absolute; opacity:0; width:0; height:0; }`
 * (case masquée de l'encart, cf. règle générique tout en haut du fichier)
 * cible tout input descendant de .blc-choice, donc aussi .bp-qty__input —
 * à réafficher explicitement (position/opacity) en plus de la taille. */
.blc-choice__qty-ctrl .bp-qty__input {
  position: static;
  opacity: 1;
  width: 45px;
  height: 44px;
  display: inline-block;
  text-align: center;
  border: none;
  border-radius: 0;
  font-size: 13px;
  color: rgb(30, 30, 30);
  background: transparent;
  padding: 12px 4px;
  min-height: unset;
  -moz-appearance: textfield;
}
.blc-choice__qty-ctrl .bp-qty__input::-webkit-inner-spin-button,
.blc-choice__qty-ctrl .bp-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; }
.blc-choice__qty-ctrl .bp-qty__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 44px;
  font-size: 12.6px;
  color: rgb(30, 30, 30);
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast, 0.15s);
}
.blc-choice__qty-ctrl .bp-qty__btn:hover { color: var(--blc-accent); }

/* ── Note de commande + fichier joint ── */
.blc-note-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-field-border, #9B9489);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  min-height: 90px;
}
.blc-note-textarea:focus {
  outline: none;
  border-color: var(--color-field-focus, #A8842C);
  box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18));
}
.blc-note-file {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.blc-note-file__status {
  font-size: 0.82rem;
  color: var(--blc-muted);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blc-note-file__remove {
  border: none;
  background: none;
  color: #b32d2e;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 6px;
}

/* ── Décomposition du calcul dans la sidebar « Votre configuration » ── */
.blc-sidebar__detail {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.blc-sidebar__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.8rem;
}
.blc-sidebar__detail-label {
  color: rgba(255, 255, 255, 0.55);
  min-width: 0;
}
.blc-sidebar__detail-label em {
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  opacity: 0.75;
  line-height: 1.25;
}
.blc-sidebar__detail-val {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
/* Sous-détail d'une ligne (coussins assortis : tissu, confection, garnissage —
   DETTE-CALC-120, 2026-10-19) : retrait et texte plus petit, mêmes couleurs */
.blc-sidebar__detail-row--sub {
  padding-left: 10px;
  font-size: 0.72rem;
}
.blc-sidebar__detail-row--sub .blc-sidebar__detail-val {
  font-weight: 500;
}

/* Bouton secondaire (choisir un fichier, etc.) */
.blc-wizard__btn--secondary {
  background: #fff;
  color: var(--blc-primary);
  border: 1px solid var(--blc-border);
  width: auto;
  padding: 8px 16px;
  font-size: 0.85rem;
}
.blc-wizard__btn--secondary:hover:not(:disabled) {
  border-color: var(--blc-accent);
  background: color-mix(in srgb, var(--blc-accent) 8%, transparent);
}

/* Case lance-rideaux (rail manuel) */
.blc-rail-lances {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--blc-primary);
  cursor: pointer;
}

/* Bouton Imprimer / PDF (sous le bouton panier) */
.blc-wizard__btn--print {
  background: #fff;
  color: var(--blc-primary);
  border: 1px solid var(--blc-border);
  margin-top: 8px;
}
.blc-wizard__btn--print:hover:not(:disabled) {
  border-color: var(--blc-accent);
  background: color-mix(in srgb, var(--blc-accent) 8%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REFONTE COUSSIN — Phase 10.10 (réf. configurateur client)
   Cartes type 3 colonnes, panneau épaisseur/densité, textes d'attente sidebar,
   guide de mesure vide, mention gabarit note de commande.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cartes « Type de coussin » : 3 colonnes larges pleine largeur ── */
.blc-choices--3col {
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100%;
}
/* Portée à .blc-choice--img uniquement (cartes _mkImgCard : type de coussin…)
 * — les formes (.blc-shape-choice, markup dédié) ont leur propre cadre 16/9
 * (cf. règle .blc-shape-choice .blc-choice__label plus haut) et les densités
 * leur propre règle dédiée (.blc-choices--density, spécificité supérieure,
 * cf. plus haut) : :not() exclut ce dernier cas pour éviter tout conflit
 * entre les deux définitions d'aspect-ratio sur le même élément __img. */
.blc-choices--3col:not(.blc-choices--density) .blc-choice--img .blc-choice__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── Panneau épaisseur lié à la densité (Dry Feel / Mémoire / bicouche) ── */
.blc-density-ep {
  margin-top: 14px;
  background: color-mix(in srgb, var(--blc-accent) 7%, #fff);
  border: 1px solid var(--blc-border);
  border-radius: 8px;
  padding: 12px 14px;
}
/* Titre et hints en bleu nuit / gris foncé (le doré sur crème était à 2,2:1)
 * — inventaire des messages M14, 2026-09-30. */
.blc-density-ep__title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--blc-primary);
}
.blc-density-ep__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.blc-density-ep__cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.blc-density-ep__lbl {
  font-size: 0.7rem;
  color: var(--blc-muted);
}
.blc-density-ep__input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.blc-density-ep__input-wrap input {
  width: 64px;
  height: 34px;
  border: 1.5px solid var(--color-field-border, #9B9489);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  color: var(--blc-primary);
}
.blc-density-ep__input-wrap span {
  font-size: 0.8rem;
  color: var(--blc-muted);
}
.blc-density-ep__select {
  min-width: 84px;
  height: 34px;
  border: 1.5px solid var(--color-field-border, #9B9489);
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blc-primary);
  background: #fff;
  cursor: pointer;
}
.blc-density-ep__op {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--blc-muted);
  align-self: flex-end;
  padding-bottom: 5px;
}
.blc-density-ep__total {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blc-primary);
  padding-top: 4px;
}
/* Épaisseur saisie en Dimensions, rappelée en lecture seule à gauche du
 * calcul [Dimensions] + [Ajout] = [Total] — même hauteur que le select voisin
 * (44 px imposés aux select par le thème, accessibility.css, cible tactile) */
.blc-density-ep__base {
  display: inline-flex;
  align-items: center;
  min-width: 64px;
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--blc-border);
  border-radius: 6px;
  background: #f3f4f6;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blc-primary);
}

/* ── Sous-étapes dans les groupes coussin ── */
.blc-substep {
  padding: 12px 0 4px;
}
.blc-substep:first-child { padding-top: 0; }

/* ── Bloc métrage de tissu (étape coussin_metrage) ── */
.blc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ── Sous-sélections finition housse coussin ── */
.blc-choices--sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.blc-choice--sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  min-width: 72px;
  text-align: center;
  transition: border-color .15s, background .15s;
  background: #fff;
}
.blc-choice--sub input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.blc-choice--sub:hover {
  border-color: var(--color-accent, #CCA63B);
}
.blc-choice--sub.blc-choice--selected,
.blc-choice--sub:has(input:checked) {
  border-color: var(--color-accent, #CCA63B);
  background: #fdf8ee;
}
.blc-choice__img-wrap {
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}
.blc-subsection-label {
  color: var(--blc-muted, #666);
}

/* Précisions des options coussin (variante, quantité) — même titre que la
 * sous-sélection « Couleur du passepoil » de la finition (refonte 10.23 lot 4) */
.blc-option-detail {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.blc-option-detail .blc-subsection-label {
  display: block;
  margin-top: 16px;
  margin-bottom: 8px;
  padding: 0;
  font-weight: 600;
  font-size: .85rem;
}