/* Configurateur de bâche à barres — styles front (préfixe bb-). */

/* Pleine largeur : on masque les colonnes latérales du thème. */
.bb-fullwidth-page #left-column,
.bb-fullwidth-page #right-column { display: none !important; }
.bb-fullwidth-page #content-wrapper,
.bb-fullwidth-page #main .row > #content-wrapper { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }

#bache-configurator {
  --bb-blue: #0a6ebd;
  --bb-blue-d: #075592;
  --bb-ink: #223140;
  --bb-muted: #5b6b7a;
  --bb-line: #e3e9ef;
  --bb-bg: #f5f8fb;
  --bb-ok: #2e9e5b;
  --bb-warn: #c9761d;
  color: var(--bb-ink);
  max-width: 1560px;
  margin: 0 auto;
  padding: 4px 8px 24px;
  font-size: 14px;
  position: relative;
}

/* Barre de progression */
.bb-progress { margin: 4px 0 12px; }
.bb-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.bb-progress-label { font-weight: 700; color: var(--bb-blue-d); }
.bb-progress-count { color: var(--bb-muted); font-variant-numeric: tabular-nums; }
.bb-progress-track { height: 8px; background: var(--bb-line); border-radius: 20px; overflow: hidden; }
.bb-progress-fill { height: 100%; width: 10%; background: linear-gradient(90deg, var(--bb-blue), var(--bb-blue-d)); border-radius: 20px; transition: width .3s ease; }

/* Layout */
.bb-layout { display: grid; grid-template-columns: 1fr 280px; gap: 14px; align-items: start; }
.bb-main { min-width: 0; }
/* Titre de panneau masqué : la barre de progression indique déjà l'étape (évite la répétition). */
.bb-panel h2 { display: none; }
.bb-help { color: var(--bb-muted); margin: 0 0 8px; font-size: .86rem; }
.bb-subtitle { font-size: 1rem; margin: 12px 0 7px; color: var(--bb-ink); }
.bb-attention { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; padding: 8px 12px; font-size: .84rem; color: #7a4a12; background: #fff6ea; border: 1px solid #f0d3a6; border-left: 4px solid var(--bb-warn); border-radius: 8px; }
.bb-attention-tag { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--bb-warn); white-space: nowrap; }

/* Cartes — centrées */
.bb-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.bb-card {
  position: relative; border: 1.5px solid var(--bb-line); border-radius: 12px; background: #fff;
  padding: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .08s;
  display: flex; flex-direction: column; gap: 5px; text-align: center; align-items: center;
  flex: 0 1 200px;
}
.bb-card:hover { border-color: #b9d6ee; box-shadow: 0 6px 18px rgba(10,110,189,.10); }
.bb-card.bb-selected { border-color: var(--bb-blue); box-shadow: 0 0 0 3px rgba(10,110,189,.15); }
.bb-card-img { width: 100%; height: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 9px; background: var(--bb-bg); }
.bb-card-img img { max-width: 100%; max-height: 96px; object-fit: contain; }
.bb-card-title { font-weight: 700; line-height: 1.18; font-size: .98rem; }
.bb-card-brand { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bb-muted); }
.bb-card-meta { font-size: .8rem; color: var(--bb-muted); }
.bb-card-price { color: var(--bb-blue-d); font-weight: 700; font-size: .95rem; }
.bb-card-price.bb-quote { color: var(--bb-warn); }
.bb-card-price.bb-card-opttag { display: inline-block; color: var(--bb-warn); background: #fbefe0; border-radius: 20px; padding: 1px 10px; font-size: .78rem; }
.bb-combo { width: 100%; margin: 2px 0 4px; padding: 4px 6px; border: 1.5px solid var(--bb-line); border-radius: 8px; font-size: .82rem; background: #fff; cursor: pointer; }
.bb-combo:hover { border-color: #b9d6ee; }
.bb-card-warn { color: var(--bb-warn); font-size: .8rem; font-weight: 600; }

/* Pictogrammes SVG intégrés (formes + étapes) */
.bb-svg svg { width: 100%; height: 96px; }
.bb-svg .w { fill: #d9ecfb; stroke: var(--bb-blue); stroke-width: 2.5; }
.bb-svg .t { fill: var(--bb-blue-d); font-size: 26px; font-weight: 700; }
/* remplissages */
.bb-svg .a { fill: var(--bb-blue); }
.bb-svg .metal { fill: #aeb8c2; stroke: #7a8792; stroke-width: 1.5; }
.bb-svg .wd { fill: #dcb987; stroke: #a9814f; stroke-width: 1.5; }
.bb-svg .stone { fill: #e8ecf0; stroke: #bcc5cd; stroke-width: 1.5; }
.bb-svg .grass { fill: #c2e3a6; }
.bb-svg .g { fill: #efe4d3; }
.bb-svg .wheel { fill: #46525e; }
.bb-svg .warn-c { fill: #fbefe0; stroke: var(--bb-warn); stroke-width: 2; }
.bb-svg .warn-t { fill: var(--bb-warn); font-size: 16px; font-weight: 800; }
/* traits (fill:none obligatoire) */
.bb-svg .s, .bb-svg .ripple, .bb-svg .soil, .bb-svg .blade, .bb-svg .steps,
.bb-svg .hook, .bb-svg .ring, .bb-svg .spoke, .bb-svg .crank, .bb-svg .strap,
.bb-svg .arrow, .bb-svg .check, .bb-svg .pickup {
  fill: none; stroke: var(--bb-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.bb-svg .s { stroke: #7a8792; stroke-width: 1.6; }
.bb-svg .ripple { stroke: #7fb8e0; stroke-width: 1.6; }
.bb-svg .soil { stroke: #a9814f; stroke-width: 3; }
.bb-svg .blade { stroke: #4f9a3f; stroke-width: 2; }
.bb-svg .steps { stroke: var(--bb-blue); stroke-width: 2.5; }
.bb-svg .hook, .bb-svg .crank { stroke: #6b7784; stroke-width: 2.5; }
.bb-svg .ring { stroke: var(--bb-blue); stroke-width: 3; }
.bb-svg .spoke { stroke: var(--bb-blue); stroke-width: 2.5; }
.bb-svg .strap { stroke: #4a5763; stroke-width: 3; }
.bb-svg .arrow { stroke: var(--bb-blue); stroke-width: 2.5; }
.bb-svg .check { stroke: var(--bb-ok); stroke-width: 3; }
.bb-svg .pickup { stroke: var(--bb-blue); stroke-width: 2; }

/* Badges */
.bb-badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.bb-badge-ok { background: #e6f6ec; color: var(--bb-ok); }
.bb-badge-warn { background: #fbefe0; color: var(--bb-warn); }

/* Cartes option (multi-sélection) */
.bb-card-option .bb-card-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--bb-line); background: #fff; }
.bb-card-option.bb-selected .bb-card-check { background: var(--bb-blue); border-color: var(--bb-blue); }
.bb-card-option.bb-selected .bb-card-check::after { content: "✓"; color: #fff; font-size: 14px; position: absolute; top: -1px; left: 4px; }

/* Coloris — centrés */
.bb-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bb-swatch { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--bb-line); border-radius: 12px; background: #fff; padding: 8px 12px; cursor: pointer; flex: 0 1 180px; }
.bb-swatch:hover { border-color: #b9d6ee; }
.bb-swatch.bb-selected { border-color: var(--bb-blue); box-shadow: 0 0 0 3px rgba(10,110,189,.15); }
.bb-swatch-color { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background-size: cover; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.bb-swatch-duo { position: relative; }
.bb-swatch-label { font-size: .86rem; font-weight: 600; text-align: left; }

/* --- Détails de la découpe (étape 5) — schéma coté + champs --- */
.bb-cut-layout { display: grid; grid-template-columns: minmax(300px, 1fr) 1.1fr; gap: 20px; align-items: start; margin-top: 8px; }
.bb-cut-schema { background: linear-gradient(180deg,#f4f9fd,#eaf3fb); border: 1.5px solid var(--bb-line); border-radius: 12px; padding: 8px; }
.bb-cut-svg { width: 100%; height: auto; display: block; }
.bb-cut-svg text { font-family: inherit; }
.bb-cut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.bb-cut-field { display: flex; flex-direction: column; gap: 5px; font-size: .84rem; font-weight: 600; color: var(--bb-blue-d); }
.bb-cut-field.bb-cut-full { grid-column: 1 / -1; }
.bb-cut-lbl { display: flex; align-items: center; gap: 7px; }
.bb-cut-num { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; color: #fff; font-size: .74rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.bb-cut-num.n1 { background: #0a6ebd; } .bb-cut-num.n2 { background: #e0851e; }
.bb-cut-num.n3 { background: #2f9e52; } .bb-cut-num.n4 { background: #a8478e; }
.bb-cut-field select, .bb-cut-field input { padding: 8px 10px; border: 1.5px solid var(--bb-line); border-radius: 8px; font-size: .95rem; font-weight: 400; color: #243b53; background: #fff; }
.bb-cut-field select:focus, .bb-cut-field input:focus { border-color: var(--bb-blue); outline: none; box-shadow: 0 0 0 3px rgba(10,110,189,.12); }
@media (max-width: 860px) { .bb-cut-layout { grid-template-columns: 1fr; } .bb-cut-schema { max-width: 460px; margin: 0 auto; } }
@media (max-width: 520px) { .bb-cut-grid { grid-template-columns: 1fr; } }

/* --- Modèles : une bâche par ligne (liste) --- */
.bb-models { display: flex; flex-direction: column; gap: 10px; }
.bb-modelrow {
  display: grid; grid-template-columns: 118px 1fr 158px; gap: 12px;
  border: 1.5px solid var(--bb-line); border-radius: 12px; background: #fff;
  padding: 10px 12px; align-items: stretch; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.bb-modelrow:hover { border-color: #b9d6ee; box-shadow: 0 8px 22px rgba(10,110,189,.10); }
.bb-modelrow.bb-selected { border-color: var(--bb-blue); box-shadow: 0 0 0 3px rgba(10,110,189,.15); }
.bb-mr-media { display: flex; align-items: center; justify-content: center; background: var(--bb-bg); border-radius: 9px; padding: 5px; }
.bb-mr-media .bb-card-img, .bb-mr-media .bb-svg svg { height: 88px; width: 100%; }
.bb-mr-media .bb-card-img img { max-height: 88px; }
.bb-mr-body { min-width: 0; }
.bb-mr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.bb-mr-title { font-size: 1.02rem; font-weight: 800; color: var(--bb-ink); }
.bb-mr-mat { font-size: .76rem; color: var(--bb-muted); }
.bb-mr-desc { margin: 4px 0 6px; color: var(--bb-ink); font-size: .82rem; line-height: 1.28; }
.bb-mr-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bb-mr-lbl { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; margin-bottom: 2px; }
.bb-lbl-pro { color: var(--bb-ok); }
.bb-lbl-con { color: var(--bb-warn); }
.bb-mr-pros, .bb-mr-cons { list-style: none; margin: 0; padding: 0; }
.bb-mr-pros li, .bb-mr-cons li { position: relative; padding-left: 15px; margin-bottom: 2px; font-size: .78rem; line-height: 1.24; }
.bb-mr-pros li::before { content: "✓"; position: absolute; left: 0; color: var(--bb-ok); font-weight: 800; }
.bb-mr-cons li::before { content: "–"; position: absolute; left: 2px; color: var(--bb-warn); font-weight: 800; }
.bb-mr-side { display: flex; flex-direction: column; justify-content: center; gap: 7px; border-left: 1px solid var(--bb-line); padding-left: 12px; }
.bb-mr-price { text-align: center; }
.bb-mr-from { display: block; font-size: .72rem; color: var(--bb-muted); }
.bb-mr-amount { display: block; font-size: 1.25rem; font-weight: 800; color: var(--bb-blue-d); }
.bb-mr-amount.bb-quote { color: var(--bb-warn); font-size: 1.05rem; }
.bb-mr-ht { display: block; font-size: .68rem; color: var(--bb-muted); }
.bb-mr-btn { width: 100%; padding: 8px 12px; font-size: .9rem; }

/* Filtre marques */
.bb-brand-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bb-chip { border: 1.5px solid var(--bb-line); background: #fff; border-radius: 20px; padding: 4px 11px; cursor: pointer; font-weight: 600; color: var(--bb-muted); font-size: .85rem; }
.bb-chip-on { background: var(--bb-blue); border-color: var(--bb-blue); color: #fff; }

/* Dimensions */
.bb-dims { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.bb-dim { display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
.bb-dim input { width: 180px; padding: 8px 10px; border: 1.5px solid var(--bb-line); border-radius: 9px; font-size: .95rem; }
.bb-dim input:focus { outline: none; border-color: var(--bb-blue); }

/* Schéma */
.bb-schema { margin-top: 8px; }
.bb-view { margin: 0; text-align: center; background: var(--bb-bg); border: 1px solid var(--bb-line); border-radius: 12px; padding: 8px; max-width: 360px; }
.bb-view figcaption { color: var(--bb-muted); font-size: .8rem; margin-top: 3px; }
.bb-schema-svg { width: 100%; height: auto; }
.bb-sc-water { fill: #d9ecfb; stroke: var(--bb-blue); stroke-width: 2; }
.bb-sc-cote { stroke: #5b6b7a; stroke-width: 1; }
.bb-sc-dim { fill: var(--bb-ink); font-size: 12px; font-weight: 600; }

/* Sous-bloc (position escalier) */
.bb-subblock { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--bb-line); }

/* Empty models */
.bb-empty { margin-top: 12px; padding: 14px; background: #fbefe0; border-radius: 12px; }
.bb-warn { color: var(--bb-warn); font-weight: 600; }

/* Récapitulatif */
.bb-recap-table { width: 100%; border-collapse: collapse; }
.bb-recap-table th, .bb-recap-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--bb-line); font-size: .88rem; }
.bb-recap-table th { width: 38%; color: var(--bb-muted); font-weight: 600; }
.bb-recap-total { margin-top: 10px; font-size: 1.05rem; }
.bb-note-warn { margin-top: 8px; color: var(--bb-warn); font-weight: 600; }

/* Commentaire (étape 11) */
.bb-comment-block { margin: 14px 0 4px; }
.bb-comment-label { display: block; font-weight: 700; color: var(--bb-ink); margin-bottom: 5px; font-size: .92rem; }
.bb-comment { width: 100%; padding: 9px 11px; border: 1.5px solid var(--bb-line); border-radius: 9px; font-size: .92rem; font-family: inherit; resize: vertical; min-height: 64px; }
.bb-comment:focus { outline: none; border-color: var(--bb-blue); box-shadow: 0 0 0 3px rgba(10,110,189,.12); }

/* Choix finaux — boutons très visibles */
.bb-final-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.bb-choice {
  border: none; border-radius: 12px; padding: 15px 16px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  transition: transform .08s, box-shadow .15s, filter .15s;
}
.bb-choice:hover { transform: translateY(-2px); }
/* Commander : bouton plein bleu */
#bb-choice-order { background: linear-gradient(135deg, #0a6ebd, #075592); color: #fff; box-shadow: 0 8px 22px rgba(10,110,189,.35); }
#bb-choice-order:hover { filter: brightness(1.06); box-shadow: 0 12px 28px rgba(10,110,189,.45); }
#bb-choice-order .bb-choice-title { color: #fff; }
#bb-choice-order .bb-choice-sub { color: rgba(255,255,255,.9); }
/* Être rappelé : contour bleu épais */
#bb-choice-callback { background: #fff; border: 2.5px solid var(--bb-blue); color: var(--bb-blue-d); box-shadow: 0 4px 14px rgba(10,110,189,.12); }
#bb-choice-callback:hover { background: #f0f7fd; box-shadow: 0 8px 20px rgba(10,110,189,.20); }
.bb-choice-title { font-weight: 800; font-size: 1.1rem; }
#bb-choice-callback .bb-choice-title { color: var(--bb-blue-d); }
.bb-choice-sub { font-size: .85rem; }

/* Formulaire devis */
.bb-quote-block { margin-top: 12px; background: var(--bb-bg); border: 1px solid var(--bb-line); border-radius: 12px; padding: 14px; }
.bb-form-row { display: flex; gap: 10px; margin-bottom: 10px; }
.bb-form-row input { flex: 1; }
.bb-quote-form input, .bb-quote-form textarea { width: 100%; padding: 8px 10px; border: 1.5px solid var(--bb-line); border-radius: 9px; font-size: .95rem; }
.bb-quote-form textarea { min-height: 72px; margin-bottom: 10px; }
.bb-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* Boutons */
.bb-btn { border: none; border-radius: 9px; padding: 9px 16px; font-weight: 700; cursor: pointer; font-size: .95rem; }
.bb-btn-primary { background: var(--bb-blue); color: #fff; }
.bb-btn-primary:hover { background: var(--bb-blue-d); }
.bb-btn-ghost { background: #fff; border: 1.5px solid var(--bb-line); color: var(--bb-ink); }
.bb-btn-link { background: transparent; color: var(--bb-muted); padding: 6px 8px; }

/* Navigation */
.bb-nav { display: flex; justify-content: space-between; margin-top: 16px; }
.bb-nav .bb-btn-primary { min-width: 130px; }

/* Feedback */
.bb-feedback { margin-top: 10px; font-weight: 600; }
.bb-feedback.bb-ok { color: var(--bb-ok); }
.bb-feedback.bb-warn { color: var(--bb-warn); }
.bb-feedback.bb-info { color: var(--bb-blue-d); }

/* Aside prix */
.bb-aside { position: sticky; top: 10px; }
.bb-price-box { border: 1.5px solid var(--bb-line); border-radius: 13px; background: #fff; padding: 13px; box-shadow: 0 8px 24px rgba(10,110,189,.08); }
.bb-price-title { text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; color: var(--bb-muted); }
.bb-price-amount { font-size: 1.45rem; font-weight: 800; color: var(--bb-blue-d); margin: 2px 0 0; }
.bb-price-ht { color: var(--bb-muted); font-size: .84rem; margin-bottom: 8px; }
.bb-price-detail { list-style: none; margin: 0 0 8px; padding: 0; }
.bb-price-detail li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--bb-line); font-size: .84rem; }
.bb-price-detail li span:last-child { font-weight: 700; }
.bb-price-detail li.bb-total-liv { border-bottom: none; border-top: 2px solid var(--bb-blue); margin-top: 4px; padding-top: 8px; }
.bb-price-detail li.bb-total-liv span { color: var(--bb-blue-d); font-weight: 800; }
.bb-price-detail li.bb-price-sep { border-bottom: none; padding-bottom: 0; margin-top: 4px; }
.bb-price-detail li.bb-price-sep span:first-child { color: var(--bb-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.bb-price-note { font-size: .78rem; color: var(--bb-muted); margin: 0; }

/* Filtres (étape 6) — plusieurs filtres côte à côte, séparés nettement */
.bb-subblock-top { margin-top: 0; padding-top: 0; border-top: none; }
#bb-filters { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.bb-filter-group { flex: 1 1 340px; min-width: 0; padding: 0 24px; }
.bb-filter-group:first-child { padding-left: 0; }
.bb-filter-group + .bb-filter-group { border-left: 1px solid var(--bb-line); }
.bb-cards-sangles { justify-content: center; }
/* Les 2 options d'un filtre restent côte à côte dans la colonne du filtre. */
.bb-filter-group .bb-cards-sangles { justify-content: flex-start; gap: 8px; }
.bb-filter-group .bb-card-sangle { flex: 1 1 44%; max-width: none; }
/* L'étape 6 (filtres) garde sa taille : on n'applique pas l'agrandissement global. */
.bb-filter-group .bb-card { padding: 9px; }
.bb-filter-group .bb-card-img, .bb-filter-group .bb-svg svg { height: 72px; }
.bb-filter-group .bb-card-img img { max-height: 72px; }
.bb-filter-group .bb-card-title { font-size: .9rem; }
.bb-filter-desc, .bb-opt-desc { line-height: 1.3; margin-top: 2px; }
.bb-card-sangle { flex: 0 1 258px; }
.bb-card-sangle .bb-card-title { font-size: .9rem; }
.bb-card-sangle .bb-card-meta { line-height: 1.3; }
.bb-sangle-count { margin-top: 2px; font-weight: 800; color: var(--bb-blue-d); font-size: .76rem; }

/* ============================ RESPONSIVE ============================ */
/* Tablette / petit écran : la colonne prix passe au-dessus, cartes plus souples. */
@media (max-width: 900px) {
  #bache-configurator { padding: 4px 6px 20px; }
  .bb-layout { grid-template-columns: 1fr; gap: 10px; }
  /* Aperçu prix : placé EN BAS du flux sur mobile (après les choix et la navigation). */
  .bb-main { order: 1; }
  .bb-aside { position: static; order: 2; margin: 10px 0 0; }
  /* Aperçu prix compacté. */
  .bb-price-box { padding: 10px 12px; }
  .bb-price-amount { font-size: 1.25rem; }
  .bb-card { flex: 1 1 150px; max-width: 220px; }
  .bb-card-img, .bb-svg svg { height: 70px; }
  .bb-swatch { flex: 1 1 150px; max-width: 220px; }
  .bb-final-choices { grid-template-columns: 1fr; }
  .bb-form-row { flex-direction: column; }
  .bb-dim input { width: 100%; }
  .bb-card-sangle { flex: 1 1 240px; max-width: 340px; }
  /* Filtres empilés : séparateur horizontal net entre chaque filtre. */
  .bb-filter-group { flex: 1 1 100%; padding: 0; }
  .bb-filter-group:first-child { padding-left: 0; }
  .bb-filter-group + .bb-filter-group { border-left: none; border-top: 1px solid var(--bb-line); margin-top: 10px; padding-top: 10px; }
  /* Modèles : passage en pile lisible. */
  .bb-modelrow { grid-template-columns: 96px 1fr; gap: 10px 12px; }
  .bb-mr-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-left: none; border-top: 1px solid var(--bb-line); padding-left: 0; padding-top: 10px; }
  .bb-mr-price { text-align: left; }
  .bb-mr-btn { width: auto; white-space: nowrap; }
  .bb-mr-media .bb-card-img, .bb-mr-media .bb-svg svg { height: 74px; }
  .bb-mr-lists { grid-template-columns: 1fr 1fr; }
}

/* Téléphone : tout en pleine largeur, textes et espacements resserrés. */
@media (max-width: 560px) {
  #bache-configurator { font-size: 13.5px; padding: 2px 4px 18px; }
  .bb-progress { margin: 2px 0 9px; }
  .bb-subtitle { margin: 10px 0 6px; font-size: .95rem; }
  .bb-cards { gap: 7px; }
  .bb-card { flex: 1 1 44%; max-width: none; padding: 8px; }
  .bb-card-img, .bb-svg svg { height: 62px; }
  .bb-card-title { font-size: .86rem; }
  .bb-card-meta, .bb-card-brand { font-size: .72rem; }
  .bb-swatch { flex: 1 1 44%; max-width: none; }
  .bb-card-sangle { flex: 1 1 100%; max-width: none; }
  /* Découpe : schéma au-dessus des champs, pleine largeur. */
  .bb-cut-layout { gap: 12px; }
  .bb-cut-schema { max-width: 100%; }
  .bb-cut-grid { grid-template-columns: 1fr; gap: 9px; }
  /* Modèles : image + titre en tête, listes empilées. */
  .bb-modelrow { grid-template-columns: 72px 1fr; padding: 9px 10px; gap: 8px 10px; }
  .bb-mr-media .bb-card-img, .bb-mr-media .bb-svg svg { height: 56px; }
  .bb-mr-title { font-size: .96rem; }
  .bb-mr-desc { font-size: .8rem; }
  .bb-mr-lists { grid-template-columns: 1fr; gap: 6px; }
  .bb-mr-amount { font-size: 1.15rem; }
  .bb-mr-btn { padding: 9px 14px; }
  /* Récapitulatif : le tableau reste lisible sans débordement. */
  .bb-recap-table th { width: 44%; }
  .bb-recap-table th, .bb-recap-table td { padding: 5px 6px; font-size: .84rem; }
  .bb-choice { padding: 13px 12px; }
  .bb-choice-title { font-size: 1.02rem; }
  .bb-nav .bb-btn-primary { min-width: 108px; }
  .bb-btn { padding: 9px 13px; }
}

/* Très petit téléphone : cartes sur une colonne quand le texte est dense. */
@media (max-width: 380px) {
  .bb-card { flex: 1 1 100%; }
  .bb-swatch { flex: 1 1 100%; }
}

/* ---- Étape 9 : tableau comparatif des systèmes d'enroulement / motorisations ---- */
/* Ordinateur : toutes les colonnes sur UNE seule ligne (pas de retour à la ligne).
   Si vraiment trop étroit, la rangée défile horizontalement plutôt que de casser. */
.bb-enr-compare { display: flex; flex-wrap: nowrap; gap: 10px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }
.bb-enr-col { flex: 1 1 0; min-width: 120px; max-width: none; display: flex; flex-direction: column; border: 1.5px solid var(--bb-line); border-radius: 14px; background: #fff; padding: 14px 10px 12px; transition: border-color .15s, box-shadow .15s; cursor: pointer; }
.bb-enr-col:hover { border-color: #b9d6ee; }
.bb-enr-col.bb-enr-sel { border-color: var(--bb-blue); box-shadow: 0 0 0 3px rgba(10,110,189,.15); }
.bb-enr-illus { height: 78px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.bb-enr-illus svg, .bb-enr-illus img { max-height: 78px; max-width: 100%; }
.bb-enr-name { font-weight: 800; text-align: center; color: var(--bb-ink); font-size: .92rem; line-height: 1.2; }
.bb-enr-desc { font-size: .78rem; color: var(--bb-muted); text-align: center; margin-top: 3px; line-height: 1.25; }
.bb-enr-price { text-align: center; font-weight: 800; color: var(--bb-blue-d); margin: 8px 0; font-size: .92rem; }
.bb-enr-combo { margin-bottom: 8px; }
.bb-enr-combo .bb-combo { width: 100%; }
.bb-enr-feats { list-style: none; margin: 4px 0 10px; padding: 10px 0 0; flex: 1 0 auto; border-top: 1px solid var(--bb-line); }
.bb-enr-feats li { position: relative; padding-left: 18px; font-size: .8rem; margin-bottom: 6px; color: var(--bb-ink); line-height: 1.3; }
.bb-enr-feats li::before { content: "\2713"; position: absolute; left: 0; color: var(--bb-ok); font-weight: 800; }
.bb-enr-nofeat { flex: 1 0 auto; color: var(--bb-muted); text-align: center; padding: 10px 0; border-top: 1px solid var(--bb-line); margin-top: 6px; }
.bb-enr-linkwrap { text-align: center; margin-bottom: 10px; }
.bb-enr-link { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--bb-blue); text-decoration: none; border: 1px solid var(--bb-blue); border-radius: 8px; padding: 5px 10px; }
.bb-enr-link:hover { background: var(--bb-blue); color: #fff; }
.bb-enr-choose { margin-top: auto; width: 100%; border: 0; border-radius: 10px; padding: 9px; font-weight: 800; font-size: .88rem; cursor: pointer; background: var(--bb-bg); color: var(--bb-ink); }
.bb-enr-col.bb-enr-sel .bb-enr-choose { background: linear-gradient(180deg, var(--bb-blue), var(--bb-blue-d)); color: #fff; }
/* Téléphone : on repasse en colonnes empilées, chacune pleine largeur. */
@media (max-width: 560px) {
  .bb-enr-compare { flex-wrap: wrap; overflow-x: visible; }
  .bb-enr-col { flex: 1 1 100%; min-width: 0; }
}

/* ---- Écran de confirmation (demande de devis / rappel envoyée) ---- */
.bb-confirm{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
 background:rgba(244,248,251,.96);padding:24px;border-radius:12px;}
.bb-confirm-card{max-width:560px;width:100%;background:#fff;border:1px solid var(--bb-line);border-radius:16px;
 box-shadow:0 16px 48px rgba(10,110,189,.14);padding:40px 34px;text-align:center;}
.bb-confirm-icon{width:66px;height:66px;margin:0 auto 18px;border-radius:50%;background:#e6f6ec;color:var(--bb-ok);
 font-size:34px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.bb-confirm-title{font-size:1.5rem;font-weight:800;color:var(--bb-ink);margin:0 0 12px;}
.bb-confirm-text{color:var(--bb-muted);font-size:1rem;line-height:1.5;margin:0 0 24px;}
.bb-confirm-btn{display:inline-block;font-weight:700;padding:13px 30px;font-size:1rem;border-radius:8px;}