/**
 * ------------------------------------------------------------------------
 * CALCULATEUR BLONDEAU — Styles thème
 * Layout 2 colonnes : GAUCHE preview/résumé · DROITE étapes
 * Sections toujours ouvertes, pas de bouton valider, fond blanc.
 * Variables CSS héritées du thème (--color-primary, --color-accent, etc.)
 * @version 3.27.0 — aide Guide d'achat : image entière (contain), au repos comme agrandie — 2026-11-09
 * @version 3.26.0 — couleur du passepoil (Même tissu / Noir) : sélection bleu foncé comme les pastilles — 2026-11-09
 * @version 3.25.0 — images sans vide : formes sans marge (cover), images de l'aide en cover à cadre 4:3 fixe, liseré conservé — 2026-10-27
 * @version 3.24.1 —aide Guide d'achat : zone image remplie (cover), sans espace vide, au repos comme agrandie — 2026-10-27
 * @version 3.24.0 —rideau : Fonctionnel/Décoratif et 1 Rideau/1 Paire à la même forme, 450px de large au maximum — 2026-10-27
 * @version 3.23.0 — focus clavier unifié : bord or foncé + halo or collé, comme les champs (DETTE-398) — 2026-10-23
 * @version 3.22.0 — champs de formulaire : contour au seuil 3:1, focus contour or foncé + halo or (DETTE-391) — 2026-10-23
 * @version 3.21.4 — code mort retiré : .blc-fabrics (jamais émis, DETTE-220), rendu identique — 2026-10-23
 * @version 3.21.3 — référence du tissu (encart sélectionné, récapitulatif) : icône Référence (.blc-ref) — 2026-10-20
 * @version 3.21.2 — paliers de hauteur de la preview retirés, sans effet (DETTE-376) — 2026-10-19
 * @version 3.21.1 — barre des tissus allégée : Filtrer et cœur favoris à 36px (comme le tri), cœur en contour 1px — 2026-10-18
 * @version 3.21.0 — tri des tissus : pastille commune .blondeau-sort (main.css), anciennes règles du tri retirées — 2026-10-17
 * @version 3.20.1 — fiche tissu : survol composition sans décalage du texte — 2026-10-16
 * @version 3.20.0 — fiche tissu : composition, palette de la fiche produit (en boucle au-delà de 5) et mise en avant au survol — 2026-10-16
 * @version 3.19.5 — fiche tissu : Certifications et normes au rendu des lignes Caractéristiques — 2026-10-16
 * @version 3.19.4 — fiche tissu : texte provisoire des avis signalé comme inutilisé — 2026-10-16
 * @version 3.19.3 — fiche tissu : références des coloris plus petites, jamais coupées (retour à la ligne) — 2026-10-16
 * @version 3.19.2 — schéma des dimensions : légende collée à l'image — 2026-10-15
 * @version 3.19.1 — fiche tissu : fondu plus doux des aperçus de coloris — 2026-10-15
 * @version 3.19.0 — fiche tissu : onglet « Usage & entretien » quand la colonne le permet (requête de conteneur) — 2026-10-15
 * @version 3.18.5 — fiche tissu : onglets sur une seule ligne (resserrés sur petit écran) — 2026-10-15
 * @version 3.18.4 — fiche tissu : références des coloris lisibles — 2026-10-15
 * @version 3.18.3 — fiche tissu : onglets espacés, texte des usages/entretien, coloris sur 3 colonnes, palette de composition de la fiche produit ; coins de l'image des cartes tissu — 2026-10-15
 * @version 3.18.2 — fiche tissu : espacement des intertitres — 2026-10-15
 * @version 3.18.1 — fiche tissu : icônes des onglets, des caractéristiques et de la référence des coloris — 2026-10-15
 * @version 3.18.0 — fiche tissu : rubrique Entretien — 2026-10-15
 * @version 3.17.3 — sélection : encadré doré seul (aide) ; coloris de la fiche tissu au cadre des coloris de la fiche produit — 2026-10-15
 * @version 3.17.2 — pastille X / Y de l'aide au bleu exact du site (comme .blondeau-pager) — 2026-10-15
 * @version 3.17.1 — sélection des vignettes d'aide : or de charte + liseré bleu au lieu de l'or foncé — 2026-10-15
 * @version 3.17.0 — aide Guide d'achat : images dans le texte, bande de vignettes au cadre des coloris, agrandissement mobile — 2026-10-14
 * ------------------------------------------------------------------------
 */

/* ── Contexte page ───────────────────────────────────────────────────── */
body.has-calculator .entry-content,
body.has-calculator .page-content {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Neutralise la règle globale .entry-content img { border-radius: var(--radius-md) }
 * (main.css) : aucune image du calculateur ne doit être arrondie individuellement —
 * seuls certains conteneurs (ex. sidebar preview) gèrent leur propre rayon via overflow. */
body.has-calculator .entry-content img {
  border-radius: 0;
}

/* Colonne droite : prend tout l'espace restant sans déborder horizontalement.
   overflow: visible requis pour que le dropdown FVP ne soit pas coupé. */
body.has-calculator .blc-wizard__main {
  min-width: 0;
  overflow: visible;
}

/* Prévention des marges héritées (entry-content > * + *) à l'intérieur des corps d'étape */
body.has-calculator .blc-step__body-inner > * + * {
  margin-top: 0 !important;
}

body.has-calculator .site-main {
  background: #fefdf8;
}

/* Article + titre : même teinte que le calculateur — supprime la bande blanche */
body.has-calculator article.entry,
body.has-calculator .entry-header {
  background: #fefdf8 !important;
}

/* Neutralise l'indent OL et le max-width LI hérités de main.css */
body.has-calculator .blc-steps {
  padding-left: 0 !important;
}
body.has-calculator .blc-step {
  max-width: none !important;
}

/* ── Variables locales mappées sur le thème ──────────────────────────── */
/* Portée étendue (2026-10-01) aux modales du calculateur que calculator.js
 * déplace dans <body>, HORS de .blc-wizard (fiche tissu, aide « info »,
 * visionneuse, récapitulatif) : elles retombaient sur les valeurs de repli
 * (#888 = 3.54:1 sur blanc, sous le seuil WCAG 1.4.3 de 4.5:1). */
.blc-wizard,
.blc-fabric-modal,
.blc-info-modal-overlay,
.blc-calc-lightbox,
.blc-preview-modal {
  --blc-accent:    var(--color-accent,    #CCA63B);
  --blc-accent-text: var(--color-accent-text, #866A1E);
  --blc-primary:   var(--color-primary,   #1C1F3B);
  --blc-border:    var(--color-border,    #e5e5e5);
  --blc-surface:   #ffffff;
  --blc-muted:     var(--color-text-muted, #888);
  --blc-sidebar-w: 360px;
}

/* ── Layout principal : GAUCHE preview, DROITE étapes ────────────────── */
.blc-wizard {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  /* 24px d'espace visuel sous la barre sticky (48px, déjà compensée par
   * .site-main padding-top) — même valeur que --blc-sidebar-top, pour que
   * sidebar et première carte d'étape aient le même espace sous la barre
   * flottante, y compris avant que la sidebar ne devienne sticky (UX 2026-08).
   * Volontairement sur .blc-wizard (pas .site-main) : ne doit pas décaler le
   * hero/fil d'Ariane au-dessus, hors du wizard. */
  margin-top: 24px !important;
  display: grid !important;
  grid-template-columns: 1fr 3fr !important;
  grid-template-rows: auto !important;
  gap: 0 20px !important;
  background: #fefdf8;
  min-height: 100vh;
}

.blc-wizard__sidebar { grid-column: 1 !important; grid-row: 1 / span 3 !important; }
.blc-wizard__main    { grid-column: 2 !important; grid-row: 1 !important; }
.blc-wizard__error   { grid-column: 1 / -1 !important; }

@media (max-width: 960px) {
  .blc-wizard {
    grid-template-columns: 1fr !important;
  }
  .blc-wizard__sidebar { grid-column: 1 !important; grid-row: 2 !important; position: relative !important; top: 0 !important; height: auto !important; max-height: none !important; }
  .blc-wizard__main    { grid-column: 1 !important; grid-row: 1 !important; }
  /* Sidebar empilée (page qui défile normalement) : pas de plafond de hauteur
   * ni de scroll interne, sinon "Votre configuration" serait coincée dans une
   * mini-fenêtre alors que toute la page peut défiler librement. */
  .blc-sidebar { max-height: none !important; }
  .blc-sidebar__summary { flex: none !important; overflow: visible !important; min-height: auto !important; }
  .blc-sidebar__recap { flex: none !important; overflow: visible !important; }
}

/* ── Sidebar gauche sticky ───────────────────────────────────────────────
 * La hauteur totale de la sidebar ne doit jamais dépasser l'espace visible
 * (le bouton "Ajouter au panier" doit rester atteignable) : le plafond de
 * hauteur est posé sur .blc-sidebar (pas seulement sur le conteneur sticky),
 * qui devient lui-même le conteneur scroll — seul son enfant flexible
 * (.blc-sidebar__recap, la zone blanche « Votre configuration ») défile en
 * interne quand son contenu dépasse ; preview/prix/boutons gardent leur
 * taille naturelle et restent toujours visibles. */
.blc-wizard__sidebar {
  /* Décalage du haut de la sidebar une fois collée (sticky) — réutilisé tel quel
   * pour le plafond de hauteur ci-dessous : le max-height DOIT réserver le même
   * espace (24px) que le haut, sinon la sidebar déborde en bas d'une fois collée
   * quand son contenu est trop grand pour la fenêtre (UX 2026-08 : la marge basse
   * doit être identique à la marge haute dans ce cas).
   * hauteur de la stickybar (--blc-sticky-height) + espace visuel (24px). .blc-steps n'a
   * pas de padding-top : la sidebar et la première étape partent du même point
   * dans la grille. */
  --blc-sidebar-top: calc(var(--blc-sticky-offset, var(--header-total-height, 123px)) + var(--blc-sticky-height, 36px) + 24px);
  position: sticky !important;
  top: var(--blc-sidebar-top) !important;
  align-self: start !important;
  max-height: calc(100vh - var(--blc-sidebar-top) - 24px);
  /* visible (pas hidden) : .blc-sidebar gère déjà son propre plafond + clip
   * interne ; un overflow:hidden ici tronquerait sèchement son box-shadow au
   * lieu de le laisser s'estomper naturellement autour du coin arrondi. */
  overflow: visible;
  border-right: none;
  /* Colonne flex (2026-09-25) : la sidebar se subdivise désormais en 2 —
   * .blc-wizard__preview (calculator.js, hors du bloc bleu) en haut, puis
   * .blc-sidebar juste en dessous. flex-direction:column + .blc-sidebar en
   * flex:1 1 auto (ci-dessous) laisse le bloc bleu occuper exactement ce qui
   * reste sous la preview, dans le même plafond de hauteur (max-height
   * ci-dessus) — sans ça .blc-sidebar réclamerait à lui seul TOUTE cette
   * hauteur en plus de celle de la preview et déborderait sous le viewport. */
  display: flex;
  flex-direction: column;
  /* position:sticky crée un nouveau contexte d'empilement : TOUT descendant
   * position:fixed reste plafonné au z-index de CE conteneur, quel que soit son
   * propre z-index. C'est ce qui faisait passer la modale récap
   * (.blc-sidebar-summary-modal, z-index:9000) sous .site-header (z-index:200)
   * — un premier correctif (z-index:161 posé ici le 2026-09-21) ne l'avait fait
   * remonter qu'au-dessus de .blc-sticky-bar (160), pas du header. Correction
   * définitive le 2026-09-25 : calculator.js déplace la modale (et, depuis, la
   * modale d'agrandissement de la preview 3D — .blc-preview-modal) dans <body>
   * à l'initialisation (même pattern que toutes les autres modales du
   * calculateur) : ELLES ne dépendent donc plus du tout du z-index posé ici.
   * NE PAS réimbriquer une modale dans la sidebar.
   *
   * BUG signalé le 2026-09-26 : le z-index:161 conservé « pour la sidebar
   * elle-même » (au-dessus de .blc-sticky-bar) n'avait plus lieu d'être une
   * fois cette raison d'être (la modale) disparue — sans z-index explicite,
   * cette sidebar sticky passait VISIBLEMENT AU-DESSUS de la sticky bar
   * (fixed, z-index:160) pendant le scroll, tant qu'elle n'a pas encore
   * atteint son point d'accroche (elle défile alors normalement avec la page,
   * dans le même contexte d'empilement — la comparaison de z-index s'applique
   * donc bien, contrairement au cas de la modale déplacée dans <body>). Aucun
   * z-index explicite n'est plus nécessaire ici : par défaut (auto), un
   * élément positionné se peint dans la même « couche » que le contenu non
   * positionné de son contexte parent, donc systématiquement SOUS tout élément
   * à z-index positif comme .blc-sticky-bar (160) — plus aucun chevauchement
   * possible, quelle que soit la phase du scroll. */
}

.blc-sidebar {
  background: var(--blc-primary) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0 0 16px !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* flex:1 1 auto (pas max-height fixe) : occupe exactement l'espace restant
     dans la colonne .blc-wizard__sidebar une fois la preview posée au-dessus
     (voir commentaire ci-dessus) ; min-height:0 autorise ce flex item à
     rétrécir sous sa taille de contenu — sinon le plafond de hauteur du
     flex parent n'a aucun effet et .blc-sidebar déborde quand même. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  box-shadow: none !important;
}

/* Tout, sauf le bloc résumé, garde sa taille naturelle (jamais compressé) —
 * seul .blc-sidebar__summary (flex:1, cf. plus bas) absorbe le manque de place,
 * en reportant tout le débordement sur SON enfant .blc-sidebar__recap (scroll
 * interne). Corrigé le 2026-09-25 (BUG-CALC-240) : cette règle ciblait encore
 * .blc-sidebar__recap alors que le wrapper .blc-sidebar__summary (BUG-CALC-225)
 * s'est intercalé entre lui et .blc-sidebar — .blc-sidebar__recap n'étant plus
 * un enfant DIRECT de .blc-sidebar, son propre flex:1 n'avait plus aucun effet
 * sur cette grille, et .blc-sidebar__summary (bloc figé, flex-shrink:0 par
 * cette règle) prenait toute la hauteur de son contenu sans jamais céder de
 * place — avec beaucoup de sélections (ex. coussin toutes options), le prix et
 * le bouton panier se retrouvaient purement et simplement coupés hors de la
 * zone visible par l'overflow:hidden de .blc-sidebar, sans aucune scrollbar
 * pour les atteindre (prix/panier doivent TOUJOURS rester visibles, quel que
 * soit le contenu — jamais la sidebar entière qui défile). */
.blc-sidebar > *:not(.blc-sidebar__summary) {
  flex-shrink: 0;
}

/* ── Compacité sur petite hauteur d'écran (UX 2026-09) ───────────────────
 * Signalé par l'atelier : sur un portable à fenêtre non maximisée, la
 * sidebar ne laissait voir que 2 lignes avant que le bouton panier ne
 * sorte de l'écran. Priorité absolue : preview, « Votre configuration »,
 * « Détail du prix » et le bouton panier restent toujours visibles — ce
 * sont les espacements, tailles de police et la preview qui cèdent en
 * premier, jamais le libellé du bouton panier. Deux paliers, du moins au
 * plus agressif. */
@media (max-height: 760px) {
  .blc-sidebar__title-row { padding-top: 8px !important; padding-bottom: 3px !important; }
  .blc-sidebar__title { font-size: 0.6rem !important; }
  /* Palier de hauteur de la preview retiré (DETTE-376) : sans effet, la règle de
     base plus bas l'emportait ; _fitSidebarColumn() réduit déjà la preview. */
  .blc-sidebar__recap { margin-top: 8px !important; padding: 6px 10px !important; min-height: 34px; }
  .blc-sidebar__recap-item { padding: 3px 0 !important; font-size: 0.76rem !important; }
  .blc-sidebar__price { padding-top: 8px !important; }
  .blc-sidebar__price-row { padding: 3px 0 !important; font-size: 0.76rem !important; }
  .blc-sidebar__price-row--primary strong { font-size: 1.05rem !important; }
  .blc-sidebar__actions { padding-top: 6px !important; }
  .blc-wizard__btn--cart { padding: 11px 16px !important; font-size: 0.88rem !important; }
}

@media (max-height: 620px) {
  .blc-sidebar__detail { display: none !important; }
  .blc-sidebar__title-row { padding-top: 6px !important; padding-bottom: 2px !important; }
  .blc-sidebar__recap { margin-top: 6px !important; padding: 5px 9px !important; min-height: 26px; }
  .blc-sidebar__recap-item { padding: 2px 0 !important; font-size: 0.72rem !important; }
  .blc-sidebar__price { padding-top: 6px !important; }
  .blc-sidebar__price-row { padding: 2px 0 !important; }
  .blc-wizard__btn--cart { padding: 9px 14px !important; font-size: 0.84rem !important; }
}

/* ── Modale récap compacte (écrans à hauteur réduite, BUG-CALC-225/227) ──
 * Retour de l'atelier après les 2 paliers de compaction ci-dessus (760/620px) :
 * sur un petit portable, la sidebar reste illisible malgré la réduction
 * progressive des tailles. Au lieu de compacter davantage, ≤950px de hauteur
 * masque « Votre configuration » (.blc-sidebar__summary) au profit d'un bouton
 * qui ouvre le contenu réel dans une modale (calculator.js) — jamais dupliqué.
 * Seuil relevé de 800 à 950px le 2026-09-25 (demande atelier) : sur un écran
 * 1080p fenêtre maximisée (viewport ≈ 900px), la sidebar était déjà trop
 * serrée alors que le bouton ne s'affichait pas encore.
 * « Détail du prix » (.blc-sidebar__price) N'EST PLUS masqué ici depuis le
 * 2026-09-25 (demande atelier) : il reste toujours visible dans la sidebar,
 * juste sous le bouton compact (cf. ordre dans calculator-wizard.php).
 * `min-width: 961px` : au-delà, la sidebar est déjà empilée sous les étapes
 * (règle @media max-width:960px ci-dessus, hauteur illimitée, pas de
 * compaction nécessaire), on ne veut donc affecter que le cas
 * "portable/desktop fenêtre basse". */
.blc-sidebar__compact-actions { display: none; }
@media (min-width: 961px) and (max-height: 950px) {
  .blc-sidebar__summary { display: none !important; }
  .blc-sidebar__compact-actions {
    display: flex !important;
    gap: 8px;
    padding: 12px 16px 4px;
  }
}
.blc-sidebar__compact-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 0 !important; /* annule le min-height:44px WooCommerce/thème */
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-md, 6px);
  /* Fond accent (même traitement que le bouton « Ajouter au panier » de la
     sidebar, .blc-sidebar .blc-wizard__btn--cart ci-dessous) — remplace
     l'ancien fond transparent/bordure blanche translucide, trop peu visible
     sur le fond navy (demande atelier 2026-09-26). */
  background: var(--blc-accent, #CCA63B);
  color: var(--blc-primary, #1C1F3B);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s;
}
.blc-sidebar__compact-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.blc-sidebar__compact-btn:hover,
.blc-sidebar__compact-btn:focus-visible {
  background: color-mix(in srgb, var(--blc-accent, #CCA63B) 82%, #000);
}

/* Modale récap — même gabarit que la fiche tissu (.blc-fabric-modal), fond
 * BLANC comme toutes les autres modales du site (demande explicite de
 * l'atelier, 2026-09-21 : la 1ʳᵉ version recolorait le panneau en navy pour
 * garder les couleurs "île" de la sidebar — pas la présentation attendue).
 * Les textes de .blc-sidebar__summary/.blc-sidebar__price/.blc-sidebar__actions
 * (pensés pour un fond navy à l'origine) sont donc repassés en couleurs
 * sombres ci-dessous, uniquement dans ce contexte modale. */
.blc-sidebar-summary-modal .blc-sidebar__summary {
  display: block !important; /* annule le display:none ≤800px ci-dessus une fois dans la modale */
}
.blc-sidebar-summary-modal .blc-sidebar__summary,
.blc-sidebar-summary-modal .blc-fabric-modal__foot {
  background: transparent !important;
}
.blc-sidebar-summary-modal .blc-sidebar__title,
.blc-sidebar-summary-modal .blc-sidebar__price-row span,
.blc-sidebar-summary-modal .blc-sidebar__price-row strong {
  color: var(--color-primary, #1C1F3B) !important;
}
.blc-sidebar-summary-modal .blc-sidebar__price-row span { opacity: 0.55; }
.blc-sidebar-summary-modal .blc-sidebar__price-row--primary strong {
  color: var(--color-accent, #CCA63B) !important;
}
.blc-sidebar-summary-modal .blc-sidebar__empty-hint {
  color: var(--blc-muted, #888) !important;
}

/* Titre et textes uniformisés avec les autres modales (2026-10-03, demande
   atelier). Le titre est désormais un vrai titre de modale
   (#blc-summary-modal-title, calculator-wizard.php) : le petit intitulé
   en capitales de la sidebar, déplacé avec le récap, est masqué ici.
   Libellés et valeurs passent de 12-13 px à 14 px (valeurs de
   .exit-modal__text, main.css). */
.blc-sidebar-summary-modal .blc-sidebar__title-row {
  display: none !important;
}

.blc-sidebar-summary-modal .blc-sidebar__recap-item span {
  font-size: var(--font-size-sm, 0.875rem) !important;
  color: var(--color-text-muted, #6B7280) !important;
  opacity: 1 !important;
}

.blc-sidebar-summary-modal .blc-sidebar__recap-item strong {
  font-size: var(--font-size-sm, 0.875rem) !important;
  color: var(--color-primary, #1C1F3B) !important;
}

.blc-sidebar-summary-modal .blc-sidebar__recap-sub {
  font-size: 0.8125rem !important;
  color: var(--color-text-muted, #6B7280) !important;
  opacity: 1 !important;
}

/* En-tête aligné sur les autres modales (marges .blondeau-modal-content) */
.blc-sidebar-summary-modal .blc-fabric-modal__head {
  padding: var(--space-8) 64px var(--space-3) var(--space-8);
}

.blc-sidebar-summary-modal .blc-sidebar__summary {
  padding-left: var(--space-8) !important;
  padding-right: var(--space-8) !important;
}

/* La liste garde dans la sidebar une marge et un retrait propres à
   l'encart : dans la modale, les lignes s'alignent sur le titre. */
.blc-sidebar-summary-modal .blc-sidebar__recap {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Pied de modale — Détail du prix + Ajouter au panier/Imprimer, toujours
 * visibles (jamais dans la zone scrollable), alignés bas-droite comme demandé
 * — reste dans la colonne de droite du panneau, seul le corps au-dessus
 * défile (BUG-CALC-227). */
.blc-sidebar-summary-modal .blc-fabric-modal__foot {
  flex-shrink: 0;
  padding: 12px 20px 20px;
  border-top: 1px solid var(--color-border, #e5e1d8);
}
/* INERTE depuis le 2026-09-25 : .blc-sidebar__price ne transite plus par la
 * modale (il reste dans la sidebar, sous le bouton compact). Règle conservée
 * telle quelle — si le prix devait un jour revenir dans le pied de modale,
 * c'est ici que sa mise en page est déjà définie. */
.blc-sidebar-summary-modal .blc-fabric-modal__foot .blc-sidebar__price {
  display: flex !important; /* annulait le display:none ≤800px hors modale */
  padding: 0 0 10px !important;
}
.blc-sidebar-summary-modal .blc-fabric-modal__foot .blc-sidebar__actions {
  padding: 0 !important;
  margin: 0 !important;
}

/* Titre sidebar configuration */
.blc-sidebar__title {
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  /* 0.45 ne passe pas le contraste AA (~4,25:1, il faut 4,5:1) sur fond
     --blc-primary — 0.65 remonte à ~7,5:1. Ne pas repasser sous ce seuil. */
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Prix — sur fond navy */
.blc-sidebar__price {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  padding: 12px 16px 0;
  border-top: none;
  margin-top: 0;
}

/* Titre de la zone prix — reprend .blc-sidebar__title, seul l'espacement change.
 * Réduit à 6px (UX 2026-08) : Total TTC doit rester "collé" à son titre. */
.blc-sidebar__price-title {
  margin-bottom: 6px !important;
}

.blc-sidebar__price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.82rem;
  border-bottom: none;
}
.blc-sidebar__price-row:last-of-type { border-bottom: none; }
.blc-sidebar__price-row span   { color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; }
.blc-sidebar__price-row strong { color: rgba(255, 255, 255, 0.88); font-weight: 700; }
/* Ligne "principale" (montant mis en avant, gros + doré) — par défaut le TTC
 * (grand public, cf. template), bascule sur le HT pour un compte pro (isPro) :
 * updateSidebar() (calculator.js) retire/ajoute cette classe entre les deux
 * lignes au lieu d'empiler un second montant en plus du premier. */
.blc-sidebar__price-row--primary {
  padding: 2px 0 0;
  border-top: none;
  margin-top: 0;
}
.blc-sidebar__price-row--primary strong {
  color: var(--blc-accent);
  font-size: 1.2rem;
}

/* ── Preview produit — ratio 3:4 portrait (padding-bottom = 4/3 × 100%) ─ */
.blc-sidebar__preview {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 75% !important; /* 3÷4 = ratio paysage 4:3 */
  height: 0 !important;
  min-height: unset !important;
  border-radius: 12px !important;
  background: #f5f2ec !important;
  border: 1px solid #e8e2d8 !important;
  overflow: hidden !important;
  flex-shrink: 0;
  display: block !important;
}

/* Canvas uniquement — les contrôles Babylon.js gardent leur positionnement natif (bottom:8px right:8px) */
.blc-sidebar__preview > canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Canvas Babylon.js */
.blc-sidebar__preview canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px;
}

/* ── Preview 3D — reste côté sidebar, mais AU-DESSUS du bloc bleu, pas dedans
 * (demande atelier 2026-09-25, corrigée le même jour : la sidebar se
 * subdivise en 2 — preview en haut, bloc bleu .blc-sidebar juste en dessous
 * avec « Votre configuration »/prix/actions inchangés). calculator.js
 * l'injecte dans .blc-wizard__sidebar (via la classe additionnelle
 * .blc-wizard__preview), juste avant .blc-sidebar. Fond et bordure
 * transparents (fini le cadre crème opaque) ; conserve .blc-sidebar__preview
 * ci-dessus pour le ratio/overflow/canvas — seule l'apparence est surchargée
 * ici, le ratio (et sa compaction sur petite hauteur, @media max-height
 * 760/620px ci-dessus) reste celui de la sidebar, dont la preview fait de
 * nouveau partie visuellement. */
.blc-wizard__sidebar .blc-wizard__preview {
  background: transparent !important;
  border: 1px solid rgba(28, 31, 59, 0.15) !important;
  margin: 0 0 16px !important;
  /* Ne doit jamais être compressée par le flex column ci-dessus (.blc-wizard__sidebar) :
     toute la pression de manque de place se reporte sur .blc-sidebar (flex:1 1 auto),
     déjà conçu pour rétrécir via son propre overflow/scroll interne. */
  flex-shrink: 0;
}

/* ── Ajustement de la colonne gauche à la hauteur d'écran (2026-09-30) ──
 * Piloté par _fitSidebarColumn() (calculator.js), desktop uniquement
 * (> 960px, la colonne est empilée en dessous). Règles de l'atelier :
 *   1. le bloc bleu (.blc-sidebar) n'est jamais compressé ni coupé ;
 *   2. la preview s'écrase si la hauteur manque, sans jamais disparaître
 *      (plancher 120px, calculé en JS) — hauteur réelle via
 *      --blc-preview-h au lieu du ratio padding-bottom ;
 *   3. si même preview au plancher la colonne ne tient pas, elle déborde de
 *      l'écran (.is-overflow) : plus de plafond, bloc bleu à sa hauteur
 *      naturelle, et le point d'accroche sticky passe en bas (top calculé
 *      en JS, --blc-sidebar-fit-top) — la colonne défile avec la page
 *      jusqu'à ce que le bouton panier soit visible, puis reste collée.
 * Portée : sélecteurs descendants de .blc-wizard__sidebar — une preview
 * déplacée dans la modale récap n'est donc jamais affectée. */
@media (min-width: 961px) {
  .blc-wizard__sidebar.is-fitted .blc-wizard__preview {
    padding-bottom: 0 !important;
    height: var(--blc-preview-h) !important;
  }
  .blc-wizard__sidebar.is-overflow {
    max-height: none;
    top: var(--blc-sidebar-fit-top) !important;
  }
  .blc-wizard__sidebar.is-overflow .blc-sidebar {
    flex: 0 0 auto;
  }
}

/* ── Masquage des boîtes de preview (3D / swatch / scène rideau) ────────
 * .blc-sidebar__preview force display:block !important ci-dessus — un
 * style.display inline ne suffit pas à masquer. Le JS bascule donc
 * l'attribut natif [hidden], couvert ici par une règle plus spécifique. */
[data-product-preview][hidden],
[data-product-preview-swatch][hidden] {
  display: none !important;
}

/* ── Preview affichée seulement quand elle est dessinable (2026-10-03) ──
 * .is-preview-pending posée sur .blc-wizard par PREVIEW.update()
 * (calculator.js) tant que forme + cotes (ou hauteur/largeur rideau) ne
 * sont pas saisies — plus d'icône placeholder ni de rendu par défaut. */
.blc-wizard.is-preview-pending [data-product-preview],
.blc-wizard.is-preview-pending [data-product-preview-swatch] {
  display: none !important;
}

/* ── Preview carrée quand la place le permet (demande atelier 2026-10-03) ──
 * Desktop (> 960px) et hauteur d'écran ≥ 761px uniquement : les paliers
 * @media max-height 760/620px (ratio réduit) et le mode empilé tablette/
 * mobile gardent leur ratio d'origine. Sur écran plus bas que la colonne,
 * _fitSidebarColumn() réduit toujours la hauteur (.is-fitted ci-dessus,
 * plus spécifique) — le carré n'est qu'une hauteur maximale. */
@media (min-width: 961px) and (min-height: 761px) {
  .blc-wizard__sidebar .blc-wizard__preview {
    padding-bottom: 100% !important;
  }
}

/* ── Apparition animée (PREVIEW._reveal, calculator.js) ──────────────
 * La boîte grandit de 0 à sa hauteur finale (hauteur inline posée par le
 * JS), le contenu arrive légèrement grossi puis se pose à sa taille. */
.blc-wizard__preview.is-revealing {
  transition: height 0.55s cubic-bezier(0.22, 0.8, 0.24, 1) !important;
}
.blc-wizard__preview.is-revealing > canvas,
.blc-wizard__preview.is-revealing > .blc-preview__fabric-swatch {
  animation: blc-preview-arrive 0.65s cubic-bezier(0.22, 0.8, 0.24, 1) both;
}
@keyframes blc-preview-arrive {
  from { opacity: 0; transform: scale(1.18); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .blc-wizard__preview.is-revealing,
  .blc-wizard__preview.is-revealing > canvas,
  .blc-wizard__preview.is-revealing > .blc-preview__fabric-swatch {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Bouton « Changer de coloris » (PREVIEW._syncColorisBtn) ─────────
 * Même gabarit que la loupe (.blc-choice__zoom-btn : 24px, rond, blanc
 * 90 %), posé à sa gauche avec 6px d'écart (6 + 24 + 6). Toute évolution
 * de la loupe doit être répercutée ici. Masqué dans la modale
 * d'agrandissement 3D (aucun bouton dans la modale, comme la loupe) ; la
 * règle .blc-fabric-modal__media-3d .blc-choice__zoom-btn le masque déjà
 * dans la modale récap. */
.blc-choice__zoom-btn.blc-preview__coloris-btn {
  right: 36px;
}
.blc-preview-modal__slot .blc-preview__coloris-btn {
  display: none !important;
}

/* Swatch tissu à plat (tissu non seamless) — même pattern que le canvas :
 * le wrapper porte .blc-sidebar__preview (cadre), l'image est un enfant
 * absolument positionné qui remplit la zone visible (padding-bottom trick). */
.blc-preview__fabric-swatch {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* cover (pas contain) : plus jamais de bande vide, cadre entièrement
     rempli — demande atelier 2026-09-21, BUG-CALC-223 */
  object-fit: cover !important;
  border-radius: 12px;
}

/* .blc-preview__svg : doublon strict retiré (identique au plugin calculator.css) */

.blc-preview__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  width: 100%;
  text-align: center;
}
.blc-preview__empty svg  { width: 52px; height: 44px; opacity: 0.3; }
.blc-preview__empty span { font-size: 0.72rem; color: #aaa; font-style: italic; }

/* ── Wrapper « Votre configuration » (titre + récap) ─────────────────────
 * BUG-CALC-240 (2026-09-25) : doit être lui-même un conteneur flex vertical
 * pour transmettre la compression à .blc-sidebar__recap ci-dessous (flexbox
 * ne propage flex/flex-shrink qu'à l'ENFANT DIRECT d'un display:flex — sans
 * cette règle, .blc-sidebar__summary reste un bloc figé à la taille de son
 * contenu, cf. commentaire sur .blc-sidebar > *:not(.blc-sidebar__summary)
 * plus haut). min-height:0 annule le min-height:auto par défaut d'un enfant
 * flex (qui l'empêcherait sinon de descendre sous la hauteur de son contenu,
 * même avec flex-shrink autorisé) — c'est ce qui permet à .blc-sidebar__recap
 * de vraiment défiler en interne plutôt que de repousser prix/panier hors
 * champ. */
.blc-sidebar__summary {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.blc-sidebar__summary > .blc-sidebar__title-row {
  flex-shrink: 0;
}

/* ── Recap / résumé — box blanche arrondie ─────────────────────────────
 * Seule zone scrollable en interne de la sidebar (cf. .blc-sidebar) : absorbe
 * l'espace disponible et défile plutôt que de repousser preview/prix/boutons
 * hors de l'écran. */
.blc-sidebar__recap {
  list-style: none;
  background: #fff;
  /* margin-top supprimé (12px à l'origine) : cumulé avec le padding-bottom de
   * .blc-sidebar__title-row, l'espace sous le premier titre H3 ("Votre
   * configuration") atteignait 22px, contre 12px sous le second titre ("Détail
   * du prix") — quasiment le double, sans raison fonctionnelle. Le
   * padding-bottom de .blc-sidebar__title-row (6px) est désormais le seul
   * espaceur, symétrique au margin-bottom de .blc-sidebar__price-title (6px)
   * (UX 2026-08). Seule .blc-sidebar__recap peut absorber la hauteur
   * disponible ; chaque px d'espacement fixe économisé ailleurs lui profite
   * sur les petits écrans. */
  margin: 0 16px 0 !important;
  padding: 10px 12px !important;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 48px; /* plancher lisible — au-delà, défile plutôt que de disparaître */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e0d8c8 transparent;
}

.blc-sidebar__recap-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.82rem;
  border-bottom: 1px solid #f0ece4;
}
.blc-sidebar__recap-item:last-child { border-bottom: none; }
.blc-sidebar__recap-item span  { color: var(--blc-muted); font-size: 0.75rem; flex-shrink: 0; }
/* Icône du jeu commun du site (blondeau-icons.js) devant le libellé, qui
   reste écrit — même icône que la barre du calculateur et le panier */
.blc-sidebar__recap-item span > .blondeau-icon { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
/* .blc-sidebar__recap-item strong : doublon strict retiré (identique au plugin calculator.css) */
.blc-sidebar__recap-sub{ color: var(--blc-muted); font-size: 0.7rem; font-weight: 400; }

.blc-sidebar__recap-empty { display: block !important; font-size: 0.78rem; color: var(--blc-muted); font-style: italic; }

/* ── Révélation progressive (UX 2026-09) ─────────────────────────────────
 * .blc-sidebar.is-empty est posée par checkSummary() (calculator.js) tant
 * qu'aucun champ n'est renseigné : le récap (vide), le détail du prix (à
 * "—") et les boutons (grisés) n'ont rien d'utile à montrer — seule la
 * preview reste, complétée d'une invite discrète. */
/* Lisibilité (inventaire des messages M18, 2026-09-30) : 13 px, blanc 85 %
 * (contraste ≈ 11,9:1 sur le marine, contre 4,3:1 à 45 %), sans italique. */
.blc-sidebar__empty-hint {
  display: none;
  margin: 10px 16px 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  font-style: normal;
  text-align: center;
}
.blc-sidebar.is-empty .blc-sidebar__empty-hint { display: block; }
.blc-sidebar.is-empty .blc-sidebar__title-row,
.blc-sidebar.is-empty .blc-sidebar__recap,
.blc-sidebar.is-empty .blc-sidebar__price,
.blc-sidebar.is-empty [data-sidebar-actions],
/* Boutons compacts (BUG-CALC-225) : même règle de révélation progressive que
 * le reste — rien à ouvrir dans une modale tant que rien n'est configuré,
 * ils n'apportent alors rien de plus que .blc-sidebar__empty-hint déjà visible
 * (corrigé le 2026-09-21, BUG-CALC-232). */
.blc-sidebar.is-empty .blc-sidebar__compact-actions {
  display: none !important;
}

/* La preview (canvas 3D / swatch tissu) n'a rien de significatif à montrer tant
 * qu'aucun paramètre n'est saisi — masquée elle aussi le temps de l'état vide,
 * plutôt que d'afficher un rendu par défaut (ex. rideau) ou l'icône placeholder.
 * Preview injectée en sœur de .blc-sidebar (2026-09-25, cf. .blc-wizard__preview
 * ci-dessous), pas en descendante — la classe .is-empty est donc posée en miroir
 * sur .blc-wizard lui-même (checkSummary(), calculator.js), seul ancêtre commun
 * aux deux. */
.blc-wizard.is-empty [data-product-preview],
.blc-wizard.is-empty [data-product-preview-swatch] {
  display: none !important;
}

/* Note gabarit dans le récap sidebar */
.blc-sidebar__recap-item--gabarit {
  color: #b45309;
  border-top: 1px dashed #fde68a;
  margin-top: 4px;
  padding-top: 8px;
}
.blc-sidebar__recap-item--gabarit span { color: #b45309; font-size: 0.85rem; }
.blc-sidebar__recap-item--gabarit strong { color: #92400e; }

/* Banner gabarit dans l'étape Forme (frontend calculateur) */
.blc-gabarit-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 0.84rem;
  color: #92400e;
  line-height: 1.45;
}
.blc-gabarit-notice__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
/* Icône SVG à trait (calculator.js, _noticeSvg) — même taille que dans .blc-notice */
.blc-gabarit-notice__icon svg { display: block; width: 18px; height: 18px; margin-top: 1px; }

/* Badge "Obligatoire" (fichier gabarit) — même accent que .blc-gabarit-notice */
.blc-badge--required {
  color: #92400e !important;
  background: #fde68a !important;
}

/* Forme « devis obligatoire » — étapes verrouillées après le choix de la forme.
 * Sélecteur composé (.blc-step.blc-step--quote-locked) : spécificité supérieure à
 * .blc-step--pending (opacity/pointer-events !important, plus loin dans ce fichier)
 * pour rester prioritaire quel que soit l'ordre des règles. */
.blc-step.blc-step--quote-locked {
  opacity: 0.45 !important;
  pointer-events: none !important;
  filter: grayscale(0.6);
}
.blc-step.blc-step--quote-locked .blc-step__header {
  cursor: not-allowed !important;
}

/* Bandeau « contacter l'atelier » — dans le bloc Forme, sous le bandeau
 * « Gabarit requis » le cas échéant. Mêmes couleurs/gabarit visuel que
 * .blc-gabarit-notice (fond ambre, bordure, texte) : la classe est ajoutée
 * en JS (blc-quote-notice blc-gabarit-notice), seules les propriétés
 * propres à son contenu (icône plus grande, corps flexible, bouton CTA,
 * espacement quand il suit le bandeau gabarit) sont redéfinies ici.
 * (.blc-step__body-inner > * + * force margin-top à 0 sur ses enfants
 * directs : l'espacement entre les deux bandeaux passe donc par une règle
 * plus spécifique ci-dessous plutôt que par la marge de .blc-gabarit-notice.) */
.blc-step__body-inner > .blc-quote-notice {
  margin-top: 8px !important;
}
.blc-quote-notice .blc-quote-notice__icon { font-size: 1.1rem; }
.blc-quote-notice__body { flex: 1; min-width: 0; }
/* Titre = enfant direct uniquement : un <strong> saisi dans le texte riche
 * backoffice (gabarit_message / quote_message) reste en ligne. */
.blc-quote-notice__body > strong { display: block; font-size: 0.84rem; margin-bottom: 4px; }
.blc-quote-notice__body p { margin: 0; font-size: 0.84rem; line-height: 1.45; }
/* Bouton CTA : bouton standard du site (.btn.btn--primary — bleu marine de
 * la charte, shimmer au survol déjà fourni par .btn dans main.css), pas le
 * système de boutons propre au calculateur (.blc-wizard__btn). */
.blc-quote-notice__btn {
  flex-shrink: 0;
  align-self: center;
}
@media (max-width: 640px) {
  .blc-quote-notice { flex-direction: column; }
  .blc-quote-notice__btn { align-self: stretch; justify-content: center; }
}

/* ── Bandeaux de message unifiés (.blc-notice) ───────────────────────────
 * Modèle unique de tous les messages du calculateur (inventaire des
 * messages, 2026-09-30), valeurs reprises à l'identique du bandeau Devis
 * (.blc-quote-notice / .blc-gabarit-notice ci-dessus) : icône à gauche,
 * titre gras puis passage à la ligne, texte 0,84rem. Toute évolution de l'un
 * doit être répercutée sur l'autre.
 * Variantes : la couleur n'est jamais seule porteuse de sens (icône + titre),
 * contraste texte/fond >= 7:1. warning = couleurs exactes de .blc-gabarit-notice.
 * Construit par calculator.js (_noticeHtml / _noticeInner). */
.blc-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 10px 14px;
  border: 1px solid;
  border-radius: 6px;
  font-size: 0.84rem;
  line-height: 1.45;
}
.blc-notice__icon { flex-shrink: 0; line-height: 0; }
.blc-notice__icon svg { display: block; width: 18px; height: 18px; margin-top: 1px; }
.blc-notice__body { flex: 1; min-width: 0; }
.blc-notice__title { display: block; font-weight: 700; font-size: 0.84rem; margin-bottom: 4px; }
.blc-notice__title:last-child { margin-bottom: 0; }
.blc-notice__text { margin: 0; font-size: 0.84rem; line-height: 1.45; }
.blc-notice__action { margin-top: 10px; }
.blc-notice--info    { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.blc-notice--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.blc-notice--error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* Keyframes shimmer — redéfinis ici pour garantir la disponibilité sur les pages calculateur */
@keyframes btnShimmer {
  0%   { left: -75%; opacity: 1; }
  100% { left: 125%;  opacity: 0; }
}

/* Bouton panier sidebar — couleurs identiques au bouton fiche produit */
.blc-wizard__btn--cart {
  width: 100% !important;
  justify-content: center !important;
  background: var(--color-primary, #1C1F3B) !important;
  color: #fff !important;
  padding: 15px 20px !important;
  font-size: 0.95rem !important;
  border-radius: var(--radius-md, 6px) !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  transition: background 0.2s, transform 0.12s !important;
  position: relative !important;
  overflow: hidden !important;
}
.blc-wizard__btn--cart::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.blc-wizard__btn--cart:hover:not(:disabled)::before {
  opacity: 1;
  animation: btnShimmer 0.55s ease forwards;
}
.blc-wizard__btn--cart:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary, #1C1F3B) 82%, #000) !important;
}

/* ── Header progression MASQUÉ (ni barre ni compteur) ────────────────── */
.blc-wizard__header { display: none !important; }

/* ── Étapes : sections ouvertes, pleine largeur, sans lignes parasites ──
 * Pas de padding-top : la première étape doit démarrer au même niveau que
 * le haut de la sidebar (cf. --blc-sidebar-top plus haut, UX 2026-08).
 * padding-bottom conservé à 16px pour matcher le padding-bottom de
 * .blc-sidebar (16px) — sans quoi le bas de la sidebar dépasse le bas de
 * la dernière étape une fois collée. margin-bottom:0 !important nécessaire
 * pour neutraliser la fuite de « .entry-content ul, .entry-content ol »
 * (main.css) — plus spécifique que le simple margin:0 ci-dessous et qui
 * ajoutait 16px invisibles en trop sous la dernière étape (asymétrie
 * haut/bas + bas de sidebar mal aligné). */
.blc-steps {
  gap: 16px !important;
  list-style: none;
  padding: 0 0 16px !important;
  margin: 0;
  margin-bottom: 0 !important;
  width: 100%;
}

.blc-step {
  border: none !important;
  border-bottom: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(28, 31, 59, 0.07) !important;
  overflow: visible !important;
  background: #fff;
  width: 100%;
  /* Neutralise la fuite de « .entry-content ol li » (main.css, 8px) — l'espacement
   * entre étapes est déjà géré par le gap:16px du flex .blc-steps ; ce résidu
   * décalait le bas de la dernière étape par rapport au bas de la sidebar. */
  margin-bottom: 0 !important;
  /* Décalage scroll : header + sticky (48px) + gap visuel — même 24px que
   * --blc-sidebar-top, pour un espace sous la barre flottante identique
   * entre la sidebar et les cartes d'étape (UX 2026-08). */
  /* Header + barre d'étapes déjà compensés par scroll-padding-top (html,
   * règle plus bas) : reste l'écart visuel (16 + 8 = 24px, comme avant). */
  scroll-margin-top: 8px;
}

/* Etapes interactives même vides */
.blc-step--pending {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Éléments cachés */
.blc-step__chevron { display: none !important; }
.blc-step__chip    { display: none !important; }

/* ── En-tête style homemaison — une seule ligne (UX 2026-07) ─────────── */
.blc-step__header {
  padding: 10px 20px !important;
  border-left: none !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  cursor: default !important;
  background: var(--color-primary, #1C1F3B) !important;
  gap: 12px !important;
}

.blc-step__header:hover { background: var(--color-primary, #1C1F3B) !important; }

/* Structure : num (bulle DOM) + info (titre + desc) */
/* .blc-step__info : doublon strict retiré (identique au plugin calculator.css) */

.blc-step__title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* Corps toujours visible */
.blc-step__body {
  display: block !important;
  overflow: visible !important;
  width: 100%;
}

.blc-step__body-inner {
  padding: 20px 28px 20px !important;
  width: 100%;
  box-sizing: border-box;
}
/* Le margin-bottom du plugin crée un double-espace — on l'annule */
.blc-step__content {
  margin-bottom: 0 !important;
}

/* Tout le contenu utilise la largeur complète */
.blc-step__content,
.blc-choices,
.blc-dims {
  width: 100%;
  box-sizing: border-box;
}

/* ── Grilles de choix — labels identiques ────────────────────────────── */
.blc-choices {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 10px !important;
  width: 100%;
}
/* 2 colonnes pleine largeur — double classe pour passer devant .blc-choices !important */
.blc-choices.blc-choices--2col {
  grid-template-columns: repeat(2, 1fr) !important;
}
/* 3 colonnes pleine largeur — même logique */
.blc-choices.blc-choices--3col {
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100%;
}
/* Forme, Densité et Usage du coussin : repassent à 2 colonnes sur mobile
   (Usage ajouté le 2026-10-01 à la demande de l'atelier — même règle exacte
   que Forme/Densité, la 3e carte se place seule à gauche sur la 2e ligne
   comme pour les formes). */
@media (max-width: 600px) {
  [data-step-id="shape"] .blc-choices.blc-choices--3col,
  [data-step-id="density"] .blc-choices.blc-choices--3col,
  [data-step-id="usage"] .blc-choices.blc-choices--3col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Label standard — bordure 2px (valeur plugin conservée) */
.blc-choice__label {
  height: 110px !important;
  min-height: 110px !important;
  max-height: 110px !important;
  padding: 14px 10px !important;
  font-size: 0.83rem !important;
  border-radius: 8px !important;
  border: 2px solid #e8e4dc !important;
  transition: border-color 0.15s, background 0.15s, transform 0.12s !important;
  cursor: pointer !important;
  overflow: hidden;
  box-sizing: border-box;
}

.blc-choice__label > span:not(.blc-choice__icon):not(.blc-choice__sub) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Hover harmonisé sur tous les types de choix */
.blc-choice__label:hover,
.blc-choice--img .blc-choice__label:hover,
.blc-rideau-options .blc-choice__label:hover,
.blc-finition .blc-choice__label:hover,
.blc-bas-rideau .blc-choice__label:hover,
.blc-shape-choice .blc-choice__label:hover {
  border-color: var(--color-accent, #CCA63B) !important;
}
/* Éléments avec frame image — hover et sélection harmonisés */
.blc-choice--img:hover .blc-choice__frame {
  border-color: var(--color-accent, #CCA63B) !important;
}
.blc-choice--img input:checked ~ .blc-choice__frame {
  box-shadow: none !important; /* supprime le double-bord accentué */
}

.blc-choice:not(.blc-choice--pill) input:checked + .blc-choice__label {
  border-color: var(--blc-accent) !important;
  background: color-mix(in srgb, var(--blc-accent) 7%, #fff) !important;
  box-shadow: none !important; /* supprime l'effet double-bordure */
}
/* Couleur du passepoil (.blc-choice--sub, calculator.js STEP finition_housse) :
 * même sélection que les pastilles ci-dessous — fond bleu primaire, texte blanc.
 * Toute évolution des pastilles sélectionnées est à répercuter ici. */
body.has-calculator .blc-choice--sub:has(input:checked),
body.has-calculator .blc-choice--sub.blc-choice--selected {
  border-color: var(--color-primary, #1C1F3B) !important;
  background: var(--color-primary, #1C1F3B) !important;
  color: #fff !important;
}
body.has-calculator .blc-choice--sub:has(input:checked) .blc-choice__name,
body.has-calculator .blc-choice--sub.blc-choice--selected .blc-choice__name {
  color: #fff !important;
}
/* Pills sélectionnées : fond bleu primaire + texte blanc (cohérent avec les autres cartes) */
.blc-choice--pill input:checked + .blc-choice__label {
  border-color: var(--color-primary, #1C1F3B) !important;
  background: var(--color-primary, #1C1F3B) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ── Dimensions ──────────────────────────────────────────────────────── */
.blc-dims {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 16px !important;
  width: 100%;
}

.blc-dim-input-wrap { border-radius: 8px !important; }
.blc-dim-input-wrap input[type="number"] { font-size: 1rem !important; }

/* ── Barre sticky calculateur ────────────────────────────────────────── */
.blc-sticky-bar--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  z-index: 160; /* au-dessus des dropdowns internes (150) mais sous le header nav (200) */
}

.blc-sticky-bar__inner {
  width: 100%;
  background-color: var(--color-primary);
}

/* Barre fine (maquette validée par l'atelier le 2026-10-13, proposition B) :
 * jauge de progression + « Reste à choisir » + prix + bouton panier réduit.
 * Hauteur unique --blc-sticky-height (36px, 44px sous 768px pour des zones
 * de toucher confortables) : tout ce qui se cale sous la barre — sidebar,
 * décalage du contenu, réserve de défilement — lit cette variable, plus
 * aucune hauteur en dur. Les choix déjà faits se lisent dans la liste
 * ouverte par la jauge, copie exacte de « Votre configuration ». */
:root { --blc-sticky-height: 36px; }

/* Contenu centré à la même largeur que le reste du site */
.blc-sticky-bar__content {
  max-width: var(--container-max, 1440px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 2rem);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--blc-sticky-height, 36px);
  height: var(--blc-sticky-height, 36px);
  overflow: hidden;
}

.blc-sticky-bar__steps { display: flex; align-items: center; flex-shrink: 0; }

/* Jauge : un trait par étape, compteur, chevron — ouvre la liste */
.blc-sticky-gauge {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 28px !important; padding: 0 6px; margin-left: -6px; /* !important : plancher 44px des boutons du site (accessibility.css) */
  border: none; border-radius: 5px; background: none;
  color: #fff; font-family: inherit; font-size: 0.75rem; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.blc-sticky-gauge:hover,
.blc-sticky-gauge[aria-expanded="true"] { background: rgba(255,255,255,0.12); }
.blc-sticky-gauge__track { display: inline-flex; gap: 2px; }
/* Trait à faire : blanc à 45 % sur bleu nuit (≥ 3:1, WCAG 1.4.11) */
.blc-sticky-gauge__track i { width: 12px; height: 5px; border-radius: 2px; background: rgba(255,255,255,0.45); }
.blc-sticky-gauge__track i.is-on { background: var(--color-accent, #CCA63B); }
.blc-sticky-gauge__chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.15s ease; }
.blc-sticky-gauge[aria-expanded="true"] .blc-sticky-gauge__chevron { transform: rotate(180deg); }

/* « Reste à choisir » — pastille cliquable qui conduit au champ attendu :
 * fond, filet doré et flèche la désignent comme un bouton ; « puis … » suit
 * immédiatement, en texte simple (non cliquable). */
.blc-sticky-bar__sels {
  flex: 1;
  display: flex; gap: 10px; align-items: center;
  overflow: hidden; min-width: 0;
}
.blc-sticky-next {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; max-width: 100%; min-height: 26px !important; height: 26px; padding: 0 10px;
  border: 1px solid var(--color-accent, #CCA63B); border-radius: 999px; background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8); font-family: inherit; font-size: 0.75rem; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
button.blc-sticky-next:hover,
button.blc-sticky-next:focus-visible { background: var(--color-accent, #CCA63B); color: var(--color-primary, #1C1F3B); }
.blc-sticky-next strong { color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
button.blc-sticky-next:hover strong,
button.blc-sticky-next:focus-visible strong { color: var(--color-primary, #1C1F3B); }
.blc-sticky-next__arrow { width: 12px; height: 12px; flex-shrink: 0; color: var(--color-accent, #CCA63B); }
button.blc-sticky-next:hover .blc-sticky-next__arrow,
button.blc-sticky-next:focus-visible .blc-sticky-next__arrow { color: var(--color-primary, #1C1F3B); }
.blc-sticky-next--done { border-color: transparent; background: none; padding: 0; cursor: default; }
.blc-sticky-next__then { color: rgba(255,255,255,0.75); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .blc-sticky-next { transition: none; } }

/* Liste ouverte par la jauge — sous la barre, alignée sur le contenu */
.blc-sticky-panel-wrap {
  position: relative;
  max-width: var(--container-max, 1440px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 2rem);
}
.blc-sticky-panel {
  position: absolute; top: 6px; left: var(--container-padding, 2rem);
  width: min(340px, calc(100vw - 2 * var(--container-padding, 2rem)));
  max-height: min(70vh, 520px); overflow-y: auto;
  padding: 12px 14px;
  background: #fff; color: var(--color-primary, #1C1F3B);
  border: 1px solid var(--color-border, #E5E1D8); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(28, 31, 59, 0.2);
}
.blc-sticky-panel[hidden] { display: none; }
.blc-sticky-panel__title {
  margin: 0 0 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted, #6B7280);
}
.blc-sticky-panel__title + .blc-sticky-panel__title,
.blc-sticky-panel__recap + .blc-sticky-panel__title { margin-top: 12px; }
.blc-sticky-panel__recap,
.blc-sticky-panel__todo { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.blc-sticky-panel__todo li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.blc-sticky-panel__go {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: auto; min-height: 32px !important; padding: 2px 8px; margin: 0 -8px; box-sizing: content-box;
  border: none; border-radius: 5px; background: none;
  color: var(--color-accent-text, #866A1E); font-family: inherit; font-size: 0.82rem; font-weight: 700; text-align: left;
  cursor: pointer;
}
.blc-sticky-panel__go:hover { background: var(--color-bg-alt, #F8F7F5); }
/* Lignes recopiées de « Votre configuration » : couleurs redonnées ici, les
 * variables --blc-* de la sidebar n'existant pas hors du calculateur */
.blc-sticky-panel .blc-sidebar__recap-item { margin: 0 !important; list-style: none !important; }
.blc-sticky-panel .blc-sidebar__recap-item span { color: var(--color-text-muted, #6B7280); }
.blc-sticky-panel .blc-sidebar__recap-item strong { color: var(--color-primary, #1C1F3B); font-weight: 700; text-align: right; }
.blc-sticky-panel .blc-sidebar__recap-sub { color: var(--color-text-muted, #6B7280); font-size: 0.7rem; font-weight: 400; }
.blc-sticky-panel__go span { font-weight: 400; font-size: 0.75rem; color: var(--color-text-muted, #6B7280); }

/* Champ désigné par « Reste à choisir » : mis en valeur le temps de le repérer */
/* Cadre posé sur la page par calculator.js (_spotlightField()), calé sur les
 * éléments visibles du champ : même écart des quatre côtés. Sous la barre
 * collante (160) et le header. */
.blc-field-spotlight {
  position: absolute;
  z-index: 100;
  box-sizing: border-box;
  border: 3px solid var(--color-accent, #CCA63B);
  border-radius: 12px;
  pointer-events: none;
  animation: blcSpotlight 1.6s ease-out 1;
}
@keyframes blcSpotlight {
  0%   { box-shadow: 0 0 0 0 rgba(204, 166, 59, 0.55); }
  100% { box-shadow: 0 0 0 18px rgba(204, 166, 59, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .blc-field-spotlight { animation: none; }
  .blc-sticky-gauge__chevron { transition: none; }
}

.blc-sticky-bar__price { flex-shrink: 0; text-align: right; line-height: 1.2; white-space: nowrap; margin-left: auto; }
.blc-sticky-bar__price strong { display: inline; font-size: 0.9rem; font-weight: 800; color: var(--color-accent, #c9a227); }
.blc-sticky-bar__price span   { margin-left: 4px; font-size: 0.6rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.07em; } /* 0.38 → 0.6 (WCAG 1.4.3, 2026-10-01) */

.blc-sticky-bar__cart {
  flex-shrink: 0; padding: 0 12px; height: 28px; min-height: 28px !important;
  background: var(--color-accent, #c9a227); color: var(--color-primary, #1a1a2e);
  border: none; border-radius: 5px; font-weight: 700; font-size: 0.75rem;
  cursor: pointer; font-family: inherit; white-space: nowrap; margin-left: 0;
  transition: background 0.2s;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.blc-sticky-bar__cart::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.blc-sticky-bar__cart:hover:not(:disabled)::before {
  opacity: 1;
  animation: btnShimmer 0.55s ease forwards;
}
.blc-sticky-bar__cart:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent, #c9a227) 82%, #000);
}
.blc-sticky-bar__cart:disabled,
.blc-sticky-bar__cart[aria-disabled="true"] {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.35) !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Sticky — collé sous le menu, sans espace ───────────────────── */
/* Top calculé statiquement en CSS par état (desktop/mobile × admin/visiteur
 * × scrolled/non-scrolled) — changement discret à chaque bascule de classe,
 * aucune mesure JS nécessaire ici (perf : un reflow forcé à chaque frame de
 * scroll créait du jank sur tout le header, y compris son propre
 * rétrécissement au scroll — BUG-HEADER-JANK).
 * Seul un cas ne peut pas être une constante CSS : sur mobile, la barre
 * admin WP n'est pas fixed et défile avec la page, donc le bas du header
 * change en continu pendant le scroll. Pour ce cas précis (et lui seul),
 * assets/js/main.js (updateAdminBarTop()) mesure la position réelle et la
 * pose dans --blc-sticky-offset, qui prend alors le pas sur la valeur
 * statique via le fallback de var(). Partout ailleurs cette variable est
 * absente et chaque règle utilise sa propre valeur figée. */
.blc-sticky-bar {
  position: fixed !important;
  top: var(--blc-sticky-offset, var(--header-total-height, 123px)) !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.site-header.is-scrolled ~ .blc-sticky-bar {
  top: var(--blc-sticky-offset, calc(var(--header-scrolled-topbar, 46px) + var(--header-nav-height, 52px) + var(--header-accent-height, 3px))) !important;
}

/* Barre admin WordPress connecté (desktop, fixed 32px — pas besoin de JS) */
/* -1px : --header-accent-height vaut 3px mais l'accent bar est rendue à 2px */
body.admin-bar .blc-sticky-bar {
  top: var(--blc-sticky-offset, calc(31px + var(--header-total-height, 123px))) !important;
}
body.admin-bar .site-header.is-scrolled ~ .blc-sticky-bar {
  top: var(--blc-sticky-offset, calc(31px + var(--header-scrolled-topbar, 46px) + var(--header-nav-height, 52px) + var(--header-accent-height, 3px))) !important;
}

/* Sidebar : mêmes variantes que .blc-sticky-bar ci-dessus (header compacté /
 * admin-bar desktop) — `top` et `max-height` (règle de base plus haut)
 * suivent automatiquement puisqu'ils référencent --blc-sidebar-top. */
.site-header.is-scrolled ~ .site-main .blc-wizard__sidebar {
  --blc-sidebar-top: calc(var(--blc-sticky-offset, calc(var(--header-scrolled-topbar, 46px) + var(--header-nav-height, 52px) + var(--header-accent-height, 3px))) + var(--blc-sticky-height, 36px) + 24px);
}
body.admin-bar .blc-wizard__sidebar {
  --blc-sidebar-top: calc(var(--blc-sticky-offset, calc(31px + var(--header-total-height, 123px))) + var(--blc-sticky-height, 36px) + 24px);
}
body.admin-bar .site-header.is-scrolled ~ .site-main .blc-wizard__sidebar {
  --blc-sidebar-top: calc(var(--blc-sticky-offset, calc(31px + var(--header-scrolled-topbar, 46px) + var(--header-nav-height, 52px) + var(--header-accent-height, 3px))) + var(--blc-sticky-height, 36px) + 24px);
}

/* Décalage du contenu exactement à la hauteur du sticky (48px) — aucun espace.
 * Le hero/fil d'Ariane au-dessus du wizard doit rester flush contre la barre ;
 * l'espace de 24px propre au wizard (identique à --blc-sidebar-top) est ajouté
 * séparément sur .blc-wizard ci-dessous, pas ici (UX 2026-08). */
body.has-calculator .site-main {
  padding-top: var(--blc-sticky-height, 36px);
}

/* Aucun tissu disponible pour cette configuration : la sticky bar est
 * masquée côté JS (calculator.js, no_fabrics_available) — annule l'espace
 * ci-dessus réservé pour elle, sinon un vide reste entre le hero et le
 * message de blocage. */
body.has-calculator.has-calculator--no-sticky-bar .site-main {
  padding-top: 0;
}

/* ── Bouton panier toujours présent ──────────────────────────────────── */
.blc-wizard__btn--cart[aria-disabled="true"] {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.blc-wizard__btn--cart[aria-disabled="false"],
.blc-wizard__btn--cart:not([aria-disabled]) {
  opacity: 1;
}

/* ── Bouton Imprimer / PDF toujours présent — même grisage que le panier ── */
.blc-wizard__btn--print[aria-disabled="true"] {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
}
.blc-wizard__btn--print[aria-disabled="false"],
.blc-wizard__btn--print:not([aria-disabled]) {
  opacity: 1;
}

/* ── Nom hors cadre (usage, forme, tissu) ────────────────────────────── */
.blc-choice__name {
  display: block;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--blc-primary, #1C1F3B);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.3;
}
.blc-choice__name em {
  font-style: normal;
  color: var(--blc-muted);
  font-size: 0.7rem;
  display: block;
}

/* Usage et forme : icône dans cadre carré, nom en dessous */
.blc-shape-choice {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Formes : cartes ratio 16/9 (au lieu de carrées), image bord à bord (style rideau) —
 * même ratio que les cartes Densité (.blc-choices--3col .blc-choice--img .blc-choice__frame
 * plus bas) pour une hauteur identique entre les deux blocs, désormais toujours
 * en grille 3 colonnes quel que soit le métier (calculator.js). */
.blc-shape-choice .blc-choice__label {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: unset !important;
  min-height: unset !important;
  max-height: unset !important;
  padding: 6px 6px 10px !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  overflow: hidden !important;
  background: #fff;
}

/* Formes : sans marge, l'image remplit l'encart (cover, centrée) — décision
 * atelier 2026-10-27 : aucun espace vide dans un encart, l'encart garde ses
 * dimensions et c'est l'image qui s'adapte (ex-padding 10 % + contain). */
.blc-shape-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block;
  padding: 0 !important;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .blc-step__header      { padding: 9px 16px !important; }
  .blc-step__body-inner  { padding: 16px 20px 22px !important; }
  .blc-choices { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; }
  .blc-choices.blc-choices--2col { grid-template-columns: repeat(2, 1fr) !important; }
  .blc-choices.blc-choices--3col { grid-template-columns: repeat(3, 1fr) !important; }
  /* Sous 768px (mobile/tablette) : priorité aux indicateurs d'étapes
   * (progression validée + navigation rapide entre étapes) sur le détail
   * de configuration — la place manque pour tout afficher. Les puces de
   * sélection (icônes + valeurs) sont donc masquées entièrement plutôt que
   * les étapes (ancien comportement inverse, corrigé). Le détail complet
   * reste consultable dans la sidebar / le récapitulatif. */
  /* Barre fine sous 768px (2026-10-13) : 44px pour des zones de toucher
   * confortables ; jauge resserrée, « Reste à choisir » réduit à son objet,
   * « TTC » retiré, bouton panier en icône seule (nom complet conservé dans
   * aria-label et title, calculator.js) — tout tient à 320px, le bouton ne
   * sort plus de l'écran. */
  :root { --blc-sticky-height: 44px; }
  .blc-sticky-bar__content { gap: 8px; }
  .blc-sticky-gauge { min-height: 36px !important; gap: 5px; }
  .blc-sticky-gauge__track i { width: 7px; }
  .blc-sticky-gauge__chevron { display: none; }
  .blc-sticky-next { min-height: 30px !important; height: 30px; padding: 0 10px; }
  .blc-sticky-next__lead,
  .blc-sticky-next__then { display: none; }
  .blc-sticky-bar__price span { display: none; }
  /* Prix partiel du coussin (tissu à venir) : la mention « hors tissu » reste
   * affichée, sans elle le montant passerait pour le prix complet — sous le
   * montant, pour ne pas recouvrir « Reste à choisir » à 320px */
  .blc-sticky-bar__price--partial { line-height: 1.1; }
  .blc-sticky-bar__price--partial span { display: block; margin-left: 0; }
  .blc-sticky-bar__cart { width: 44px; min-width: 44px; height: 36px; min-height: 36px !important; padding: 0; justify-content: center; }
  .blc-sticky-bar__cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .blc-sticky-panel { left: var(--container-padding, 1rem); }
}

/* Rappel BUG-CALC-166 : pas de padding vertical ajouté sur .blc-sticky-bar__inner
 * sous 480px — .blc-sticky-bar__content impose déjà min-height:48px, un padding
 * vertical supplémentaire portait la barre à 64px sans que le padding-top de
 * compensation (body.has-calculator .site-main, 48px) ne soit mis à jour, ce qui
 * cachait le contenu de la page sous la barre. L'espacement horizontal est déjà
 * géré par --container-padding (redéfini à 1rem sous 480px, main.css). */

/* ── Grille fabric cards — 4 colonnes fixes, cartes uniformes ─────────── */
/* minmax(0, 1fr) ignore le min-content des enfants pour des colonnes égales */
.blc-fabrics-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100%;
  align-items: start;
}

@media (max-width: 900px) {
  .blc-fabrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .blc-fabrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Carte tissu — bordure et padding harmonisés avec .blc-choice__label */
.blc-fabric-card {
  overflow: visible !important; /* critique : dropdown FVP doit pouvoir sortir */
  min-width: 0 !important;      /* empêche la carte d'élargir sa colonne grid */
  padding: 0 !important;        /* image bord à bord — padding sur le contenu */
  border-radius: 8px !important;
  border: 2px solid #e8e4dc !important;
  outline: none !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s, transform 0.12s !important;
}

/* Hover : même lift que choice__label */
.blc-fabric-card:hover {
  border-color: var(--color-accent, #CCA63B) !important;
  /*transform: translateY(-1px) !important;*/
}

/* Zone image tissu : arrondi calé sur les coins hauts de la carte, overflow masqué.
   Rayon = rayon de la carte (8px) moins sa bordure (2px) : avec 8px, la zone
   image s'arrondissait plus que le bord intérieur de la carte et laissait un
   léger vide dans les coins hauts (2026-10-15, demande atelier). L'image
   reste à angles droits, rognée par ce conteneur. */
.blc-fabric-card .blc-fabric-card__media {
  border-radius: 6px 6px 0 0 !important;
  overflow: hidden !important;
}
.blc-fabric-card .blc-fabric-card__img,
.blc-fabric-card .blc-fabric-card__img-over {
  border-radius: 0 !important;
}

/* Sélection : même couleur + fond léger que choice__label checked */
.blc-fabric-card--selected,
.blc-fabric-card--selected:hover {
  border-color: var(--blc-accent, #CCA63B) !important;
  background: color-mix(in srgb, var(--blc-accent, #CCA63B) 7%, #fff) !important;
  transform: none !important; /* pas de lift sur la sélection */
}

/* ── Fabric card — zone image : carré 1:1, overlay hover ────────────── */
.blc-fabric-card__media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f2ec;
}

.blc-fabric-card__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* cover (pas contain) : plus jamais de bandes blanches sur les photos
     tissu rectangulaires dans la zone carrée — demande atelier 2026-09-21 */
  object-fit: cover !important;
  display: block;
  transition: opacity 0s;
}

.blc-fabric-card__img-over {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: #f5f2ec;
  opacity: 0;
  pointer-events: none;
}

/* ── Fabric card — contenu texte */
.blc-fabric-card__content {
  padding: 6px 8px 8px !important;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.blc-fabric-card__header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}

.blc-fabric-card__variants-count {
  font-size: 0.62rem;
  color: var(--blc-muted, #888);
}

.blc-fabric-card__price {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--blc-accent, #CCA63B);
  white-space: nowrap;
}

/* ── Fabric card — titre + bouton info sur la même ligne ─────────────── */
.blc-fabric-card__title-row {
  display: flex;
  align-items: stretch; /* bouton prend la hauteur des 2 lignes */
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 2px;
}

.blc-fabric-card__title-info {
  flex: 1;
  min-width: 0;
}

.blc-fabric-card__title {
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  color: var(--blc-primary, #1C1F3B) !important;
  margin: 0 !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blc-fabric-card__brand {
  font-size: 0.62rem !important;
  color: var(--blc-muted, #888) !important;
  margin: 0 !important;
  line-height: 1.3;
}

/* Bouton d'aide « 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 (pas 2 boutons séparés, cf. tentative BUG-CALC-224).
   Doit rester synchronisé avec la valeur par défaut du plugin (calculator.css). */
.blc-info-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 19px !important;
  padding: 0 8px 0 2px !important;
  border-radius: 999px !important;
  /* Couleurs : variables accent du thème (identique au plugin, sans override) */
  background: var(--blc-accent) !important;
  border: 1.5px solid var(--blc-accent) !important;
  color: var(--blc-primary) !important;
  line-height: 1 !important;
  font-family: var(--font-family-base, inherit) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}
.blc-info-btn__i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: var(--blc-primary) !important;
  color: var(--blc-accent) !important;
  font-style: italic !important;
  font-family: Georgia, serif !important;
  font-size: 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.blc-info-btn:hover,
.blc-info-btn:focus-visible {
  background: var(--blc-primary) !important;
  border-color: var(--blc-primary) !important;
  color: #fff !important;
}
.blc-info-btn:hover .blc-info-btn__i,
.blc-info-btn:focus-visible .blc-info-btn__i {
  background: var(--blc-accent) !important;
  color: var(--blc-primary) !important;
}

/* Bouton info : rectangulaire — même hauteur que les 2 lignes titre+marque */
.blc-fabric-info-btn {
  /* Annule le min-height:44px de WooCommerce/thème (même astuce que .blc-info-btn) */
  min-height: 0 !important;
  min-width:  0 !important;
  flex-shrink: 0;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 1px solid var(--blc-border, #e8e4dc);
  border-radius: 4px;
  background: transparent;
  color: var(--blc-muted, #888);
  cursor: pointer;
  font-size: 0.57rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.blc-fabric-info-btn:hover {
  border-color: var(--blc-accent, #CCA63B);
  color: var(--blc-accent, #CCA63B);
  background: color-mix(in srgb, var(--blc-accent, #CCA63B) 6%, transparent);
}

/* ── Modal caractéristiques tissu — aligné sur .blc-info-modal ────────── */
.blc-fabric-modal {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 53, 0.38); /* identique aux autres modales */
  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-fabric-modal[hidden] { display: none; }
.blc-fabric-modal.is-open { opacity: 1; }

/* Couvre toute la fenêtre pour intercepter le clic "hors modale" — sans
 * cette règle la div était vide (0×0) et le clic extérieur ne fermait rien. */
.blc-fabric-modal__backdrop {
  position: absolute;
  inset: 0;
}

/* Panel — rayon/ombre identiques à toutes les modales du site */
.blc-fabric-modal__panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--radius-lg, 8px);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 56px);
  box-shadow:
    0 8px 32px rgba(15, 28, 53, 0.10),
    0 2px 8px rgba(15, 28, 53, 0.06);
  overflow: hidden;
  margin: auto;
  display: flex;
  flex-direction: column;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

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

/* Panneau image — photo du coloris actif (fab.img), même principe que les
 * autres modales à panneau latéral (.has-media).
 * `height` (pas seulement `max-height`) est nécessaire ici : une grille CSS
 * dont la hauteur reste `auto` dimensionne sa ligne au contenu le plus haut
 * (max-content), quel que soit le `max-height`/`overflow:hidden` du panneau
 * — .blc-fabric-modal__body ne devient alors jamais réellement plus petit
 * que son contenu et ne défile donc jamais : la modale s'étire en pleine
 * page (constaté avec l'onglet Coloris, potentiellement long). Une hauteur
 * fixe donne à `minmax(0, 1fr)` une base définie pour contraindre la ligne,
 * ce qui laisse enfin `.blc-fabric-modal__body { flex:1; overflow-y:auto }`
 * absorber le débordement. */
/* Élargie le 2026-10-03 (demande atelier : plus grande largeur d'image) —
   780 px / photo 46 % → 1040 px / photo 54 %. Vaut pour la fiche tissu
   ET « Votre configuration » (même gabarit). */
.blc-fabric-modal__panel.has-media {
  display: grid;
  grid-template-columns: 54% minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  max-width: 1040px;
  height: min(680px, calc(100vh - 56px));
}
.blc-fabric-modal__media {
  position: relative;
  min-height: 220px;
  background: var(--blc-border, #e0ddd8);
}
/* object-fit: cover — l'image remplit tout le panneau, sans marge ni
 * lettrboxing (fond visible sur les côtés avec `contain` si le ratio de la
 * photo ne correspond pas exactement à celui du panneau).
 * Deux calques superposés (onglet Coloris) pour un vrai fondu enchaîné entre
 * l'image du produit et celle du coloris survolé : les deux restent visibles
 * en même temps pendant la transition, contrairement à un simple changement
 * de `src` sur une image unique (qui impose de passer par une opacité 0,
 * donc un instant sans aucune image). */
.blc-fabric-modal__media-base,
.blc-fabric-modal__media-over {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blc-fabric-modal__media-over {
  opacity: 0;
  /* Fondu plus doux (0.28s auparavant) : apparition d'un coloris, passage
     d'un coloris à l'autre (deux calques croisés) et retour à la photo du
     produit — 2026-10-15, demande atelier */
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.blc-fabric-modal__media-over.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .blc-fabric-modal__media-over { transition: none; }
}

/* ── Modale récap « Votre configuration » — aperçu preview 3D réelle,
 * jamais une capture figée (demande atelier 2026-09-26 : « si preview 3D,
 * tout aperçu doit être une preview 3D ») ────────────────────────────────
 * .blc-fabric-modal__media-3d reçoit le conteneur .blc-sidebar__preview
 * (canvas Babylon inclus) déplacé tel quel depuis la sidebar par
 * calculator.js — même principe que .blc-preview-modal__slot (modale
 * d'agrandissement, plus haut). Remplit le panneau média exactement comme le
 * ferait la photo (.blc-fabric-modal__media-base, object-fit:cover) : le
 * conteneur perd son ratio/marge propres à la sidebar (padding-bottom trick)
 * au profit d'un remplissage strict de la zone, .blc-fabric-modal__panel
 * (overflow:hidden) se chargeant déjà du rognage aux coins arrondis. */
.blc-fabric-modal__media-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.blc-fabric-modal__media-3d .blc-sidebar__preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Le canvas garde dans la sidebar un rayon de 12 px : dans la modale, il
   dessinait des coins arrondis À L'INTÉRIEUR, côté texte (2026-10-03).
   Seuls les coins extérieurs du panneau restent arrondis. */
.blc-fabric-modal__media-3d canvas {
  border-radius: 0 !important;
}

/* Loupe du moteur 3D masquée ici : elle ouvrait une seconde modale ; la
   modale utilise sa propre loupe (agrandissement sur place, main.js —
   attachMediaZoom, 2026-10-03). */
.blc-fabric-modal__media-3d .blc-choice__zoom-btn {
  display: none !important;
}
.blc-fabric-modal__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 640px) {
  .blc-fabric-modal__panel.has-media {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    max-width: 480px;
    height: min(560px, calc(100vh - 56px));
  }
  .blc-fabric-modal__media {
    min-height: 160px;
  }
}

/* En-tête — même bouton fermer rond que les autres modales du site */
.blc-fabric-modal__head {
  position: relative;
  background: #fff;
  padding: 20px 56px 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.blc-fabric-modal__head-info { flex: 1; min-width: 0; }

/* Marque — style accent identique à la fiche produit */
.blc-fabric-modal__brand {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Texte or sur blanc : variante texte (5.13:1) — WCAG 1.4.3, 2026-10-01 */
  color: var(--blc-accent-text, #866A1E);
  margin: 0 0 3px;
  line-height: 1.2;
}

/* Titre — même typo que les autres modales du site */
.blc-fabric-modal__title {
  font-size: var(--font-size-lg, 1.25rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary, #1C1F3B);
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bouton fermer — pas de fond par défaut, cohérent avec les autres modales */
.blc-fabric-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;
  min-height: 0 !important;
  min-width: 0 !important;
}

.blc-fabric-modal__close:hover {
  background: var(--color-bg-alt, #f5f5f3);
  color: var(--color-primary, #1C1F3B);
}
.blc-fabric-modal__close svg { width: 16px; height: 16px; }

/* Barre d'onglets */
.blc-fabric-modal__tabs {
  display: flex;
  border-bottom: 1px solid var(--blc-border, #e0ddd8);
  padding: 0 12px;
  /* Une seule ligne : libellés courts (calculator.js), onglets répartis sur
     toute la largeur — l'espacement suit la place disponible (colonne de
     478px sur ordinateur, ~335px sur mobile). Retour à la ligne gardé en
     secours seulement (très petits écrans) plutôt qu'un débordement
     masqué — même principe que .bp-tabs__nav (product.css) — 2026-10-15 */
  flex-wrap: wrap;
  flex-shrink: 0;
}

.blc-fabric-modal__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  flex: 1 1 auto;
  justify-content: center;
  padding: 12px 6px 10px;
  margin-bottom: -1px;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--blc-muted, #888);
  cursor: pointer;
  min-height: 0 !important;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.blc-fabric-modal__tab:hover { color: var(--blc-primary, #1C1F3B); }

.blc-fabric-modal__tab.is-active {
  color: var(--blc-primary, #1C1F3B);
  border-bottom-color: var(--blc-accent, #CCA63B);
}

/* Corps scrollable */
.blc-fabric-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.blc-fabric-modal__pane {
  display: none;
  padding: 18px 20px 20px; /* identique .blc-info-modal-body */
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--blc-primary);
}

.blc-fabric-modal__pane.is-active { display: block; }

/* Description produit — en tête de l'onglet Caractéristiques */
.blc-fabric-modal__desc {
  margin: 0 0 16px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--blc-primary, #1C1F3B);
}
.blc-fabric-modal__desc p { margin: 0 0 10px; }
.blc-fabric-modal__desc p:last-child { margin-bottom: 0; }

/* DL caractéristiques */
.blc-fabric-modal__dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}

.blc-fabric-modal__dl-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f5f2ec;
  font-size: 0.82rem;
}

.blc-fabric-modal__dl-row:last-child { border-bottom: none; }

.blc-fabric-modal__dl-row dt {
  color: var(--blc-muted, #888);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 42%;
}

.blc-fabric-modal__dl-row dd {
  color: var(--blc-primary, #1C1F3B);
  font-weight: 600;
  margin: 0;
  text-align: right;
}

/* Section label dans onglet composition */
.blc-fabric-modal__section-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--blc-muted, #888);
  margin: 0 0 8px;
}

.blc-fabric-modal__section-label + .blc-fabric-modal__section-label { margin-top: 16px; }
/* Intertitre qui suit un bloc (caractéristiques, liste, barre…) : vrai
   espace au-dessus — « Usages recommandés » était collé (2026-10-15) */
.blc-fabric-modal__pane > * + .blc-fabric-modal__section-label { margin-top: 24px; }

/* Chips composition (comme fiche produit) */
.blc-fabric-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.blc-fabric-modal__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #f5f2ec;
  border: 1px solid #e8e4dc;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--blc-primary, #1C1F3B);
  white-space: nowrap;
}

/* ── Barre de composition — inspirée de la fiche produit ──────────────── */
.blc-modal-comp {
  padding: 4px 0;
}

/* Précision composition — mêmes valeurs que .bp-composition-note (fiche
   produit, product.css) : toute évolution est à répercuter aux deux. */
.blc-fabric-modal__comp-note {
  margin: 8px 0 16px;
  color: var(--color-text-muted, #6B7280);
  font-size: var(--font-size-xs, 0.75rem);
  font-style: italic;
  line-height: 1.5;
}

.blc-modal-comp__bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

/* Palette : mêmes couleurs, dans le même ordre, que la fiche produit
   (product.css, .bp-comp-seg:nth-child(5n+k)) — foncé et clair alternés,
   en boucle au-delà de 5 matières (la 6e n'avait aucune couleur) —
   2026-10-16. Toute évolution est à répercuter aux deux. */
.blc-modal-comp__seg:nth-child(5n+1) { background: var(--color-accent, #CCA63B); }
.blc-modal-comp__seg:nth-child(5n+2) { background: var(--color-primary, #1C1F3B); }
.blc-modal-comp__seg:nth-child(5n+3) { background: var(--color-border-dark, #C8C3BA); }
.blc-modal-comp__seg:nth-child(5n+4) { background: var(--color-slate, #6E7399); }
.blc-modal-comp__seg:nth-child(5n+5) { background: var(--color-accent-light, #E0C470); }

.blc-modal-comp__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.blc-modal-comp__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
}

.blc-modal-comp__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.blc-modal-comp__item:nth-child(5n+1) .blc-modal-comp__dot { background: var(--color-accent, #CCA63B); }
.blc-modal-comp__item:nth-child(5n+2) .blc-modal-comp__dot { background: var(--color-primary, #1C1F3B); }
.blc-modal-comp__item:nth-child(5n+3) .blc-modal-comp__dot { background: var(--color-border-dark, #C8C3BA); }
.blc-modal-comp__item:nth-child(5n+4) .blc-modal-comp__dot { background: var(--color-slate, #6E7399); }
.blc-modal-comp__item:nth-child(5n+5) .blc-modal-comp__dot { background: var(--color-accent-light, #E0C470); }

/* Survol d'une matière : même rendu que la fiche produit (product.css,
   .bp-comp-bar.is-comp-hover) — calculator.js, _bindCompHover. */
.blc-modal-comp__seg,
.blc-modal-comp__item {
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.blc-modal-comp.is-comp-hover .blc-modal-comp__seg:not(.is-comp-active) {
  opacity: 0.3;
}

.blc-modal-comp__item {
  padding: 2px 8px;
  border-radius: 999px;
  cursor: default;
}

.blc-modal-comp__item.is-comp-active {
  background: var(--color-bg-alt, #F8F7F5);
}

/* Trait épaissi, pas de graisse : aucun décalage de la légende (2026-10-16) */
.blc-modal-comp__item.is-comp-active .blc-modal-comp__name {
  -webkit-text-stroke: 0.4px currentColor;
}

@media ( prefers-reduced-motion: reduce ) {
  .blc-modal-comp__seg,
  .blc-modal-comp__item { transition: none; }
}

.blc-modal-comp__name { color: var(--blc-primary, #1C1F3B); font-weight: 500; }
.blc-modal-comp__pct  { color: var(--blc-muted, #888); margin-left: 2px; }

/* Placeholder avis clients — plus utilisé depuis le 2026-10-16 : l'onglet Avis
 * affiche le bloc d'avis réel (Blondeau-textile, includes/reviews/assets/reviews.css).
 * Règle conservée (aucune suppression sans validation), retirable au nettoyage. */
.blc-fabric-modal__reviews-ph {
  margin-top: 8px;
  font-style: italic;
}

.blc-fabric-modal__empty {
  color: var(--blc-muted, #888);
  font-size: 0.83rem;
  margin: 0;
  font-style: italic;
}

/* ── Sélection du coloris — remplace l'ancien menu déroulant .blc-fvp
 * (débordait de l'écran sur les petites hauteurs) : le clic ouvre désormais
 * _showFabricColorModal() (image à gauche, liste à droite, même habillage
 * que la modale Infos). Le bouton Infos reste à droite du nom/marque (titre
 * de la carte) et sa couleur est toujours l'inverse de l'état de la
 * sélection plus bas — blanc tant qu'aucun coloris n'est choisi, bleu une
 * fois choisi (cf. .blc-fabric-info-btn plus bas). */

/* Coloris choisi — pastille réf + nom superposée en bas de l'image du tissu
 * (au lieu d'un encart sous la carte) : plus de mini-vignette, redondante
 * avec l'image principale juste au-dessus. Marge + border-radius repris du
 * badge "Sélectionné" (.blc-fabric-card__badge, inset 8px / radius proche).
 * Langage doré unifié avec le badge "Sélectionné" et la coche de la modale
 * coloris (.blc-fabric-color-row__check) — un aplat navy avait été essayé
 * ici, mais introduisait un deuxième vocabulaire de "sélectionné" sur la
 * même carte (audit visuel 2026-09-16) ; fond clair translucide + liseré
 * doré + coche, flou conservé pour laisser deviner l'image en dessous. */
.blc-fabric-card__media .blc-fabric-select.is-selected {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  width: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
  border: 1.5px solid var(--color-accent, #CCA63B) !important;
  border-radius: 6px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.blc-fabric-select.is-selected:hover { border-color: var(--color-accent, #CCA63B) !important; }
/* REF en navy gras, coloris en gris — même hiérarchie que la carte et la
 * modale coloris (fond clair, donc plus besoin de recolorer pour du navy). */
.blc-fabric-select.is-selected .blc-fabric-select__name {
  font-weight: 600 !important;
  color: var(--blc-muted, #888) !important;
  font-size: 0.64rem !important;
}
.blc-fabric-select.is-selected .blc-fabric-select__sku {
  font-weight: 700 !important;
  color: var(--color-primary, #1C1F3B) !important;
  font-size: 0.75rem !important;
}
/* Coche dorée — même composant que .blc-fabric-color-row__check de la
 * modale, pour que "sélectionné" se lise pareil partout sur la carte. */
.blc-fabric-select__check {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent, #CCA63B);
  flex-shrink: 0;
}
.blc-fabric-select__check svg { width: 10px; height: 10px; }

/* Bouton Infos — mieux mis en valeur (fond plein) et toujours inverse de
 * l'état de la sélection (portée sur toute la carte, quelle que soit sa
 * position dans le DOM — Infos et sélection ne partagent plus de conteneur
 * commun depuis leur repositionnement). */
.blc-fabric-info-btn {
  background: var(--color-primary, #1C1F3B) !important;
  border-color: var(--color-primary, #1C1F3B) !important;
  color: #fff !important;
}
.blc-fabric-info-btn:hover {
  background: var(--color-accent, #CCA63B) !important;
  border-color: var(--color-accent, #CCA63B) !important;
  color: var(--color-primary, #1C1F3B) !important;
}
.blc-fabric-card:has(.blc-fabric-select.is-selected) .blc-fabric-info-btn {
  background: #fff !important;
  border-color: var(--color-primary, #1C1F3B) !important;
  color: var(--color-primary, #1C1F3B) !important;
}
.blc-fabric-card:has(.blc-fabric-select.is-selected) .blc-fabric-info-btn:hover {
  background: var(--color-accent, #CCA63B) !important;
  border-color: var(--color-accent, #CCA63B) !important;
  color: var(--color-primary, #1C1F3B) !important;
}

/* Aucun arrondi sur les vignettes (point tissu — jamais d'arrondi sur les images) */
.blc-fabric-color-row__img {
  border-radius: 0 !important;
}

/* ── Catalogue sous-option — titre "Choisissez" avec espacement ─────── */
.blc-sub-label {
  margin-top: 16px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--blc-muted, #888) !important;
}

/* ── Cartes 2col (Fonctionnel/Décoratif) — frame hauteur fixe ──────────
 * object-fit:cover volontaire (demande explicite) : ces cartes doivent être
 * remplies entièrement, contrairement au reste du calculateur. */
.blc-choices.blc-choices--2col .blc-choice--img .blc-choice__frame {
  height: 170px;
}
.blc-choices.blc-choices--2col .blc-choice--img .blc-choice__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ── Rideau, étape Tringle : Fonctionnel/Décoratif et 1 Rideau/1 Paire ──
 * Les deux paires de cartes ont la même forme (cadre 170px, cover, comme
 * .blc-choices--2col ci-dessus) et 450px de large au maximum, pour ne pas
 * agrandir les images au-delà de leur taille. Les cartes restent calées sur
 * les bords : c'est l'écart entre les deux cartes d'une paire qui grandit
 * (justify-content: space-between, 10px minimum via gap). Sélecteur à triple
 * classe pour passer devant .blc-choices (!important) et sa règle 768px. */
.blc-rideau-tringle .blc-choices.blc-choices--img {
  grid-template-columns: repeat(2, minmax(0, 450px)) !important;
  justify-content: space-between;
}
.blc-rideau-tringle .blc-choices.blc-choices--img .blc-choice--img .blc-choice__frame {
  height: 170px;
}
.blc-rideau-tringle .blc-choices.blc-choices--img .blc-choice--img .blc-choice__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ── Cartes 3col (Usage du coussin, Densité) — cadre ratio 16/9 ───────
 * Ex-hauteur fixe (130px) remplacée par un ratio 16/9 (même ratio que
 * .blc-shape-choice .blc-choice__label plus haut, pour une hauteur
 * identique entre cartes Forme et Densité). object-fit:cover volontaire
 * (demande explicite) : Usage et Densité doivent être remplies entièrement,
 * contrairement au reste du calculateur (formes, tissu… jamais tronqués). */
.blc-choices.blc-choices--3col .blc-choice--img .blc-choice__frame {
  aspect-ratio: 16 / 9;
  height: auto;
}
.blc-choices.blc-choices--3col .blc-choice--img .blc-choice__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ── Sidebar — ligne titre + bouton bascule ──────────────────────────── */
.blc-sidebar__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* padding-bottom réduit de 10px à 6px (UX 2026-08) : aligné avec le
   * margin-bottom de .blc-sidebar__price-title (6px), pour un espace identique
   * sous les deux titres H3 de la sidebar. */
  padding: 12px 16px 6px;
  margin-bottom: 0;
  border-bottom: none;
}
.blc-sidebar__title-row .blc-sidebar__title {
  margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTRES TISSU — bouton unique + panneau à accordéon (UX 2026-09)
   Remplace l'ancienne rangée d'une pastille par filtre (débordait sur 2-3
   lignes une fois le filtre Type et le tri ajoutés) par un seul déclencheur
   « Filtrer », habillé en navy plein comme avant. Le panneau reste un
   dropdown flottant en desktop/tablette et devient une feuille glissante
   depuis le bas en mobile (≤640px) — même contenu, seul l'habillage change.
   Marquage JS inchangé pour les options internes (.blc-filter-option,
   .blc-swatch, .blc-range-*) ; nouveau marquage pour la coquille
   (.blc-filters-bar/-trigger/-panel/-acc…) — calculator.js. Approuvé par
   Pietro le 2026-09-10 (maquette « bouton unique »). */

.blc-filters-bar {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
}

/* Bouton déclencheur — navy plein, coins arrondis à radius-md (6px) comme
   .btn / .blondeau-new-toggle : les boutons du site ne sont jamais en pilule
   (border-radius égal à la moitié de la hauteur) — corrigé le 2026-09-14,
   l'ancien 22px (repris de .blondeau-new-toggle avant sa propre harmonisation)
   ne correspondait à aucun bouton existant du thème. */
.blc-filters-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  /* Hauteur : 36px depuis le 2026-10-18 (rangée allégée, cible ≥ 24px) — seule la largeur
   * augmente (demande atelier 2026-09-21, BUG-CALC-235) : le padding horizontal
   * ne réduit ni ne masque aucun contenu, texte/icône restent identiques, donc
   * sans impact sur la cible tactile ni la lisibilité (l'agrandir ne fait que
   * l'élargir davantage que le minimum requis). */
  height: 36px !important; /* = pastille de tri commune (.blondeau-sort) — rangée allégée le 2026-10-18 (44px avant), cible ≥ 24px WCAG 2.5.8 */
  min-height: 36px !important; /* plancher 44px des boutons (accessibility.css) levé, 2026-10-18 */
  background: var(--color-accent, #CCA63B) !important;
  border: 1.5px solid var(--color-accent, #CCA63B) !important;
  border-radius: var(--radius-md, 6px) !important;
  padding: 0 48px !important; /* encore élargi (BUG-CALC-235, 2e demande) */
  color: var(--color-primary, #1C1F3B) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600 !important; /* = .blondeau-sort, 2026-10-18 */
}
.blc-filters-trigger svg { width: 13px !important; height: 13px !important; /* réduit avec le bouton, 2026-10-18 */ opacity: 0.85; }
.blc-filters-trigger:hover,
.blc-filters-trigger--active {
  background: var(--color-primary, #1C1F3B) !important;
  border-color: var(--color-primary, #1C1F3B) !important;
  color: #fff !important;
}
.blc-filters-badge {
  background: var(--color-primary, #1C1F3B) !important;
  color: #fff !important;
}
.blc-filters-trigger--active .blc-filters-badge {
  background: var(--color-accent, #CCA63B) !important;
  color: var(--color-primary, #1C1F3B) !important;
}

/* Tri — pastille commune .blondeau-sort (main.css, 2026-10-17), identique au
 * catalogue et aux avis clients : le span porte les deux classes
 * (calculator.js). Les anciennes règles !important (contour 1,5px, texte en
 * casse normale, sans chevron, survol or) sont remplacées par ce modèle. */
.blc-filters-sort { flex-shrink: 0; min-width: 0; }

.blc-filters-spacer { flex: 1 1 auto !important; }

/* Favoris — bouton cœur icône seule, même gabarit rond que le déclencheur.
 * Cœur à deux tracés superposés (contour fin ↔ plein rouge) plutôt qu'une
 * simple recoloration — voir .blc-filters-fav__heart-- dans le CSS du plugin. */
.blc-filters-fav {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important; /* planchers 44px des boutons (accessibility.css) levés, 2026-10-18 */
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--color-primary, #1C1F3B) !important; /* = pastille de tri commune (.blondeau-sort) : 36px, contour 1px — 2026-10-18 */
  background: #fff !important;
  color: var(--color-primary, #1C1F3B) !important;
}
.blc-filters-fav svg { width: 15px !important; height: 15px !important; /* réduit avec le bouton (36px), 2026-10-18 */ }
.blc-filters-fav:hover {
  border-color: #d64545 !important;
}
.blc-filters-fav.is-active {
  border-color: #d64545 !important;
  background: color-mix(in srgb, #d64545 7%, #fff) !important;
}
.blc-filters-fav--none { opacity: 0.4 !important; }

/* Panneau à accordéon — dropdown flottant sous le bouton (desktop/tablette) */
.blc-filters-panel {
  box-sizing: border-box;
  background: #fff !important;
  border: 1.5px solid var(--color-primary, #1C1F3B) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 44px -14px rgba(20, 22, 42, 0.35) !important;
}
.blc-filters-scrim { background: rgba(20, 22, 42, 0.42) !important; }

/* Sections — libellé en petites capitales façon étiquette atelier */
.blc-filters-acc__head {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--color-primary, #1C1F3B) !important;
}
.blc-filters-acc__chev { color: var(--blc-muted, #888) !important; }

/* Options — cibles plus grandes, plus lisibles que l'origine */
.blc-filter-option {
  padding: 9px 12px !important;
  font-size: 0.83rem !important;
  border-radius: 6px !important;
}
.blc-filter-option--swatch {
  display: flex !important;
  width: auto !important;
  align-items: center;
  gap: 8px;
  padding: 7px 6px !important;
}
.blc-swatch { width: 16px !important; height: 16px !important; }

/* Pied du panneau — Réinitialiser + Voir N tissus */
.blc-filters-panel__apply {
  background: var(--color-primary, #1C1F3B) !important;
  color: #fff !important;
}
.blc-filters-panel__apply:hover {
  background: var(--color-accent, #CCA63B) !important;
  color: var(--color-primary, #1C1F3B) !important;
}
/* Réinitialiser : bouton plein accent, même gabarit que le déclencheur
   « Filtrer » (.blc-filters-trigger) — demande explicite de l'atelier,
   ce n'était jusqu'ici qu'un lien texte gris (2026-09-21). */
.blc-filters-panel__resetlink {
  background: var(--color-accent, #CCA63B) !important;
  color: var(--color-primary, #1C1F3B) !important;
  border-radius: var(--radius-md, 6px) !important;
}
.blc-filters-panel__resetlink:hover {
  background: var(--color-primary, #1C1F3B) !important;
  color: #fff !important;
}

/* Feuille mobile ≤640px — poignée/en-tête calqués sur les tokens du thème */
@media (max-width: 640px) {
  .blc-filters-panel {
    border: none !important;
    box-shadow: 0 -14px 30px -8px rgba(20, 22, 42, 0.3) !important;
  }
  .blc-filters-panel__head {
    color: var(--color-primary, #1C1F3B) !important;
    font-weight: 700 !important;
  }
  /* Mobile (2026-10-01) : la largeur utile du calculateur (~250-300px) ne
   * permet pas Filtrer + Tri + favoris sur une ligne sans tronquer le tri
   * (« Date de publication » = 129px). Filtrer occupe la 1re ligne, texte
   * centré ; Tri (+ cœur favoris) la 2e, sur toute la largeur. L'ordre
   * visuel reste celui du DOM (= ordre de tabulation, WCAG 2.4.3). Ancien
   * réglage remplacé : flex-wrap:nowrap + select max-width:34vw (tronquait). */
  .blc-filters-bar { flex-wrap: wrap !important; row-gap: 10px !important; }
  .blc-filters-trigger {
    flex: 1 1 100% !important;
    justify-content: center !important;
    padding: 0 18px !important; /* = .blondeau-catalog__filters-trigger */
  }
  .blc-filters-sort { flex: 1 1 auto !important; min-width: 0 !important; }
  .blc-filters-sort select { flex: 1 1 auto !important; max-width: none !important; }
  .blc-filters-spacer { display: none !important; }
}

/* ── Bulle numéro d'étape — réduite, entête une ligne (UX 2026-07) ───── */
body.has-calculator .blc-step__num {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  width: 26px !important;
  height: 26px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}
body.has-calculator .blc-step--active .blc-step__num {
  background: var(--color-accent, #CCA63B) !important;
  color: var(--color-primary, #1C1F3B) !important;
}
body.has-calculator .blc-step--complete .blc-step__num {
  background: var(--color-accent, #CCA63B) !important;
  color: var(--color-primary, #1C1F3B) !important;
}

/* ── Numérotation des sous-sections (blc-section-label) ─────────────── */
body.has-calculator .blc-wizard {
  counter-reset: blc-section-num;
}
body.has-calculator .blc-section-label {
  counter-increment: blc-section-num;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
body.has-calculator .blc-section-label::before {
  content: counter(blc-section-num);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--color-primary, #1C1F3B);
  color: #fff;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 800;
}
/* Rideaux, coussins et découpe mousse : pas de numérotation devant les labels
   de section — DETTE-CALC-146 [OK] corrigé le 2026-08-11, le type "mousse"
   avait été oublié lors de l'exclusion initiale (rideau/coussin seulement),
   laissant une bulle de numérotation résiduelle propre à cette page. */
body.has-calculator .blc-wizard[data-type="rideau"] .blc-section-label,
body.has-calculator .blc-wizard[data-type="coussin"] .blc-section-label,
body.has-calculator .blc-wizard[data-type="mousse"] .blc-section-label {
  counter-increment: none;
}
body.has-calculator .blc-wizard[data-type="rideau"] .blc-section-label::before,
body.has-calculator .blc-wizard[data-type="coussin"] .blc-section-label::before,
body.has-calculator .blc-wizard[data-type="mousse"] .blc-section-label::before {
  display: none;
}
body.has-calculator .blc-fabric-card {
  position: relative;
}

/* ── Images bord à bord — pas de padding interne ─────────────────────── */
body.has-calculator .blc-choice--img .blc-choice__frame {
  padding: 0 !important;
  background: #fff !important;
}
body.has-calculator .blc-choice--img .blc-choice__img {
  border-radius: 0 !important;
}

/* ── Zone caption — neutre par défaut ───────────────────────────────── */
body.has-calculator .blc-choice--img .blc-choice__caption {
  background: #fff !important;
  color: var(--color-primary, #1C1F3B) !important;
  padding: 7px 10px 9px !important;
  text-align: left !important;
  border-radius: 0 !important;
}
body.has-calculator .blc-choice--img .blc-choice__name {
  color: var(--color-primary, #1C1F3B) !important;
  font-size: 0.76rem !important;
  white-space: normal !important;
}
body.has-calculator .blc-choice--img .blc-choice__sub {
  color: var(--color-accent, #CCA63B) !important;
  margin-top: 2px;
}

/* ── Zone caption — bleu uniquement sur l'élément sélectionné ────────── */
body.has-calculator .blc-choice--img:has(input:checked) .blc-choice__caption {
  background: var(--color-primary, #1C1F3B) !important;
  color: #fff !important;
}
body.has-calculator .blc-choice--img:has(input:checked) .blc-choice__name {
  color: #fff !important;
}
body.has-calculator .blc-choice--img:has(input:checked) .blc-choice__sub {
  color: var(--color-accent, #CCA63B) !important;
}

/* Coussins assortis — CORRIGÉ le 2026-09-21 (BUG-CALC-237, après BUG-CALC-230/234
 * insuffisants : « il y a toujours une ligne blanche même 1px, je n'en veux
 * pas du tout »). .blc-choice__caption et .blc-choice__qty-ctrl (le stepper,
 * sous la légende) sont 2 éléments SIBLINGS peints séparément — même en
 * padding et non en marge (BUG-CALC-234), 2 rectangles peints individuellement
 * peuvent laisser une jointure sub-pixel visible selon le rendu. Éliminée à la
 * racine en peignant le fond navy UNE SEULE FOIS, sur le conteneur COMMUN des
 * deux (la carte entière .blc-choice--coussin-qty) plutôt que sur chacun des
 * deux séparément — .blc-choice__frame (image) garde son propre fond opaque
 * (#fefdf8) qui la recouvre entièrement, donc le navy du conteneur ne déborde
 * jamais dessus. Un seul rectangle peint = aucune jointure possible. */
body.has-calculator .blc-choice--coussin-qty:has(input:checked) {
  background: var(--color-primary, #1C1F3B) !important;
}
/* Le champ de saisie (stepper) reste blanc, y compris sélectionné — demande
 * explicite de l'atelier : un champ doit toujours ressembler à un champ, pas
 * se fondre dans le fond de la carte. */
body.has-calculator .blc-choice--coussin-qty .blc-choice__qty-ctrl .bp-qty {
  background: #fff !important;
  border-color: var(--color-field-border, #9B9489) !important;
}
body.has-calculator .blc-choice--coussin-qty .blc-choice__qty-ctrl .bp-qty__input,
body.has-calculator .blc-choice--coussin-qty .blc-choice__qty-ctrl .bp-qty__btn {
  color: rgb(30, 30, 30) !important;
}
body.has-calculator .blc-choice--coussin-qty .blc-choice__qty-ctrl .bp-qty__btn:hover {
  color: var(--color-accent, #CCA63B) !important;
}

/* Fond chaud sur les images tissu (remplace le gris) */
body.has-calculator .blc-fabric-card__media,
body.has-calculator .blc-choice--img .blc-choice__frame {
  background: #fefdf8 !important;
}

/* ── Bouton loupe — icône agrandir en haut à droite de la frame ──────── */
.blc-choice__zoom-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-primary, #1C1F3B);
  transition: background 0.15s;
  backdrop-filter: blur(2px);
  min-height: 0 !important;
  min-width: 0 !important;
}
.blc-choice__zoom-btn:hover {
  background: #fff;
  color: var(--color-accent, #CCA63B);
}
.blc-choice__zoom-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ── Lightbox dédiée au calculateur ──────────────────────────────────── */
.blc-calc-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 28, 0.88);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.blc-calc-lightbox.is-open { display: flex; }

.blc-calc-lightbox__inner {
  position: relative;
  max-width: min(680px, 92vw);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blc-calc-lightbox__img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}
.blc-calc-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #1C1F3B);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.blc-calc-lightbox__close:hover {
  background: var(--color-primary, #1C1F3B);
  color: #fff;
}

/* ── Modale d'agrandissement de la preview 3D (front-office) ─────────────
 * Ouverte par le bouton loupe .blc-choice__zoom-btn injecté sur le
 * conteneur Babylon.js (blc-preview-engine.js) — remplace l'ancien bouton
 * plein écran natif ⛶. Le conteneur (canvas inclus) est déplacé tel quel
 * dans .blc-preview-modal__slot puis restitué à son emplacement d'origine
 * à la fermeture ; même traitement visuel que .blc-calc-lightbox
 * ci-dessus (fond, fermeture) pour rester cohérent. */
.blc-preview-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 28, 0.88);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.blc-preview-modal.is-open { display: flex; }

.blc-preview-modal__inner {
  position: relative;
  width: min(720px, 92vw);
  max-height: 88vh;
}
.blc-preview-modal__slot { width: 100%; }

/* Ratio 4:3 fixe dans la modale — les paliers de compacité petite hauteur
   (calc.css, .blc-sidebar__preview sous 760px/620px) n'ont de sens que
   dans l'exiguïté de la sidebar, pas dans l'agrandissement demandé ici. */
.blc-preview-modal__slot .blc-sidebar__preview {
  padding-bottom: 75% !important;
}

.blc-preview-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #1C1F3B);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  z-index: 1;
}
.blc-preview-modal__close:hover {
  background: var(--color-primary, #1C1F3B);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CARTES SÉLECTIONNABLES — règles globalisées via :is()
 * Tout ajout d'un nouveau type de carte = ajouter la classe dans :is()
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper global : bordure + radius + transition ────────────────────── */
body.has-calculator :is(
  .blc-choice--img,
  .blc-shape-choice) {
  border: 2px solid #e0dbd2 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: border-color 0.15s !important;
}

/* ── Hover global ─────────────────────────────────────────────────────── */
body.has-calculator :is(
  .blc-choice--img,
  .blc-shape-choice):hover {
  border-color: var(--color-accent, #CCA63B) !important;
}

/* ── Sélection : bordure bleue globale ────────────────────────────────── */
body.has-calculator :is(
  .blc-choice--img,
  .blc-shape-choice):has(input:checked) {
  border-color: var(--color-primary, #1C1F3B) !important;
  border-width: 2px !important;
}

/* ── Focus clavier visible sur les cartes (WCAG 2.4.7 / RGAA 10.7) ──────
 * Le bouton radio de chaque carte est invisible (opacity:0) : sans cette
 * règle, rien n'indiquait la carte focalisée au clavier. Valeurs reprises
 * EXACTEMENT du focus bouton du site (accessibility.css, button:focus-visible :
 * outline 2px --color-focus, offset 2px, halo 4px) — toute évolution de ce
 * focus doit être répercutée ici. (2026-10-01)
 * 2026-10-23 (DETTE-398) : recette commune — bord or foncé posé sur le cadre
 * de la carte + halo or collé. */
body.has-calculator .blc-choice:has(input:focus-visible),
body.has-calculator .blc-shape-complexe-card:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C) !important;
  outline-offset: -2px !important;
  box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18)) !important;
}

/* Carte tissu — bouton « Choisir un coloris » transparent couvrant l'image
 * (porte l'action de la carte au clavier, cf. calculator.js). Sous la loupe
 * (z-index 4) et le bandeau coloris. Focus en retrait (offset négatif) car
 * .blc-fabric-card__media masque son débordement. */
.blc-fabric-card__pick {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  min-height: 0 !important;
  min-width: 0 !important;
}
.blc-fabric-card__pick:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C) !important;
  outline-offset: -4px !important;
  box-shadow: inset 0 0 0 6px var(--color-field-halo, rgba(204, 166, 59, 0.18)) !important;
}

/* ── Cartes img : frame et image sans bordure propre ────────────────────── */
body.has-calculator .blc-choice--img .blc-choice__frame {
  border: none !important;
  border-radius: 0 !important;
  background: #fefdf8 !important;
}
body.has-calculator .blc-choice--img .blc-choice__img {
  border: none !important;
  border-radius: 0 !important;
}

/* ── Cartes non-img : layout flex colonne ───────────────────────────────── */
body.has-calculator :is(
  .blc-shape-choice) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* ── Cartes non-img : label interne sans bordure, radius ni padding ─────── */
body.has-calculator :is(
  .blc-shape-choice) .blc-choice__label {
  border: none !important;
  border-radius: 0 !important;
  flex: 1 !important;
  width: 100% !important;
  padding: 0 !important;
}

/* ── Image dans ces cartes : remplir la zone label ──────────────────────
 * 2026-10-27 (décision atelier) : passée en cover, sans espace vide — les
 * formes peuvent être légèrement recadrées (haut/bas) ; remplace la règle
 * « jamais tronquée » de BUG-CALC-211/213 décrite ci-dessous.
 * Historique : object-fit:contain (pas cover) — c'est cette règle (spécificité la plus
 * élevée du fichier sur .blc-choice__img, chargée après tout le reste) qui
 * a effectivement le dernier mot sur Forme (Options en a été retiré le
 * 2026-09-10, cf. règle dédiée juste après — demande explicite : ses cartes
 * doivent remplir leur cadre comme Doublure/Finition au sol/Type de
 * confection). .blc-density-choice/.blc-usage-choice ne correspondent à
 * aucun élément réel du DOM (calculator.js ne les émet jamais) — laissées
 * pour ne pas modifier une portée qui n'a de toute façon aucun effet. La
 * repasser en cover ici pour Forme annulerait silencieusement le correctif
 * BUG-CALC-211/213 (troncature des images de forme). */
body.has-calculator :is(
  .blc-shape-choice) .blc-choice__label .blc-choice__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ── Caption texte — forme et usage (nom hors label) ────────────────────── */
body.has-calculator :is(.blc-shape-choice) .blc-choice__name {
  background: #fff !important;
  color: var(--color-primary, #1C1F3B) !important;
  padding: 7px 10px 9px !important;
  text-align: center !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  white-space: normal !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
body.has-calculator :is(.blc-shape-choice):has(input:checked) .blc-choice__name {
  background: var(--color-primary, #1C1F3B) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CARTES TISSU — état sélectionné (fond bleu, textes blancs)
 * Rétabli le 2026-09-10 : c'est bien la CARTE ENTIÈRE qui doit passer en bleu
 * du thème à la sélection, comme partout ailleurs sur le site (formes,
 * densités, options — cf. .blc-option-choice ci-dessus), pas seulement le
 * bouton de sélection du coloris. Ce dernier repasse en blanc sur la carte
 * bleue (même principe que l'ancien menu déroulant .blc-fvp : « fond blanc
 * conservé ») pour rester lisible — sans quoi il se fondrait dans le bleu.
 * ═══════════════════════════════════════════════════════════════════════════ */
body.has-calculator .blc-fabric-card--selected,
body.has-calculator .blc-fabric-card--selected:hover {
  background: var(--color-primary, #1C1F3B) !important;
  border-color: var(--color-primary, #1C1F3B) !important;
  outline: none !important;
}
body.has-calculator .blc-fabric-card--selected .blc-fabric-card__title,
body.has-calculator .blc-fabric-card--selected .blc-fabric-card__brand,
body.has-calculator .blc-fabric-card--selected .blc-fabric-card__variants-count {
  color: #fff !important;
}
/* Prix : reste doré, comme sur une carte non sélectionnée */
body.has-calculator .blc-fabric-card--selected .blc-fabric-card__price {
  color: var(--color-accent, #CCA63B) !important;
}
/* Bouton de sélection du coloris — fond blanc conservé sur la carte bleue */
body.has-calculator .blc-fabric-card--selected .blc-fabric-select.is-selected {
  background: #fff !important;
  border-color: #e0dbd2 !important;
}
body.has-calculator .blc-fabric-card--selected .blc-fabric-select__sku {
  color: var(--color-primary, #1C1F3B) !important;
}
body.has-calculator .blc-fabric-card--selected .blc-fabric-select__name {
  color: var(--blc-muted, #888) !important;
}

/* ── Ligne coloris (modale) — refonte 2026-10-15 (demande atelier) :
 * sélection d'une image = encadré doré des coloris de la fiche produit
 * (.bp-swatch, product.css), à l'identique — 2 px d'espace intérieur sur
 * fond ivoire, bordure grise au survol, bordure or + halo or à la
 * sélection. Remplace le fond bleu de toute la ligne (audit 2026-09-16)
 * et la coche dorée. Toute évolution est à répercuter sur .bp-swatch. */
body.has-calculator .blc-fabric-color-row,
body.has-calculator .blc-fabric-color-row:hover,
body.has-calculator .blc-fabric-color-row.is-active {
  background: none !important;
  border-color: transparent !important;
}
body.has-calculator .blc-fabric-color-row__img {
  box-sizing: border-box;
  border: 2px solid transparent;
  padding: 2px;
  background: var(--color-bg-alt, #F8F7F5);
  transition: border-color var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s);
}
body.has-calculator .blc-fabric-color-row:hover .blc-fabric-color-row__img {
  border-color: var(--color-border-dark, #C8C3BA);
}
body.has-calculator .blc-fabric-color-row.is-active .blc-fabric-color-row__img {
  border-color: var(--color-accent, #CCA63B);
  box-shadow: 0 0 0 1px var(--color-accent, #CCA63B);
}
body.has-calculator .blc-fabric-color-row__check {
  display: none;
}

/* ── Sidebar navy — actions panier + imprimer, côte à côte (UX 2026-08) ──
 * Le bouton panier reste prioritaire (flex:1) ; le bouton imprimer devient
 * une icône seule, de même hauteur (align-items:stretch sur le conteneur). */
.blc-sidebar__actions {
  display: flex !important;
  align-items: stretch;
  gap: 8px;
  margin: 10px 16px 0 !important;
}

/* Repris du gabarit .btn standard du thème (main.css — padding 12px 24px /
   font-size 16px / min-height 44px, cible tactile WCAG 2.5.8), pas de
   .btn--large (16px 32px / 18px / 52px) : trop imposant dans la sidebar
   étroite du calculateur, où "Ajouter au panier" passait sur deux lignes
   (audit UX 2026-08, 2e itération — "un peu trop grand, en restant
   standard WP/Woo"). Toujours plus grand que l'ancien gabarit (13px 22px /
   0.95rem / 8px de rayon). */
.blc-sidebar .blc-wizard__btn--cart {
  flex: 1 1 auto;
  width: auto !important;
  margin: 0 !important;
  background: var(--blc-accent) !important;
  color: var(--blc-primary) !important;
  padding: 12px 24px !important;
  min-height: 44px !important;
  font-size: 1rem !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
.blc-sidebar .blc-wizard__btn--cart:hover:not(:disabled) {
  background: color-mix(in srgb, var(--blc-accent) 82%, #000) !important;
}

.blc-sidebar .blc-wizard__btn--print {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 0 16px !important;
  font-size: 0.85rem !important;
  border-radius: 8px !important;
}
.blc-sidebar .blc-wizard__btn--print svg { flex-shrink: 0; }
.blc-sidebar .blc-wizard__btn--print:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* Ancienne règle « preview encastrée dans la sidebar » retirée (2026-09-25) :
   la preview n'est plus injectée dans .blc-sidebar, voir .blc-wizard__preview
   plus haut. */

/* ═══════════════════════════════════════════════════════════════════════════
 * CONTRASTES TEXTE — WCAG 1.4.3 / RGAA 3.2 (audit accessibilité 2026-10-01)
 * L'or de charte (--color-accent #CCA63B) n'atteint que 2.31:1 sur blanc :
 * réservé aux usages décoratifs (bordures, fonds, pastilles). Pour le TEXTE
 * sur fond clair, variante dédiée déjà en place dans le thème :
 * --color-accent-text (#866A1E, 5.13:1 blanc — main.css, DETTE-91/199).
 * Sur fond bleu (carte sélectionnée), l'or d'origine reste conforme (6.94:1)
 * et n'est pas modifié (règles :has(input:checked) / --selected plus haut,
 * de spécificité supérieure).
 * ═══════════════════════════════════════════════════════════════════════════ */
.blc-fabric-card .blc-fabric-card__price {
  color: var(--color-accent-text, #866A1E);
}
body.has-calculator .blc-choice--img:not(:has(input:checked)) .blc-choice__sub {
  color: var(--color-accent-text, #866A1E) !important;
}
/* Badge « Optionnel » et unité des champs (cm, m) : gris #6B7280 sur fond
 * teinté #F2F0EC = 4.25:1 (< 4.5). Gris légèrement plus soutenu, même teinte :
 * #5F6673 = 5.08:1 sur ce fond. */
body.has-calculator .blc-badge:not(.blc-badge--required),
body.has-calculator .blc-dim-unit {
  color: #5F6673 !important;
}
/* Indication « sol - dessus de tringle » à côté du libellé Hauteur (rideau) */
body.has-calculator .blc-dim-hint--inline {
  color: var(--color-accent-text, #866A1E) !important;
}

/* Aperçu 3D (canvas Babylon, focalisable au clavier depuis 2026-10-01) :
 * contour de focus en retrait — le conteneur masque son débordement et
 * rognait le contour standard (offset +2px). Même couleur que le focus site. */
.blc-wizard canvas:focus-visible,
.blc-preview-modal canvas:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C) !important;
  outline-offset: -3px !important;
}

/* Curseurs doubles des filtres tissu — cible tactile WCAG 2.5.8 (AA, 24px
 * minimum ; les deux poignées pouvant se chevaucher, l'exception
 * d'espacement ne s'applique pas). Poignée visible INCHANGÉE (pastille or
 * 12px + anneau blanc 2px = 16px, ombre légère) — dessinée en dégradé
 * radial au centre d'une zone cliquable transparente de 24px. 2026-10-01.
 * Référence d'origine : .blc-range-input::-webkit-slider-thumb (plugin). */
.blc-range-input::-webkit-slider-thumb {
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: radial-gradient(circle closest-side,
    var(--blc-accent, #CCA63B) 0 6px,
    #fff 6px 8px,
    rgba(0, 0, 0, 0.16) 8px 9px,
    transparent 10px) !important;
}
.blc-range-input::-moz-range-thumb {
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: radial-gradient(circle closest-side,
    var(--blc-accent, #CCA63B) 0 6px,
    #fff 6px 8px,
    rgba(0, 0, 0, 0.16) 8px 9px,
    transparent 10px) !important;
}

/* Focus jamais masqué (WCAG 2.4.11, 2026-10-01) — pages calculateur : la
 * barre d'étapes collante (48px) s'ajoute au header dans la réserve de
 * défilement définie dans main.css (html { scroll-padding-top }). */
html:has(body.has-calculator) {
  scroll-padding-top: calc(var(--blc-sticky-offset, var(--header-total-height, 123px)) + var(--blc-sticky-height, 36px) + 16px);
}

/* Bulle « info » : contour de focus standard du site (accessibility.css,
 * button:focus-visible — 2px --color-focus) au lieu de l'or du plugin
 * (outline 2px --blc-accent = 2.31:1 sur blanc, sous le seuil de 3:1 —
 * WCAG 1.4.11 / RGAA 3.3). Le passage du fond au bleu marine est conservé. 2026-10-01. */
.blc-info-btn:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C) !important;
  outline-offset: -2px !important;
  box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18)) !important;
}

/* ============================================================
   AIDE « GUIDE D'ACHAT » — refonte 2026-10-03 (demande atelier)
   Modale unique (main.js, blondeauTheme.openHelp), fiche produit
   ET calculateurs. Remplace la mise en page du plugin
   (Blondeau-textile/.../calculator.css, .blc-info-modal-*) :
   - zone image à gauche, FIXE, alimentée par les images du Guide
     d'achat ; l'image suit le défilement du texte (repères
     .blc-aide-img-marker posés par le serveur) ;
   - 2026-10-14 : images aussi dans le texte + bande de vignettes en
     bas de la zone image (voir « Images dans le texte » plus bas) ;
   - seul le texte défile (boîte de hauteur fixe) ;
   - titre et texte aux mêmes valeurs que « Avant de partir »
     (.exit-modal__title / .exit-modal__text, main.css).
   ============================================================ */
.blc-info-modal-box {
  position: relative;
}

.blc-info-modal-box.has-media {
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  max-width: 920px;
  height: min(640px, calc(100vh - 56px));
}

.blc-info-modal-box.has-media .blc-info-modal-media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--color-bg-alt, #F5F4F0);
}

/* `body img.` : sur les fiches produit, `.woocommerce img { height: auto }`
   (woocommerce-layout.css, plus spécifique) collait l'image en haut de sa
   zone au lieu de la centrer (même cause que BUG-380, 2026-10-03). */
/* object-fit: contain (demande atelier 2026-11-09, remplace le cover du
   2026-10-27 qui coupait les photos paysage dans la zone verticale) :
   l'image est toujours entière, centrée sur le fond clair du panneau —
   au repos comme agrandie (.blondeau-media-zoom.is-zoomed, main.css :
   seule la zone s'agrandit, même cadrage), comme la loupe du catalogue
   tissu du calculateur (.blc-calc-lightbox__img). */
body img.blc-info-modal-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity 0.18s ease;
}

.blc-info-modal-media__img.is-fading {
  opacity: 0;
}

/* Flèches + rang de l'image (« ‹ 2 / 7 › ») en pastille sombre, bas
   gauche — navigation manuelle en complément du défilement (texte court
   ou images groupées au même endroit du texte). Cibles de 28 px. */
.blc-info-modal-media__pager {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  /* Bleu exact du site (--color-primary à 85 %) — 2026-10-15, même pastille
     que .blondeau-pager (main.css : galerie, visionneuse) */
  background: rgba(28, 31, 59, 0.85);
  color: #fff;
}

.blc-info-modal-media__pager[hidden] {
  display: none;
}

.blc-info-modal-media__step {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 0 !important;
  min-height: 0 !important;
  transition: background var(--transition-fast, 0.15s);
}

.blc-info-modal-media__step:hover {
  background: rgba(255, 255, 255, 0.18);
}

.blc-info-modal-media__step:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.blc-info-modal-media__count {
  min-width: 40px;
  text-align: center;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.blc-info-modal-box.has-media .blc-info-modal-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.blc-info-modal-box.has-media .blc-info-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Titre et marges : valeurs de .exit-modal__title / .blondeau-modal-content */
.blc-info-modal-overlay .blc-info-modal-hd {
  padding: var(--space-8) 64px var(--space-3) var(--space-8);
}

.blc-info-modal-overlay .blc-info-modal-title {
  font-size: var(--font-size-lg, 1.25rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary, #1C1F3B);
  line-height: 1.25;
  margin: 0;
}

.blc-info-modal-overlay .blc-info-modal-body {
  padding: 0 var(--space-8) var(--space-8);
}

/* Texte : valeurs de .exit-modal__text (14 px, gris, interligne 1.7) */
#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.7;
  color: var(--color-text-muted, #6B7280);
}

/* Tableaux du Guide d'achat : même taille que le texte (restaient en 16 px) */
#blc-info-modal .blc-info-modal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
}

#blc-info-modal .blc-info-modal-body th,
#blc-info-modal .blc-info-modal-body td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}

#blc-info-modal .blc-info-modal-body figure.wp-block-table {
  margin: var(--space-4) 0;
  overflow-x: auto;
}

#blc-info-modal .blc-info-modal-body h2,
#blc-info-modal .blc-info-modal-body h3,
#blc-info-modal .blc-info-modal-body h4 {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary, #1C1F3B);
  margin: var(--space-5) 0 var(--space-1);
}

#blc-info-modal .blc-info-modal-body > :first-child {
  margin-top: 0;
}

/* Colonnes et « Média et texte » du Guide d'achat : leurs images partent
   dans la zone de gauche, les colonnes restantes s'empilent (sinon texte
   tassé à côté d'une colonne vide). Remplace, dans l'aide, la mise en ligne
   de .wp-block-columns du plugin. */
#blc-info-modal .blc-info-modal-body .wp-block-columns,
#blc-info-modal .blc-info-modal-body .wp-block-media-text {
  display: block !important;
  margin: 0 !important;
}

#blc-info-modal .blc-info-modal-body .wp-block-column,
#blc-info-modal .blc-info-modal-body .wp-block-media-text__content {
  width: auto !important;
  padding: 0 !important;
  margin: 0 0 var(--space-4) !important;
}

#blc-info-modal .blc-info-modal-body .wp-block-column:empty,
#blc-info-modal .blc-info-modal-body p:empty {
  display: none;
}

/* Repère d'image : invisible, sans hauteur, mais positionné dans le flux */
.blc-aide-img-marker {
  display: block;
  height: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------
   Images dans le texte + bande de vignettes — 2026-10-14
   (main.js : buildInlineImages / buildStrip, classe .has-inline-media).
   Cadre = coloris de la fiche produit (product.css, .bp-swatch) :
   2 px d'espace intérieur sur fond ivoire, gris au survol, encadré
   doré à la sélection (bordure or + halo or 1 px, sans liseré bleu —
   décision atelier 2026-10-15). Toute évolution du
   cadre est à répercuter sur .bp-swatch et .bp-gallery__thumb.
   ------------------------------------------------------------ */
.blc-info-modal-box.has-inline-media .blc-info-modal-media {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.blc-info-modal-media__view {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* Retour à la ligne plutôt que défilement : toutes les vignettes restent
   visibles (écart vertical 12 px : place du trait de groupe). */
.blc-info-modal-media__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px var(--space-2);
  padding: 10px 12px 14px; /* bas : place du trait de groupe */
  border-top: 1px solid var(--color-border, #E5E1D8);
  background: var(--color-bg, #FFFFFF);
}

.blc-info-modal-media__strip[hidden] {
  display: none;
}

.blc-info-modal-media__thumb,
.blc-aide-img {
  display: block;
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* 52 px et écart de 8 px : valeurs des coloris */
.blc-info-modal-media__thumb {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
}

/* Groupe d'images du passage lu : trait marine sous chaque vignette */
.blc-info-modal-media__thumb.is-in-group::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -7px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary, #1C1F3B);
}

.blc-aide-img__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  padding: 2px;
  background: var(--color-bg-alt, #F8F7F5);
  transition: border-color var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s);
}

/* `body … img` : passe devant `.woocommerce img { height: auto }` (fiche produit) */
body .blc-aide-img__frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.blc-info-modal-media__thumb:hover .blc-aide-img__frame,
.blc-aide-img:hover .blc-aide-img__frame {
  border-color: var(--color-border-dark, #C8C3BA);
}

.blc-info-modal-media__thumb[aria-current="true"] .blc-aide-img__frame,
.blc-aide-img[aria-current="true"] .blc-aide-img__frame {
  border-color: var(--color-accent, #CCA63B);
  box-shadow: 0 0 0 1px var(--color-accent, #CCA63B);
}

.blc-info-modal-media__thumb:focus-visible,
.blc-aide-img:focus-visible {
  outline: 2px solid var(--color-focus, #A8842C);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18));
}

/* Rangée d'images dans le texte (repères voisins : galerie, colonnes) */
#blc-info-modal .blc-aide-imgs {
  display: grid;
  grid-template-columns: repeat(var(--blc-aide-cols, 1), minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
}

#blc-info-modal .blc-aide-imgs.is-single {
  max-width: 220px;
}

/* Ratio 4:3 porté par l'image (2026-10-27) : posé sur le cadre, il cédait
   devant la hauteur propre de l'image (cadres de 165 à 178 px de haut
   selon l'image) — désormais tous les cadres ont la même hauteur. */
.blc-aide-img .blc-aide-img__frame {
  height: auto;
}

body .blc-aide-img .blc-aide-img__frame img {
  height: auto;
  aspect-ratio: 4 / 3;
}

/* Image dans le texte : remplit son cadre 4:3, centrée, sans espace vide
 * (décision atelier 2026-10-27, ex-contain) — l'image entière reste visible
 * à l'agrandissement. Le liseré de 2 px du cadre (coloris) est conservé. */
body .blc-aide-img .blc-aide-img__frame img {
  object-fit: cover;
  object-position: center;
}

/* Galerie WordPress : la rangée prend toute la place */
#blc-info-modal .blc-info-modal-body .wp-block-gallery {
  display: block !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .blc-info-modal-box.has-media {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 200px minmax(0, 1fr);
    height: min(600px, calc(100vh - 40px));
  }

  /* Mobile, nouvelle mise en page : plus de bandeau image, tout le
     texte ; la zone image n'apparaît qu'agrandie (image touchée). */
  .blc-info-modal-box.has-media.has-inline-media {
    grid-template-rows: minmax(0, 1fr);
  }

  .blc-info-modal-box.has-inline-media .blc-info-modal-media {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    visibility: hidden;
  }

  .blc-info-modal-box.has-inline-media .blc-info-modal-media.is-zoomed {
    visibility: visible;
  }

  /* Case de retour de l'agrandissement : hors grille, posée par main.js
     sur l'image touchée */
  .blc-info-modal-box.has-inline-media .blondeau-media-zoom__placeholder {
    position: absolute;
    visibility: hidden;
  }

  #blc-info-modal .blc-aide-imgs.is-single {
    max-width: none;
  }

  /* Grilles écrites en HTML dans le Guide d'achat (style en ligne
     « repeat(4, 1fr) ; gap: 20px ») : 2 colonnes sur mobile, sinon le
     texte déborde de la modale (constaté 2026-10-14, section c-densite). */
  #blc-info-modal .blc-info-modal-body [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-3) !important;
  }

  /* Tableaux en HTML libre (hors figure.wp-block-table) : cellules
     resserrées, et défilement dans le tableau lui-même plutôt que dans
     tout le texte s'il reste trop large. */
  #blc-info-modal .blc-info-modal-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  #blc-info-modal .blc-info-modal-body th,
  #blc-info-modal .blc-info-modal-body td {
    padding: var(--space-2);
  }

  .blc-info-modal-overlay .blc-info-modal-hd {
    padding: var(--space-6) 56px var(--space-3) var(--space-6);
  }

  .blc-info-modal-overlay .blc-info-modal-body {
    padding: 0 var(--space-6) var(--space-6);
  }
}

/* ------------------------------------------------------------
   Fiche tissu — icônes du jeu commun (2026-10-15, demande atelier) :
   onglets, caractéristiques (mêmes icônes que la fiche produit,
   product.css .bp-char__icon / .bp-tabs__icon), icône Référence des
   coloris (comme le sélecteur de la fiche produit).
   ------------------------------------------------------------ */
.blc-fabric-modal__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blc-fabric-modal__tab .blondeau-icon,
.blc-fabric-modal__dl dt .blondeau-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.blc-fabric-modal__dl dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Certifications et normes : même rendu que le libellé (dt) des lignes
   Caractéristiques, sans valeur à droite — repris de product.css
   (.bp-norme) ; toute évolution est à répercuter aux deux endroits
   (2026-10-16). */
.blc-fabric-modal__normes {
  list-style: none;
  padding: 0;
}

.blc-fabric-modal__normes .blc-fabric-modal__dl-row {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  color: var(--blc-muted, #888);
  font-weight: 500;
}

.blc-fabric-modal__normes svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.blc-fabric-color-row__sku {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  /* Référence lisible sur 3 colonnes (0.62rem gris #888 auparavant : trop
     petite, contraste 3,5:1) — graisse et couleur de la référence du
     sélecteur de coloris de la fiche produit (.bp-variant-picker__opt-sku)
     — 2026-10-15.
     Taille ramenée de 0.82rem à 0.72rem et retour à la ligne autorisé
     (2026-10-16) : les références longues (« 90730245-multico »…)
     débordaient de la vignette et étaient coupées des deux côtés, l'ellipse
     du plugin ne s'appliquant pas sur un conteneur flex. Une référence
     n'est jamais tronquée : elle passe à la ligne si besoin. */
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary, #1C1F3B);
  letter-spacing: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.blc-fabric-color-row__sku .blondeau-icon {
  width: 12px;
  height: 12px;
  margin-top: 1px; /* aligné sur la première ligne de texte */
  flex-shrink: 0;
  color: var(--color-text-muted, #6B7280);
}

/* Référence du tissu avec l'icône Référence (_blcRefHtml, calculator.js) :
   encart du tissu sélectionné et récapitulatif — même icône, taille et
   couleur que .blc-fabric-color-row__sku ci-dessus (toute évolution est à
   répercuter aux deux endroits) — 2026-10-20 */
.blc-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.blc-ref .blondeau-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--color-text-muted, #6B7280);
}

/* ------------------------------------------------------------
   Fiche tissu — rubrique Entretien (2026-10-15) : valeurs de la
   liste Entretien de la fiche produit (product.css, .bp-icon-list /
   .bp-icon-item) — toute évolution est à répercuter aux deux.
   ------------------------------------------------------------ */
.blc-fabric-modal__care {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
}

.blc-fabric-modal__care li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Même taille que les lignes Référence, Laize… (.blc-fabric-modal__dl-row) */
  font-size: 0.82rem;
  color: var(--color-text, #1E1E1E);
  line-height: var(--line-height-snug, 1.35);
}

.blc-fabric-modal__care svg,
.blc-fabric-modal__care img {
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  object-fit: contain;
  color: var(--color-primary, #1C1F3B);
}

/* Coloris de la fiche tissu : 3 colonnes (4 auparavant — 2026-10-15) */
.blc-fabric-modal .blc-fabric-color-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Onglet « Usage & entretien » : libellé long quand la colonne de texte
   fait au moins 420px (ordinateur), « Entretien » sinon (tablette, mobile)
   — requête de conteneur sur la colonne, pas sur l'écran : sur tablette,
   la colonne ne fait que ~350px (2026-10-15) */
.blc-fabric-modal__content { container-type: inline-size; }
.blc-fabric-modal__tab-long { display: none; }
@container (min-width: 420px) {
  .blc-fabric-modal__tab-long  { display: inline; }
  .blc-fabric-modal__tab-short { display: none; }
}

/* Petits mobiles : onglets resserrés pour rester sur une ligne (360px :
   barre de 305px) ; sous 340px, libellés seuls (icônes décoratives) */
@media (max-width: 400px) {
  .blc-fabric-modal__tabs { padding: 0 4px; }
  .blc-fabric-modal__tab {
    padding-left: 4px;
    padding-right: 4px;
    gap: 4px;
  }
  .blc-fabric-modal__tab .blondeau-icon {
    width: 14px;
    height: 14px;
  }
}
@media (max-width: 340px) {
  .blc-fabric-modal__tab .blondeau-icon { display: none; }
}

@media (max-width: 480px) {
  .blc-fabric-modal__care {
    grid-template-columns: 1fr;
  }
}

/* Schéma des dimensions (rideau, coussin, mousse) : la légende touche
   l'image — la marge générale des légendes (main.css, figcaption
   { margin-top: var(--space-2) }) laissait 8px de vide entre l'image et
   le filet du texte (2026-10-15, demande atelier) */
.blc-measure-guide__fig figcaption {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .blc-info-modal-media__img,
  .blc-aide-img__frame {
    transition: none;
  }
}