/* Configurateur de bâche de protection volet · 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 */
/* Le tarif (colonne de droite) n'est affiché qu'à l'étape 11 : par défaut une seule colonne. */
.bb-layout { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.bb-layout.bb-with-aside { grid-template-columns: 1fr 280px; }
.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; }
/* Encart incitatif « laissez vos coordonnées / remise » · version vendeuse */
.bb-incentive { grid-column: 1 / -1; position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px; padding: 18px 22px;
  border-radius: 16px; border: 2px solid #7fce9f;
  background: linear-gradient(135deg,#eafaf0 0%,#dff6e8 55%,#e9f8fb 100%);
  box-shadow: 0 10px 26px rgba(46,158,91,.18); }
/* petit liseré doré à gauche pour l'effet « offre » */
.bb-incentive::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg,#f5b301,#e58a00); }
.bb-incentive-badge { flex: 0 0 auto; width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #35b46a, #1f8f4f);
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(31,143,79,.45), inset 0 0 0 3px rgba(255,255,255,.35); line-height: 1; }
.bb-incentive-badge-top, .bb-incentive-badge-bot { font-size: .52rem; font-weight: 800; letter-spacing: .06em; }
.bb-incentive-badge-pct { font-size: 2rem; font-weight: 900; margin: 1px 0; }
.bb-incentive-main { min-width: 0; }
.bb-incentive-title { font-size: 1.18rem; font-weight: 900; color: #14713f; line-height: 1.15; }
.bb-incentive-sub { font-size: .92rem; line-height: 1.4; color: #2b5e42; margin-top: 4px; }
.bb-incentive-sub strong { color: #0f6b39; }
.bb-incentive-perks { margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.bb-incentive-perks span { position: relative; font-size: .82rem; font-weight: 700; color: #14713f;
  background: #fff; border: 1px solid #b7e4c8; border-radius: 20px; padding: 5px 13px 5px 28px; white-space: nowrap; }
.bb-incentive-perks span::before { content: "\2713"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--bb-ok); font-weight: 900; }
.bb-incentive-nudge { margin-top: 10px; font-size: .9rem; font-weight: 800; color: #b26a00; display: flex; align-items: center; gap: 6px; }
.bb-incentive-arrow { display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  background: #f5b301; color: #fff; align-items: center; justify-content: center; font-weight: 900;
  animation: bb-bounce 1.1s infinite; }
@keyframes bb-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (max-width: 560px) {
  .bb-incentive { flex-direction: column; align-items: flex-start; text-align: left; }
}
.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; display: none; }
.bb-layout.bb-with-aside .bb-aside { display: block; }
.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, .bb-layout.bb-with-aside { 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; min-width: 0; }
  /* Dimensions : les champs côte à côte sur UNE seule ligne, champs alignés. */
  .bb-dims { gap: 8px; align-items: stretch; }
  .bb-dim { flex: 1 1 calc(50% - 4px); min-width: 0; justify-content: space-between; }
  .bb-dim span { font-size: .78rem; line-height: 1.2; text-align: left; }
  .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 : on garde 2 cartes par ligne (formes, supports, options…). */
@media (max-width: 380px) {
  .bb-card { flex: 1 1 44%; min-width: 0; }
  .bb-swatch { flex: 1 1 44%; min-width: 0; }
}

/* ---- É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;}

/* ===== v1.50 : optimisations conversion ===== */

/* Bandeau « à partir de … € » (étapes 6-10) */
.bb-price-teaser {
  position: sticky; top: 0; z-index: 30;
  margin: 0 0 12px; padding: 10px 16px; border-radius: 10px;
  background: linear-gradient(135deg, #eaf4fc, #f4fafe);
  border: 1px solid #bcd9ef; color: #14293b; font-size: .95rem; text-align: center;
  box-shadow: 0 4px 14px rgba(10,110,189,.10);
}
.bb-price-teaser strong { color: var(--bb-blue-d); font-size: 1.05rem; }
.bb-teaser-sub { color: #5f7183; font-size: .82rem; }

/* Bandeau « Reprendre ma configuration » */
.bb-resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
  background: #fdf7ec; border: 1px solid #ecd9b0;
}
.bb-resume-icon { font-size: 1.15rem; color: #a9600f; }
.bb-resume-label { font-weight: 600; color: #5c4a23; flex: 1 1 auto; }
.bb-resume-actions { display: flex; gap: 8px; }
.bb-resume-btn { padding: 7px 14px; font-size: .88rem; }

/* Troisième choix : recevoir par e-mail */
#bb-choice-email {
  background: #fff; border: 1.5px dashed #9db9d1; color: #33506a;
  box-shadow: none;
}
#bb-choice-email:hover { background: #f6fafd; border-color: var(--bb-blue); }
#bb-choice-email .bb-choice-title { color: #33506a; font-size: 1rem; font-weight: 700; }

/* Mini-formulaire e-mail */
.bb-email-block { margin: 12px 0 4px; padding: 12px 14px; border-radius: 10px; background: #f4f8fb; border: 1px solid #d9e3ec; }
.bb-email-block .bb-form-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-email-block input { flex: 1 1 180px; padding: 10px 12px; border: 1px solid #c9d7e4; border-radius: 8px; font-size: .95rem; }
.bb-email-block .bb-btn { flex: 0 0 auto; }
.bb-email-done { margin: 4px 0 0; color: #1f9d57; font-weight: 600; }

/* Réassurance étape 11 */
.bb-trust {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed #d9e3ec;
}
.bb-trust-item { font-size: .82rem; color: #5f7183; white-space: nowrap; }

@media (max-width: 640px) {
  .bb-price-teaser { font-size: .88rem; padding: 8px 10px; }
  .bb-resume { flex-direction: column; align-items: stretch; text-align: center; }
  .bb-trust-item { white-space: normal; }
}

/* Badge promotionnel configurable sur la carte modèle (étape 6) */
.bb-modelrow { position: relative; }
.bb-mr-flag {
  position: absolute; top: -11px; left: 16px; z-index: 3;
  padding: 4px 13px; border-radius: 20px;
  font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(0,0,0,.20); white-space: nowrap; max-width: calc(100% - 32px);
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) { .bb-mr-flag { font-size: .7rem; padding: 3px 10px; } }

/* Navigation directe entre étapes (pastilles cliquables) */
.bb-steps-nav { display: flex; gap: 6px; margin-top: 7px; }
.bb-stepdot {
  flex: 1 1 0; min-width: 0; height: 30px; padding: 0;
  border: none; border-radius: 8px; font-weight: 700; font-size: .85rem;
  font-family: inherit; cursor: pointer; color: var(--bb-blue-d);
  background: #d9e9f7; transition: background .12s, color .12s, transform .06s, box-shadow .12s;
}
.bb-stepdot.is-done:hover { background: var(--bb-blue); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(10,110,189,.25); }
.bb-stepdot.is-current {
  background: linear-gradient(135deg, #0a6ebd, #075592); color: #fff;
  box-shadow: 0 3px 10px rgba(10,110,189,.35); cursor: default;
}
.bb-stepdot.is-locked { background: #eef2f6; color: #a5b3c0; cursor: default; }
.bb-stepdot:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; }
@media (max-width: 640px) {
  .bb-steps-nav { gap: 3px; }
  .bb-stepdot { height: 26px; font-size: .74rem; border-radius: 6px; }
}

/* ===== v1.51.2 : cartes modèles verticales (même présentation que les enrouleurs) ===== */
.bb-models { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: stretch; padding: 14px 2px 6px; }
.bb-model-col {
  position: relative; min-width: 0; display: flex; flex-direction: column;
  border: 1.5px solid var(--bb-line); border-radius: 14px; background: #fff;
  padding: 16px 12px 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.bb-model-col:hover { border-color: #b9d6ee; }
.bb-model-col.bb-selected { border-color: var(--bb-blue); box-shadow: 0 0 0 3px rgba(10,110,189,.15); }
/* Modèle mis en avant en back-office : encadré ambre et léger fond chaud. */
.bb-model-col.bb-mc-featured { border-color: #e2a33e; background: linear-gradient(180deg, #fffaf2, #fff 70px); }
.bb-model-col.bb-mc-featured:hover { border-color: #c8781a; }
.bb-model-col.bb-mc-featured.bb-selected { border-color: var(--bb-blue); }
.bb-mc-illus { height: 110px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.bb-mc-illus svg, .bb-mc-illus img { max-height: 110px; max-width: 100%; object-fit: contain; border-radius: 8px; }
.bb-mc-head { text-align: center; margin-bottom: 6px; }
.bb-model-col .bb-mr-title { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.bb-model-col .bb-card-brand { justify-content: center; }
.bb-mc-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 5px; }
/* Alignement du badge sur toutes les cartes : le titre et la ligne de caractéristiques
   occupent une hauteur constante, quel que soit leur nombre de lignes. */
.bb-model-col .bb-mr-title { min-height: 2.4em; display: flex; align-items: center; justify-content: center; text-align: center; }
.bb-mc-specs { min-height: 2.2em; display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 4px; }
.bb-model-col .bb-mr-desc { font-size: .8rem; line-height: 1.35; }
.bb-model-col .bb-mr-lists { display: flex; flex-direction: column; gap: 8px; flex: 1 0 auto; border-top: 1px solid var(--bb-line); padding-top: 8px; margin-top: 6px; }
.bb-model-col .bb-mr-col { width: 100%; }
.bb-mc-bottom { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.bb-mc-bottom .bb-btn { width: 100%; }
.bb-mc-bottom .bb-mr-price { text-align: center; }
@media (max-width: 1100px) { .bb-models { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .bb-models { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .bb-models { grid-template-columns: 1fr; } .bb-mc-illus { height: 90px; } }

/* ===== v1.51.4 : correctifs mobile ===== */
/* Largeurs prévisibles quel que soit le thème (2 cartes par ligne garanties). */
.bb-card, .bb-swatch, .bb-dim, .bb-dim input { box-sizing: border-box; }
/* Images jamais coupées : l'image s'adapte toujours à la hauteur de son cadre,
   quel que soit l'écran (la hauteur du cadre varie selon les media queries). */
.bb-card-img img { max-height: 100%; }
.bb-mr-media .bb-card-img img { max-height: 100%; }
.bb-filter-group .bb-card-img img { max-height: 100%; }
.bb-mc-illus .bb-card-img { height: 100%; background: transparent; }
.bb-mc-illus svg, .bb-mc-illus img { max-height: 100%; }

/* Étape 11 sur téléphone : l'encart « Votre tarif » est remonté au-dessus des
   boutons de commande (il est déplacé dans #bb-price-slot par le JS). */
.bb-price-slot:empty { display: none; }
.bb-price-slot { margin: 14px 0 4px; }
.bb-price-slot .bb-price-box { position: static; width: 100%; }
.bb-aside:empty, .bb-aside.bb-aside-empty { display: none; }
/* Libellés des dimensions : alignés en bas quel que soit le nombre de lignes. */
.bb-dim { justify-content: space-between; }
.bb-dim span { text-align: left; }

/* ===== Profil « Ma Piscine » : reprise du bassin enregistré ===== */
.bb-profile-block { margin-bottom: 18px; }
.bb-profile-card {
  border: 1.5px solid #cfe3f5; border-radius: 14px; padding: 16px 18px;
  background: linear-gradient(180deg, #f6fbff, #eef5fc);
}
.bb-profile-title { font-weight: 800; color: var(--bb-blue-d); font-size: 1.02rem; }
.bb-profile-sub { color: #56697a; font-size: .88rem; margin: 4px 0 12px; }
.bb-profile-pools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.bb-profile-pool {
  flex: 1 1 220px; text-align: left; cursor: pointer;
  border: 1.5px solid #d4e4f2; border-radius: 12px; background: #fff;
  padding: 11px 14px; display: flex; flex-direction: column; gap: 2px;
  transition: border-color .15s, box-shadow .15s;
}
.bb-profile-pool:hover { border-color: var(--bb-blue); box-shadow: 0 0 0 3px rgba(10,110,189,.12); }
.bb-profile-pool-name { font-weight: 700; color: var(--bb-blue-d); }
.bb-profile-pool-meta { font-size: .82rem; color: #7a8792; }
.bb-profile-pool-cta { font-size: .82rem; font-weight: 700; color: var(--bb-blue); margin-top: 4px; }
.bb-profile-skip { font-size: .85rem; }

.bb-profile-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: #eef7ee; border: 1px solid #c6e2c6; border-radius: 10px;
  padding: 9px 14px; margin-bottom: 14px; color: #2c5c36; font-size: .88rem;
}
.bb-profile-note-txt { flex: 1 1 260px; }
.bb-profile-note-btn { font-size: .82rem; padding: 6px 12px; }
@media (max-width: 640px) {
  .bb-profile-pool { flex: 1 1 100%; }
}


/* ===== Alignement ligne à ligne des cartes modèles =====
   Chaque zone de la carte occupe une LIGNE de la grille parente : visuel,
   marque, titre, caractéristiques, étiquettes, descriptif, avantages, points
   d'attention, bas de carte. Toutes les colonnes partagent donc la même
   hauteur pour une même zone, quelles que soient les longueurs de texte.
   Sans sous-grille (navigateur ancien), la carte reste une colonne flex et
   retrouve exactement le comportement précédent. */
.bb-models { row-gap: 16px; }

.bb-mc-brand, .bb-mc-specs { text-align: center; }
.bb-model-col .bb-mr-title { text-align: center; }
.bb-mc-specs {
  display: block; min-height: 0; margin-top: 4px;
  font-size: .76rem; color: var(--bb-muted); line-height: 1.3;
}
.bb-model-col .bb-mc-desc .bb-mr-desc { margin: 6px 0 0; }
.bb-mc-pros { border-top: 1px solid var(--bb-line); padding-top: 8px; margin-top: 8px; }
.bb-mc-cons { margin-top: 8px; }

/* Une zone sans contenu ne doit RIEN occuper, mais doit rester dans le flux :
   la masquer supprimerait sa ligne et décalerait toute la carte. */
.bb-mc-brand:empty, .bb-mc-specs:empty, .bb-mc-tags:empty, .bb-mc-desc:empty,
.bb-mc-pros:empty, .bb-mc-cons:empty { margin: 0; padding: 0; border: 0; }

@supports (grid-template-rows: subgrid) {
  .bb-model-col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 9;
    row-gap: 0;
  }
  .bb-model-col > * { min-width: 0; }
  .bb-mc-bottom { margin-top: 0; align-self: end; }
}

/* Le thème de la boutique numérote parfois les listes du contenu : nos puces
   sont « ✓ » et « - », jamais des numéros. */
.bb-mr-pros, .bb-mr-cons,
.bb-mr-pros li, .bb-mr-cons li { list-style: none !important; }
.bb-mr-pros li::marker, .bb-mr-cons li::marker { content: none; }