/* Configurateur de volet roulant · styles front (préfixe bb-, design commun aux configurateurs PWS). */

/* 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;
  /* Les cartes s'élargissent pour occuper la ligne : une étape à trois choix ne
     doit pas afficher trois vignettes minuscules perdues au milieu de la page.
     Plafonnées, pour qu'un choix unique ne devienne pas une bannière. */
  flex: 1 1 200px; max-width: 320px;
}
.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); }
/* Hauteur du visuel d'une carte. Réglable au back-office : la valeur saisie est
   posée par le JS sur #bache-configurator, ce qui la propage à toutes les étapes. */
.bb-card-img { width: 100%; height: var(--bb-card-img-h, 150px); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 9px; background: var(--bb-bg); }
/* L'image OCCUPE son cadre : sans largeur ni hauteur imposées, une photo plus
   petite que le cadre s'affichait à sa taille d'origine, minuscule au milieu
   d'un grand rectangle vide. « contain » garde les proportions, sans rognage. */
.bb-card-img img { width: 100%; height: 100%; object-fit: contain; }
/* Variante réglée au back-office : l'image remplit le cadre, quitte à rogner
   ses bords. Utile pour des photos d'ambiance, à éviter sur des photos de
   produit détouré dont on couperait les extrémités. */
#bache-configurator.bb-img-cover .bb-card .bb-card-img img { object-fit: cover; }
.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); line-height: 1.3; }
.bb-card-meta-left { text-align: left; width: 100%; }
/* Avantages d'un choix : alignés à gauche même dans une carte centrée, sinon
   les puces flottent au milieu et la liste devient illisible. */
.bb-card-pros {
  list-style: none; padding: 0; width: 100%;
  text-align: left; border-top: 1px solid var(--bb-line); padding-top: 6px;
  /* Poussée en bas de carte : les listes des cartes voisines se retrouvent
     ainsi au même niveau, quelle que soit la longueur des descriptifs. */
  margin: 4px 0 0; margin-top: auto;
}
.bb-card-pros li {
  position: relative; padding-left: 15px; margin: 0 0 3px;
  font-size: .78rem; line-height: 1.25; color: var(--bb-ink);
}
.bb-card-pros li::before { content: "✓"; position: absolute; left: 0; color: var(--bb-ok); font-weight: 800; }
/* Certains thèmes numérotent toutes les listes de la page : on neutralise. */
.bb-card-pros, .bb-card-pros li { list-style: none !important; }
.bb-card-pros li::marker { content: none; }
.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: var(--bb-card-img-h, 150px); }
.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 { height: 100%; }
.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); }
/* Nombre de pans coupés : même gabarit que les champs de cotes. */
.bb-dim select { width: 180px; padding: 8px 10px; border: 1.5px solid var(--bb-line); border-radius: 9px; font-size: .95rem; background: #fff; }
.bb-dim select: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 { height: 100%; }
.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: min(var(--bb-card-img-h, 150px), 96px); }
  .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: min(var(--bb-card-img-h, 150px), 84px); }
  .bb-card-title { font-size: .86rem; }
  .bb-card-meta, .bb-card-brand { font-size: .72rem; }
  .bb-card-pros li { font-size: .72rem; padding-left: 13px; }
  .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-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); }
.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, .bb-mr-media .bb-card-img img, .bb-filter-group .bb-card-img img {
  width: 100%; height: 100%; object-fit: contain;
}
.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%; }

/* ===== 2.21.0 : étape « Le bassin » tenue sur un seul écran ===== */
/* Cartes de formes compactes : elles n'ont ni descriptif ni avantages, elles
   n'ont donc pas besoin de la hauteur des cartes de produits. */
.bb-cards-compact .bb-card { flex: 1 1 140px; max-width: 195px; padding: 8px; gap: 3px; }
.bb-cards-compact .bb-card-img,
.bb-cards-compact .bb-svg svg { height: min(var(--bb-card-img-h, 150px), 86px); }
.bb-cards-compact .bb-card-title { font-size: .9rem; }
/* Cotes à gauche, schéma à droite. */
.bb-pool-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: 16px; align-items: start; margin-top: 12px;
  border-top: 1px solid var(--bb-line); padding-top: 12px;
}
.bb-pool-fields .bb-subtitle { margin-top: 0; }
.bb-pool-grid .bb-schema { margin: 0; }
@media (max-width: 860px) {
  .bb-pool-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ===== 2.21.0 : passe mobile ===== */
@media (max-width: 760px) {
  /* Fil des étapes : une bande qui défile plutôt que onze pastilles écrasées.
     Chaque pastille garde une cible tactile confortable. */
  .bb-steps-nav {
    flex-wrap: nowrap; overflow-x: auto; gap: 5px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .bb-steps-nav::-webkit-scrollbar { display: none; }
  .bb-stepdot { flex: 0 0 auto; width: 34px; height: 34px; font-size: .82rem; border-radius: 9px; }

  /* Navigation toujours sous la main, au bas de l'écran. */
  .bb-nav {
    position: sticky; bottom: 0; z-index: 20;
    margin: 14px -4px 0; padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%);
  }
  .bb-nav .bb-btn { min-height: 46px; }
  .bb-nav .bb-btn-primary { flex: 1 1 auto; margin-left: 10px; }

  /* Cibles tactiles : rien en dessous de 44 px de haut. */
  .bb-swatch { min-height: 56px; }
  .bb-choice { min-height: 62px; }
  .bb-view-switch button { min-height: 34px; padding: 5px 14px; }

  /* Saisie : 16 px minimum, sinon iOS zoome à chaque champ touché. */
  .bb-dim input, .bb-dim select,
  .bb-cut-field input, .bb-cut-field select,
  .bb-comment, .bb-form-row input { font-size: 16px; }

  /* Cartes de formes : deux par ligne, visuel réduit. */
  .bb-cards-compact .bb-card { flex: 1 1 44%; max-width: none; }
  .bb-cards-compact .bb-card-img,
  .bb-cards-compact .bb-svg svg { height: 72px; }
}
@media (max-width: 560px) {
  /* Formes en LIGNES sur téléphone : icône à gauche, libellé à droite. Cinq
     cartes tiennent alors dans la hauteur d'un pouce de défilement, au lieu de
     trois rangées de vignettes. */
  .bb-cards-compact { display: block; }
  .bb-cards-compact .bb-card {
    flex-direction: row; align-items: center; text-align: left;
    gap: 10px; padding: 8px 10px; margin-bottom: 7px; max-width: none; min-height: 56px;
  }
  .bb-cards-compact .bb-card-img,
  .bb-cards-compact .bb-svg { width: 54px; flex: 0 0 54px; }
  .bb-cards-compact .bb-card-img,
  .bb-cards-compact .bb-svg svg { height: 44px; }
  .bb-cards-compact .bb-card-title { font-size: .92rem; }
  .bb-cards-compact .bb-card-tag { margin-left: auto; }
}
@media (max-width: 430px) {
  /* Les cotes passent en pleine largeur : un champ par ligne se remplit mieux
     au pouce qu'un champ de 140 px coupé en deux. */
  .bb-dim { flex: 1 1 100%; }
  .bb-cards-compact .bb-card-title { font-size: .84rem; }
  .bb-nav .bb-btn { padding: 11px 12px; }
}

/* ===== 2.18.0 : bascule vue de dessus / vue 3D ===== */
.bb-view-switch { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
.bb-view-switch button {
  border: 1.5px solid var(--bb-line); background: #fff; color: var(--bb-muted);
  border-radius: 20px; padding: 3px 12px; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.bb-view-switch button.is-on { border-color: var(--bb-blue); color: var(--bb-blue-d); background: #eaf4fc; }
.bb-view-switch button:hover { border-color: #b9d6ee; }

/* ===== 2.7.0 : « Commander » sous le tarif (colonne de droite) ===== */
/* Le bouton occupe toute la largeur de la colonne et se colle à l'encart :
   le montant et le geste d'achat forment un seul bloc. */
.bb-aside #bb-choice-order {
  width: 100%;
  margin-top: 10px;
  padding: 14px 12px;
}
.bb-aside #bb-choice-order .bb-choice-title { font-size: 1.05rem; }
.bb-aside #bb-choice-order .bb-choice-sub { font-size: .8rem; line-height: 1.25; }
.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%; }
}

/* ------------------------------------------------------------------ v2.0.0
   Découpe du tablier, détail par poste de commande, écran « sur demande ». */

/* Pictogrammes de découpe : trait de coupe et plan papier. */
.bb-svg .cut { fill: none; stroke: var(--bb-warn); stroke-width: 2.2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.bb-svg .sheet { fill: #fbfcfd; stroke: #9fb0be; stroke-width: 2; }

/* Étiquette discrète sur une carte (suggestion, mention « sur demande »). */
.bb-card-tag {
  display: inline-block; margin-top: 6px; font-size: .72rem; font-weight: 700;
  padding: 2px 9px; border-radius: 20px; background: #e6f1fb; color: var(--bb-blue-d);
}
.bb-card-tag-adv { background: #fbefe0; color: var(--bb-warn); }

/* Détail par poste : la mécanique, le tablier, la découpe, les options. */
.bb-parts { margin-top: 18px; border: 1px solid var(--bb-line); border-radius: 12px; background: #fff; overflow: hidden; }
.bb-parts-title {
  background: var(--bb-bg); border-bottom: 1px solid var(--bb-line);
  padding: 10px 14px; font-weight: 700; color: var(--bb-blue-d);
}
.bb-part { padding: 12px 14px; border-bottom: 1px solid var(--bb-line); }
.bb-part:last-child { border-bottom: 0; }
.bb-part-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bb-part-name { font-weight: 700; color: var(--bb-ink); }
.bb-part-total { font-weight: 800; color: var(--bb-blue-d); white-space: nowrap; }
.bb-part-hint { font-size: .8rem; color: var(--bb-muted); margin-top: 2px; }
.bb-part-lines { list-style: none; margin: 8px 0 0; padding: 0; }
.bb-part-lines li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 3px 0; font-size: .88rem; color: var(--bb-muted);
}
.bb-part-lines li span:last-child { white-space: nowrap; color: var(--bb-ink); }
.bb-part-sep { font-style: italic; color: var(--bb-muted); }

/* Écran « cette configuration se chiffre avec un conseiller ». */
.bb-advisor-card {
  border: 1.5px solid #e6c79a; border-radius: 14px;
  background: linear-gradient(180deg, #fffaf2, #fdf3e4);
  padding: 20px 22px;
}
.bb-advisor-title { font-size: 1.22rem; font-weight: 800; color: #9a5c12; line-height: 1.25; }
.bb-advisor-text { margin: 8px 0 0; color: #6b5330; }
.bb-advisor-why { margin-top: 14px; font-weight: 700; color: #7a4f11; font-size: .92rem; }
.bb-advisor-list { margin: 6px 0 0; padding-left: 20px; color: #6b5330; }
.bb-advisor-list li { margin: 3px 0; }
.bb-advisor-note { margin: 14px 0 0; font-size: .85rem; color: #8a7350; }

@media (max-width: 640px) {
  .bb-part-head { flex-wrap: wrap; }
  .bb-advisor-card { padding: 16px; }
}


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

/* ================================================================
   Parcours en accordéon · tout le parcours sur une seule page
   ----------------------------------------------------------------
   Chaque étape est un volet. Replié, il tient sur une ligne et
   rappelle la réponse retenue ; il se rouvre d'un clic. Les étapes
   pas encore atteintes ne sont pas dans la page.
   ================================================================ */
.bb-panel {
  border: 1px solid var(--bb-line);
  border-radius: 12px;
  background: #fff;
  margin: 0 0 8px;
  overflow: hidden;
}
.bb-panel.is-open { border-color: #c6dcf0; box-shadow: 0 1px 10px rgba(10, 110, 189, .07); }

.bb-acc-head {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 13px 14px;
  background: #fff; border: 0; border-radius: 12px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.bb-acc-head:hover { background: var(--bb-bg); }
.bb-panel.is-open > .bb-acc-head { cursor: default; background: #fff; }
.bb-acc-head:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: -2px; }

.bb-acc-n {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bb-line); color: var(--bb-muted);
  font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.bb-panel.is-open > .bb-acc-head .bb-acc-n { background: var(--bb-blue); color: #fff; }
.bb-panel.is-done > .bb-acc-head .bb-acc-n { background: var(--bb-ok); color: #fff; }

.bb-acc-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bb-acc-title { font-size: .95rem; font-weight: 700; color: var(--bb-ink); }
.bb-panel.is-done > .bb-acc-head .bb-acc-title { font-weight: 600; color: var(--bb-muted); }
.bb-acc-answer {
  font-size: .82rem; color: var(--bb-blue-d); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-acc-answer:empty { display: none; }

.bb-acc-chev {
  flex: 0 0 auto; width: 9px; height: 9px; margin-right: 3px;
  border-right: 2px solid var(--bb-muted); border-bottom: 2px solid var(--bb-muted);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.bb-panel.is-open > .bb-acc-head .bb-acc-chev { transform: rotate(45deg); }

.bb-acc-body { padding: 0 14px 16px; }
.bb-panel:not(.is-open) > .bb-acc-body { display: none; }

@media (max-width: 700px) {
  .bb-acc-head { padding: 12px 11px; gap: 9px; }
  .bb-acc-body { padding: 0 11px 13px; }
  .bb-acc-title { font-size: .9rem; }
  /* Les en-têtes de l'accordéon tiennent lieu de navigation : les pastilles
     de la barre de progression feraient double emploi sur un téléphone. */
  .bb-steps-nav { display: none; }
}

/* Un élément marqué [hidden] doit rester caché même quand une règle du
   configurateur lui donne un display (flex, grid...). Sans cette garde, un
   thème qui n'embarque pas la règle HTML5 par défaut laisserait apparaître
   l'écran de confirmation ou un bloc d'étape replié. */
#bache-configurator [hidden] { display: none !important; }