/* =============================================================
   configurateur_v2.css
   Feuille de style RÉUTILISABLE du nouveau configurateur.
   Tout est scopé sous .cfgv2 pour ne pas entrer en conflit avec
   le thème du site (community_store / si3b_ecommerce).
   Basé sur new_config/theme.css + new_config/styles.css.
   ============================================================= */

.cfgv2 {
  /* ---- Palette de marque ---- */
  --brand-primary:        #1a3cdc;
  --brand-primary-dark:   #1430a8;
  --brand-primary-light:  #e9ecfb;
  --brand-secondary:      #FFA500;
  --brand-secondary-dark: #e08e00;
  --brand-gradient:       linear-gradient(to right, #4799D4 46%, #074C7D 100%);

  --brand-green:        var(--brand-primary);
  --brand-green-dark:   var(--brand-primary-dark);
  --brand-green-light:  var(--brand-primary-light);
  --brand-olive:        var(--brand-secondary);
  --brand-brown:        var(--brand-secondary);
  --brand-wine:         var(--brand-primary-dark);

  --text-ink:           #1f2733;
  --text-muted:         #6b7480;

  --surface-bg:         #f4f6fa;
  --surface-white:      #ffffff;
  --surface-line:       #e2e6ee;

  --state-selected:     var(--brand-primary);
  --state-selected-bg:  var(--brand-primary-light);
  --state-hover-line:   #b7c1e6;
  --state-disabled-bg:  #dfe3ea;
  --state-disabled-fg:  #a7adba;

  --stock-ok:           #3a9a4e;
  --stock-soon:         #d79a2b;

  --advisor-bg:         #fff3e0;
  --advisor-fg:         #7a5320;
  --intro-bg:           var(--brand-gradient);

  --thumb-bg:           #eaeef6;
  --thumb-fg:           #3a4760;

  --ral-gris-anthracite: #383e42;
  --ral-vert:            #26382b;
  --ral-gris-clair:      #c5c7c4;
  --ral-blanc:           #f1f0eb;
  --ral-noir:            #1a1a1a;
  --ral-beige:           #e0d3b8;
  --ral-bois-naturel:    #a9793f;

  --radius:             14px;
  --shadow:             0 6px 24px rgba(20, 30, 60, 0.10);

  /* alias courts */
  --green: var(--brand-green);
  --green-dark: var(--brand-green-dark);
  --green-light: var(--brand-green-light);
  --olive: var(--brand-olive);
  --brown: var(--brand-brown);
  --wine: var(--brand-wine);
  --ink: var(--text-ink);
  --muted: var(--text-muted);
  --line: var(--surface-line);
  --bg: var(--surface-bg);
  --white: var(--surface-white);

  background: var(--bg);
  color: var(--ink);
  padding-bottom: 90px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
}

.cfgv2 *, .cfgv2 *::before, .cfgv2 *::after { box-sizing: border-box; }

/* ---- Vignette produit (placeholder ou image réelle) ---- */
.cfgv2 .thumb { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--thumb-bg); overflow: hidden; }
.cfgv2 .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfgv2 .thumb--cross { display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 300; line-height: 1; color: var(--muted); }
.cfgv2 .soon-badge { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #eef0f3; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; padding: 6px; }
.cfgv2 .color-badge-tendance { display: block; font-size: 10.5px; font-weight: 800; color: var(--green-dark); }
.cfgv2 #pose-capuchon-goujon .group-title { margin-top: 22px!important; }
.cfgv2 .thumb[data-label]:not(:has(img))::after {
  content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center;
  padding: 8px; text-align: center; color: var(--thumb-fg); font-weight: 700; font-size: 14px;
}

/* ---- En-tête applicatif : 1 ligne (56px) + barre de progression (4px) ---- */
.cfgv2 .subheader { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.cfgv2 .subheader-row { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; }
.cfgv2 .subheader-title { flex: 1 1 auto; min-width: 0; text-align: center; font-weight: 600; font-size: 22px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfgv2 .icon-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink); line-height: 1; width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0; flex: none; transition: background .15s ease; }
.cfgv2 .icon-btn:hover { background: var(--bg); }
.cfgv2 .icon-btn:active { transform: scale(.94); }
.cfgv2 .icon-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cfgv2 .icon-btn:disabled { opacity: .25; cursor: default; }
/* Bouton « 📞 Expert » : action secondaire, ne concurrence pas l'action principale. */
.cfgv2 .expert-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1.5px solid var(--green); background: var(--green-light) !important; color: var(--green-dark); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s ease, box-shadow .15s ease, transform .12s ease; }
.cfgv2 .expert-btn i { font-size: 14px; }
.cfgv2 .expert-btn:hover { background: #dbe6f7 !important; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.cfgv2 .expert-btn:active { transform: scale(.96); }
.cfgv2 .expert-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cfgv2 .expert-btn.is-pulsing { animation: cfgv2-pulse 2s ease 1; }
/* Barre de progression (remplace le compteur « 1/10 »). */
.cfgv2 .cfg-progress { height: 4px; width: 100%; background: #e6eaf0; border-radius: 100px; overflow: hidden; }
.cfgv2 .cfg-progress-bar { height: 100%; width: 0; border-radius: 100px; background: linear-gradient(180deg, #099CF1 0%, #0B6EE9 50%, #0D41E1 100%) !important; transition: width .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .cfgv2 .cfg-progress-bar { transition: none; } }

/* ---- Layout ---- */
.cfgv2 .layout { max-width: 900px; margin: 34px auto; padding: 0 24px; }
.cfgv2 .step-title { margin: 0 0 22px; font-size: 22px; }
.cfgv2 .group-title { font-size: 17px; margin: 26px 0 14px; }
.cfgv2 .group-title:first-child { margin-top: 0; }
.cfgv2 .step[hidden] { display: none; }
/* Transition discrète à l'affichage de chaque étape (navigation intelligente). */
@keyframes cfgv2-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cfgv2 .step:not([hidden]) { animation: cfgv2-step-in .28s ease; }
@media (prefers-reduced-motion: reduce) { .cfgv2 .step:not([hidden]) { animation: none; } }
/* Bouton « Sélectionner » dans le footer des cartes non sélectionnées. */
.cfgv2 .card-select-btn { display: block; width: 100%; margin-top: 10px !important; padding: 11px 12px !important; box-sizing: border-box; min-height: 44px; border-radius: 8px; border: 1px solid var(--green); background: var(--green-light) !important; color: var(--green-dark); font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; transition: background .15s ease, color .15s ease; }
.cfgv2 .card:hover .card-select-btn { background: var(--green) !important; color: #fff; }
.cfgv2 .card.selected .card-select-btn { display: none; }
.cfgv2 .card.is-disabled .card-select-btn { display: none; }

/* ---- Cartes (boutons) ---- */
.cfgv2 .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cfgv2 .card-grid--sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cfgv2 .card-grid--depth { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cfgv2 .card-grid--depth .card-badge { margin: 10px 12px 0 !important; }
/* Soubassement béton : 4 modèles sur une seule ligne (desktop + mobile), vignettes réduites */
.cfgv2 .card-grid--soub4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px; }
.cfgv2 .card-grid--soub4 .thumb { aspect-ratio: 4 / 3; overflow: hidden; background: #eef2f7; }
.cfgv2 .card-grid--soub4 .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cfgv2 .card-grid--soub4 .card-body { padding: 8px 9px !important; }
.cfgv2 .card-grid--soub4 .card-name { font-size: 12.5px; line-height: 1.2; }
.cfgv2 .card-grid--soub4 .card-desc { font-size: 11px; margin: 4px 0 6px; line-height: 1.3; }
.cfgv2 .card-grid--soub4 .card-badge { font-size: 10px; padding: 2px 7px !important; margin: 0 0 5px !important; }
.cfgv2 .card-grid--soub4 .soub-info { font-size: 11px; }
.cfgv2 .card-grid--soub4 .soub-cardprice { font-size: 12px; }
.cfgv2 .card-grid--soub4 .card-select-btn { display: none !important; }
@media (max-width: 720px) {
  .cfgv2 .card-grid--soub4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px; }
  .cfgv2 .card-grid--soub4 .card-body { padding: 6px !important; }
  .cfgv2 .card-grid--soub4 .card-name { font-size: 10.5px; line-height: 1.15; }
  .cfgv2 .card-grid--soub4 .card-desc { display: none; }
  .cfgv2 .card-grid--soub4 .card-badge { display: none; }
  .cfgv2 .card-grid--soub4 .soub-info { font-size: 10px; }
}
.cfgv2 .card-tags { display: block; font-size: 11.5px; font-weight: 700; color: var(--green-dark); margin-top: 4px; }
/* Cartes « type de poteaux » : sélection renforcée + coche + animation au clic + survol. */
.cfgv2 .card-grid[data-group="gamme_poteaux"] .card { position: relative; transition: border-color .15s, box-shadow .15s, transform .12s ease; }
.cfgv2 .card-grid[data-group="gamme_poteaux"] .card:not(.selected):hover { transform: translateY(-2px); }
.cfgv2 .card-grid[data-group="gamme_poteaux"] .card:active { transform: scale(.98); }
.cfgv2 .card-grid[data-group="gamme_poteaux"] .card.selected { box-shadow: 0 0 0 3px var(--state-selected); }
.cfgv2 .card-grid[data-group="gamme_poteaux"] .card.selected::after { content: "\2713"; position: absolute; top: 10px; right: 10px; z-index: 3; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.3); animation: cfgv2-pop .28s ease; }
.cfgv2 .card-grid[data-group="gamme_poteaux"] .card-price { font-size: 14px; font-weight: 800; color: var(--green-dark); margin-top: 4px !important; }
/* Étape « Type de clôture » : cartes de configuration — refonte compacte & premium (jauges). */
.cfgv2 .config-criteria { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.cfgv2 .config-crit { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; padding: 0; }
.cfgv2 .config-crit-l { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.cfgv2 .config-bar { position: relative; height: 7px; border-radius: 999px; background: #e6ebf2 !important; overflow: hidden; }
.cfgv2 .config-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0); background: linear-gradient(90deg, var(--green), var(--green-dark)) !important; border-radius: 999px; }
.cfgv2 .config-bar[data-score="1"] { --v: 20%; }
.cfgv2 .config-bar[data-score="2"] { --v: 40%; }
.cfgv2 .config-bar[data-score="3"] { --v: 60%; }
.cfgv2 .config-bar[data-score="4"] { --v: 80%; }
.cfgv2 .config-bar[data-score="5"] { --v: 100%; }
/* Les 4 configurations : 4 colonnes sur ordinateur, 2 colonnes sur mobile (étape 1 ET page de départ). */
.cfgv2 .card-grid[data-group="configuration"] { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cfgv2 .card-grid[data-group="configuration"] .card { position: relative; height: 100%; border-width: 1px; border-radius: 16px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cfgv2 .card-grid[data-group="configuration"] .card:not(.selected):hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(7,85,184,.16); border-color: var(--green); }
.cfgv2 .card-grid[data-group="configuration"] .card:active { transform: translateY(-1px); }
.cfgv2 .card-grid[data-group="configuration"] .card.selected { border-color: var(--green); box-shadow: 0 0 0 3px var(--state-selected); }
/* Image plus immersive (coins arrondis via overflow de la carte, hauteur augmentée) */
.cfgv2 .card-grid[data-group="configuration"] .thumb { aspect-ratio: 4 / 3; overflow: hidden; background: #eef2f7; }
.cfgv2 .card-grid[data-group="configuration"] .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.cfgv2 .card-grid[data-group="configuration"] .card:hover .thumb img { transform: scale(1.03); }
/* Corps : plus d'air, colonne, bouton aligné en bas (padding !important : bat le reset #msform et le .card-body générique) */
.cfgv2 .card-grid[data-group="configuration"] .card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px !important; flex: 1 1 auto; }
.cfgv2 .card-grid[data-group="configuration"] .card-name { font-size: 15px; font-weight: 800; line-height: 1.22; }
/* Bénéfice principal (proposition de valeur) */
.cfgv2 .config-benefit { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12.5px; font-weight: 800; color: var(--green-dark); background: var(--green-light) !important; border-radius: 999px; padding: 3px 10px !important; }
/* Description : 2 lignes max, hauteur réservée pour un alignement homogène */
.cfgv2 .card-grid[data-group="configuration"] .card-desc { margin: 0 !important; font-size: 12.5px; color: var(--muted); line-height: 1.4; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.4em * 2); flex: none; }
/* Bouton « Sélectionner » : plus visible, aligné en bas, largeur identique */
.cfgv2 .card-grid[data-group="configuration"] .card-select-btn { margin-top: auto !important; min-height: 46px; border: 0; background: var(--green) !important; color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: 0 2px 8px rgba(7,85,184,.22); }
.cfgv2 .card-grid[data-group="configuration"] .card:hover .card-select-btn { background: var(--green-dark) !important; color: #fff; }
/* Badge « Le plus choisi » (fort impact) + carte recommandée mise en avant */
.cfgv2 .card-grid[data-group="configuration"] .card-badge { position: absolute; top: 12px; left: 12px; z-index: 3; margin: 0 !important; background: var(--green) !important; color: #fff !important; border-color: var(--green); box-shadow: 0 2px 8px rgba(7,85,184,.28); font-size: 12px; padding: 5px 12px !important; }
.cfgv2 .card-grid[data-group="configuration"] .card--reco { border-color: var(--green); background: linear-gradient(#f2f7fe, #fff) !important; box-shadow: 0 10px 24px rgba(7,85,184,.14); }
.cfgv2 .card-grid[data-group="configuration"] .card--reco:not(.selected) { transform: translateY(-2px); }
.cfgv2 .card-grid[data-group="configuration"] .card--reco:not(.selected):hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(7,85,184,.2); }
.cfgv2 .card-grid[data-group="configuration"] .card.selected::after { content: "\2713"; position: absolute; top: 12px; right: 12px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.3); animation: cfgv2-pop .28s ease; }
.cfgv2 .cfg-row[hidden] { display: none !important; }
@media (max-width: 720px) { .cfgv2 .card-grid { grid-template-columns: 1fr 1fr; } .cfgv2 .card-grid--depth { grid-template-columns: 1fr 1fr; } .cfgv2 .card-grid[data-group="configuration"] { grid-template-columns: 1fr 1fr; } }
/* Mobile — Étape « Type de clôture » : cartes en horizontal (image à gauche, texte à droite),
   une par ligne, pour une meilleure lisibilité. */
@media (max-width: 600px) {
  .cfgv2 .card-grid[data-group="configuration"] { grid-template-columns: 1fr !important; gap: 12px; }
  .cfgv2 .card-grid[data-group="configuration"] .card { flex-direction: row; align-items: stretch; height: auto; }
  .cfgv2 .card-grid[data-group="configuration"] .thumb { aspect-ratio: auto; width: 38%; min-width: 112px; max-width: 150px; flex: none; }
  .cfgv2 .card-grid[data-group="configuration"] .thumb img { height: 100%; }
  .cfgv2 .card-grid[data-group="configuration"] .card-body { flex: 1 1 auto; padding: 12px 14px !important; }
  .cfgv2 .card-grid[data-group="configuration"] .card-badge { font-size: 10.5px; padding: 3px 9px !important; top: 8px; left: 8px; }
}
/* Mobile — Généralisation de l'affichage horizontal « image à gauche / texte à droite »
   (identique à l'étape « Type de clôture ») à TOUTES les cartes avec vignette + badge.
   Exclut les grilles volontairement compactes : soub4 (4 modèles/ligne),
   multi (échantillons), pills (pastilles hauteur), depth (profondeur). */
@media (max-width: 600px) {
  .cfgv2 .card-grid--sm:not(.card-grid--soub4):not(.card-grid--multi):not(.card-grid--pills):has(.card > .thumb) {
    grid-template-columns: 1fr !important; gap: 12px;
  }
  .cfgv2 .card-grid--sm:not(.card-grid--soub4):not(.card-grid--multi):not(.card-grid--pills) .card:has(> .thumb) {
    flex-direction: row; align-items: stretch; height: auto;
  }
  .cfgv2 .card-grid--sm:not(.card-grid--soub4):not(.card-grid--multi):not(.card-grid--pills) .card:has(> .thumb) .thumb {
    aspect-ratio: auto; width: 38%; min-width: 104px; max-width: 150px; flex: none;
  }
  .cfgv2 .card-grid--sm:not(.card-grid--soub4):not(.card-grid--multi):not(.card-grid--pills) .card:has(> .thumb) .thumb img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .cfgv2 .card-grid--sm:not(.card-grid--soub4):not(.card-grid--multi):not(.card-grid--pills) .card:has(> .thumb) .card-body {
    flex: 1 1 auto; padding: 12px 14px !important;
  }
  /* Badge en surimpression sur l'image (haut-gauche), comme l'exemple de référence. */
  .cfgv2 .card-grid--sm:not(.card-grid--soub4):not(.card-grid--multi):not(.card-grid--pills) .card:has(> .thumb) .card-badge {
    position: absolute; top: 8px; left: 8px; z-index: 3; margin: 0 !important;
    font-size: 10.5px; padding: 3px 9px !important;
  }
}
.cfgv2 .card {
  display: flex; flex-direction: column; text-align: left; font: inherit; color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--white); padding: 0;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.cfgv2 .card[hidden] { display: none !important; }
.cfgv2 .card:hover { border-color: var(--state-hover-line); box-shadow: var(--shadow); }
.cfgv2 .card.selected { border-color: var(--state-selected); box-shadow: 0 0 0 2px var(--state-selected); }
/* US — Sélection directe de la carte (best practice mobile) : plus de bouton
   « Sélectionner », coche ✓ dans un cercle + fond légèrement teinté + animation. */
.cfgv2 .card-select-btn { display: none !important; }
.cfgv2 .card { position: relative; }
.cfgv2 .card.selected { background: #eef3ff !important; }
.cfgv2 .card.selected::after {
  content: "\2713"; position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff;
  font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); animation: cfgv2-pop .2s ease;
}
.cfgv2 .color-card { position: relative; }
.cfgv2 .color-card.selected::after {
  content: "\2713"; position: absolute; top: 8px; right: 8px; z-index: 4;
  width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff;
  font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); animation: cfgv2-pop .2s ease;
}
.cfgv2 .color-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cfgv2 .card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Pastilles de hauteur compactes : coche réduite pour ne pas chevaucher le libellé. */
.cfgv2 .card--pill.selected::after { width: 18px; height: 18px; top: 5px; right: 5px; font-size: 11px; }
.cfgv2 .card-body { display: flex; flex-direction: column; padding: 12px 14px; flex: 1; }
.cfgv2 .card-name { font-weight: 700; font-size: 15px; }
.cfgv2 .card-desc { font-size: 12.5px; color: var(--muted); margin: 6px 0 10px; line-height: 1.4; flex: 1; }
.cfgv2 .card-price { font-size: 14px; font-weight: 700; color: var(--green-dark); }
.cfgv2 .card-total { display: block; font-size: 17px; font-weight: 900; color: var(--green-dark); line-height: 1.2; }
.cfgv2 .card-total small { font-size: 11px; font-weight: 700; color: var(--muted); }
.cfgv2 .card-unit { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.cfgv2 .card-note { display: block; font-size: 11.5px; color: var(--muted); font-style: italic; line-height: 1.35; margin-top: 6px; }
.cfgv2 .card-badge { display: inline-block; align-self: flex-start; margin: 0 0 8px !important; padding: 4px 10px !important; background: var(--green-light) !important; color: var(--green-dark); border: 1px solid var(--green); border-radius: 16px; font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.cfgv2 .addon-badge { display: inline-block; margin: 0 0 8px !important; padding: 4px 10px !important; background: var(--green-light) !important; color: var(--green-dark); border: 1px solid var(--green); border-radius: 16px; font-size: 12px; font-weight: 700; }
.cfgv2 .beton-reassure { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 10px 0 0; max-width: 560px; }
.cfgv2 .addon-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cfgv2 .addon-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px!important; border: 1px solid var(--line); border-radius: 12px; background: var(--white)!important; }
.cfgv2 .addon-txt { display: flex; flex-direction: column; gap: 2px; }
.cfgv2 .addon-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.cfgv2 .addon-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* ---- Harmonisation graphique étape 6 « Recommandations d'installation » ---- */
.cfgv2 .step[data-step="6"] .step-title { margin-bottom: 6px !important; }
.cfgv2 .step[data-step="6"] .install-step-subtitle {
  margin: 0 0 16px !important;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.cfgv2 .install-scan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px !important;
}
.cfgv2 .install-scan-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 108px;
  padding: 14px 14px !important;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: #f9fbff !important;
  box-shadow: 0 2px 8px rgba(20,30,60,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cfgv2 .install-scan-card:hover {
  transform: translateY(-2px);
  border-color: var(--state-hover-line);
  box-shadow: 0 8px 18px rgba(20,30,60,.10);
}
.cfgv2 .install-scan-ic { font-size: 20px; line-height: 1; }
.cfgv2 .install-scan-k { font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.35; }
.cfgv2 .install-scan-v { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.cfgv2 .step[data-step="6"] .install-panel {
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px !important;
  background: var(--white) !important;
  box-shadow: 0 2px 8px rgba(20,30,60,.06);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cfgv2 .step[data-step="6"] .install-panel:hover {
  border-color: var(--state-hover-line);
  box-shadow: 0 8px 18px rgba(20,30,60,.10);
}
.cfgv2 .step[data-step="6"] .install-panel > .group-title {
  margin: 0 0 6px !important;
  font-size: 18px;
  font-weight: 800;
}
.cfgv2 .step[data-step="6"] .install-panel > .help-text {
  margin: 0 0 12px !important;
  font-size: 13px;
  line-height: 1.5;
}
.cfgv2 .step[data-step="6"] .addon-card,
.cfgv2 .step[data-step="6"] .addon-premium {
  border-radius: 16px;
}
.cfgv2 .step[data-step="6"] .addon-card {
  border-width: 2px;
  box-shadow: 0 2px 8px rgba(20,30,60,.06);
}
.cfgv2 .step[data-step="6"] .addon-card.status-accepted,
.cfgv2 .step[data-step="6"] .addon-premium.status-accepted {
  animation: cfgv2-pop .24s ease;
}

@media (max-width: 960px) {
  .cfgv2 .install-scan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cfgv2 .step[data-step="6"] .install-panel {
    padding: 14px 12px !important;
    border-radius: 14px;
  }
}
/* ---- Refonte étape « Produits additionnels » : cartes accessoires ----
   Système d'espacement grille 8 px : sections 32, cartes 24, titre->cartes 16,
   marge intérieure des cartes 24. !important requis (reset #msform *{margin:0}). */
.cfgv2 .addon-block { margin: 0 0 32px !important; }
.cfgv2 .addon-block:last-child { margin-bottom: 0 !important; }
.cfgv2 .addon-block > .group-title { margin: 0 0 8px !important; }
.cfgv2 .addon-block > .help-text { margin: 0 0 16px !important; }
.cfgv2 .addon-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 16px 0 0 !important; }
.cfgv2 .addon-block > .group-title + .addon-cards { margin-top: 16px !important; }
.cfgv2 .addon-card { position: relative; display: flex; gap: 16px; padding: 24px !important; border: 1px solid var(--line); border-radius: 14px; background: var(--white) !important; transition: border-color .15s, box-shadow .15s, opacity .15s; }
.cfgv2 .addon-card.status-accepted { border-color: var(--green); box-shadow: 0 0 0 2px var(--state-selected, rgba(26,143,66,.18)); }
.cfgv2 .addon-card.status-refused { opacity: .55; }
.cfgv2 .addon-info { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: #fff !important; color: var(--green-dark); font-size: 13px; font-weight: 800; font-style: italic; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.cfgv2 .addon-info:hover { background: var(--green-light) !important; }
.cfgv2 .addon-media { flex: none; width: 76px; height: 76px; border-radius: 10px; background: #f4f6f8 !important; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cfgv2 .addon-media img { width: 100%; height: 100%; object-fit: cover; }
.cfgv2 .addon-noimg { font-size: 30px; }
.cfgv2 .addon-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cfgv2 .addon-card .addon-name { font-size: 14px; font-weight: 800; color: var(--ink); padding-right: 26px; }
.cfgv2 .addon-price { font-size: 14px; font-weight: 800; color: var(--green-dark); }
.cfgv2 .addon-price small { font-size: 11px; font-weight: 700; color: var(--muted); }
.cfgv2 .addon-price-na { font-size: 12px; font-weight: 600; color: var(--muted); font-style: italic; }
.cfgv2 .addon-reco { font-size: 12px; color: var(--muted); }
.cfgv2 .addon-reco strong { color: var(--ink); }
.cfgv2 .addon-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.cfgv2 .addon-order { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cfgv2 .addon-order-l { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.cfgv2 .addon-card .qty-stepper--addon input[type="number"] { width: 54px !important; min-width: 54px; font-size: 15px; color: var(--ink) !important; -webkit-text-fill-color: var(--ink); opacity: 1 !important; }
.cfgv2 .addon-choice { display: flex; gap: 6px; }
.cfgv2 .addon-accept, .cfgv2 .addon-refuse { width: 40px; height: 42px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff !important; font-size: 17px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; }
.cfgv2 .addon-accept { color: #1a8f42; }
.cfgv2 .addon-refuse { color: #c0392b; }
.cfgv2 .addon-accept:hover { background: #1a8f42 !important; color: #fff; border-color: #1a8f42; }
.cfgv2 .addon-refuse:hover { background: #c0392b !important; color: #fff; border-color: #c0392b; }
.cfgv2 .addon-card.status-accepted .addon-accept { background: #1a8f42 !important; color: #fff; border-color: #1a8f42; }
.cfgv2 .addon-card.status-refused .addon-refuse { background: #c0392b !important; color: #fff; border-color: #c0392b; }
.cfgv2 .addon-subtotal { font-size: 12.5px; color: var(--ink); margin-top: 6px; }
.cfgv2 .addon-subtotal strong { color: var(--green-dark); }
/* Carte accessoire « simple » (Ajouter, sans quantité recommandée) */
.cfgv2 .addon-simple-badge { display: inline-block; align-self: flex-start; margin-bottom: 4px; padding: 3px 10px !important; background: var(--green-light) !important; color: var(--green-dark); border: 1px solid var(--green); border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.cfgv2 .addon-simple-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin: 2px 0 8px; }
.cfgv2 .addon-simple-btn { align-self: flex-start; min-height: 40px; padding: 0 18px !important; border-radius: 22px; border: 1.5px solid var(--green); background: var(--green) !important; color: #fff; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: background .15s; }
.cfgv2 .addon-simple-btn:hover { background: var(--green-dark) !important; }
.cfgv2 .addon-card--simple.status-accepted .addon-simple-btn { background: var(--green-dark) !important; }
/* Vis anti-vol offertes : prix « Offert » + choix de couleur */
.cfgv2 .addon-offered { display: inline-block; font-size: 14px; font-weight: 900; color: var(--green-dark); }
.cfgv2 .addon-colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.cfgv2 .addon-color-chip { padding: 6px 14px !important; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white) !important; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.cfgv2 .addon-color-chip:hover { border-color: var(--muted); }
.cfgv2 .addon-color-chip.is-selected { border-color: var(--green); background: var(--green-light) !important; color: var(--green-dark); box-shadow: 0 0 0 2px var(--state-selected, rgba(26,60,220,.18)); }
.cfgv2 .addon-simple-status { align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cfgv2 .addon-simple-status.is-added { color: var(--green-dark); }
/* Carte clips métal (étape Poteaux) */
.cfgv2 #clips-card { margin-top: 20px; }
.cfgv2 .addon-card--clips { max-width: 640px; }
.cfgv2 .clips-meta { font-size: 12.5px; color: var(--muted); margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cfgv2 .clips-meta strong { color: var(--ink); }
.cfgv2 .clips-total { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cfgv2 .clips-total strong { color: var(--green-dark); }
.cfgv2 .clips-warn { margin-top: 8px; padding: 10px 12px !important; border-radius: 10px; background: #fff7e0 !important; border: 1px solid #e8c65b; color: #8a6100; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
/* Bloc premium (cross-sell : support boîte aux lettres) */
.cfgv2 .addon-premium { position: relative; display: flex; gap: 24px; padding: 24px !important; border: 1.5px solid var(--green); border-radius: 16px; background: linear-gradient(180deg, var(--green-light), #fff) !important; }
.cfgv2 .addon-premium.status-accepted { box-shadow: 0 0 0 2px var(--state-selected, rgba(26,143,66,.18)); }
.cfgv2 .addon-premium-media { flex: none; width: 140px; height: 140px; border-radius: 12px; background: #fff !important; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); }
.cfgv2 .addon-premium-media img { width: 100%; height: 100%; object-fit: cover; }
.cfgv2 .addon-premium-media .addon-noimg { font-size: 54px; }
.cfgv2 .addon-premium-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.cfgv2 .addon-premium-badge { align-self: flex-start; font-size: 12px; font-weight: 800; color: var(--green-dark); background: #fff !important; border: 1px solid var(--green); border-radius: 999px; padding: 3px 10px !important; }
.cfgv2 .addon-premium-name { font-size: 17px; font-weight: 900; color: var(--ink); }
.cfgv2 .addon-premium-desc { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 0; }
.cfgv2 .addon-premium-benefits { list-style: none; padding: 0 !important; margin: 2px 0 !important; display: flex; flex-direction: column; gap: 3px; }
.cfgv2 .addon-premium-benefits li { position: relative; padding-left: 22px !important; margin: 0 !important; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.cfgv2 .addon-premium-benefits li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-dark); font-weight: 900; }
.cfgv2 .addon-premium-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.cfgv2 .addon-premium-price { font-size: 20px; font-weight: 900; color: var(--green-dark); }
.cfgv2 .addon-premium-btn { min-height: 44px; padding: 0 22px !important; border-radius: 24px; border: none; background: var(--green) !important; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .15s, transform .12s; }
.cfgv2 .addon-premium-btn:hover { background: var(--green-dark) !important; }
.cfgv2 .addon-premium-btn.is-added { background: var(--green-dark) !important; }
@media (max-width: 640px) {
  .cfgv2 .addon-cards { grid-template-columns: 1fr; gap: 24px; }
  .cfgv2 .addon-premium { flex-direction: column; gap: 16px; }
  .cfgv2 .addon-premium-media { width: 100%; height: 170px; }
}
/* ---- Étape « Votre terrain » : chips contraintes ---- */
.cfgv2 .chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cfgv2 .chip { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px !important; min-height: 44px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff !important; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.cfgv2 .chip:hover { border-color: var(--green); }
.cfgv2 .chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cfgv2 .chip .chip-ic { font-size: 16px; line-height: 1; }
.cfgv2 .chip.is-on { background: var(--green-light) !important; border-color: var(--green); color: var(--green-dark); box-shadow: 0 0 0 1px var(--green) inset; }
.cfgv2 .chip.is-on .chip-ic::after { content: " ✓"; font-weight: 900; }

/* =============================================================
   CRO-025 — Refonte étape « Votre terrain » (divulgation progressive)
   ============================================================= */
/* Bloc 1 — grandes cartes de choix du terrain */
.cfgv2 .terrain-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cfgv2 .terrain-card { border-radius: 20px; border-width: 2px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cfgv2 .terrain-card:not(.selected):hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(7,85,184,.14); }
.cfgv2 .terrain-card .thumb { aspect-ratio: 16 / 10; }
.cfgv2 .terrain-card .card-body { padding: 16px 18px !important; gap: 4px; }
.cfgv2 .terrain-card .terrain-card-ic { font-size: 26px; line-height: 1; margin-bottom: 2px; }
.cfgv2 .terrain-card .card-name { font-size: 16px; font-weight: 800; }
.cfgv2 .terrain-card .card-desc { font-size: 12.5px; margin: 0; flex: none; }
.cfgv2 .terrain-card.selected { box-shadow: 0 0 0 3px var(--state-selected); }
.cfgv2 .terrain-card--help { justify-content: center; border-style: dashed; background: var(--surface-bg) !important; }
.cfgv2 .terrain-card--help .card-body { align-items: center; text-align: center; justify-content: center; }
.cfgv2 .terrain-card--help.is-open { border-color: var(--green); border-style: solid; }

/* Mini-assistant « Je ne sais pas » */
.cfgv2 .terrain-help { margin-top: 14px; padding: 18px 20px !important; border: 1px solid var(--line); border-radius: 16px; background: var(--white) !important; box-shadow: var(--shadow); }
.cfgv2 .terrain-help-head { font-size: 15px; font-weight: 900; color: var(--green-dark); margin-bottom: 8px; }
.cfgv2 .terrain-help-q { font-size: 14px; color: var(--ink); line-height: 1.5; margin: 0 0 12px; }
.cfgv2 .terrain-help-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cfgv2 .terrain-help-btn { flex: 1 1 200px; min-height: 48px; padding: 12px 16px !important; border: 1.5px solid var(--green); border-radius: 12px; background: var(--green-light) !important; color: var(--green-dark); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background .15s, color .15s; }
.cfgv2 .terrain-help-btn:hover { background: var(--green) !important; color: #fff; }
.cfgv2 .terrain-help-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.45; }

/* Bloc 2 — encart vert « terrain en pente » */
.cfgv2 .terrain-slope { margin-top: 16px; padding: 16px 18px !important; border-radius: 16px; border: 1px solid var(--green); background: linear-gradient(180deg, var(--green-light), #fff) !important; }
.cfgv2 .terrain-slope-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; color: var(--green-dark); margin-bottom: 6px; }
.cfgv2 .terrain-slope-p { font-size: 13.5px; color: var(--ink); line-height: 1.5; margin: 0 0 12px; }
.cfgv2 .terrain-slope-expert { min-height: 46px; padding: 0 18px !important; border-radius: 24px; border: 1.5px solid var(--green); background: #fff !important; color: var(--green-dark); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: background .15s, color .15s; }
.cfgv2 .terrain-slope-expert:hover { background: var(--green) !important; color: #fff; }

/* Bloc 3 — carte IA premium (assistant intelligent) */
.cfgv2 .terrain-ai { margin-top: 18px; padding: 20px !important; border-radius: 20px; border: 1px solid var(--line); background: var(--white) !important; box-shadow: var(--shadow); animation: cfgv2-step-in .32s ease; }
.cfgv2 .terrain-ai-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cfgv2 .terrain-ai-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--green-light) !important; border: 1px solid var(--green); }
.cfgv2 .terrain-ai-title { font-size: 16px; font-weight: 900; color: var(--ink); line-height: 1.2; }
.cfgv2 .terrain-ai-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; font-weight: 800; color: var(--green-dark); }
.cfgv2 .terrain-ai-intro { font-size: 13.5px; color: var(--ink); line-height: 1.5; margin: 0 0 14px; }
.cfgv2 .terrain-reco { padding: 14px 16px !important; border-radius: 14px; background: var(--surface-bg) !important; margin-bottom: 12px; }
.cfgv2 .terrain-reco-title { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.cfgv2 .terrain-reco-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14.5px; color: var(--ink); padding: 4px 0; }
.cfgv2 .terrain-reco-line + .terrain-reco-line { border-top: 1px dashed var(--line); }
.cfgv2 .terrain-reco-ic { margin-right: 8px; font-size: 17px; }
.cfgv2 .terrain-reco-l { font-size: 13px; color: var(--muted); font-weight: 700; }
.cfgv2 .terrain-stars { font-size: 16px; letter-spacing: 1px; }
.cfgv2 .terrain-star { color: #f5b301; }
.cfgv2 .terrain-star--off { color: #d7dce4; }
.cfgv2 .terrain-score { padding: 12px 16px !important; border-radius: 14px; background: var(--surface-bg) !important; margin-bottom: 12px; }
.cfgv2 .terrain-score-top { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ink); }
.cfgv2 .terrain-score-top strong { font-size: 18px; font-weight: 900; }
.cfgv2 .terrain-score-bar { height: 10px; border-radius: 999px; background: #e6eaf0; overflow: hidden; margin: 8px 0 6px; }
.cfgv2 .terrain-score-bar span { display: block; height: 100%; border-radius: 999px; background: #1a8f42; transition: width .4s ease; }
.cfgv2 .terrain-score-label { font-size: 12.5px; font-weight: 700; color: #1a8f42; }
.cfgv2 .terrain-score--ok .terrain-score-bar span { background: #1a8f42; }
.cfgv2 .terrain-score--ok .terrain-score-label { color: #1a8f42; }
.cfgv2 .terrain-score--warn .terrain-score-bar span { background: #e0a800; }
.cfgv2 .terrain-score--warn .terrain-score-label { color: #8a6100; }
.cfgv2 .terrain-score--low .terrain-score-bar span { background: #c0392b; }
.cfgv2 .terrain-score--low .terrain-score-label { color: #c0392b; }
.cfgv2 .terrain-estim { padding: 12px 16px !important; border-radius: 14px; border: 1px dashed var(--line); margin-bottom: 14px; }
.cfgv2 .terrain-estim-head { font-size: 13px; font-weight: 900; color: var(--ink); margin-bottom: 8px; }
.cfgv2 .terrain-estim-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cfgv2 .terrain-estim-i { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cfgv2 .terrain-estim-note { font-size: 11.5px; color: var(--muted); font-style: italic; margin: 8px 0 0; }
.cfgv2 .terrain-ai-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cfgv2 .terrain-ai-why, .cfgv2 .terrain-ai-modify { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px !important; border-radius: 24px; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: background .15s, color .15s; }
.cfgv2 .terrain-ai-why { border: 1.5px solid var(--line); background: #fff !important; color: var(--green-dark); }
.cfgv2 .terrain-ai-why:hover { border-color: var(--green); background: var(--green-light) !important; }
.cfgv2 .terrain-ai-modify { border: 1.5px solid var(--green); background: var(--green) !important; color: #fff; }
.cfgv2 .terrain-ai-modify:hover { background: var(--green-dark) !important; }

/* Bloc 4 — réglages avancés repliés (<details>) */
.cfgv2 .terrain-advanced { border: 1px solid var(--line); border-radius: 14px; background: var(--white) !important; overflow: hidden; }
.cfgv2 .terrain-advanced[open] { box-shadow: var(--shadow); }
.cfgv2 .terrain-advanced-sum { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; min-height: 48px; }
.cfgv2 .terrain-advanced-sum::-webkit-details-marker { display: none; }
.cfgv2 .terrain-advanced-sum:hover { background: var(--surface-bg) !important; }
.cfgv2 .terrain-advanced-sum:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.cfgv2 .terrain-advanced-ic { font-size: 20px; flex: none; }
.cfgv2 .terrain-advanced-txt { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.cfgv2 .terrain-advanced-txt strong { font-size: 14.5px; color: var(--ink); }
.cfgv2 .terrain-advanced-txt span { font-size: 12px; color: var(--muted); }
.cfgv2 .terrain-advanced-chev { font-size: 15px; color: var(--muted); transition: transform .2s ease; }
.cfgv2 .terrain-advanced[open] .terrain-advanced-chev { transform: rotate(180deg); }
.cfgv2 .terrain-advanced-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.cfgv2 .rep-optim small { display: block; font-size: 10.5px; font-weight: 600; opacity: .9; margin-top: 2px; }

@media (max-width: 720px) {
  .cfgv2 .terrain-cards { grid-template-columns: 1fr; gap: 12px; }
  .cfgv2 .terrain-card .thumb { aspect-ratio: 21 / 9; }
  .cfgv2 .terrain-help-btn { flex: 1 1 100%; }
}

/* ---- Étape « Livraison » ---- */
.cfgv2 .livr-grid { grid-template-columns: repeat(2, 1fr); }
.cfgv2 .livr-grid .card-name { font-size: 16px; }
.cfgv2 .livr-price { display: block; font-size: 15px; font-weight: 800; color: var(--green-dark); margin-top: 6px; }
.cfgv2 .livr-price small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cfgv2 .livr-price--save { color: #1a8f42; }
.cfgv2 .livr-benefits { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.cfgv2 .livr-benefits span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.cfgv2 .livr-saving { margin-top: 16px!important; padding: 14px 16px !important; border-radius: 12px; background: var(--green-light) !important; border: 1px solid var(--green); color: var(--green-dark); font-size: 14px; font-weight: 700; }
.cfgv2 .livr-saving strong { font-weight: 900; }
@media (max-width: 560px) { .cfgv2 .livr-grid { grid-template-columns: 1fr; } }
/* ---- Assistant de livraison (accès, modes intelligents, frais, coûts) ---- */
.cfgv2 #livr-assistant { margin-top: 20px; }
.cfgv2 .livr-acc { margin-bottom: 20px; }
.cfgv2 .livr-acc-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.cfgv2 .livr-acc-btn { flex: 1 1 220px; padding: 14px 16px !important; border: 1.5px solid var(--line); border-radius: 12px; background: #fff !important; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.cfgv2 .livr-acc-btn:hover { border-color: var(--green); }
.cfgv2 .livr-acc-btn.is-on { border-color: var(--green); background: var(--green-light) !important; }
.cfgv2 .livr-acc-btn--no.is-on { border-color: #c0392b; background: #fbe4e0 !important; }
.cfgv2 .livr-acc-warn { margin-top: 12px; padding: 12px 14px !important; border-radius: 10px; background: #fff7e0 !important; border: 1px solid #e8c65b; color: #8a6100; font-size: 13px; line-height: 1.45; }
.cfgv2 .livr-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 12px 0 20px!important; }
.cfgv2 .livr-mode { display: flex; flex-direction: column; gap: 6px; padding: 16px !important; border: 1.5px solid var(--line); border-radius: 14px; background: #fff!important; cursor: pointer!important; transition: border-color .15s, box-shadow .15s, opacity .15s; }
.cfgv2 .livr-mode--indispo { opacity: .55; cursor: default; background: #f6f7f8 !important; }
.cfgv2 .livr-mode--reco { border-color: var(--green); }
.cfgv2 .livr-mode.is-selected { border-color: var(--green); box-shadow: 0 0 0 2px var(--state-selected, rgba(26,143,66,.18)); }
.cfgv2 .livr-mode-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cfgv2 .livr-mode-badge { font-size: 11.5px; font-weight: 800; padding: 3px 9px !important; border-radius: 999px; background: #eef0f3 !important; color: var(--muted); }
.cfgv2 .livr-mode-badge--reco { background: var(--green-light) !important; color: var(--green-dark); }
.cfgv2 .livr-mode-badge--indispo { background: #fbe4e0 !important; color: #c0392b; }
.cfgv2 .livr-mode-info { border: none; background: none; color: var(--green-dark); font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 !important; }
.cfgv2 .livr-mode-name { font-size: 16px; font-weight: 900; color: var(--ink); }
.cfgv2 .livr-mode-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cfgv2 .livr-mode-benefits li { position: relative; padding-left: 16px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.cfgv2 .livr-mode-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--green-dark); font-weight: 900; }
.cfgv2 .livr-mode-reason { font-size: 12px; color: var(--muted); font-style: italic; line-height: 1.4; }
.cfgv2 .livr-mode-price { font-size: 17px; font-weight: 900; color: var(--green-dark); }
.cfgv2 .livr-mode-price small { font-size: 11px; font-weight: 700; color: var(--muted); }
.cfgv2 .livr-mode-check { margin-top: 2px; font-size: 12.5px; font-weight: 800; color: var(--green-dark); }
.cfgv2 .livr-mode--indispo .livr-mode-check { display: none; }
.cfgv2 .livr-fees, .cfgv2 .livr-suppl, .cfgv2 .livr-costs { margin-bottom: 16px!important; padding: 14px 16px !important; border: 1px solid var(--line); border-radius: 12px; background: var(--white)!important; }
.cfgv2 .livr-costs { border-color: var(--green); background: var(--green-light) !important; }
.cfgv2 .livr-fees-head { font-size: 14px; font-weight: 900; color: var(--ink); margin-bottom: 8px!important; }
@media (max-width: 760px) { .cfgv2 .livr-modes { grid-template-columns: 1fr; } }
/* ---- Retrait en agence : services complémentaires ---- */
.cfgv2 #agence-services { margin-top: 20px; }
.cfgv2 .agsvc-head { font-size: 16px; font-weight: 900; color: var(--green-dark); margin-bottom: 4px; }
.cfgv2 .agsvc-card { position: relative; margin-bottom: 14px!important; padding: 16px !important; border: 1.5px solid var(--line); border-radius: 14px; background: #fff !important; }
.cfgv2 .agsvc-card.is-on { border-color: var(--green); box-shadow: 0 0 0 2px var(--state-selected, rgba(26,143,66,.15)); }
.cfgv2 .agsvc-card--reco { border-color: var(--green); }
.cfgv2 .agsvc-card--pal { background: var(--green-light) !important; border-color: var(--green); }
.cfgv2 .agsvc-reco-badge { position: absolute; top: 12px; right: 12px; font-size: 11.5px; font-weight: 800; color: var(--green-dark); background: var(--green-light) !important; border: 1px solid var(--green); border-radius: 999px; padding: 3px 9px !important; }
.cfgv2 .agsvc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cfgv2 .agsvc-card-name { font-size: 15px; font-weight: 900; color: var(--ink); }
.cfgv2 .agsvc-card-price { font-size: 16px; font-weight: 900; color: var(--green-dark); }
.cfgv2 .agsvc-card-price small { font-size: 11px; font-weight: 700; color: var(--muted); }
.cfgv2 .agsvc-card-desc { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 6px 0 8px; }
.cfgv2 .agsvc-benefits { list-style: none; padding: 0!important; margin: 0 0 8px!important; display: flex; flex-direction: column; gap: 2px; }
.cfgv2 .agsvc-benefits li { position: relative; padding-left: 16px!important; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.cfgv2 .agsvc-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--green-dark); font-weight: 900; }
.cfgv2 .agsvc-cond { font-size: 11.5px; color: var(--muted); font-style: italic; margin: 4px 0 8px; line-height: 1.4; }
.cfgv2 .agsvc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cfgv2 .agsvc-toggle { border: 1.5px solid var(--green); background: var(--green) !important; color: #fff; font: inherit; font-size: 13.5px; font-weight: 800; padding: 10px 16px !important; border-radius: 24px; cursor: pointer; transition: background .15s; }
.cfgv2 .agsvc-toggle:hover { background: var(--green-dark) !important; }
.cfgv2 .agsvc-toggle.is-on { background: var(--green-dark) !important; }
.cfgv2 .agsvc-info { border: none; background: none; color: var(--green-dark); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 !important; }
.cfgv2 .agsvc-tip { font-size: 12.5px; color: #8a6100; background: #fff7e0 !important; border: 1px solid #e8c65b; border-radius: 8px; padding: 8px 10px !important; margin-bottom: 8px!important; line-height: 1.4; }
.cfgv2 .agsvc-durations { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px!important; }
.cfgv2 .agsvc-dur { border: 1.5px solid var(--line); background: #fff !important; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px !important; border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.cfgv2 .agsvc-dur:hover { border-color: var(--green); }
.cfgv2 .agsvc-dur.is-on { background: var(--green) !important; border-color: var(--green); color: #fff; }
.cfgv2 .agsvc-refund { font-size: 12.5px; color: var(--green-dark); font-weight: 600; margin: 6px 0 0; line-height: 1.4; }
.cfgv2 .agsvc-combo { margin-bottom: 14px; padding: 16px !important; border-radius: 14px; border: 1.5px solid var(--green); background: linear-gradient(180deg, var(--green-light), #fff) !important; }
.cfgv2 .agsvc-combo-head { font-size: 15px; font-weight: 900; color: var(--green-dark); margin-bottom: 4px!important; }
.cfgv2 .agsvc-combo-p { font-size: 13px; color: var(--ink); margin: 0 0 8px!important; }
.cfgv2 .agsvc-combo-btn { min-height: 44px; padding: 0 22px !important; border-radius: 24px; border: none; background: var(--green) !important; color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.cfgv2 .agsvc-combo-btn:hover { background: var(--green-dark) !important; }
.cfgv2 .agsvc-recap { padding: 14px 16px !important; border: 1px solid var(--green); border-radius: 12px; background: var(--green-light) !important; }

/* =============================================================
   CRO-042 — Refonte étape « Livraison » (assistant de décision)
   ============================================================= */
/* Récap sticky de la livraison choisie */
.cfgv2 .livr-sticky { position: sticky; top: 64px; z-index: 5; margin-bottom: 16px; }
.cfgv2 .livr-sticky-in { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--green); background: var(--white) !important; box-shadow: 0 6px 18px rgba(20,30,60,.12); }
.cfgv2 .livr-sticky-l { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cfgv2 .livr-sticky-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.cfgv2 .livr-sticky-mode { font-size: 14.5px; font-weight: 900; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfgv2 .livr-sticky-price { font-size: 16px; font-weight: 900; color: var(--green-dark); white-space: nowrap; }
.cfgv2 .livr-sticky-eta { display: flex; flex-direction: column; text-align: right; }
.cfgv2 .livr-sticky-eta-lbl { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.cfgv2 .livr-sticky-eta span:last-child { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cfgv2 .livr-sticky-modify { flex: none; min-height: 36px; padding: 0 12px !important; border-radius: 18px; border: 1.5px solid var(--green); background: #fff !important; color: var(--green-dark); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.cfgv2 .livr-sticky-modify:hover { background: var(--green) !important; color: #fff; }

/* Choix principal : cartes Livraison / Retrait (promo) */
.cfgv2 .livr-choice { grid-template-columns: 1fr 1fr; gap: 16px; }
.cfgv2 .livr-choice-card { position: relative; border-radius: 18px; border-width: 2px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cfgv2 .livr-choice-card:not(.selected):hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(7,85,184,.14); }
.cfgv2 .livr-choice-card.selected { border-color: var(--green); box-shadow: 0 0 0 3px var(--state-selected); }
.cfgv2 .livr-choice-card .card-body { padding: 18px !important; gap: 5px; align-items: flex-start; }
.cfgv2 .livr-choice-ic { font-size: 30px; line-height: 1; }
.cfgv2 .livr-choice-card .card-name { font-size: 16.5px; font-weight: 900; }
.cfgv2 .livr-choice-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cfgv2 .livr-choice-eta { font-size: 12px; font-weight: 700; color: var(--green-dark); margin-top: 2px; }
.cfgv2 .livr-choice-card--promo { border-color: var(--green); background: linear-gradient(180deg, var(--green-light), #fff) !important; }
.cfgv2 .livr-promo-flag { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 4px 10px !important; border-radius: 999px; background: var(--brand-secondary) !important; color: #3a2a00; font-size: 11.5px; font-weight: 900; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.cfgv2 .livr-price { display: block; font-size: 18px; font-weight: 900; color: var(--green-dark); margin-top: 2px; }
.cfgv2 .livr-price small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cfgv2 .livr-price--save { color: #1a8f42; }

/* Bandeau d'urgence */
.cfgv2 .livr-urgency { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 14px !important; border-radius: 12px; background: #fff7e0 !important; border: 1px solid #e8c65b; color: #8a6100; font-size: 13px; font-weight: 700; }

/* Assistant intelligent : recommandation mise en avant */
.cfgv2 .livr-hero { margin-bottom: 22px; }
.cfgv2 .livr-hero-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 12px; line-height: 1.4; }
.cfgv2 .livr-hero-ic { flex: none; font-size: 22px; }
.cfgv2 .livr-hero-card { position: relative; padding: 20px !important; border-radius: 18px; border: 2px solid var(--green); background: linear-gradient(180deg, var(--green-light), #fff) !important; box-shadow: 0 10px 28px rgba(7,85,184,.14); }
.cfgv2 .livr-hero-card.is-selected { box-shadow: 0 0 0 3px var(--state-selected), 0 10px 28px rgba(7,85,184,.16); }
.cfgv2 .livr-hero-flag { position: absolute; top: -12px; left: 16px; padding: 4px 12px !important; border-radius: 999px; background: var(--green) !important; color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 2px 8px rgba(7,85,184,.28); }
.cfgv2 .livr-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 4px; }
.cfgv2 .livr-hero-name { font-size: 20px; font-weight: 900; color: var(--ink); }
.cfgv2 .livr-hero-price { font-size: 24px; font-weight: 900; color: var(--green-dark); white-space: nowrap; }
.cfgv2 .livr-hero-price small { font-size: 12px; font-weight: 700; color: var(--muted); }
.cfgv2 .livr-hero-price--free { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: normal; text-align: right; }
.cfgv2 .livr-hero-old { font-size: 15px; font-weight: 700; color: var(--muted); }
.cfgv2 .livr-hero-now { font-size: 22px; font-weight: 900; color: var(--green-dark); }
.cfgv2 .livr-hero-save { font-size: 12px; font-weight: 800; color: var(--green-dark); }
.cfgv2 .livr-hero-benefits { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.cfgv2 .livr-hero-benefits li { position: relative; padding-left: 22px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cfgv2 .livr-hero-benefits li::before { content: "✔"; position: absolute; left: 0; color: var(--green-dark); font-weight: 900; }
.cfgv2 .livr-hero-eta { font-size: 13px; color: var(--ink); margin-bottom: 6px; }
.cfgv2 .livr-hero-confidence { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-bottom: 14px; }
.cfgv2 .livr-hero-cta { width: 100%; min-height: 50px; border: none; border-radius: 14px; background: var(--green) !important; color: #fff; font: inherit; font-size: 15px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 14px rgba(7,85,184,.24); transition: background .15s, transform .12s; }
.cfgv2 .livr-hero-cta:hover { background: var(--green-dark) !important; }
.cfgv2 .livr-hero-cta:active { transform: scale(.99); }
.cfgv2 .livr-social { text-align: center; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ink); }

/* Étoiles (réutilise terrain-stars) */
.cfgv2 .livr-hero-card .terrain-stars, .cfgv2 .livr-card .terrain-stars { font-size: 15px; }

/* Autres modes : cartes de décision */
.cfgv2 .livr-others-title { font-size: 15px; }
.cfgv2 .livr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cfgv2 .livr-card { display: flex; flex-direction: column; gap: 6px; padding: 16px !important; border-radius: 16px; border: 1.5px solid var(--line); background: var(--white) !important; transition: border-color .15s, box-shadow .15s, transform .12s; }
.cfgv2 .livr-card:not(.is-selected):hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--state-hover-line); cursor: pointer; }
.cfgv2 .livr-card.is-selected { border-color: var(--green); box-shadow: 0 0 0 2px var(--state-selected); background: var(--green-light) !important; }
.cfgv2 .livr-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cfgv2 .livr-card-name { font-size: 15.5px; font-weight: 900; color: var(--ink); }
.cfgv2 .livr-card-price { font-size: 18px; font-weight: 900; color: var(--green-dark); white-space: nowrap; }
.cfgv2 .livr-card-price--free s { font-size: 14px; font-weight: 700; color: var(--muted); }
.cfgv2 .livr-card-price--free strong { color: var(--green-dark); font-weight: 900; }
.cfgv2 .livr-card-tag { font-size: 12.5px; font-weight: 700; color: var(--green-dark); }
.cfgv2 .livr-card-benefits { list-style: none; padding: 0; margin: 2px 0; display: flex; flex-direction: column; gap: 3px; }
.cfgv2 .livr-card-benefits li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.cfgv2 .livr-card-benefits li::before { content: "✔"; position: absolute; left: 0; color: var(--green-dark); font-weight: 900; }
.cfgv2 .livr-card-eta { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cfgv2 .livr-card-cta { margin-top: 6px; min-height: 42px; border: 1.5px solid var(--green); border-radius: 12px; background: #fff !important; color: var(--green-dark); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: background .15s, color .15s; }
.cfgv2 .livr-card-cta:hover, .cfgv2 .livr-card-cta.is-selected { background: var(--green) !important; color: #fff; }
.cfgv2 .livr-card--indispo { opacity: .72; background: #f6f7f8 !important; }
.cfgv2 .livr-card-badge--indispo { font-size: 12px; font-weight: 900; color: #c0392b; }
.cfgv2 .livr-card-why { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* Question de l'accès (illustrée) */
.cfgv2 .livr-acc { margin-top: 22px; }
.cfgv2 .livr-acc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.cfgv2 .livr-acc-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 14px !important; border: 2px solid var(--line); border-radius: 16px; background: #fff !important; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.cfgv2 .livr-acc-card:hover { transform: translateY(-2px); border-color: var(--state-hover-line); }
.cfgv2 .livr-acc-ic { font-size: 30px; line-height: 1; }
.cfgv2 .livr-acc-t { font-size: 15px; font-weight: 900; color: var(--ink); }
.cfgv2 .livr-acc-d { font-size: 12px; color: var(--muted); line-height: 1.35; }
.cfgv2 .livr-acc-mark { position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--green) !important; color: #fff; font-size: 12px; font-weight: 900; display: none; align-items: center; justify-content: center; }
.cfgv2 .livr-acc-card.is-on { border-color: var(--green); box-shadow: 0 0 0 2px var(--state-selected); background: var(--green-light) !important; }
.cfgv2 .livr-acc-card--no.is-on { border-color: #c0392b; box-shadow: 0 0 0 2px rgba(192,57,43,.2); background: #fbe4e0 !important; }
.cfgv2 .livr-acc-card--no.is-on .livr-acc-mark { background: #c0392b !important; }
.cfgv2 .livr-acc-card.is-on .livr-acc-mark { display: inline-flex; }
.cfgv2 .livr-acc-help { margin-top: 12px; font-size: 13px; }
.cfgv2 .livr-acc-help summary { cursor: pointer; font-weight: 800; color: var(--green-dark); padding: 8px 0; }
.cfgv2 .livr-acc-help p { font-size: 12.5px; color: var(--ink); line-height: 1.5; margin: 6px 0; }
.cfgv2 .livr-acc-warn { margin-top: 12px; padding: 12px 14px !important; border-radius: 10px; background: var(--green-light) !important; border: 1px solid var(--green); color: var(--green-dark); font-size: 13px; line-height: 1.45; animation: cfgv2-step-in .3s ease; }

/* Comparatif */
.cfgv2 .livr-compare { margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--white) !important; overflow: hidden; }
.cfgv2 .livr-compare summary { cursor: pointer; padding: 14px 16px; font-size: 14px; font-weight: 800; color: var(--ink); list-style: none; }
.cfgv2 .livr-compare summary::-webkit-details-marker { display: none; }
.cfgv2 .livr-compare[open] summary { border-bottom: 1px solid var(--line); }
.cfgv2 .livr-compare-scroll { overflow-x: auto; }
.cfgv2 .livr-compare-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 420px; }
.cfgv2 .livr-compare-table th, .cfgv2 .livr-compare-table td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--line); }
.cfgv2 .livr-compare-table thead th { font-size: 12px; font-weight: 900; color: var(--green-dark); background: var(--surface-bg) !important; }
.cfgv2 .livr-compare-table tbody th { text-align: left; font-weight: 700; color: var(--muted); }

/* Détail des coûts */
.cfgv2 .livr-costs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 800; color: var(--ink); }
.cfgv2 .livr-costs-head strong { font-size: 18px; font-weight: 900; color: var(--green-dark); }
.cfgv2 .livr-costs-free { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin: 0 0 8px !important; padding: 8px 10px !important; border-radius: 10px; background: #e8f7ee !important; }
.cfgv2 .livr-costs-free-l { font-size: 14px; color: var(--ink); }
.cfgv2 .livr-costs-free-l s { color: var(--muted); font-weight: 600; }
.cfgv2 .livr-costs-free-l strong { color: var(--green-dark); font-weight: 900; }
.cfgv2 .livr-costs-free-save { font-size: 12.5px; color: var(--green-dark); font-weight: 700; }
.cfgv2 .livr-costs-free-save strong { font-weight: 900; }
.cfgv2 .livr-costs-detail summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--green-dark); padding: 8px 0; }

/* Logos de confiance */
.cfgv2 .livr-trust { list-style: none; padding: 14px 16px !important; margin: 20px 0 0 !important; display: flex; flex-wrap: wrap; gap: 10px 20px; border-radius: 14px; background: var(--surface-bg) !important; border: 1px solid var(--line); }
.cfgv2 .livr-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cfgv2 .livr-trust-ic { font-size: 15px; }

/* FAQ repliable */
.cfgv2 .livr-faq { margin-top: 18px; }
.cfgv2 .livr-faq-title { font-size: 15px; font-weight: 900; color: var(--ink); margin-bottom: 8px; }
.cfgv2 .livr-faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--white) !important; margin-bottom: 8px; }
.cfgv2 .livr-faq-item summary { cursor: pointer; padding: 12px 14px; font-size: 13.5px; font-weight: 700; color: var(--ink); list-style: none; }
.cfgv2 .livr-faq-item summary::-webkit-details-marker { display: none; }
.cfgv2 .livr-faq-item summary::before { content: "＋"; margin-right: 8px; color: var(--green-dark); font-weight: 900; }
.cfgv2 .livr-faq-item[open] summary::before { content: "－"; }
.cfgv2 .livr-faq-item p { margin: 0 14px 14px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 560px) {
  .cfgv2 .livr-choice { grid-template-columns: 1fr; }
  .cfgv2 .livr-cards { grid-template-columns: 1fr; }
  .cfgv2 .livr-sticky { top: 60px; }
  .cfgv2 .livr-sticky-eta { display: none; }
  .cfgv2 .livr-hero-price { font-size: 21px; }
}

/* =============================================================
   CRO-043 — Expérience « Retrait en agence » (assistant de préparation)
   ============================================================= */
/* Bannière d'économie valorisée */
.cfgv2 .ag-save { display: flex; gap: 14px; align-items: center; margin: 18px 0; padding: 16px 18px !important; border-radius: 16px; border: 1px solid var(--green); background: linear-gradient(180deg, var(--green-light), #fff) !important; }
.cfgv2 .ag-save-ic { flex: none; font-size: 32px; }
.cfgv2 .ag-save-body { display: flex; flex-direction: column; }
.cfgv2 .ag-save-lbl { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cfgv2 .ag-save-amount { font-size: 28px; font-weight: 900; color: #1a8f42; line-height: 1.1; }
.cfgv2 .ag-save-sub { font-size: 12.5px; color: var(--muted); }
.cfgv2 .ag-save-eq { font-size: 12px; color: var(--green-dark); font-weight: 600; margin-top: 4px; }

/* Carte « Votre agence » */
.cfgv2 .ag-store { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px!important; padding: 16px !important; border-radius: 18px; border: 1px solid var(--line); background: var(--white) !important; box-shadow: var(--shadow); }
.cfgv2 .ag-store-photo { position: relative; flex: none; width: 128px; height: 128px; border-radius: 14px; background: linear-gradient(135deg, #dbe6f7, #eef2f7) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; }
.cfgv2 .ag-store-photo-ic { font-size: 42px; }
.cfgv2 .ag-store-photo-cap { font-size: 12px; font-weight: 800; color: var(--green-dark); }
.cfgv2 .ag-store-body { flex: 1 1 240px; min-width: 0; }
.cfgv2 .ag-store-lbl { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.cfgv2 .ag-store-name { font-size: 17px; font-weight: 900; color: var(--ink); }
.cfgv2 .ag-store-rows { margin: 10px 0; display: flex; flex-direction: column; gap: 5px; }
.cfgv2 .ag-store-row { font-size: 13px; color: var(--ink); }
.cfgv2 .ag-store-hours { margin: 10px 0; padding: 10px 12px !important; border-radius: 10px; background: var(--surface-bg) !important; }
.cfgv2 .ag-store-hours-t { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.cfgv2 .ag-store-hours-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 12.5px; }
.cfgv2 .ag-store-hours-grid span:nth-child(odd) { color: var(--muted); font-weight: 700; }
.cfgv2 .ag-store-hours-grid span:nth-child(even) { color: var(--ink); font-weight: 600; text-align: right; }
.cfgv2 .ag-store-map { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 18px !important; border-radius: 24px; border: 1.5px solid var(--green); background: var(--green) !important; color: #fff !important; font-size: 13.5px; font-weight: 800; text-decoration: none; transition: background .15s; }
.cfgv2 .ag-store-map:hover { background: var(--green-dark) !important; }

/* Preuve sociale */
.cfgv2 .ag-social { margin-bottom: 16px!important; padding: 12px 14px !important; border-radius: 12px; background: var(--surface-bg) !important; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.cfgv2 .ag-social-stars { color: #f5b301; letter-spacing: 1px; }
.cfgv2 .ag-social strong { color: var(--green-dark); }

/* Estimation du chargement */
.cfgv2 .ag-load { margin-bottom: 16px!important; padding: 14px 16px !important; border-radius: 14px; border: 1px dashed var(--line); background-color:white!important }
.cfgv2 .ag-load-head { font-size: 14px; font-weight: 900; color: var(--ink); margin-bottom: 10px; }
.cfgv2 .ag-load-grid { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 8px; }
.cfgv2 .ag-load-i { display: flex; flex-direction: column; }
.cfgv2 .ag-load-v { font-size: 18px; font-weight: 900; color: var(--green-dark); }
.cfgv2 .ag-load-l { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.cfgv2 .ag-load-veh { font-size: 13px; color: var(--ink); }
.cfgv2 .ag-load-veh strong { color: var(--green-dark); }
.cfgv2 .ag-load-note { font-size: 12.5px; color: var(--muted); margin: 0 0 8px !important; line-height: 1.4; }
.cfgv2 .ag-load-note strong { color: var(--ink); }

/* Checklist */
.cfgv2 .ag-check { margin-bottom: 18px!important; padding: 14px 16px !important; border-radius: 14px; background: var(--green-light) !important; border: 1px solid var(--green); }
.cfgv2 .ag-check-head { font-size: 13.5px; font-weight: 900; color: var(--green-dark); margin-bottom: 8px; }
.cfgv2 .ag-check-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; }
.cfgv2 .ag-check-list li { position: relative; padding-left: 22px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cfgv2 .ag-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green-dark); font-weight: 900; }

/* Préparez votre chantier — accordéon chronologique */
.cfgv2 .ag-prep { margin-bottom: 18px; }
.cfgv2 .ag-prep-title { font-size: 16px; }
.cfgv2 .ag-step { border: 1px solid var(--line); border-radius: 14px; background: var(--white) !important; margin-bottom: 10px!important; overflow: hidden; }
.cfgv2 .ag-step[open] { box-shadow: var(--shadow); border-color: var(--green); }
.cfgv2 .ag-step > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; min-height: 56px; }
.cfgv2 .ag-step > summary::-webkit-details-marker { display: none; }
.cfgv2 .ag-step-when { flex: none; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--green-dark) !important; padding: 3px 8px !important; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.cfgv2 .ag-step-name { flex: 1; font-size: 14.5px; font-weight: 800; color: var(--ink); min-width: 0; }
.cfgv2 .ag-step-flag { font-size: 11px; font-weight: 800; color: var(--green-dark); }
.cfgv2 .ag-step-price { flex: none; font-size: 15px; font-weight: 900; color: var(--green-dark); }
.cfgv2 .ag-step-price small { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.cfgv2 .ag-step-chev { flex: none; color: var(--muted); transition: transform .2s ease; }
.cfgv2 .ag-step[open] .ag-step-chev { transform: rotate(180deg); }
.cfgv2 .ag-step-body { padding: 0 16px 16px; }
.cfgv2 .ag-step-desc { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 0 0 8px; }
.cfgv2 .ag-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cfgv2 .ag-badge { font-size: 11.5px; font-weight: 800; padding: 4px 10px !important; border-radius: 999px; background: var(--surface-bg) !important; color: var(--ink); border: 1px solid var(--line); }
.cfgv2 .ag-badge--reco { background: var(--green-light) !important; color: var(--green-dark); border-color: var(--green); }
.cfgv2 .ag-badge--dispo { background: #e6f6ec !important; color: #1a8f42; border-color: #9fd8b3; }
.cfgv2 .ag-tar-help { margin-bottom: 10px; padding: 10px 12px !important; border-radius: 10px; background: #fff7e0 !important; border: 1px solid #e8c65b; color: #8a6100; font-size: 12.5px; line-height: 1.45; }
.cfgv2 .ag-tar-dur-l { font-size: 12.5px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.cfgv2 .ag-dur-radio { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); margin-right: 6px; vertical-align: -2px; }
.cfgv2 .agsvc-dur.is-on .ag-dur-radio { border-color: #fff; box-shadow: inset 0 0 0 3px var(--green); background: #fff; }

/* Humanisation */
.cfgv2 .ag-human { display: flex; gap: 12px; align-items: center; margin-bottom: 16px!important; padding: 14px 16px !important; border-radius: 14px; background: var(--advisor-bg, #fff3e0) !important; border-left: 4px solid var(--brand-secondary); }
.cfgv2 .ag-human-ic { flex: none; font-size: 28px; }
.cfgv2 .ag-human-p { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 0; }

@media (max-width: 560px) {
  .cfgv2 .ag-store-photo { width: 100%; height: 120px; }
  .cfgv2 .ag-check-list { grid-template-columns: 1fr; }
  .cfgv2 .ag-save-amount { font-size: 24px; }
}


/* ---- Étape « Personnaliser l'occultation » : rappel matière + changement rapide ---- */
.cfgv2 .occult-recap { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px !important; border: 1px solid var(--green); border-radius: 12px; background: var(--green-light) !important; margin-bottom: 18px; }
.cfgv2 .occult-recap-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfgv2 .occult-recap-l { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.cfgv2 .occult-recap-name { font-size: 17px; font-weight: 900; color: var(--ink); }
.cfgv2 .occult-recap-desc { font-size: 12.5px; color: var(--muted); font-style: italic; }
.cfgv2 .occult-recap-price { margin-top: 6px; }
.cfgv2 .occult-recap-price:empty { display: none; }
/* CFG-OCC-057 : prévisualisation des coloris disponibles sur les cartes de pose (informatif). */
.cfgv2 .pose-colors { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px !important; }
.cfgv2 .pose-colors-l { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cfgv2 .pose-color-dot { display: inline-block; flex: none; width: 18px !important; height: 18px !important; border-radius: 50%; background: var(--c, #ccc) !important; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
/* Révélation fluide des questions de personnalisation de l'occultation (CFG-OCC-056) + échantillon (US1). */
.cfgv2 #occult-echantillon:not([hidden]),
.cfgv2 #occult-composite-pose:not([hidden]),
.cfgv2 #occult-couleur-composite:not([hidden]),
.cfgv2 #occult-couleur-pvc:not([hidden]),
.cfgv2 #occult-length-block:not([hidden]) { animation: cfgv2-step-in .28s ease; }
@media (prefers-reduced-motion: reduce) {
  .cfgv2 #occult-echantillon:not([hidden]),
  .cfgv2 #occult-composite-pose:not([hidden]),
  .cfgv2 #occult-couleur-composite:not([hidden]),
  .cfgv2 #occult-couleur-pvc:not([hidden]),
  .cfgv2 #occult-length-block:not([hidden]) { animation: none; }
}
.cfgv2 .occult-recap-change { flex: none; min-height: 40px; padding: 0 18px !important; border-radius: 22px; border: 1.5px solid var(--green); background: #fff !important; color: var(--green-dark); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: background .15s, color .15s; }
.cfgv2 .occult-recap-change:hover { background: var(--green) !important; color: #fff; }
.cfgv2 .occult-quick { margin: -6px 0 18px; padding: 14px 16px !important; border: 1px dashed var(--green); border-radius: 12px; background: #fff !important; }
.cfgv2 .occult-quick-l { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.cfgv2 .occult-quick-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cfgv2 .occult-quick-btn { padding: 9px 18px !important; border: 1.5px solid var(--line); border-radius: 999px; background: #fff !important; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.cfgv2 .occult-quick-btn:hover { border-color: var(--green); }
.cfgv2 .occult-quick-btn.is-active { background: var(--green) !important; border-color: var(--green); color: #fff; }
.cfgv2 .occult-quick-btn.is-active::before { content: "✓ "; font-weight: 900; }
.cfgv2 .occult-quick-btn.is-disabled { opacity: .4; cursor: not-allowed; }
/* ---- Échantillons gratuits : cartes multi-sélection ---- */
.cfgv2 .card-grid--multi .card { position: relative; }
.cfgv2 .card-grid--multi .card .thumb { position: relative; }
.cfgv2 .card-grid--multi .card::before { content: ""; position: absolute; top: 10px; left: 10px; z-index: 3; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line); background: #fff; transition: background .15s, border-color .15s; }
.cfgv2 .card-grid--multi .card.selected::before { background: var(--green); border-color: var(--green); }
.cfgv2 .card-grid--multi .card.selected::after { content: "✓"; position: absolute; top: 10px; left: 10px; z-index: 4; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 900; }
.cfgv2 .card-price--free { display: block; margin-top: 4px; font-size: 13px; font-weight: 800; color: #1a8f42; }
/* ---- Assistant de choix des poteaux (étape « Type de poteaux ») ---- */
.cfgv2 .pot-assistant { margin: 18px 0 4px!important; display: flex; flex-direction: column; gap: 14px; }
.cfgv2 #poteaux-assistant .pot-heights { order: 1; }
.cfgv2 #poteaux-assistant .pot-sel { order: 2; }
.cfgv2 #poteaux-assistant .pot-global { order: 3; }
.cfgv2 #poteaux-assistant .pot-expert { order: 4; }
.cfgv2 #poteaux-assistant .pot-reco2 { order: 5; }
.cfgv2 #poteaux-assistant .pot-scel { order: 6; }
.cfgv2 #poteaux-assistant .pot-impact { order: 7; }
.cfgv2 #poteaux-assistant .pot-assure { order: 7; }
.cfgv2 #poteaux-assistant .pot-help-card { order: 8; }
.cfgv2 .pot-loading { padding: 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13.5px; background: var(--white); }
.cfgv2 .pot-reco { display: flex; gap: 12px; align-items: flex-start; padding: 16px!important; border: 1px solid var(--green); border-left: 4px solid var(--green); border-radius: 14px; background: var(--green-light)!important; }
.cfgv2 .pot-reco-ic { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.cfgv2 .pot-reco-l { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--green-dark); }
.cfgv2 .pot-reco-h { font-size: 30px; font-weight: 900; color: var(--green-dark); line-height: 1.05; margin: 2px 0 6px!important; }
.cfgv2 .pot-reco-sub { font-size: 13px; color: var(--ink); line-height: 1.45; }
.cfgv2 .pot-reco-tip { font-size: 13px; font-weight: 700; color: var(--green-dark); margin-top: 6px!important; }
.cfgv2 .pot-why { border: 1px solid var(--line); border-radius: 12px; background: var(--white)!important; overflow: hidden; }
.cfgv2 .pot-why > summary { cursor: pointer; padding: 12px 14px!important; font-size: 13.5px; font-weight: 700; color: var(--green-dark); background: #fafbfc!important; list-style: none; }
.cfgv2 .pot-why > summary::-webkit-details-marker { display: none; }
.cfgv2 .pot-why > summary::after { content: " ▾"; font-weight: 900; }
.cfgv2 .pot-why[open] > summary::after { content: " ▴"; }
.cfgv2 .pot-why p, .cfgv2 .pot-why ul { margin: 10px 14px!important; font-size: 13px; line-height: 1.5; color: var(--ink); }
.cfgv2 .pot-why ul { padding-left: 20px!important; }
.cfgv2 .pot-heights-t { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 8px!important; }
.cfgv2 .pot-hlist { display: flex; flex-direction: column; gap: 8px; }
.cfgv2 .pot-hrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 70px; text-align: left; padding: 12px 14px!important; border: 1.5px solid #e1e7f2; border-radius: 16px; background: var(--white)!important; cursor: pointer; font: inherit; -webkit-appearance: none!important; appearance: none; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease; box-shadow: 0 1px 4px rgba(16,24,40,.04); }
.cfgv2 .pot-hrow:not(.is-disabled):hover { border-color: #2b5cff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(2,6,23,.08); }
.cfgv2 .pot-hrow-radio { width: 20px; height: 20px; border: 2px solid #cbd5e1; border-radius: 50%; background: #fff; flex-shrink: 0; display: block; transition: border-color .15s, background .15s, box-shadow .15s; }
.cfgv2 .pot-hrow.is-selected .pot-hrow-radio { border-color: #2b5cff; background: #2b5cff!important; box-shadow: inset 0 0 0 3px #fff; }
.cfgv2 .pot-hrow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfgv2 .pot-hrow-h { font-size: 16px; font-weight: 800; color: var(--ink); }
.cfgv2 .pot-hrow-state { font-size: 12.5px; font-weight: 700; color: #1a8f42; }
.cfgv2 .pot-hrow-vis { font-size: 12.5px; color: #667085; font-weight: 600; }
.cfgv2 .pot-hrow-state small { display: block; font-weight: 600; color: #b02a37; font-size: 11.5px; }
.cfgv2 .pot-hrow-p { font-size: 14px; font-weight: 800; color: var(--green-dark); white-space: nowrap; }
.cfgv2 .pot-hrow-check { width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
/* Ligne recommandée NON sélectionnée : style secondaire (contour vert léger, pas de
   fond) pour ne jamais concurrencer la sélection active (CFG-POT-050). Le badge
   « Recommandée » suffit à la repérer, comme sur l'étape Panneaux. */
.cfgv2 .pot-hrow--reco:not(.is-selected) { border-color: #a5b4fc; border-style: dashed; background: #fff !important; }
.cfgv2 .pot-hrow--reco .pot-hrow-state { color: var(--green-dark); }
/* CFG-POT-051 : badge « Recommandée » du tableau des poteaux — texte foncé sur fond
   bleu clair (au lieu de blanc sur bleu) pour un contraste WCAG confortable. */
.cfgv2 .pot-hrow .pan-hrow-badge { background: #eef3ff!important; color: #1f3f8f!important; border: 1px solid #2b5cff; }
/* Ligne sélectionnée : seul état « rempli » (fond bleu), visuellement dominant. */
.cfgv2 .pot-hrow.is-selected { border-color: #2b5cff; border-width: 2px; box-shadow: 0 0 0 2px rgba(43,92,255,.25); background: #f0f5ff !important; }
.cfgv2 .pot-hrow.is-disabled { cursor: not-allowed; opacity: .55; background: #f6f7f9!important; }
.cfgv2 .pot-hrow.is-disabled .pot-hrow-radio { color: var(--muted); }
.cfgv2 .pot-sel { display: grid; grid-template-columns: 1fr 132px; gap: 12px; align-items: start; border: 1px solid #d9e4fb; border-left: 4px solid #2b5cff; border-radius: 18px; background: linear-gradient(180deg, #fff 0%, #f8fbff 100%)!important; padding: 16px!important; box-shadow: 0 4px 14px rgba(25,38,67,.06); }
.cfgv2 .pot-sel-main { min-width: 0; }
.cfgv2 .pot-sel-viz { width: 132px; border: 1px solid #d9e4fb; border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%); padding: 8px; box-shadow: inset 0 0 0 1px rgba(43,92,255,.05); }
.cfgv2 .pot-sel-viz svg { display: block; width: 100%; height: auto; }
.cfgv2 .pot-sel-t { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 10px!important; }
.cfgv2 .pot-sel-grid { display: flex; flex-direction: column; gap: 6px; }
.cfgv2 .pot-sel-r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; }
.cfgv2 .pot-sel-k { color: var(--muted); font-weight: 600; }
.cfgv2 .pot-sel-v { font-weight: 700!important; color: var(--ink)!important; text-align: right; }
.cfgv2 .pot-sel-total { margin-top: 6px!important; padding-top: 10px!important; border-top: 1px solid #d9e4fb; font-size: 15px; }
.cfgv2 .pot-sel-total .pot-sel-v { color: var(--green-dark); font-weight: 900; }
.cfgv2 .pot-sel-sep { margin-top: 6px!important; padding-top: 10px!important; border-top: 1px dashed var(--line); }
.cfgv2 .pot-impact { border: 1px solid #e8c65b; border-left: 4px solid #e0a200; background: #fff7e0!important; color: #8a6100; border-radius: 12px; padding: 12px 14px!important; font-size: 13px; font-weight: 600; line-height: 1.45; }
.cfgv2 .pot-assure { display: flex; gap: 14px; align-items: flex-start; border: 1px solid #dbe5fb; border-left: 4px solid #2b5cff; border-radius: 18px; background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%)!important; padding: 16px 16px 15px!important; box-shadow: 0 4px 14px rgba(43,92,255,.08); }
.cfgv2 .pot-assure-ic { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #eef3ff; font-size: 18px; color: #2b5cff; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(43,92,255,.08); }
.cfgv2 .pot-assure-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfgv2 .pot-assure strong { display: block; font-size: 16px; line-height: 1.25; color: #1f3f8f; font-weight: 800; }
.cfgv2 .pot-assure p { margin: 0!important; font-size: 14px; line-height: 1.6; color: #667085; }
.cfgv2 .pot-help-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 13px 15px!important; border: 1.5px solid #2b5cff; border-radius: 18px; background: linear-gradient(180deg, #fff 0%, #f8fbff 100%)!important; color: #1f3f8f; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 4px 14px rgba(43,92,255,.10); transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.cfgv2 .pot-help-card:hover { border-color: #1f4fd4; box-shadow: 0 8px 18px rgba(43,92,255,.16); transform: translateY(-1px); }
.cfgv2 .pot-help-card:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(43,92,255,.12); }
.cfgv2 .pot-help-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cfgv2 .pot-help-card-ic { width: 32px; height: 32px; border-radius: 999px; background: #f3f4f6; color: #0f172a; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; flex: 0 0 auto; }
.cfgv2 .pot-help-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cfgv2 .pot-help-card-t { font-size: 14px; font-weight: 800; color: var(--ink); }
.cfgv2 .pot-help-card-d { font-size: 12.5px; color: var(--muted); }
.cfgv2 .pot-help-card-arrow { font-size: 22px; color: var(--muted); line-height: 1; flex: 0 0 auto; }
@media (max-width: 560px) {
  .cfgv2 #poteaux-rep-table .rep-table { min-width: 560px; }
  .cfgv2 .pot-hrow { gap: 8px; padding: 10px 12px!important; }
  .cfgv2 .pot-hrow .pan-hrow-delta { font-size: 11.5px; }
}

/* ---- Étape poteaux (CRO-018) : suppléments cartes, comparatif, recommandation experte ---- */
/* Supplément affiché sur les cartes de type de poteaux (comme l'étape panneaux). */
.cfgv2 [data-field="gamme_poteaux"] .card-price { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.cfgv2 .pot-card-incl { font-size: 13px; font-weight: 800; color: var(--green-dark); }
.cfgv2 .pot-card-supp { font-size: 14px; font-weight: 900; color: #b45309; }
.cfgv2 .pot-card-supp small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.cfgv2 .pot-card-supp-unit { font-size: 11.5px; font-weight: 700; color: var(--muted); }

/* Comparatif rapide encoches vs clips. */
.cfgv2 .pot-compare { margin: 16px 0 4px!important; border: 1px solid var(--line); border-radius: 14px; background: #fff!important; padding: 14px 16px!important; }
.cfgv2 .pot-compare-t { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 10px!important; }
.cfgv2 .pot-compare-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cfgv2 .pot-compare-tbl th, .cfgv2 .pot-compare-tbl td { padding: 8px 6px!important; text-align: center; border-bottom: 1px solid var(--line); }
.cfgv2 .pot-compare-tbl th { font-size: 12.5px; font-weight: 800; color: var(--green-dark); }
.cfgv2 .pot-compare-tbl td:first-child, .cfgv2 .pot-compare-tbl th:first-child { text-align: left; color: var(--muted); font-weight: 700; }
.cfgv2 .pot-compare-tbl tr:last-child td { border-bottom: 0; }
.cfgv2 .pot-stars { color: #e0a200; letter-spacing: 1px; white-space: nowrap; font-size: 14px; }
.cfgv2 .pot-stars-off { color: #d9dee5; }
.cfgv2 .pot-compare-note { margin: 10px 0 0!important; font-size: 12px; color: var(--muted); }

/* Encart « gain de temps ». */
.cfgv2 .pot-expert { display: flex; gap: 14px; align-items: flex-start; border: 1px solid #e1e8fb; border-radius: 18px; background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%)!important; padding: 16px 16px 15px!important; box-shadow: 0 4px 14px rgba(43,92,255,.06); }
.cfgv2 .pot-expert-ic { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #eef3ff; font-size: 18px; color: #2b5cff; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(43,92,255,.08); }
.cfgv2 .pot-expert-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfgv2 .pot-expert-head { font-size: 15px; font-weight: 900; color: #1f3f8f; margin-bottom: 0!important; display: block; }
.cfgv2 .pot-expert-p { margin: 0!important; font-size: 14px; line-height: 1.6; color: #667085; }

/* Bloc recommandation enrichi : texte + schéma technique. */
.cfgv2 .pot-reco2 { display: grid; grid-template-columns: 1fr 150px; gap: 14px; align-items: start; border: 1px solid #d7e2fb; border-left: 4px solid #2b5cff; border-radius: 14px; background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%)!important; padding: 16px!important; }
.cfgv2 .pot-reco2-l { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: #1f3f8f; }
.cfgv2 .pot-reco2-h { font-size: 30px; font-weight: 900; color: #2b5cff; line-height: 1.05; margin: 2px 0 8px!important; }
.cfgv2 .pot-deco { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px!important; }
.cfgv2 .pot-deco-row { display: grid; grid-template-columns: 16px 1fr auto; align-items: baseline; gap: 8px; font-size: 13px; }
.cfgv2 .pot-deco-op { font-weight: 900; color: var(--green-dark); text-align: center; }
.cfgv2 .pot-deco-k { color: var(--ink); font-weight: 600; }
.cfgv2 .pot-deco-v { font-weight: 800; color: var(--ink); }
.cfgv2 .pot-deco-sum { margin-top: 4px!important; padding-top: 6px!important; border-top: 1px dashed #2b5cff; }
.cfgv2 .pot-deco-sum .pot-deco-k, .cfgv2 .pot-deco-sum .pot-deco-v { color: #2b5cff; font-weight: 900; }
.cfgv2 .pot-reasons { list-style: none; margin: 0 0 10px!important; padding: 0!important; display: flex; flex-direction: column; gap: 4px; }
.cfgv2 .pot-reasons li { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cfgv2 .pot-robust { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cfgv2 .pot-robust-item { display: flex; flex-direction: column; }
.cfgv2 .pot-robust-k { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cfgv2 .pot-robust-stars { font-size: 15px; color: #e0a200; letter-spacing: 1px; }
.cfgv2 .pot-reco2-schema { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px; overflow: hidden; }
.cfgv2 .pot-reco2-schema svg { display: block; width: 100%; height: auto; }

/* Profondeur de scellement + mini-schéma. */
.cfgv2 .pot-scel { display: grid; grid-template-columns: 1fr 118px; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: #fff!important; padding: 14px 16px!important; }
.cfgv2 .pot-scel-l { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.cfgv2 .pot-scel-v { font-size: 26px; font-weight: 900; color: var(--ink); line-height: 1.05; margin: 2px 0 4px!important; }
.cfgv2 .pot-scel-sub { font-size: 12.5px; color: var(--ink); line-height: 1.45; }
/* CFG-POT-052 : explication pédagogique sur l'évolution de la profondeur de scellement. */
.cfgv2 .pot-scel-note { margin: 8px 0 0!important; padding: 10px 12px!important; border-radius: 10px; background: #f7faff!important; border-left: 3px solid #2b5cff; font-size: 12px; color: var(--ink); line-height: 1.5; }
.cfgv2 .pot-scel-note strong { color: #1f3f8f; }
.cfgv2 .pot-scel-schema svg { display: block; width: 100%; height: auto; }

/* Impact global sur le projet. */
.cfgv2 .pot-global { border: 1px solid var(--line); border-radius: 14px; background: #fff!important; padding: 14px 16px!important; }
.cfgv2 .pot-global-t { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 10px!important; }
.cfgv2 .pot-global-grid { display: flex; flex-direction: column; gap: 6px; }
.cfgv2 .pot-global-r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; }
.cfgv2 .pot-global-r span { color: var(--muted); font-weight: 600; }
.cfgv2 .pot-global-r strong { font-weight: 800; color: var(--ink); }
.cfgv2 .pot-global-alt strong { color: var(--ink); }
.cfgv2 .pot-global-delta { align-self: flex-end; font-size: 15px; font-weight: 900; }
.cfgv2 .pot-global-delta--plus { color: #b45309; }
.cfgv2 .pot-global-delta--minus { color: #1a8f42; }
/* CFG-POT-065 : bouton de bascule de gamme depuis le comparatif « Impact sur votre projet ». */
.cfgv2 .pot-switch-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px !important; padding: 11px 16px !important; border: 1.5px solid var(--green); border-radius: 10px; background: #fff !important; color: var(--green-dark); font-size: 14px; font-weight: 800; cursor: pointer; transition: background .15s ease, transform .08s ease; }
.cfgv2 .pot-switch-btn::before { content: "\21C4"; font-size: 15px; }
.cfgv2 .pot-switch-btn:hover { background: var(--green-light) !important; }
.cfgv2 .pot-switch-btn:active { transform: scale(.98); }

/* Micro-animation lors d'un changement de hauteur. */
@keyframes potPulse { 0% { transform: scale(1); } 35% { transform: scale(1.03); } 100% { transform: scale(1); } }
.cfgv2 .pot-anim { animation: potPulse .35s ease; }
@media (prefers-reduced-motion: reduce) { .cfgv2 .pot-anim { animation: none; } }

@media (max-width: 560px) {
  .cfgv2 .pot-reco2 { grid-template-columns: 1fr; }
  .cfgv2 .pot-reco2-schema { max-width: 220px; margin: 0 auto; }
  .cfgv2 .pot-scel { grid-template-columns: 1fr 100px; }
}

/* ---- Assistant de choix des panneaux (étape « Panneaux ») — mobile-first ---- */
.cfgv2 .pan-compare-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 12px 0 4px!important; padding: 14px 16px!important; border: 1.5px solid #2b5cff; border-radius: 18px; background: linear-gradient(180deg, #fff 0%, #f8fbff 100%)!important; color: #1f3f8f; font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; box-shadow: 0 4px 14px rgba(43,92,255,.10); transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.cfgv2 .pan-compare-btn-ic { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #eef3ff; font-size: 18px; line-height: 1; }
.cfgv2 .pan-compare-btn-txt { flex: 1; min-width: 0; }
.cfgv2 .pan-compare-btn-arrow { flex: none; font-size: 24px; line-height: 1; color: #1f3f8f; }
@media (hover: hover) and (pointer: fine) { .cfgv2 .pan-compare-btn:hover { border-color: #1f4fd4; box-shadow: 0 8px 18px rgba(43,92,255,.16); transform: translateY(-1px); } }
.cfgv2 .pan-compare-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(43,92,255,.12); }
.cfgv2 .pan-compare-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cfgv2 .pan-compare-btn { transition: background .22s ease, color .22s ease, border-color .22s ease; } .cfgv2 .pan-compare-btn:hover { transform: none; } }
@media (min-width: 601px) {
  .cfgv2 .pan-compare-btn { min-height: 64px; padding: 16px 18px!important; font-size: 15px; border-radius: 20px; }
  .cfgv2 .pan-compare-btn-ic { width: 36px; height: 36px; font-size: 19px; }
  .cfgv2 .pan-compare-btn-arrow { font-size: 26px; }
}
.cfgv2 .pan-assistant { margin: 16px 0 12px!important; display: flex; flex-direction: column; gap: 14px; }
.cfgv2 .step--panels { padding-bottom: 96px !important; }
/* Simulation visuelle */
.cfgv2 .pan-sim { border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #f2f7ff, #fff)!important; padding: 14px!important; }
.cfgv2 .pan-sim-scene { display: flex; align-items: flex-end; justify-content: center; gap: 22px; height: 160px; }
.cfgv2 .pan-sim-fence { display: flex; flex-direction: column-reverse; align-items: center; width: 70px; }
.cfgv2 .pan-sim-panel { width: 100%; background: repeating-linear-gradient(90deg, var(--green) 0 2px, transparent 2px 8px), repeating-linear-gradient(0deg, var(--green) 0 2px, transparent 2px 8px); background-color: var(--green-light); border: 2px solid var(--green); border-radius: 4px 4px 0 0; display: flex; align-items: center; justify-content: center; }
.cfgv2 .pan-sim-panel span { font-size: 11px; font-weight: 800; color: var(--green-dark); background: rgba(255,255,255,.85); padding: 1px 4px; border-radius: 4px; }
.cfgv2 .pan-sim-soub { width: 100%; background: #b9a58a; border: 2px solid #8a7a5f; border-top: 0; }
.cfgv2 .pan-sim-human { width: 20px; background: #64748b; border-radius: 10px 10px 0 0; position: relative; }
.cfgv2 .pan-sim-human::before { content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: #64748b; }
.cfgv2 .pan-sim-human span { position: absolute; bottom: 0; left: 26px; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: #475569; }
.cfgv2 .pan-sim-cap { text-align: center; margin-top: 10px; font-size: 13px; color: var(--ink); }
.cfgv2 .pan-sim-cap strong { color: var(--green-dark); }
/* Carte résultat / hauteur visible */
.cfgv2 .pan-result--hero { background: linear-gradient(180deg, #f7faff 0%, #fff 100%) !important; border-color: #d7e2fb; box-shadow: 0 2px 10px rgba(20,30,60,.06); }
.cfgv2 .pan-result--hero .pan-result-t { text-transform: none; letter-spacing: 0; color: #1f3f8f; font-size: 13px; margin-bottom: 8px !important; }
.cfgv2 .pan-result--hero .pan-result-strong { padding-top: 10px !important; }

/* Liste compacte des hauteurs */
.cfgv2 .pan-hlist { display: flex; flex-direction: column; gap: 8px; }
.cfgv2 .pan-hrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 74px; text-align: left; padding: 12px 14px!important; border: 1.5px solid #e1e7f2; border-radius: 16px; background: #fff!important; cursor: pointer; font: inherit; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s, transform .12s, background .15s; box-shadow: 0 1px 4px rgba(16,24,40,.04); }
.cfgv2 .pan-hrow:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(2,6,23,.08); }
.cfgv2 .pan-hrow.is-selected { border-color: #2b5cff; border-width: 2px; box-shadow: 0 0 0 2px rgba(43,92,255,.25); background: #f0f5ff !important; }
.cfgv2 .pan-hrow.is-reco:not(.is-selected) { border-color: #a5b4fc; border-style: dashed; }
.cfgv2 .pan-hrow-radio { width: 20px; height: 20px; border: 2px solid #cbd5e1; border-radius: 50%; background: #fff; flex-shrink: 0; transition: border-color .15s, background .15s, box-shadow .15s; display: block; }
.cfgv2 .pan-hrow.is-selected .pan-hrow-radio { border-color: #2b5cff; background: #2b5cff!important; box-shadow: inset 0 0 0 3px #fff; }
.cfgv2 .pan-hrow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfgv2 .pan-hrow-h { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.cfgv2 .pan-hrow-badge { font-size: 11px; font-weight: 800; color: #fff; background: #2b5cff; padding: 2px 8px; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
.cfgv2 .pan-hrow-vis { font-size: 12.5px; color: #667085; font-weight: 600; }
.cfgv2 .pan-hrow-delta { font-size: 12.5px; font-weight: 800; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; text-align: right; }
.cfgv2 .pan-hrow-delta small { font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.cfgv2 .pan-hrow-delta--incl { color: #2b5cff; font-weight: 800; }
.cfgv2 .pan-hrow-delta--minus { color: #1a8f42; }
.cfgv2 .pan-hrow-delta--plus { color: #b45309; }
.cfgv2 .pan-reco-tip { display: flex; gap: 14px; align-items: flex-start; border: 1px solid #d7e2fb; border-radius: 16px; background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%)!important; padding: 16px 16px!important; box-shadow: 0 4px 14px rgba(43,92,255,.06); }
.cfgv2 .pan-reco-ic { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #fff8d6; font-size: 18px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(224,162,0,.15); }
.cfgv2 .pan-reco-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfgv2 .pan-reco-tip strong { display: block; color: #1f3f8f; font-size: 15px!important; font-weight: 800; line-height: 1.3; }
.cfgv2 .pan-reco-tip p { margin: 0!important; font-size: 13.5px; line-height: 1.55; color: #475467; }
/* Carte résultat */
.cfgv2 .pan-result { border: 1px solid #d9e4fb; border-radius: 16px; background: #fff!important; padding: 14px 16px!important; box-shadow: 0 2px 8px rgba(25,38,67,.05); }
.cfgv2 .pan-result-t { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 10px!important; }
.cfgv2 .pan-result-grid { display: flex; flex-direction: column; gap: 6px; }
.cfgv2 .pan-result-r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px!important; }
.cfgv2 .pan-result-k { color: var(--muted); font-weight: 600; }
.cfgv2 .pan-result-v { font-weight: 700; color: var(--ink); text-align: right; }
.cfgv2 .pan-result-strong { margin: 4px 0!important; padding: 8px 0!important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15px; }
.cfgv2 .pan-result-strong .pan-result-v { color: var(--green-dark); font-weight: 900; }
.cfgv2 .pan-result-stars { color: #e0a200; letter-spacing: 1px; }
.cfgv2 .pan-assure { display: flex; gap: 14px; align-items: flex-start; border: 1px solid #e1e8fb; border-radius: 18px; background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%)!important; padding: 16px 16px 15px!important; box-shadow: 0 4px 14px rgba(43,92,255,.06); }
.cfgv2 .pan-assure-ic { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #eef3ff; font-size: 18px; color: #2b5cff; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(43,92,255,.08); }
.cfgv2 .pan-assure-ic--check { font-size: 20px; font-weight: 900; background: #eef3ff; color: #2b5cff; }
.cfgv2 .pan-assure-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfgv2 .pan-assure strong { display: block; font-size: 16px; line-height: 1.25; color: #1f3f8f; font-weight: 800; }
.cfgv2 .pan-assure p { margin: 0; font-size: 14px; line-height: 1.6; color: #667085; }
.cfgv2 .pan-help-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 12px 14px!important; border: 1px solid var(--line); border-radius: 16px; background: #fff!important; color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 2px 8px rgba(25,38,67,.04); }
.cfgv2 .pan-help-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cfgv2 .pan-help-card-ic { width: 32px; height: 32px; border-radius: 999px; background: #f3f4f6; color: #0f172a; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; flex: 0 0 auto; }
.cfgv2 .pan-help-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cfgv2 .pan-help-card-t { font-size: 14px; font-weight: 800; color: var(--ink); }
.cfgv2 .pan-help-card-d { font-size: 12.5px; color: var(--muted); }
.cfgv2 .pan-help-card-arrow { font-size: 22px; color: var(--muted); line-height: 1; flex: 0 0 auto; }

/* ---- Répartition des poteaux (terrain en pente) ---- */
.cfgv2 #poteaux-repartition { margin: 18px 0; padding: 16px !important; border: 1px solid var(--line); border-radius: 14px; background: var(--white) !important; }
.cfgv2 .rep-badge { margin-bottom: 12px!important; }
.cfgv2 .rep-badge-pill { display: inline-block; padding: 5px 12px !important; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.cfgv2 .rep-badge-reco { background: var(--green-light) !important; color: var(--green-dark); border: 1px solid var(--green); }
.cfgv2 .rep-badge-perso { background: #fff7e0 !important; color: #8a6100; border: 1px solid #e8c65b; }
.cfgv2 .rep-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cfgv2 .rep-table th, .cfgv2 .rep-table td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: center; }
.cfgv2 .rep-table thead th { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.cfgv2 .rep-table .rep-h { text-align: left; font-weight: 700; color: var(--ink); }
.cfgv2 .rep-table .rep-pu, .cfgv2 .rep-table .rep-sub { font-weight: 700; color: var(--green-dark); white-space: nowrap; }
.cfgv2 .rep-row-reco { background: #fafffb !important; }
.cfgv2 #poteaux-rep-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cfgv2 .rep-tag { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 800; color: var(--green-dark); background: var(--green-light) !important; border-radius: 999px; padding: 1px 7px !important; vertical-align: middle; }
.cfgv2 .rep-table .qty-stepper--addon { margin: 0 auto; }
.cfgv2 .rep-table .qty-stepper--addon input[type="number"] { width: 40px !important; }
.cfgv2 .rep-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.cfgv2 .rep-total { font-size: 15px; font-weight: 800; color: var(--ink); }
.cfgv2 .rep-total strong { color: var(--green-dark); }
.cfgv2 .rep-reset { border: 1.5px solid var(--green); background: #fff !important; color: var(--green-dark); font: inherit; font-size: 13px; font-weight: 800; padding: 9px 16px !important; border-radius: 22px; cursor: pointer; transition: background .15s, color .15s; }
.cfgv2 .rep-reset:hover { background: var(--green) !important; color: #fff; }
.cfgv2 .rep-warn { margin-top: 12px; padding: 12px 14px !important; border-radius: 10px; background: #fff7e0 !important; border: 1px solid #e8c65b; color: #8a6100; font-size: 13px; font-weight: 600; line-height: 1.45; }
/* Assistant poteaux (US-CONF-046) : analyse, marche, jauge, compatibilité */
.cfgv2 .rep-analyse { margin-bottom: 14px!important; padding: 14px 16px !important; border-radius: 12px; background: var(--green-light) !important; border: 1px solid var(--green); }
.cfgv2 .rep-analyse-head { font-size: 14px; font-weight: 900; color: var(--green-dark); margin-bottom: 6px!important; }
.cfgv2 .rep-analyse-p { font-size: 13px; color: var(--ink); line-height: 1.45; margin: 0 0 8px!important; }
.cfgv2 .rep-analyse-list { margin: 0 0 4px!important; padding-left: 20px!important; font-size: 13px; color: var(--ink); }
.cfgv2 .rep-analyse-list li { margin-bottom: 2px; }
.cfgv2 .rep-analyse-ok { margin-top: 8px!important; font-size: 13px; font-weight: 700; color: #1a8f42; }
.cfgv2 .rep-analyse-auto { margin-top: 8px; padding: 10px 12px !important; border-radius: 10px; background: #eaf0ff !important; border: 1px solid var(--green); color: var(--green-dark); font-size: 13px; line-height: 1.45; }
.cfgv2 .rep-analyse-warn { margin-top: 8px; padding: 10px 12px !important; border-radius: 10px; background: #fff7e0 !important; border: 1px solid #e8c65b; color: #8a6100; font-size: 13px; line-height: 1.45; }
.cfgv2 .rep-optim-inline { display: inline-block; margin-top: 6px; border: 1.5px solid #8a6100; background: #fff !important; color: #8a6100; font: inherit; font-size: 12.5px; font-weight: 800; padding: 6px 12px !important; border-radius: 18px; cursor: pointer; }
.cfgv2 .rep-optim-inline:hover { background: #8a6100 !important; color: #fff; }
.cfgv2 .rep-marche { margin-bottom: 14px!important; }
.cfgv2 .rep-marche-l { display: block; font-size: 13.5px; font-weight: 700!important; color: var(--ink); margin-bottom: 6px!important; }
.cfgv2 .rep-h-price { display: block; font-size: 11.5px; font-weight: 700; color: var(--green-dark); margin-top: 2px; }
.cfgv2 .rep-marge-v { font-weight: 800; color: var(--ink); }
.cfgv2 .rep-gauge { margin-top: 4px; height: 8px; border-radius: 999px; background: #e6eaef; overflow: hidden; }
.cfgv2 .rep-gauge span { display: block; height: 100%; border-radius: 999px; background: #1a8f42; }
.cfgv2 .rep-gauge--limite span { background: #e0a800; }
.cfgv2 .rep-gauge--insuffisant span { background: #c0392b; }
.cfgv2 .rep-compat-pill { display: inline-block; padding: 3px 10px !important; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.cfgv2 .rep-compat-pill--ok { background: #e6f6ec !important; color: #1a8f42 !important; }
.cfgv2 .rep-compat-pill--limite { background: #fff4d6 !important; color: #8a6100 !important; }
.cfgv2 .rep-compat-pill--insuffisant { background: #fbe4e0 !important; color: #c0392b !important; }
.cfgv2 .rep-compat-pill--neutre, .cfgv2 .rep-compat-pill--suff { background: var(--green-light) !important; color: var(--green-dark); }
.cfgv2 .rep-row-suff { background: #fafffb !important; }
.cfgv2 .rep-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cfgv2 .rep-optim { border: 1.5px solid var(--green); background: var(--green) !important; color: #fff; font: inherit; font-size: 13px; font-weight: 800; padding: 9px 16px !important; border-radius: 22px; cursor: pointer; transition: background .15s; }
.cfgv2 .rep-optim:hover { background: var(--green-dark) !important; }
/* Encart conseil valorisé + stepper marche + caption (US simplification assistant) */
.cfgv2 .rep-conseil { margin-top: 14px!important; padding: 16px 18px !important; border-radius: 12px; background: var(--advisor-bg, #eef7f0) !important; border-left: 4px solid var(--green); }
.cfgv2 .rep-conseil-head { font-size: 14px; font-weight: 900; color: var(--green-dark); margin-bottom: 6px; }
.cfgv2 .rep-conseil-p { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 0 0 8px; }
.cfgv2 .rep-conseil-list { margin: 0!important; padding-left: 20px!important; font-size: 13px; color: var(--ink); }
.cfgv2 .rep-conseil-list li { margin-bottom: 3px; }
.cfgv2 .rep-caption { margin: 0 0 8px !important; }
.cfgv2 .rep-marche-stepper { display: inline-flex; align-items: stretch; }
.cfgv2 .rep-marche-stepper .qty-field { display: inline-flex; align-items: center; gap: 2px; }
.cfgv2 .rep-marche-stepper .qty-suffix-inline { font-size: 13px; color: var(--muted); font-weight: 700; padding-right: 6px; }

/* Étape 23 « Pose en redan » : refonte premium mobile selon la maquette. */
/* =====================================================================
 * CRO-023-v2 — Étape "Pose en redan" : refonte premium mobile-first
 * Charte graphique + maquette
 * ===================================================================== */

/* HERO : grand titre + description à gauche, illustration à droite */
.cfgv2 .step--redan .rep-hero {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 14px;
  align-items: center;
  margin: 0 0 14px !important;
  padding: 18px 16px !important;
  border: 1px solid #d7e2fb;
  border-radius: 18px;
  background: linear-gradient(180deg, #f6f9ff 0%, #eef3ff 100%) !important;
  box-shadow: 0 2px 10px rgba(25,38,67,.06);
}
.cfgv2 .step--redan .rep-hero-title {
  margin: 0 0 6px !important;
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.cfgv2 .step--redan .rep-hero-desc {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}
.cfgv2 .step--redan .rep-hero-img {
  width: 110px;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
  background: #e2eaf6 !important;
  border: 1px solid #d7e2fb;
}
.cfgv2 .step--redan .rep-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* SHELL : flex column avec gaps */
.cfgv2 .step--redan .rep-shell {
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* MARCHE CARD : 2 colonnes (label gauche / stepper droite) */
.cfgv2 .step--redan .rep-marche-card {
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(25,38,67,.04);
}
.cfgv2 .step--redan .rep-marche-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px !important;
}
.cfgv2 .step--redan .rep-marche-l {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.cfgv2 .step--redan .rep-marche-l span { color: #2b5cff; font-weight: 800; font-style: normal; }
.cfgv2 .step--redan .rep-marche-ctrl { display: flex; align-items: center; }
.cfgv2 .step--redan .rep-marche-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #d7e2fb;
  border-radius: 14px;
  padding: 3px !important;
  background: #f6f9ff !important;
  gap: 0;
}
.cfgv2 .step--redan .rep-marche-stepper .qty-btn {
  min-width: 40px;
  height: 44px;
  border-radius: 10px;
  background: #fff !important;
  border: 1px solid #d7e2fb;
  color: #2b5cff;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cfgv2 .step--redan .rep-marche-stepper .qty-field {
  flex: none;
  justify-content: center;
  border: 0;
  background: transparent !important;
  padding: 0 4px !important;
}
.cfgv2 .step--redan .rep-marche-stepper input[type="number"] {
  width: 52px !important;
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
  text-align: center;
  border: 0;
  background: transparent;
}
.cfgv2 .step--redan .rep-marche-stepper .qty-suffix-inline { font-size: 15px; font-weight: 700; color: #475569; }
.cfgv2 .step--redan .rep-marche-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 !important;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.cfgv2 .step--redan .rep-marche-note-ic {
  flex: none;
  margin-top: 1px;
  color: #94a3b8;
}

/* ANALYSE CARD */
.cfgv2 .step--redan .rep-analyse {
  margin: 0 !important;
  border-radius: 14px;
  border-color: #d8e4fb;
  background: #f2f7ff !important;
}
.cfgv2 .step--redan .rep-analyse-head { margin-bottom: 8px !important; color: #1b4fd7; }
.cfgv2 .step--redan .rep-analyse-ok::before { content: "✓"; margin-right: 6px; color: #1a8f42; font-weight: 900; }

/* RÉPARTITION HEADER : ✅ + label + chevron */
.cfgv2 .step--redan .rep-reco-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1.5px solid #d7e2fb;
  border-radius: 16px;
  background: linear-gradient(180deg, #f6f9ff 0%, #eef3ff 100%) !important;
  box-shadow: 0 2px 8px rgba(25,38,67,.04);
}
.cfgv2 .step--redan .rep-reco-ic { font-size: 18px; flex: none; }
.cfgv2 .step--redan .rep-badge { margin: 0 !important; flex: 1; }
.cfgv2 .step--redan .rep-badge-pill { padding: 0 !important; border: 0; background: transparent !important; font-size: 14.5px; font-weight: 800; }
.cfgv2 .step--redan .rep-badge-reco { color: #1b4fd7; }
.cfgv2 .step--redan .rep-badge-perso { color: #8a6100; }
.cfgv2 .step--redan .rep-reco-chevron { color: #4c6ea8; font-size: 18px; font-weight: 900; flex: none; }

/* CAPTION */
.cfgv2 .step--redan .rep-caption {
  margin: 0 !important;
  padding: 10px 14px !important;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
  background: #f8faff !important;
  border: 1px solid #e2eaf6;
  border-radius: 10px;
}
.cfgv2 .step--redan .rep-caption strong { color: var(--ink); font-weight: 800; }

/* TABLE WRAP : mobile-first, pas de scroll horizontal */
.cfgv2 .step--redan .rep-table-wrap {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(25,38,67,.04);
}
.cfgv2 .step--redan #poteaux-rep-table { overflow-x: visible; }
.cfgv2 .step--redan .rep-table { min-width: 0; width: 100%; }
.cfgv2 .step--redan .rep-table thead th {
  font-size: 10.5px;
  padding: 10px 8px !important;
  background: #f8faff !important;
  color: #64748b;
}
.cfgv2 .step--redan .rep-table thead th:first-child { padding-left: 14px !important; text-align: left; border-radius: 16px 0 0 0; }
.cfgv2 .step--redan .rep-table thead th:last-child { border-radius: 0 16px 0 0; }
.cfgv2 .step--redan .rep-table td { padding: 10px 6px !important; vertical-align: middle; }
.cfgv2 .step--redan .rep-table .rep-h { text-align: left; padding-left: 14px !important; }
.cfgv2 .step--redan .rep-table .rep-h-price { display: block; font-size: 11.5px; font-weight: 700; color: #2b5cff; margin-top: 1px !important; }
.cfgv2 .step--redan .rep-table .rep-tag { display: inline-block; background: #2b5cff !important; color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px !important; border-radius: 999px; margin-left: 4px !important; vertical-align: 1px; }
.cfgv2 .step--redan .rep-table .rep-marge-v { font-size: 13.5px; font-weight: 800; color: var(--ink); }
/* Ligne recommandée : fond bleu très léger + bordure gauche */
.cfgv2 .step--redan .rep-table .rep-row-reco { background: #f6f9ff !important; }
.cfgv2 .step--redan .rep-table .rep-row-reco td:first-child { border-left: 3px solid #2b5cff; }
.cfgv2 .step--redan .rep-table .rep-row-reco .rep-h { font-weight: 900; color: #1b4fd7; }
/* Compatibility pills */
.cfgv2 .step--redan .rep-compat-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px !important;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.cfgv2 .step--redan .rep-compat-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; background: currentColor; }
.cfgv2 .step--redan .rep-compat-pill--neutre { color: var(--muted); background: #f1f5f9 !important; }
.cfgv2 .step--redan .rep-compat-pill--neutre::before { display: none; }
.cfgv2 .step--redan .rep-compat-pill--ko,
.cfgv2 .step--redan .rep-compat-pill--insuffisant { color: #c0392b; background: #fef2f2 !important; }
.cfgv2 .step--redan .rep-compat-pill--ok { color: #166534; background: #f0fdf4 !important; }
.cfgv2 .step--redan .rep-compat-pill--limite { color: #92400e; background: #fffbeb !important; }
.cfgv2 .step--redan .rep-compat-pill--suff { color: #1b4fd7; background: #eef3ff !important; border: 1px solid #d7e2fb; }
/* Stepper compact dans la table */
.cfgv2 .step--redan .rep-table .qty-stepper--addon { margin: 0 auto; gap: 0; }
.cfgv2 .step--redan .rep-table .qty-stepper--addon .qty-btn { min-width: 28px; height: 28px; font-size: 16px; border-radius: 8px; }
.cfgv2 .step--redan .rep-table .qty-stepper--addon input { width: 34px !important; font-size: 14px; font-weight: 800; }

/* PIED : total + boutons d'action premium */
.cfgv2 .step--redan .rep-foot {
  margin-top: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(25,38,67,.04);
}
.cfgv2 .step--redan .rep-total { font-size: 14px; font-weight: 800; color: var(--ink); }
.cfgv2 .step--redan .rep-total strong { font-size: 16px; color: #2b5cff; }
.cfgv2 .step--redan .rep-actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px !important; }
/* Boutons action : icon gauche + texte + flèche droite */
.cfgv2 .step--redan .rep-optim,
.cfgv2 .step--redan .rep-reset {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 12px 14px !important;
  border-radius: 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.cfgv2 .step--redan .rep-optim {
  border: 1.5px solid var(--green);
  background: linear-gradient(180deg, #fff 0%, #f5fbf6 100%) !important;
  color: var(--green-dark);
}
.cfgv2 .step--redan .rep-optim:hover { background: var(--green-light) !important; transform: translateY(-1px); }
.cfgv2 .step--redan .rep-reset {
  border: 1.5px solid #d7e2fb;
  background: linear-gradient(180deg, #fff 0%, #f6f9ff 100%) !important;
  color: #1b4fd7;
}
.cfgv2 .step--redan .rep-reset:hover { border-color: #2b5cff; background: #eef3ff !important; transform: translateY(-1px); }
/* Boutons désactivés : état non-actionnable */
.cfgv2 .step--redan .rep-optim[disabled],
.cfgv2 .step--redan .rep-reset[disabled] {
  opacity: .38;
  cursor: not-allowed !important;
  transform: none !important;
  pointer-events: none;
}
/* Icône cercle */
.cfgv2 .step--redan .rep-act-ic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(43,92,255,.08) !important;
  color: #2b5cff;
}
.cfgv2 .step--redan .rep-optim .rep-act-ic { background: rgba(30,120,60,.10) !important; color: var(--green-dark); }
/* Corps texte */
.cfgv2 .step--redan .rep-act-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
.cfgv2 .step--redan .rep-act-body small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  opacity: .8;
}
/* Flèche droite */
.cfgv2 .step--redan .rep-act-arrow { flex: none; font-size: 22px; font-weight: 800; color: inherit; line-height: 1; }

/* CONSEIL CARD : 💡 icône + titre amber + texte + ✅ bullets */
.cfgv2 .step--redan .rep-conseil {
  margin-top: 0 !important;
  border: 1px solid #f0d38f;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffbec 0%, #fff8dd 100%) !important;
  box-shadow: 0 2px 8px rgba(25,38,67,.04);
  padding: 16px 16px 14px !important;
}
.cfgv2 .step--redan .rep-conseil-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.cfgv2 .step--redan .rep-conseil-ic {
  flex: none;
  font-size: 22px;
  line-height: 1;
  margin-top: 1px;
}
.cfgv2 .step--redan .rep-conseil-body { flex: 1; min-width: 0; }
.cfgv2 .step--redan .rep-conseil-head {
  font-size: 15px;
  font-weight: 900;
  color: #92400e;
  margin-bottom: 5px !important;
}
.cfgv2 .step--redan .rep-conseil-p { font-size: 13px; color: #78350f; line-height: 1.5; margin: 0 0 8px !important; }
.cfgv2 .step--redan .rep-conseil-list { list-style: none; padding-left: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 4px; }
.cfgv2 .step--redan .rep-conseil-list li { position: relative; padding-left: 22px !important; font-size: 13px; font-weight: 700; color: #78350f; }
.cfgv2 .step--redan .rep-conseil-list li::before { content: "✅"; position: absolute; left: 0; top: 0; font-size: 12px; }

/* Responsive */
@media (max-width: 560px) {
  .cfgv2 .step--redan .rep-hero { grid-template-columns: 1fr 88px; padding: 14px 12px !important; }
  .cfgv2 .step--redan .rep-hero-img { width: 88px; height: 88px; }
  .cfgv2 .step--redan .rep-hero-title { font-size: 24px; }
  .cfgv2 .step--redan .rep-marche-inner { grid-template-columns: 1fr; gap: 8px; }
  .cfgv2 .step--redan .rep-marche-ctrl { justify-content: stretch; }
  .cfgv2 .step--redan .rep-marche-stepper { width: 100%; justify-content: center; }
  .cfgv2 .step--redan .rep-marche-stepper input[type="number"] { font-size: 24px; }
  .cfgv2 .step--redan .rep-table thead { display: none; }
  .cfgv2 .step--redan .rep-table, .cfgv2 .step--redan .rep-table tbody, .cfgv2 .step--redan .rep-table tr, .cfgv2 .step--redan .rep-table td { display: block; width: 100%; }
  .cfgv2 .step--redan .rep-table tr { border-bottom: 1px solid var(--line); padding: 10px 14px !important; }
  .cfgv2 .step--redan .rep-table tr:last-child { border-bottom: 0; }
  .cfgv2 .step--redan .rep-table .rep-row-reco { background: #f6f9ff !important; }
  .cfgv2 .step--redan .rep-table .rep-row-reco td:first-child { border-left: 0; }
  .cfgv2 .step--redan .rep-table tr.rep-row-reco { border-left: 3px solid #2b5cff; }
  .cfgv2 .step--redan .rep-table td { padding: 4px 0 !important; border: 0 !important; text-align: left; display: flex; align-items: center; justify-content: space-between; }
  .cfgv2 .step--redan .rep-table .rep-h { font-size: 17px; font-weight: 900; }
  .cfgv2 .step--redan .rep-table .rep-marge::before { content: "Marge : "; font-size: 11.5px; color: var(--muted); font-weight: 600; }
  .cfgv2 .step--redan .rep-table .rep-compat { justify-content: flex-start; }
  .cfgv2 .step--redan .rep-table .rep-q { justify-content: flex-end; }
  .cfgv2 .step--redan .rep-table .qty-stepper--addon .qty-btn { min-width: 32px; height: 32px; }
  .cfgv2 .step--redan .rep-table .qty-stepper--addon input { width: 36px !important; }
}
/* Longueur à occulter : rappel projet + stepper + avertissement dépassement */
.cfgv2 .occlen-ref { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
.cfgv2 .occlen-ref strong { color: var(--green-dark); font-weight: 800; }
.cfgv2 .occlen-stepper .qty-field { display: inline-flex; align-items: center; gap: 2px; }
.cfgv2 .occlen-stepper .qty-suffix-inline { font-size: 13px; color: var(--muted); font-weight: 700; padding-right: 6px; }
.cfgv2 .occlen-warn { margin-top: 10px; padding: 12px 14px !important; border-radius: 10px; background: #fff7e0 !important; border: 1px solid #e8c65b; color: #8a6100; font-size: 13px; line-height: 1.45; }
.cfgv2 .occlen-warn strong { font-weight: 800; }
/* Encart adapté « Qui réalisera la pose ? » */
.cfgv2 #pose-service-encart { margin: 16px 0 4px; }
.cfgv2 .pose-encart { padding: 18px 20px !important; border-radius: 14px; border: 1px solid var(--line); background: var(--white) !important; }
.cfgv2 .pose-encart--pro { border-color: var(--green); background: linear-gradient(180deg, var(--green-light), #fff) !important; }
.cfgv2 .pose-encart-head { font-size: 16px; font-weight: 900; color: var(--green-dark); margin-bottom: 6px; }
.cfgv2 .pose-encart-p { font-size: 13.5px; color: var(--ink); line-height: 1.5; margin: 0 0 10px; }
.cfgv2 .pose-estim { border: 1px solid var(--line); border-radius: 12px; background: #fff !important; padding: 12px 14px !important; margin-bottom: 10px; }
.cfgv2 .pose-estim-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.cfgv2 .pose-estim-ml { font-weight: 800; color: var(--ink); }
.cfgv2 .pose-estim-total { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 14px; }
.cfgv2 .pose-estim-total strong { font-size: 18px; font-weight: 900; color: var(--green-dark); }
.cfgv2 .pose-estim-note { font-size: 11.5px; color: var(--muted); font-style: italic; margin: 8px 0 0; line-height: 1.4; }
.cfgv2 .pose-encart-reassure { font-size: 12.5px; font-weight: 700; color: var(--green-dark); margin: 0 0 10px; }
.cfgv2 .pose-encart-btn { min-height: 44px; padding: 0 20px !important; border-radius: 24px; border: none; background: var(--green) !important; color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background .15s; }
.cfgv2 .pose-encart-btn:hover { background: var(--green-dark) !important; }
.cfgv2 .pose-encart-btn--outline { background: #fff !important; color: var(--green-dark); border: 1.5px solid var(--green); }
/* Encart d'estimation du coût de pose (étape « Finaliser votre projet »). */
.cfgv2 .pose-estimate { border: 1px solid var(--green); border-radius: 14px; background: linear-gradient(180deg, var(--green-light), #fff) !important; padding: 16px 18px; margin: 0 0 20px; }
.cfgv2 .pose-est-head { display: flex; gap: 12px; align-items: flex-start; }
.cfgv2 .pose-est-ic { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.cfgv2 .pose-est-t { display: block; font-size: 16px; font-weight: 900; color: var(--green-dark); }
.cfgv2 .pose-est-sub { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 4px 0 0; }
.cfgv2 .pose-est-box { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--green); border-radius: 12px; background: #fff; text-align: center; }
.cfgv2 .pose-est-label { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.cfgv2 .pose-est-range { display: block; font-size: 24px; font-weight: 900; color: var(--green-dark); line-height: 1.15; margin: 6px 0 4px; }
.cfgv2 .pose-est-note { display: block; font-size: 12.5px; color: var(--ink); line-height: 1.45; }
.cfgv2 .pose-est-disc { font-size: 11.5px; color: var(--muted); font-style: italic; margin: 10px 0 0; line-height: 1.4; }
.cfgv2 .pose-encart-btn--outline:hover { background: var(--green) !important; color: #fff; }
/* Sélection visuelle du délai de projet (remplace le <select>) */
.cfgv2 .card-grid--delai { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cfgv2 .card-grid--delai .card { text-align: center; }
.cfgv2 .card-grid--delai .card-body { align-items: center; }
.cfgv2 .card-grid--delai .card-name { font-size: 14px; font-weight: 700; }
.cfgv2 .delai-msg { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px!important; padding: 12px 14px !important; border-radius: 10px; background: var(--green-light) !important; border: 1px solid var(--green); color: var(--green-dark); font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.cfgv2 .delai-msg-ic { font-size: 16px; line-height: 1.3; }
@media (max-width: 640px) { .cfgv2 .card-grid--delai { grid-template-columns: repeat(2, 1fr); } }

/* =============================================================
   CRO-020 — Étape « Finaliser votre projet » (assistant progressif)
   ============================================================= */
.cfgv2 .fin-intro { text-align: center; margin-bottom: 24px; }
.cfgv2 .fin-title { margin: 0 0 8px !important; font-size: 24px; }
.cfgv2 .fin-sub { font-size: 14.5px; color: var(--muted); line-height: 1.5; margin: 0 auto; max-width: 34rem; }
.cfgv2 .fin-sub strong { color: var(--green-dark); }

/* Blocs de questions (révélés progressivement) */
.cfgv2 .fin-block { margin: 0 0 26px; }
.cfgv2 .fin-block[hidden] { display: none; }
.cfgv2 .fin-block:not([hidden]) { animation: cfgv2-step-in .32s ease; }
.cfgv2 .fin-q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cfgv2 .fin-q-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green) !important; color: #fff; font-size: 13px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.cfgv2 .fin-q-title { margin: 0 !important; font-size: 16px; }
.cfgv2 .fin-optional { display: inline-block; margin-left: 6px; padding: 2px 8px !important; border-radius: 999px; background: var(--surface-bg) !important; color: var(--muted); font-size: 11.5px; font-weight: 700; vertical-align: middle; }

/* Cartes « pleines » : compactes, entièrement cliquables, sans bouton Sélectionner */
.cfgv2 .card-grid--plain { gap: 12px; }
.cfgv2 .card--plain { position: relative; border-width: 1.5px; transition: border-color .15s, box-shadow .15s, background .15s, transform .12s ease; }
.cfgv2 .card--plain .card-body { padding: 12px 14px !important; gap: 3px; }
.cfgv2 .card--plain .card-name { font-size: 14.5px; font-weight: 800; }
.cfgv2 .card--plain .card-desc { font-size: 12.5px; margin: 0 !important; flex: none; line-height: 1.35; }
.cfgv2 .card--plain:not(.selected):hover { transform: translateY(-2px); }
.cfgv2 .card--plain:active { transform: scale(.985); }
.cfgv2 .card--plain.selected { background: var(--green-light) !important; border-color: var(--green); box-shadow: 0 0 0 2px var(--state-selected); }
.cfgv2 .card--plain.selected::after { content: "\2713"; position: absolute; top: 8px; right: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: var(--green) !important; color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.28); animation: cfgv2-pop .28s ease; }
/* Badge « Recommandé » sur une carte pose */
.cfgv2 .card-badge--reco { position: static; display: inline-block; margin: 0 0 6px !important; background: var(--green) !important; color: #fff !important; border-color: var(--green); box-shadow: 0 2px 8px rgba(7,85,184,.24); }

/* Bandeau de réassurance avant le CTA */
.cfgv2 .fin-reassure { list-style: none; padding: 14px 16px !important; margin: 18px 0 0 !important; display: flex; flex-wrap: wrap; gap: 8px 20px; border-radius: 14px; background: var(--surface-bg) !important; border: 1px solid var(--line); }
.cfgv2 .fin-reassure li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink); }
.cfgv2 .fin-reassure-ic { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--green-light) !important; color: var(--green-dark); font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 640px) {
  .cfgv2 .card-grid--plain { grid-template-columns: 1fr; }
  .cfgv2 .card-grid--delai.card-grid--plain { grid-template-columns: 1fr 1fr; }
  .cfgv2 .fin-title { font-size: 21px; }
  .cfgv2 .fin-reassure { gap: 8px 14px; }
  .cfgv2 .fin-reassure li { flex: 1 1 42%; }
}
.cfgv2 .qty-stepper--addon { flex: none; }
.cfgv2 .qty-stepper--addon,
.cfgv2 .qty-group { display: inline-flex; align-items: stretch; gap: 0 !important; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white) !important; box-shadow: 0 1px 3px rgba(20,30,60,.10); }
.cfgv2 .qty-stepper--addon .qty-btn,
.cfgv2 .qty-group .qty-btn { width: 40px; height: 42px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: var(--white) !important; }
.cfgv2 .qty-stepper--addon .qty-btn:hover,
.cfgv2 .qty-group .qty-btn:hover { background: var(--green-light) !important; }
.cfgv2 .qty-stepper--addon input[type="number"],
.cfgv2 .qty-group input[type="number"] { width: 56px !important; height: 42px; box-sizing: border-box; text-align: center; border: 0 !important; border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--white) !important; box-shadow: none !important; font-size: 16px; font-weight: 700; padding: 0 !important; -moz-appearance: textfield; appearance: textfield; }
.cfgv2 .qty-stepper--addon input[type="number"]:focus,
.cfgv2 .qty-group input[type="number"]:focus { outline: none; }
.cfgv2 .qty-stepper--addon input[type="number"]::-webkit-outer-spin-button,
.cfgv2 .qty-stepper--addon input[type="number"]::-webkit-inner-spin-button,
.cfgv2 .qty-group input[type="number"]::-webkit-outer-spin-button,
.cfgv2 .qty-group input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cfgv2 .card-price small { font-weight: 600; color: var(--muted); }

/* ---- Pastilles ---- */
.cfgv2 .pill-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cfgv2 .pill { border: 1px solid var(--line); background: var(--white); color: var(--ink); padding: 13px 26px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 600; min-width: 90px; text-align: center; -webkit-appearance: none; appearance: none; }
.cfgv2 .pill:hover { border-color: var(--state-hover-line); }
.cfgv2 .pill.selected { border-color: var(--green); background: var(--green-light); color: var(--green-dark); box-shadow: 0 0 0 1px var(--green); }
.cfgv2 .pill:disabled { opacity: .35; cursor: not-allowed; }

/* ---- Encadré conseil ---- */
.cfgv2 .advisor { display: flex; align-items: center; gap: 16px; background: var(--advisor-bg); border-radius: 12px; padding: 16px 20px; margin: 20px 0 0; }
.cfgv2 .advisor[hidden] { display: none !important; }
.cfgv2 .advisor-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; background: radial-gradient(circle at 50% 38%, #d8b48c 0 20%, transparent 21%), radial-gradient(circle at 50% 90%, #d8b48c 0 34%, transparent 35%), #b79a7d !important; }
.cfgv2 .advisor-text { margin: 0; font-size: 14.5px; color: var(--advisor-fg); font-style: italic; }

/* ---- Champ longueur ---- */
.cfgv2 .length-field { position: relative; max-width: 220px; }
.cfgv2 .length-field input { width: 100%; padding: 13px 42px 13px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; }
.cfgv2 .length-field input:focus { outline: 2px solid var(--green); border-color: var(--green); }
.cfgv2 .length-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink); font-weight: 700; }
.cfgv2 .reassure-note { display: block; margin: 20px 0 0; padding: 12px 14px; background: var(--advisor-bg) !important; color: var(--advisor-fg); border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.cfgv2 .reassure-note strong { display: block; margin-bottom: 2px; }
.cfgv2 .cfg-intro { max-width: 760px; margin: 0 auto !important; }
.cfgv2 .special-project { position: relative; margin: 0 0 22px !important; padding: 22px 24px !important; border: 1px solid var(--green); border-radius: 14px; background: var(--green-light); }
.cfgv2 .special-head { font-size: 18px; font-weight: 800; color: var(--green-dark); margin: 0 0 8px !important; }
.cfgv2 .special-intro { font-size: 14px; color: var(--ink); line-height: 1.55; margin: 0 0 16px !important; }
.cfgv2 .special-solutions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cfgv2 .special-sol { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 16px !important; }
.cfgv2 .special-sol-title { font-size: 14.5px; font-weight: 800; color: var(--ink); margin: 0 0 8px !important; }
.cfgv2 .special-sol-txt { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 14px !important; flex: 1; }
.cfgv2 #special-rdv { align-self: center; background: var(--green) !important; color: #fff !important; border: 0; border-radius: 10px; padding: 11px 18px !important; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.cfgv2 #special-rdv:hover { background: var(--green-dark) !important; }
.cfgv2 .special-tip { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 16px 0 0 !important; }
.cfgv2 .intro-faq { margin: 0 0 22px !important; }
.cfgv2 .intro-faq-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 12px !important; }
.cfgv2 .intro-faq-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px !important; margin: 0 0 10px !important; background: var(--white); }
.cfgv2 .intro-faq-item summary { font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: revert; }
.cfgv2 .intro-faq-item p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 8px 0 0 !important; }
.cfgv2 #cfg-start { margin-top: 8px !important; }
.cfgv2 .intro-block { margin: 0 0 26px !important; }
.cfgv2 .intro-block-title { font-size: 17px; font-weight: 800; color: var(--ink); text-align: center; margin: 0 0 16px !important; }
.cfgv2 .intro-grid { display: grid; gap: 14px; }
.cfgv2 .intro-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cfgv2 .intro-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cfgv2 .intro-feat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 18px 14px !important; }
.cfgv2 .intro-feat-ic { font-size: 26px; line-height: 1; }
.cfgv2 .intro-feat-t { font-size: 14px; font-weight: 800; color: var(--ink); }
.cfgv2 .intro-feat-d { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.cfgv2 .intro-get { list-style: none; margin: 0 auto !important; padding: 0 !important; max-width: 520px; }
.cfgv2 .intro-get--2 { max-width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.cfgv2 .intro-get li { position: relative; padding: 8px 0 8px 30px !important; font-size: 14px; color: var(--ink); border-bottom: 1px dashed var(--line); }
.cfgv2 .intro-get--2 li:nth-last-child(2) { border-bottom: 0; }
.cfgv2 .intro-get li:last-child { border-bottom: 0; }
.cfgv2 .intro-get li::before { content: "✔"; position: absolute; left: 0; top: 8px; color: var(--green); font-weight: 800; }
.cfgv2 .intro-time { display: flex; align-items: center; gap: 14px; justify-content: center; text-align: left; background: var(--green-light); border: 1px solid var(--green); border-radius: 12px; padding: 16px 20px !important; margin: 0 0 26px !important; }
.cfgv2 .intro-time-ic { font-size: 30px; line-height: 1; }
.cfgv2 .intro-time-txt { display: flex; flex-direction: column; }
.cfgv2 .intro-time-t { font-size: 15px; font-weight: 800; color: var(--green-dark); }
.cfgv2 .intro-time-d { font-size: 13px; color: var(--ink); }
.cfgv2 .intro-realisation { margin: 0 0 26px !important; }
.cfgv2 .intro-realisation img { width: 100%; border-radius: 14px; display: block; }
.cfgv2 .intro-realisation-cap { display: block; text-align: center; font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 8px; }
.cfgv2 .intro-stats--big .intro-stat { padding: 26px 16px !important; }
.cfgv2 .intro-stats--big .intro-stat-ic { font-size: 34px; }
.cfgv2 .intro-stats--big .intro-stat-n { font-size: 26px; }
.cfgv2 .intro-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: var(--green-light); border: 1px solid var(--green); border-radius: 12px; padding: 18px 14px !important; }
.cfgv2 .intro-stat-ic { font-size: 26px; line-height: 1; }
.cfgv2 .intro-stat-n { font-size: 20px; font-weight: 800; color: var(--green-dark); }
.cfgv2 .intro-stat-d { font-size: 12.5px; color: var(--ink); line-height: 1.45; }
.cfgv2 .intro-engage { background: var(--advisor-bg); color: var(--advisor-fg); border-radius: 12px; padding: 16px 18px !important; margin: 0 0 22px !important; }
.cfgv2 .intro-engage-t { font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
.cfgv2 .intro-engage p { font-size: 13.5px; line-height: 1.55; margin: 0 !important; }
.cfgv2 .intro-cta-lead { text-align: center; margin: 0 0 6px !important; }
.cfgv2 .intro-cta-lead-t { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.cfgv2 .intro-cta-lead p { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0 !important; }
@media (max-width: 760px) { .cfgv2 .intro-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cfgv2 .intro-grid--3 { grid-template-columns: 1fr; } .cfgv2 .intro-get--2 { grid-template-columns: 1fr; } .cfgv2 .intro-time { flex-direction: column; text-align: center; } }
@media (max-width: 600px) { .cfgv2 .special-solutions { grid-template-columns: 1fr; } }

/* ---- Cartes couleur ---- */
.cfgv2 .color-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.cfgv2 .color-card { width: 150px; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--white); color: var(--ink); padding: 0; text-align: center; font: inherit; -webkit-appearance: none; appearance: none; position: relative; transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease; }
.cfgv2 .color-card:hover { border-color: var(--state-hover-line); }
.cfgv2 .color-card:not(.selected):hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.cfgv2 .color-card:active { transform: scale(.97); }
.cfgv2 .color-card.selected { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.cfgv2 .color-card .swatch { display: block; height: 110px; background: var(--c, #ccc); }
/* Couleurs de clôture : le grand visuel = l'IMAGE produit, la pastille ronde = la COULEUR.
   Pour ajouter une image : sur le bouton, style="--c:#RRGGBB;--thumb:url('/chemin/image.png')". */
.cfgv2 .color-cards[data-group="couleur"] .color-card .swatch,
.cfgv2 .color-cards[data-group="couleur_occult"] .color-card .swatch,
.cfgv2 .color-cards[data-group="couleur_pvc"] .color-card .swatch,
.cfgv2 .color-cards[data-group="occult_choix"] .color-card .swatch,
.cfgv2 .color-cards[data-group="carolina_couleur"] .color-card .swatch,
.cfgv2 .color-cards[data-group="portland_couleur"] .color-card .swatch,
.cfgv2 .color-cards[data-group="california_couleur"] .color-card .swatch { background-color: #eaeef6 !important; background-image: var(--thumb, none) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
/* Groupes couleur sans image produit : affiche la vraie couleur --c dans le swatch. */
.cfgv2 .color-cards[data-group="california_occ_couleur"] .color-card .swatch { background-color: var(--c, #eaeef6) !important; background-image: none !important; }
.cfgv2 .color-cards[data-group="occult_choix"] .color-card .color-thumb { display: none !important; }
.cfgv2 .color-card .color-thumb { position: absolute; top: 8px; left: 8px; width: 36px; height: 36px; border-radius: 50%; z-index: 2; background: var(--c, #ccc) !important; box-shadow: 0 1px 4px rgba(0,0,0,.20); border: 2px solid #fff; }
.cfgv2 .color-card .color-name { display: block; padding: 12px 8px; font-weight: 700; font-size: 14px; }
.cfgv2 .color-card .color-sub { display: block; padding: 0 8px 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
/* Cartes couleur « ambiance » (COMPOPLAK®) : accroche bénéfice + badge recommandation + coche de sélection. */
.cfgv2 .color-cards--ambiance .color-card .color-name { padding: 12px 8px 2px; }
.cfgv2 .color-accroche { display: block; padding: 0 10px 14px; font-size: 12.5px; font-style: italic; color: var(--muted); font-weight: 600; line-height: 1.35; }
.cfgv2 .color-badge-reco { position: absolute; top: 8px; left: 8px; z-index: 3; background: var(--green) !important; color: #fff; font-size: 10.5px; font-weight: 800; padding: 4px 9px; border-radius: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.25); white-space: nowrap; }
.cfgv2 .color-cards--ambiance .color-card.selected::after { content: "\2713"; position: absolute; bottom: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 3; animation: cfgv2-pop .28s ease; }
@keyframes cfgv2-pop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.cfgv2 .color-group[hidden] { display: none; }

/* CFG-OCC-054 : bouton « Sélectionner » sur les cartes couleur (cohérent avec les autres cartes). */
.cfgv2 .color-card .card-select-btn { width: auto; margin: 0 10px 12px !important; }
.cfgv2 .color-card:hover .card-select-btn { background: var(--green) !important; color: #fff; }
.cfgv2 .color-card.selected .card-select-btn,
.cfgv2 .color-card.is-disabled .card-select-btn { display: none; }
.cfgv2 .color-cards:not(.color-cards--ambiance) .color-card.selected::after { content: "\2713"; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 3; animation: cfgv2-pop .28s ease; }

/* Mobile — Cartes couleur en horizontal (visuel à gauche / texte à droite), une par
   ligne, comme les cartes « Type de clôture ». Le visuel est positionné en absolu sur
   la colonne gauche : il remplit TOUJOURS toute la hauteur de la carte (image ou
   couleur pleine), quel que soit le variant de carte couleur. */
@media (max-width: 600px) {
  .cfgv2 .color-cards { flex-direction: column; gap: 12px; }
  .cfgv2 .color-card {
    position: relative; width: 100% !important; display: flex; flex-direction: column;
    justify-content: center; min-height: 116px; text-align: left;
    padding: 14px 14px 14px calc(38% + 16px) !important;
  }
  /* Le visuel occupe toute la colonne gauche, du haut jusqu'en bas. */
  .cfgv2 .color-card .swatch {
    position: absolute; left: 0; top: 0; bottom: 0; width: 38%; height: auto !important;
    min-height: 0; border-radius: 0;
  }
  /* Pastille couleur : coin haut-gauche du visuel. */
  .cfgv2 .color-card .color-thumb { top: 8px; left: 8px; bottom: auto; }
  /* Badge de réassurance : pastille bleue en surimpression, coin bas-gauche du visuel
     (le haut-gauche est occupé par la pastille couleur) — logique « badge sur l'image ». */
  .cfgv2 .color-card .color-badge-reassure {
    position: absolute; left: 8px; bottom: 8px; top: auto; z-index: 3; width: auto;
    margin: 0 !important; padding: 4px 9px !important; border-radius: 999px;
    background: var(--green) !important; color: #fff !important;
    font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,.28);
  }
  /* Colonne texte : libellés alignés à gauche, centrés verticalement via le flex. */
  .cfgv2 .color-card .color-name,
  .cfgv2 .color-card .color-sub,
  .cfgv2 .color-card .color-accroche {
    padding-left: 0 !important; padding-right: 0 !important; text-align: left;
  }
  .cfgv2 .color-card .color-name { padding-top: 0 !important; padding-bottom: 2px !important; }
  .cfgv2 .color-card .color-sub { padding-bottom: 0 !important; }
  .cfgv2 .color-card .color-accroche { padding-bottom: 0 !important; }
}

/* ===== US — Étape « Couleur de votre clôture » : cartes horizontales premium =====
   Variant .color-cards--horizontal (toutes largeurs) : visuel à gauche, chip + nom +
   RAL + description au centre, indicateur de sélection (cercle → coche) à droite.
   Les règles ciblent .color-cards--horizontal .color-card (spécificité > génériques). */
.cfgv2 .color-cards--horizontal { display: flex; flex-direction: column; gap: 12px; }
.cfgv2 .color-cards--horizontal .color-card {
  position: relative; width: 100% !important; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch;
  min-height: 128px; padding: 0 !important; text-align: left; overflow: hidden;
  border: 2px solid var(--line); border-radius: 16px; background: var(--white);
  box-shadow: 0 2px 8px rgba(20,30,60,.06);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .12s ease;
}
.cfgv2 .color-cards--horizontal .color-card:not(.selected):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,30,60,.10); border-color: var(--state-hover-line); }
.cfgv2 .color-cards--horizontal .color-card:active { transform: scale(.995); }
/* Visuel produit à gauche, pleine hauteur. */
.cfgv2 .color-cards--horizontal .color-card .swatch {
  position: relative; flex: 0 0 38%; max-width: 175px; align-self: stretch;
  height: auto !important; min-height: 128px; width: auto; border-radius: 0;
}
/* Images portrait (portillon) : contain + fond blanc pour afficher le produit entier sans coupure ni fond gris. */
.cfgv2 .color-cards--horizontal[data-group="carolina_couleur"] .color-card .swatch,
.cfgv2 .color-cards--horizontal[data-group="portland_couleur"] .color-card .swatch,
.cfgv2 .color-cards--horizontal[data-group="california_couleur"] .color-card .swatch {
  background-size: contain !important; background-position: center center !important;
  background-color: #fff !important;
}
.cfgv2 .color-cards--horizontal .color-card .color-thumb { top: 10px; left: 10px; bottom: auto; width: 34px; height: 34px; }
/* Corps texte : chip → nom → RAL → description, centré verticalement. */
.cfgv2 .color-cards--horizontal .color-card .cc-body {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 3px; padding: 14px 12px 14px 16px !important;
}
/* Badge de réassurance = chip discret coloré. */
.cfgv2 .color-cards--horizontal .color-card .color-badge-reassure {
  position: static; align-self: flex-start; width: auto; margin: 0 0 4px !important;
  padding: 4px 10px !important; border-radius: 999px; background: var(--green) !important;
  color: #fff !important; font-size: 11.5px; font-weight: 800; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(20,30,60,.15);
}
.cfgv2 .color-cards--horizontal .color-card .color-name { padding: 0 !important; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.cfgv2 .color-cards--horizontal .color-card .color-sub { padding: 0 !important; font-size: 13px; font-weight: 700; color: var(--muted); }
.cfgv2 .color-cards--horizontal .color-card .color-desc { display: block; margin-top: 2px; font-size: 13px; font-style: italic; color: var(--muted); line-height: 1.4; }
/* Indicateur de sélection à droite : cercle vide → cercle bleu + coche blanche. */
.cfgv2 .color-cards--horizontal .color-card .cc-check {
  flex: none; align-self: center; position: relative; box-sizing: border-box!important;
  width: 26px; height: 26px; margin: 0 26px 0 12px!important; border-radius: 50%;
  border: 2px solid #cfd8e6; background: #fff!important; transition: background .15s ease, border-color .15s ease;
}
.cfgv2 .color-cards--horizontal .color-card.selected { border-color: var(--green); background: #eef3ff; box-shadow: 0 0 0 1px var(--green); }
.cfgv2 .color-cards--horizontal .color-card.selected .cc-check { border-color: var(--green); background: var(--green) !important; box-shadow: 0 0 0 3px #fff; }
.cfgv2 .color-cards--horizontal .color-card.selected .cc-check::after {
  content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800; animation: cfgv2-pop .2s ease;
}
/* Neutralise la coche d'angle générique (l'indicateur est le cercle de droite). */
.cfgv2 .color-cards--horizontal .color-card.selected::after { content: none !important; }
/* Note de réassurance de fin d'étape (anti-corrosion). */
.cfgv2 .cc-reassure { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 18px 0 0 !important; padding: 0 8px !important; font-size: 12.5px; color: var(--muted); line-height: 1.45; text-align: center; }
.cfgv2 .cc-reassure-ic { flex: none; line-height: 1.4; }

/* ===== Étape « Installation des poteaux » : cartes horizontales premium ===== */
.cfgv2 .card-grid--support-h { display: flex; flex-direction: column; gap: 12px; }
.cfgv2 .card-grid--support-h .support-card {
  position: relative; width: 100% !important; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch;
  min-height: 128px; padding: 0 !important; text-align: left; overflow: hidden;
  border: 2px solid var(--line); border-radius: 16px; background: var(--white);
  box-shadow: 0 2px 8px rgba(20,30,60,.06);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .12s ease;
}
.cfgv2 .card-grid--support-h .support-card:not(.selected):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,30,60,.10); border-color: var(--state-hover-line); }
.cfgv2 .card-grid--support-h .support-card:active { transform: scale(.995); }

.cfgv2 .card-grid--support-h .support-card .support-swatch {
  position: relative; flex: 0 0 38%; max-width: 175px; align-self: stretch;
  min-height: 128px; overflow: hidden;
}
.cfgv2 .card-grid--support-h .support-card .support-swatch img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.cfgv2 .card-grid--support-h .support-card .support-body {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 3px; padding: 14px 12px 14px 16px !important;
}
.cfgv2 .card-grid--support-h .support-card .support-badge {
  position: static; align-self: flex-start; width: auto; margin: 0 0 4px !important;
  padding: 4px 10px !important; border-radius: 999px; background: var(--green) !important;
  color: #fff !important; font-size: 11.5px; font-weight: 800; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(20,30,60,.15);
}
.cfgv2 .card-grid--support-h .support-card .card-name { padding: 0 !important; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.cfgv2 .card-grid--support-h .support-card .support-sub { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
.cfgv2 .card-grid--support-h .support-card .card-desc { margin: 2px 0 0 !important; font-size: 13px; font-style: italic; color: var(--muted); line-height: 1.4; }
.cfgv2 .card-grid--support-h .support-card .support-warn { display: block; margin: 4px 0 0 !important; font-size: 12.5px; font-weight: 700; font-style: normal; color: #c0392b; line-height: 1.35; }

.cfgv2 .card-grid--support-h .support-card .support-check {
  flex: none; align-self: center; position: relative; box-sizing: border-box!important;
  width: 26px; height: 26px; margin: 0 26px 0 12px!important; border-radius: 50%;
  border: 2px solid #cfd8e6; background: #fff!important; transition: background .15s ease, border-color .15s ease;
}
.cfgv2 .card-grid--support-h .support-card.selected { border-color: var(--green); background: #eef3ff; box-shadow: 0 0 0 1px var(--green); }
.cfgv2 .card-grid--support-h .support-card.selected .support-check { border-color: var(--green); background: var(--green) !important; box-shadow: 0 0 0 3px #fff; }
.cfgv2 .card-grid--support-h .support-card.selected .support-check::after {
  content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800; animation: cfgv2-pop .2s ease;
}
.cfgv2 .card-grid--support-h .support-card.selected::after { content: none !important; }

@media (max-width: 560px) {
  .cfgv2 .card-grid--support-h .support-card { min-height: 122px; }
  .cfgv2 .card-grid--support-h .support-card .support-swatch { max-width: 145px; min-height: 122px; }
  .cfgv2 .card-grid--support-h .support-card .support-badge { font-size: 10.5px; padding: 3px 9px !important; }
  .cfgv2 .card-grid--support-h .support-card .card-name { font-size: 16px; }
  .cfgv2 .card-grid--support-h .support-card .support-check { margin-right: 22px !important; }
}

/* ===== Étape « Panneaux » : cartes horizontales premium (réf. Couleur) ===== */
.cfgv2 .card-grid--panneaux-h { display: flex; flex-direction: column; gap: 12px; }
.cfgv2 .card-grid--panneaux-h .panel-card {
  position: relative; width: 100% !important; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch;
  min-height: 128px; padding: 0 !important; text-align: left; overflow: hidden;
  border: 2px solid var(--line); border-radius: 16px; background: var(--white);
  box-shadow: 0 2px 8px rgba(20,30,60,.06);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .12s ease;
}
.cfgv2 .card-grid--panneaux-h .panel-card:not(.selected):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,30,60,.10); border-color: var(--state-hover-line); }
.cfgv2 .card-grid--panneaux-h .panel-card:active { transform: scale(.995); }
.cfgv2 .card-grid--panneaux-h .panel-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.cfgv2 .card-grid--panneaux-h .panel-card .panel-swatch {
  position: relative; flex: 0 0 38%; max-width: 175px; align-self: stretch;
  min-height: 128px; overflow: hidden; background: #e7edf9;
}
.cfgv2 .card-grid--panneaux-h .panel-card .panel-swatch img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.cfgv2 .card-grid--panneaux-h .panel-card .panel-body {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 3px; padding: 14px 12px 14px 16px !important;
}
.cfgv2 .card-grid--panneaux-h .panel-card .panel-badge {
  position: static; align-self: flex-start; width: auto; margin: 0 0 4px !important;
  padding: 4px 10px !important; border-radius: 999px; background: var(--green) !important;
  color: #fff !important; font-size: 11.5px; font-weight: 800; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(20,30,60,.15);
}
.cfgv2 .card-grid--panneaux-h .panel-card .card-name { padding: 0 !important; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.cfgv2 .card-grid--panneaux-h .panel-card .panel-sub { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
.cfgv2 .card-grid--panneaux-h .panel-card .card-desc { margin: 2px 0 0 !important; font-size: 13px; font-style: italic; color: var(--muted); line-height: 1.4; }
.cfgv2 .card-grid--panneaux-h .panel-card .card-price { margin-top: 4px !important; font-size: 14px; font-weight: 800; color: var(--green-dark); }

.cfgv2 .card-grid--panneaux-h .panel-card .panel-check {
  flex: none; align-self: center; position: relative; box-sizing: border-box !important;
  width: 26px; height: 26px; margin: 0 26px 0 12px !important; border-radius: 50%;
  border: 2px solid #cfd8e6; background: #fff !important; transition: background .15s ease, border-color .15s ease;
}
.cfgv2 .card-grid--panneaux-h .panel-card.selected { border-color: var(--green); background: #eef3ff; box-shadow: 0 0 0 1px var(--green); }
.cfgv2 .card-grid--panneaux-h .panel-card.selected .panel-check { border-color: var(--green); background: var(--green) !important; box-shadow: 0 0 0 3px #fff; }
.cfgv2 .card-grid--panneaux-h .panel-card.selected .panel-check::after {
  content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800; animation: cfgv2-pop .2s ease;
}
.cfgv2 .card-grid--panneaux-h .panel-card.selected::after { content: none !important; }
.cfgv2 .card-grid--panneaux-h .panel-card.is-disabled .panel-check { opacity: .45; }

@media (max-width: 560px) {
  .cfgv2 .card-grid--panneaux-h .panel-card { min-height: 122px; }
  .cfgv2 .card-grid--panneaux-h .panel-card .panel-swatch { max-width: 145px; min-height: 122px; }
  .cfgv2 .card-grid--panneaux-h .panel-card .panel-swatch img { object-position: left center; }
  .cfgv2 .card-grid--panneaux-h .panel-card .panel-badge { font-size: 10.5px; padding: 3px 9px !important; }
  .cfgv2 .card-grid--panneaux-h .panel-card .card-name { font-size: 16px; }
  .cfgv2 .card-grid--panneaux-h .panel-card .panel-check { margin-right: 22px !important; }
}

/* ===== Étapes « Soubassement » : cartes horizontales premium (réf. Couleur) ===== */
.cfgv2 .soub-presence-cards,
.cfgv2 .soub-type-cards,
.cfgv2 .card-grid--soub-beton-h { display: flex; flex-direction: column; gap: 12px; }

.cfgv2 .soub-presence-card,
.cfgv2 .soub-type-card,
.cfgv2 .soub-beton-card {
  position: relative; width: 100% !important; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch;
  min-height: 128px; padding: 0 !important; text-align: left; overflow: hidden;
  border: 2px solid var(--line); border-radius: 16px; background: var(--white);
  box-shadow: 0 2px 8px rgba(20,30,60,.06);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .12s ease;
}
.cfgv2 .soub-presence-card:not(.selected):hover,
.cfgv2 .soub-type-card:not(.selected):hover,
.cfgv2 .soub-beton-card:not(.selected):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,30,60,.10); border-color: var(--state-hover-line); }
.cfgv2 .soub-presence-card:active,
.cfgv2 .soub-type-card:active,
.cfgv2 .soub-beton-card:active { transform: scale(.995); }

.cfgv2 .soub-presence-swatch,
.cfgv2 .soub-type-swatch,
.cfgv2 .soub-beton-swatch {
  position: relative; flex: 0 0 38%; max-width: 175px; align-self: stretch;
  min-height: 128px; overflow: hidden; background: #e7edf9;
}
.cfgv2 .soub-presence-swatch img,
.cfgv2 .soub-type-swatch img,
.cfgv2 .soub-beton-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cfgv2 .soub-presence-body,
.cfgv2 .soub-type-body,
.cfgv2 .soub-beton-body {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 3px; padding: 14px 12px 14px 16px !important;
}

.cfgv2 .soub-presence-badge,
.cfgv2 .soub-type-badge,
.cfgv2 .soub-beton-badge {
  position: static; align-self: flex-start; width: auto; margin: 0 0 4px !important;
  padding: 4px 10px !important; border-radius: 999px; background: var(--green) !important;
  color: #fff !important; font-size: 11.5px; font-weight: 800; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(20,30,60,.15);
}

.cfgv2 .soub-presence-sub,
.cfgv2 .soub-type-sub,
.cfgv2 .soub-beton-sub { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }

.cfgv2 .soub-presence-card .card-name,
.cfgv2 .soub-type-card .card-name,
.cfgv2 .soub-beton-card .card-name { padding: 0 !important; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; }

.cfgv2 .soub-presence-card .card-desc,
.cfgv2 .soub-type-card .card-desc,
.cfgv2 .soub-beton-card .card-desc { margin: 2px 0 0 !important; font-size: 13px; font-style: italic; color: var(--muted); line-height: 1.4; }

.cfgv2 .soub-presence-card .card-price,
.cfgv2 .soub-type-card .card-price,
.cfgv2 .soub-beton-card .card-price { margin-top: 4px !important; font-size: 14px; font-weight: 800; color: var(--green-dark); }

.cfgv2 .soub-presence-check,
.cfgv2 .soub-type-check,
.cfgv2 .soub-beton-check {
  flex: none; align-self: center; position: relative; box-sizing: border-box !important;
  width: 26px; height: 26px; margin: 0 26px 0 12px !important; border-radius: 50%;
  border: 2px solid #cfd8e6; background: #fff !important; transition: background .15s ease, border-color .15s ease;
}

.cfgv2 .soub-presence-card.selected,
.cfgv2 .soub-type-card.selected,
.cfgv2 .soub-beton-card.selected { border-color: var(--green); background: #eef3ff; box-shadow: 0 0 0 1px var(--green); }

.cfgv2 .soub-presence-card.selected .soub-presence-check,
.cfgv2 .soub-type-card.selected .soub-type-check,
.cfgv2 .soub-beton-card.selected .soub-beton-check { border-color: var(--green); background: var(--green) !important; box-shadow: 0 0 0 3px #fff; }

.cfgv2 .soub-presence-card.selected .soub-presence-check::after,
.cfgv2 .soub-type-card.selected .soub-type-check::after,
.cfgv2 .soub-beton-card.selected .soub-beton-check::after {
  content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800; animation: cfgv2-pop .2s ease;
}

.cfgv2 .soub-presence-card.selected::after,
.cfgv2 .soub-type-card.selected::after,
.cfgv2 .soub-beton-card.selected::after { content: none !important; }

/* Le modèle béton doit reprendre exactement le même rendu que le type :
   on neutralise la surcouche de synthèse visible et on conserve seulement
   le squelette de carte partagé. */
.cfgv2 .soub-beton-card { padding-right: 0 !important; }
.cfgv2 .soub-beton-card .soub-info { display: none !important; }
.cfgv2 .soub-beton-card .soub-beton-check { position: static; }

.cfgv2 .color-cards--soub-horizontal .color-card .swatch {
  background: var(--c, #dbe2f0) !important;
  background-image: none !important;
}

@media (max-width: 560px) {
  .cfgv2 .soub-presence-card,
  .cfgv2 .soub-type-card,
  .cfgv2 .soub-beton-card { min-height: 122px; }
  .cfgv2 .soub-presence-swatch,
  .cfgv2 .soub-type-swatch,
  .cfgv2 .soub-beton-swatch { max-width: 145px; min-height: 122px; }
  .cfgv2 .soub-presence-badge,
  .cfgv2 .soub-type-badge,
  .cfgv2 .soub-beton-badge { font-size: 10.5px; padding: 3px 9px !important; }
  .cfgv2 .soub-presence-card .card-name,
  .cfgv2 .soub-type-card .card-name,
  .cfgv2 .soub-beton-card .card-name { font-size: 16px; }
  .cfgv2 .soub-type-body { padding-left: 8px !important; }
  .cfgv2 .soub-presence-check,
  .cfgv2 .soub-type-check,
  .cfgv2 .soub-beton-check { margin-right: 2px !important; }
  .cfgv2 .soub-beton-card .soub-beton-check { position: static; margin-right: 2px !important; }
}

/* ===== Étape « Votre terrain » : cartes horizontales premium ===== */
.cfgv2 .terrain-cards--h { display: flex; flex-direction: column; gap: 12px; }
.cfgv2 .terrain-cards--h .terrain-choice-card {
  position: relative; width: 100% !important; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch;
  min-height: 128px; padding: 0 !important; text-align: left; overflow: hidden;
  border: 2px solid var(--line); border-radius: 16px; background: var(--white);
  box-shadow: 0 2px 8px rgba(20,30,60,.06);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .12s ease;
}
.cfgv2 .terrain-cards--h .terrain-choice-card:not(.selected):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,30,60,.10); border-color: var(--state-hover-line); }
.cfgv2 .terrain-cards--h .terrain-choice-card:active { transform: scale(.995); }

.cfgv2 .terrain-cards--h .terrain-choice-card .terrain-choice-swatch {
  position: relative; flex: 0 0 38%; max-width: 175px; align-self: stretch;
  min-height: 128px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #e7edf9;
}
.cfgv2 .terrain-cards--h .terrain-choice-card .terrain-choice-swatch img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cfgv2 .terrain-cards--h .terrain-choice-card .terrain-choice-swatch--help {
  font-size: 40px; color: var(--green-dark); background: linear-gradient(180deg, #eef3ff, #e6f0ff) !important;
}

.cfgv2 .terrain-cards--h .terrain-choice-card .terrain-choice-body {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 3px; padding: 14px 12px 14px 16px !important;
}
.cfgv2 .terrain-cards--h .terrain-choice-card .terrain-choice-badge {
  position: static; align-self: flex-start; width: auto; margin: 0 0 4px !important;
  padding: 4px 10px !important; border-radius: 999px; background: var(--green) !important;
  color: #fff !important; font-size: 11.5px; font-weight: 800; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(20,30,60,.15);
}
.cfgv2 .terrain-cards--h .terrain-choice-card .card-name { padding: 0 !important; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.cfgv2 .terrain-cards--h .terrain-choice-card .terrain-choice-sub { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
.cfgv2 .terrain-cards--h .terrain-choice-card .card-desc { margin: 2px 0 0 !important; font-size: 13px; font-style: italic; color: var(--muted); line-height: 1.4; }

.cfgv2 .terrain-cards--h .terrain-choice-card .terrain-choice-check {
  flex: none; align-self: center; position: relative; box-sizing: border-box !important;
  width: 26px; height: 26px; margin: 0 26px 0 12px !important; border-radius: 50%;
  border: 2px solid #cfd8e6; background: #fff !important; transition: background .15s ease, border-color .15s ease;
}
.cfgv2 .terrain-cards--h .terrain-choice-card.selected,
.cfgv2 .terrain-cards--h .terrain-choice-card.terrain-choice-card--help.is-open {
  border-color: var(--green); background: #eef3ff; box-shadow: 0 0 0 1px var(--green);
}
.cfgv2 .terrain-cards--h .terrain-choice-card.selected .terrain-choice-check,
.cfgv2 .terrain-cards--h .terrain-choice-card.terrain-choice-card--help.is-open .terrain-choice-check {
  border-color: var(--green); background: var(--green) !important; box-shadow: 0 0 0 3px #fff;
}
.cfgv2 .terrain-cards--h .terrain-choice-card.selected .terrain-choice-check::after {
  content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800; animation: cfgv2-pop .2s ease;
}
.cfgv2 .terrain-cards--h .terrain-choice-card.terrain-choice-card--help.is-open .terrain-choice-check::after {
  content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800; animation: cfgv2-pop .2s ease;
}
.cfgv2 .terrain-cards--h .terrain-choice-card.selected::after,
.cfgv2 .terrain-cards--h .terrain-choice-card.terrain-choice-card--help.is-open::after { content: none !important; }

@media (max-width: 560px) {
  .cfgv2 .terrain-cards--h .terrain-choice-card { min-height: 122px; }
  .cfgv2 .terrain-cards--h .terrain-choice-card .terrain-choice-swatch { max-width: 145px; min-height: 122px; }
  .cfgv2 .terrain-cards--h .terrain-choice-card .terrain-choice-badge { font-size: 10.5px; padding: 3px 9px !important; }
  .cfgv2 .terrain-cards--h .terrain-choice-card .card-name { font-size: 16px; }
  .cfgv2 .terrain-cards--h .terrain-choice-card .terrain-choice-check { margin-right: 22px !important; }
}

/* ---- Boutons ---- */
.cfgv2 .btn { border: none; border-radius: 10px; padding: 12px 22px; font-size: 15px; font-weight: 700; cursor: pointer; }
.cfgv2 .btn-primary { background: var(--green); color: var(--white); }
.cfgv2 .btn-primary:hover { background: var(--green-dark); }
.cfgv2 .btn-primary:disabled { background: var(--state-disabled-bg); color: var(--state-disabled-fg); cursor: default; }
.cfgv2 .btn-ghost { background: transparent; color: var(--muted); }
.cfgv2 .btn-ghost:hover { color: var(--ink); }
.cfgv2 .btn-outline { background: var(--white); border: 1px solid var(--green); color: var(--green-dark); }
.cfgv2 .btn-outline:hover { background: var(--green-light); }

/* ---- Barre de navigation ---- */
.cfgv2 .nav-footer { position: fixed; bottom: var(--cfg-vv-offset, 0px); left: 0; right: 0; z-index: 20; background: var(--white); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.cfgv2 .nav-inner { max-width: 1000px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cfgv2 .nav-inner.nav--intro { justify-content: center; }
/* Étape Récapitulatif : « Demander mon devis » centré, « Précédent » à gauche, pas de prix. */
.cfgv2 .nav-inner.nav--recap { position: relative; justify-content: center; }
.cfgv2 .nav-inner.nav--recap .nav-subtotal { display: none !important; }
.cfgv2 .nav-inner.nav--recap #btn-prev { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .cfgv2 .nav-inner.nav--recap { justify-content: space-between; }
  .cfgv2 .nav-inner.nav--recap #btn-prev { position: static; transform: none; }
  .cfgv2 .nav-inner.nav--recap #btn-prev,
  .cfgv2 .nav-inner.nav--recap #btn-next { flex: 1 1 0 !important; }
}
.cfgv2 #btn-start { min-width: 300px; }
@media (max-width: 600px) { .cfgv2 .nav-inner.nav--intro #btn-start { width: 100% !important; min-width: 0; flex: 1 1 100%; } }
.cfgv2 .nav-subtotal { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--green-dark); font-size: 16px; }
.cfgv2 .nav-price { display: flex; flex-direction: column; line-height: 1.1; }
.cfgv2 .nav-price-val { font-weight: 900; color: var(--green-dark); font-size: 22px; letter-spacing: -.2px; }
.cfgv2 .nav-price-val small { font-weight: 700; font-size: 11px; }
.cfgv2 .nav-price-sub { font-weight: 600; color: var(--muted); font-size: 11px; }
.cfgv2 .nav-price-info { flex: none; height: 34px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--green); background: var(--green-light); color: var(--green-dark); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; -webkit-appearance: none; appearance: none; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.cfgv2 .nav-price-info:hover { background: var(--green); color: #fff; box-shadow: 0 3px 10px rgba(7,85,184,.28); }
.cfgv2 .nav-price-info-ic { font-size: 15px; line-height: 1; }
.cfgv2 .nav-price-info-l { display: inline; }
/* Micro-animation d'attention (une fois par session) : halo pulsé quelques secondes. */
.cfgv2 .nav-price-info--attention { animation: cfgv2-recap-attention 1.15s ease-out 3; }
@keyframes cfgv2-recap-attention {
  0%   { box-shadow: 0 0 0 0 rgba(7,85,184,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(7,85,184,0); }
  100% { box-shadow: 0 0 0 0 rgba(7,85,184,0); }
}
@media (prefers-reduced-motion: reduce) {
  .cfgv2 .nav-price-info--attention { animation: none; }
}
.cfgv2 .nav-price-val.is-bumped { animation: cfgv2-bump .32s ease; }
@keyframes cfgv2-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); color: var(--green); } 100% { transform: scale(1); } }

/* ---- Détail mobile du footer (ligne produit + sous-total) ---- */
/* Masqué sur desktop, activé dans la media query mobile plus bas. */
.cfgv2 .nav-mobile { display: none; }
.cfgv2 .nm-details { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .25s ease; border-bottom: 0 solid var(--line); }
.cfgv2 .nav-mobile.nm-open .nm-details { max-height: 240px; overflow-y: auto; border-bottom-width: 1px; }
.cfgv2 .nm-det-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--line); }
.cfgv2 .nm-det-row:last-child { border-bottom: 0; }
.cfgv2 .nm-det-row span:last-child { font-weight: 700; white-space: nowrap; }
.cfgv2 .nm-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--green-light); border-radius: 8px; padding: 10px 12px; }
/* Mobile : on masque l'encart produit principal de la carte footer (redondant
   avec le récap ouvert via « Voir le détail »). */
.cfgv2 .nav-footer .nm-line { display: none !important; }
.cfgv2 .nm-line-name { font-size: 13px; font-weight: 700; color: var(--green-dark); line-height: 1.25; }
.cfgv2 .nm-line-price { font-size: 14px; font-weight: 800; color: var(--green-dark); white-space: nowrap; }
.cfgv2 .nm-subtotal { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; padding: 8px 4px 2px; cursor: pointer; }
.cfgv2 .nm-sub-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.cfgv2 .nm-sub-value { margin-left: auto; font-size: 16px; font-weight: 800; color: var(--ink); }
.cfgv2 .nm-sub-cta { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 6px 12px; border: 1px solid var(--green); border-radius: 20px; background: var(--green-light); color: var(--green-dark); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.cfgv2 .nm-sub-cta-ic { font-size: 14px; line-height: 1; }

/* ---- Page "Votre projet" ---- */
.cfgv2 .project { max-width: 720px; margin: 0 auto; }
.cfgv2 .project-title { font-size: 21px; margin: 0 0 22px; }
.cfgv2 .bom-section-title { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin: 22px 0 12px; }
.cfgv2 .bom-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cfgv2 .bom-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--white); }
.cfgv2 .bom-item .thumb { width: 64px; height: 64px; aspect-ratio: auto; border-radius: 8px; }
.cfgv2 .bom-item .thumb::after { font-size: 9px; }
.cfgv2 .bom-name { font-weight: 700; font-size: 14.5px; }
.cfgv2 .bom-attrs { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.cfgv2 .bom-attrs .color-circle { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; border: 1px solid rgba(0,0,0,.15); }
.cfgv2 .bom-price { font-weight: 700; font-size: 14.5px; white-space: nowrap; text-align: right; }
.cfgv2 .bom-price .price-original { display: block; text-decoration: line-through; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.cfgv2 .bom-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; padding-top: 16px; border-top: 2px solid var(--line); font-size: 17px; }
.cfgv2 .bom-total strong { font-size: 24px; color: var(--green-dark); }
.cfgv2 .concrete-note { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.cfgv2 .expert-block { display: flex; align-items: center; gap: 14px; background: var(--green-light); border-radius: 14px; padding: 18px 20px; margin-top: 26px; flex-wrap: wrap; }
.cfgv2 .expert-ic { font-size: 26px; }
.cfgv2 .expert-txt { flex: 1; min-width: 160px; }
.cfgv2 .expert-t { font-weight: 800; }
.cfgv2 .expert-d { font-size: 13px; color: var(--muted); }
.cfgv2 .config-recap { margin-top: 30px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); padding: 20px; }
.cfgv2 .config-recap-title { font-size: 17px; margin: 0 0 16px; }
.cfgv2 .config-summary { display: flex; flex-direction: column; gap: 10px; }
.cfgv2 .cfg-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.cfgv2 .cfg-row:last-child { border-bottom: none; }
.cfgv2 .cfg-defs { margin: 0; }
.cfgv2 .cfg-defs dt { font-size: 12px; color: var(--muted); }
.cfgv2 .cfg-defs dd { margin: 0 0 4px; font-weight: 600; font-size: 14px; }
.cfgv2 .cfg-edit { background: none; border: none; color: var(--green-dark); cursor: pointer; font-size: 13px; font-weight: 700; }
.cfgv2 .cfg-edit:hover { text-decoration: underline; }
.cfgv2 .btn-block { width: 100%; margin-top: 16px; }
.cfgv2 .project-note { font-size: 13px; color: var(--muted); text-align: center; margin: 18px 0 0; }
.cfgv2 .recap-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }

/* ---- Loader ---- */
.cfgv2 .cfg-loader { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; color: var(--muted); }
.cfgv2 .cfg-spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: cfgv2-spin .9s linear infinite; }
@keyframes cfgv2-spin { to { transform: rotate(360deg); } }

/* ---- Alerte ---- */
.cfgv2 .cfg-alert { border: 1px solid #f5c2c7; background: #f8d7da; color: #842029; border-radius: 10px; padding: 12px 14px; margin: 10px 0; font-size: 14px; }

/* ---- Panneau expert ---- */
.cfgv2 .drawer-overlay { position: fixed; inset: 0; background: rgba(20,25,22,.35); z-index: 60; }
.cfgv2 .drawer-overlay[hidden] { display: none; }
.cfgv2 .drawer { position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 92vw; background: var(--white); z-index: 61; box-shadow: -8px 0 30px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; touch-action: pan-y; }
.cfgv2 .drawer.open { transform: translateX(0); }
.cfgv2 .drawer-header { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); flex: none; }
.cfgv2 .drawer-title { text-align: center; font-weight: 700; }
.cfgv2 .drawer-body { flex: 1 1 auto; min-height: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cfgv2 .drawer-lead { font-size: 16px; margin: 0 0 18px; }
.cfgv2 .channels { display: flex; flex-direction: column; gap: 16px; }
.cfgv2 .channel { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.cfgv2 .ch-icon { font-size: 20px; color: var(--green); flex: none; }
.cfgv2 .ch-title { display: block; font-weight: 700; color: var(--ink); }
.cfgv2 .ch-desc { display: block; font-size: 13px; color: var(--muted); }
.cfgv2 .ch-desc a { color: var(--green-dark); font-weight: 700; text-decoration: none; }
.cfgv2 .ch-desc a:hover { text-decoration: underline; }
.cfgv2 .ch-stores { list-style: none; margin: 8px 0 0; padding: 0; }
.cfgv2 .ch-stores li { font-size: 13px; color: var(--ink); padding: 6px 0; border-top: 1px solid var(--line); }
.cfgv2 .ch-stores li:first-child { border-top: 0; }
.cfgv2 .ch-store { display: flex; flex-direction: column; gap: 3px; padding: 10px 0 !important; }
.cfgv2 .store-addr { font-weight: 700; color: var(--ink); }
.cfgv2 .store-tel { color: var(--muted); text-decoration: none; }
.cfgv2 .store-tel:hover { color: var(--green-dark); text-decoration: underline; }
.cfgv2 .ch-title a { color: var(--green-dark); text-decoration: none; font-weight: 700; }
.cfgv2 .ch-title a:hover { text-decoration: underline; }
.cfgv2 .store-rdv { align-self: flex-start; margin-top: 4px; background: var(--green); color: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.cfgv2 .store-rdv:hover { background: var(--green-dark); }

/* Blocage du scroll de l'arrière-plan quand un panneau latéral est ouvert. */
body.cfgv2-noscroll, html.cfgv2-noscroll { overflow: hidden !important; }

/* ---- Fiche produit dans le panneau info ---- */
.cfgv2 .pinfo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cfgv2 .pinfo-name { font-size: 16px; font-weight: 800; color: var(--ink); }
.cfgv2 .pinfo-open { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 12px; }
.cfgv2 .pinfo-open:hover { color: var(--green-dark); border-color: var(--green); background: var(--green-light); }
/* Lien « Voir la fiche produit » du choix sélectionné (bulle info d'une question produit). */
.cfgv2 .pinfo-fiche-link { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--green); border-radius: 12px; background: var(--green-light); color: var(--green-dark); text-decoration: none; transition: background .15s ease, box-shadow .15s ease; }
.cfgv2 .pinfo-fiche-link:hover { background: var(--green); color: #fff; box-shadow: 0 4px 12px rgba(7,85,184,.25); }
.cfgv2 .pinfo-fiche-link:hover .pinfo-fiche-name { color: rgba(255,255,255,.85); }
.cfgv2 .pinfo-fiche-ic { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.cfgv2 .pinfo-fiche-txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1 1 auto; font-size: 13.5px; }
.cfgv2 .pinfo-fiche-name { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.cfgv2 .pinfo-fiche-arrow { font-size: 16px; font-weight: 800; flex: 0 0 auto; }
.cfgv2 .pinfo-img { margin-bottom: 14px; }
.cfgv2 .pinfo-img img { width: 100%; max-width: 100%; height: auto; border-radius: 10px; display: block; }
.cfgv2 .pinfo-desc { font-size: 14px; line-height: 1.5; color: var(--ink); margin-bottom: 14px; }
.cfgv2 .pinfo-desc img { max-width: 100%; height: auto; }
.cfgv2 .pinfo-options-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 8px; }
.cfgv2 .pinfo-opt-list { list-style: none; margin: 0; padding: 0; }
.cfgv2 .pinfo-opt-list li { font-size: 13.5px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink); }
.cfgv2 .pinfo-opt-list li:first-child { border-top: 0; }
/* Vue d'ensemble d'une famille : liste des variantes disponibles (non sélectionnables, informatif). */
.cfgv2 .pinfo-variants { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; }
.cfgv2 .pinfo-variant { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.cfgv2 .pinfo-variant-thumb { flex: none; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--thumb-bg); }
.cfgv2 .pinfo-variant-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfgv2 .pinfo-variant-body { display: flex; flex-direction: column; min-width: 0; }
.cfgv2 .pinfo-variant-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cfgv2 .pinfo-variant-meta { font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 2px; }

/* ---- Aide contextuelle : ampoule 💡 + phrase CTA (Feature Discovery) ---- */
/* Au 1er usage : pilule « 💡 Voir les conseils de nos experts », placée à côté du
   titre. Après découverte (localStorage) : la phrase disparaît, il reste un bouton
   circulaire avec l'ampoule. États hover/active/focus, zone cliquable >= 44px. */
.cfgv2 .info-btn {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 50%; vertical-align: middle;
  border: 1.5px solid var(--green); background: #fff !important; color: var(--green);
  box-shadow: 0 1px 2px rgba(0,0,0,.10); cursor: pointer; font: inherit;
  -webkit-appearance: none; appearance: none;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}
/* Zone tactile d'au moins 44x44 px sans agrandir le visuel. */
.cfgv2 .info-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.cfgv2 .info-btn-ic { display: inline-flex; line-height: 0; }
.cfgv2 .info-btn-ic svg { display: block; width: 16px; height: 16px; }
.cfgv2 .info-btn-cta { display: none; }
.cfgv2 .info-btn:hover { background: var(--green) !important; color: #fff; box-shadow: 0 3px 9px rgba(7,85,184,.28); transform: translateY(-1px); border-color: var(--green); }
.cfgv2 .info-btn:active { transform: scale(.94); }
.cfgv2 .info-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cfgv2 .info-btn--title { margin-left: 8px; }
/* Titre + bouton (i) : le libellé occupe la largeur disponible et le (i) reste
   aligné à droite, sur la même ligne (pas de retour à la ligne, surtout sur mobile). */
.cfgv2 .group-title.cfg-has-info, .cfgv2 .step-title.cfg-has-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cfgv2 .group-title.cfg-has-info .info-btn--title, .cfgv2 .step-title.cfg-has-info .info-btn--title { flex: none; margin-left: 0 !important; margin-top: 1px; }
/* Carte : icône d'aide rattachée AU TITRE (à droite du libellé), discrète. */
.cfgv2 .card-title-row { display: flex; align-items: center; gap: 8px; }
.cfgv2 .card .card-title-row { width: 100%; }
.cfgv2 .card .card-title-row .card-name { margin: 0; }
.cfgv2 .color-card .card-title-row { justify-content: center; }
.cfgv2 .info-btn--card { position: relative; flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent !important; box-shadow: none; justify-content: center; }
.cfgv2 .card .card-title-row .info-btn--card { margin-left: auto; }
.cfgv2 .info-btn--card .info-btn-ic { font-size: 15px; }
.cfgv2 .info-btn--card:hover { background: var(--green-light) !important; box-shadow: none; transform: none; }
.cfgv2 .info-btn--card:active { transform: scale(.9); }
/* L'icône ⓘ est désormais toujours identique (plus d'état « découvert » à gérer). */
.cfgv2.cfgv2-help-discovered .info-btn--title { width: 26px; height: 26px; }
/* Animation « Pulse » ponctuelle (une seule fois, ~2 s) au 1er usage. */
@keyframes cfgv2-pulse { 0% { transform: scale(1); filter: brightness(1); } 45% { transform: scale(1.12); filter: brightness(1.15); } 100% { transform: scale(1); filter: brightness(1); } }
.cfgv2 .info-btn.is-pulsing { animation: cfgv2-pulse 2s ease 1; }
.cfgv2.cfgv2-help-discovered .info-btn.is-pulsing { animation: none; }
@media (prefers-reduced-motion: reduce) { .cfgv2 .info-btn.is-pulsing { animation: none; } }
/* Mobile : phrase compacte (« Conseils ») pour éviter les retours à la ligne. */
@media (max-width: 600px) {
  .cfgv2 .info-btn--title .info-btn-cta { font-size: 0; }
  .cfgv2 .info-btn--title .info-btn-cta::after { content: 'Conseils'; font-size: 12.5px; font-weight: 700; }
}
.cfgv2 .card.has-info, .cfgv2 .color-card.has-info, .cfgv2 .pill.has-info { position: relative; }
.cfgv2 .pill.has-info { padding-right: 40px !important; }
/* Titres en flex ; le bouton d'aide se place juste après le texte du titre. */
.cfgv2 .group-title, .cfgv2 .step-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- Contenu du panneau info ---- */
.cfgv2 .info-img { width: 100%; border-radius: 10px; margin-bottom: 14px; display: block; }
.cfgv2 .info-badge { display: inline-block; margin: 0 0 12px; padding: 6px 12px; background: var(--green-light); color: var(--green-dark); border: 1px solid var(--green); border-radius: 20px; font-size: 13px; font-weight: 700; }
.cfgv2 .info-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.cfgv2 .info-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.cfgv2 .info-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.cfgv2 .info-p { font-size: 14px; line-height: 1.5; margin: 0 0 12px; color: var(--ink); }
.cfgv2 .info-list { margin: 0 0 12px; padding-left: 18px; font-size: 14px; color: var(--ink); }
.cfgv2 .info-list li { margin-bottom: 6px; }
.cfgv2 .info-table { width: 100%; border-collapse: collapse; margin: 4px 0 14px; font-size: 13.5px; }
.cfgv2 .info-table th, .cfgv2 .info-table td { text-align: left; padding: 9px 12px; border: 1px solid var(--line); }
.cfgv2 .info-table thead th { background: var(--green-light); color: var(--green-dark); font-weight: 700; }
.cfgv2 .info-table tbody tr:nth-child(even) td { background: #f7f8fa; }
.cfgv2 .info-subtitle { font-size: 15px; font-weight: 800; margin: 18px 0 8px; color: var(--green-dark); }
.cfgv2 .info-tip { background: var(--advisor-bg)!important; color: var(--advisor-fg); border-radius: 10px; padding: 14px 16px!important; font-size: 13.5px; line-height: 1.5; margin: 4px 0 12px!important; }
.cfgv2 .info-tip strong { display: block; margin-bottom: 4px; }
.cfgv2 .info-tip--warn { background: #fff4e5; color: #7a4b00; }
/* ---- Panneau « Quelle matière ? » : mini-titres, galeries, comparatif ---- */
.cfgv2 .info-mini-title { font-size: 13px; font-weight: 800; margin: 10px 0 4px; color: var(--ink); text-transform: uppercase; letter-spacing: .3px; }
.cfgv2 .info-list--dots { list-style: disc; }
.cfgv2 .info-gallery { margin: 8px 0 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cfgv2 .info-gallery > summary { cursor: pointer; padding: 11px 14px; font-size: 13.5px; font-weight: 700; color: var(--green-dark); background: var(--green-light); list-style: none; }
.cfgv2 .info-gallery > summary::-webkit-details-marker { display: none; }
.cfgv2 .info-gallery > summary::after { content: " ▾"; font-weight: 900; }
.cfgv2 .info-gallery[open] > summary::after { content: " ▴"; }
.cfgv2 .info-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; }
.cfgv2 .info-gallery-grid img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; display: block; }
.cfgv2 .info-compare-wrap { overflow-x: auto; margin: 4px 0 14px; }
.cfgv2 .info-compare { width: 100%; border-collapse: collapse; font-size: 13px; }
.cfgv2 .info-compare th, .cfgv2 .info-compare td { border: 1px solid var(--line); padding: 8px 10px; text-align: center; }
.cfgv2 .info-compare thead th { background: var(--green-light); color: var(--green-dark); font-weight: 800; }
.cfgv2 .info-compare tbody th { text-align: left; font-weight: 700; color: var(--ink); background: #fafbfc; white-space: nowrap; }
.cfgv2 .info-alert { display: block; background: #fff4e5; color: #7a4b00; border: 1px solid #f2c789; border-left: 4px solid #e08a00; border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; }
.cfgv2 .info-alert strong { display: block; margin-bottom: 4px; font-size: 14.5px; }
.cfgv2 .info-picto { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.cfgv2 .info-picto-item { display: inline-block; padding: 6px 12px; background: #f2f5fb; border: 1px solid var(--line); border-radius: 20px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.cfgv2 .info-expert { background: var(--green-light); border: 1px solid var(--green); border-left: 4px solid var(--green); border-radius: 10px; padding: 14px 16px; margin: 6px 0 16px; }
.cfgv2 .info-expert-head { font-size: 14px; font-weight: 800; color: var(--green-dark); margin-bottom: 6px; }
.cfgv2 .info-expert-quote { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0; }

/* ---- Bulle « Quelle matière choisir ? » : aide à la décision (cartes, choix, reco) ---- */
.cfgv2 .mat-intro { margin-bottom: 14px; }
.cfgv2 .mat-cards { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; }
.cfgv2 .mat-card { border: 1px solid var(--line); border-top: 4px solid var(--muted); border-radius: 14px; padding: 14px 15px; background: var(--white); box-shadow: 0 2px 10px rgba(2,6,23,.05); }
.cfgv2 .mat-card--composite { border-top-color: var(--green); }
.cfgv2 .mat-card--pvc { border-top-color: #6b7a90; }
.cfgv2 .mat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cfgv2 .mat-card-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.cfgv2 .mat-badge { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.cfgv2 .mat-badge.is-premium { background: var(--green); color: #fff; }
.cfgv2 .mat-badge.is-eco { background: #eef2f7; color: #3a4760; border: 1px solid #d5dce6; }
.cfgv2 .mat-punch { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 10px; line-height: 1.4; }
.cfgv2 .mat-benefits { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 7px; }
.cfgv2 .mat-benefits li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.cfgv2 .mat-benefits li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); font-weight: 900; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.cfgv2 .mat-ideal-l { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin: 0 0 6px; }
.cfgv2 .mat-ideal { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cfgv2 .mat-tag { display: inline-block; padding: 5px 11px; background: #f2f5fb; border: 1px solid var(--line); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--ink); }
.cfgv2 .mat-real { margin: 0; }
.cfgv2 .mat-real > summary { text-align: center; }
/* Galerie « réalisations » en mode collapse (details) : pleine largeur, empilée
   (le summary au-dessus, la grille d'images en dessous), et non côte à côte. */
.cfgv2 details.info-gallery { display: block; width: 100%; }
.cfgv2 details.info-gallery .info-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.cfgv2 details.info-gallery .info-gallery-grid img { height: 130px; }
/* Bloc « Comment choisir ? » */
.cfgv2 .mat-choose { border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; margin: 0 0 16px; background: #fafbfc; }
.cfgv2 .mat-choose-title { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.cfgv2 .mat-choose-grid { display: grid; gap: 12px; }
.cfgv2 .mat-choose-col { border-radius: 12px; padding: 11px 13px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--muted); }
.cfgv2 .mat-choose-col--composite { border-left-color: var(--green); }
.cfgv2 .mat-choose-col--pvc { border-left-color: #6b7a90; }
.cfgv2 .mat-choose-h { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.cfgv2 .mat-choose-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.cfgv2 .mat-choose-list li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.cfgv2 .mat-choose-list li::before { content: "→"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
/* Comparatif : espacement et contraste renforcés */
.cfgv2 .info-compare--mat th, .cfgv2 .info-compare--mat td { padding: 11px 12px; font-size: 13.5px; }
/* Bloc « Notre recommandation » différencié */
.cfgv2 .mat-reco { display: flex; gap: 12px; align-items: flex-start; background: var(--green-light); border: 1px solid var(--green); border-left: 4px solid var(--green); border-radius: 12px; padding: 14px 16px; margin: 6px 0 4px; }
.cfgv2 .mat-reco-ic { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.cfgv2 .mat-reco-t { display: block; font-size: 14.5px; font-weight: 800; color: var(--green-dark); margin-bottom: 4px; }
.cfgv2 .mat-reco-p { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0; }

/* ---- Étape Pose : scellement béton (stepper) ---- */
.cfgv2 .pose-beton-desc { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.4; }
.cfgv2 .qty-stepper { display: inline-flex; align-items: stretch; gap: 10px; }
.cfgv2 #pose-beton .qty-stepper { align-items: center; }
.cfgv2 .qty-btn { width: 42px!important; height: 42px!important; border-radius: 10px!important; border: 1px solid var(--line); background: var(--white) !important; color: var(--green-dark); font-size: 22px!important; font-weight: 700; line-height: 1; cursor: pointer; -webkit-appearance: none!important; appearance: none; box-shadow: 0 1px 3px rgba(20,30,60,.10); }
.cfgv2 .qty-btn:hover { border-color: var(--green); background: var(--green-light) !important; }
.cfgv2 .qty-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.cfgv2 .qty-btn:disabled:hover { border-color: var(--line); background: var(--white) !important; }
/* Affichage de la valeur (hauteur) dans une boîte, entre - et +. */
.cfgv2 .qty-value { display: inline-block; padding: 11px 18px; font-weight: 700; font-size: 16px; min-width: 84px; text-align: center; color: var(--ink); }
.cfgv2 #beton-input { width: 56px !important; }
.cfgv2 .qty-suffix { color: var(--muted); font-size: 14px; }

/* Masquer les flèches natives des champs number (aspect plus propre). */
.cfgv2 input[type=number]::-webkit-outer-spin-button,
.cfgv2 input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cfgv2 input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* Champ longueur : input + unité "m" dans une seule boîte bordée, entre − et +. */
.cfgv2 .qty-field { display: inline-flex; align-items: center; height: 42px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--white) !important; box-shadow: 0 1px 3px rgba(20,30,60,.10); overflow: hidden; }
.cfgv2 .qty-field:focus-within { outline: 2px solid var(--green); border-color: var(--green); }

/* ===== Étape « Caractéristiques » : sections, hiérarchie, compacité ===== */
/* Regroupement en sections (Dimensions / Configuration / Apparence) : grands
   espaces ENTRE sections, espaces réduits À L'INTÉRIEUR → parcours perçu plus court. */
.cfgv2 .cfg-section { margin: 0 0 24px !important; padding: 0 0 20px !important; }
.cfgv2 .cfg-section:last-of-type { border-bottom: 0; padding-bottom: 0 !important; margin-bottom: 10px !important; }
.cfgv2 .cfg-section-title { font-size: 14px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px !important; display: flex; align-items: center; gap: 8px; }
/* Niveau 1 : les questions sont les éléments les plus visibles, espacées au minimum. */
.cfgv2 .cfg-section .group-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 16px 0 8px !important; }
.cfgv2 .cfg-section .group-title:first-of-type { margin-top: 0 !important; }
/* Niveau 3/5 : textes d'aide plus discrets. */
.cfgv2 .help-text--sm { font-size: 12px !important; color: var(--muted); margin: 6px 0 0 !important; }
.cfgv2 .reassure-note--sm { font-size: 12.5px !important; padding: 10px 12px !important; margin-top: 16px !important; }
/* Compteurs compacts (zone tactile conservée : champ/boutons 40px + hit-area). */
.cfgv2 .qty-stepper--compact { gap: 8px; margin-top: 6px!important; }
.cfgv2 .qty-stepper--compact .qty-btn { width: 40px; height: 40px; font-size: 20px; border-radius: 9px; }
.cfgv2 .qty-stepper--compact .qty-field { height: 40px; }
.cfgv2 .qty-stepper--compact .qty-value { padding: 9px 16px; font-size: 15px; min-width: 74px; }
/* Encarts de conseils à niveaux (identité graphique distincte, Niveau 4 discret). */
.cfgv2 .advice { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0 !important; padding: 9px 12px !important; border-radius: 10px; font-size: 12.5px; line-height: 1.45; border-left: 3px solid var(--green); background: var(--advisor-bg) !important; color: var(--advisor-fg); }
.cfgv2 .advice .advice-ic { flex: none; font-size: 14px; line-height: 1.35; }
.cfgv2 .advice strong { font-weight: 800; }
.cfgv2 .advice--tip { background: #eef4ff !important; color: #1c3d66; border-left-color: #0B6EE9; }
.cfgv2 .advice--expert { background: var(--green-light) !important; color: var(--green-dark); border-left-color: var(--green); }
.cfgv2 .advice--client { background: #fff7e6 !important; color: #7a5200; border-left-color: #f5a623; }
/* Badge de réassurance sur les cartes couleur. */
.cfgv2 .color-cards[data-group="couleur"] .color-card .color-name { padding-bottom: 2px !important; }
.cfgv2 .color-badge-reassure { display: block; padding: 0 8px 10px !important; font-size: 11px; font-weight: 800; color: var(--green-dark); }
/* ===== US — Refonte étape « Hauteur finale souhaitée » (premium mobile) ===== */
/* Sous-titre d'accompagnement sous le titre. */
.cfgv2 .hf-subtitle { margin: 2px 0 14px !important; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
/* Sélecteur héro : la VALEUR est l'élément dominant, boutons − + discrets,
   une seule ligne, coins fortement arrondis, ombre légère. */
.cfgv2 .qty-stepper--hero { display: flex !important; align-items: stretch; gap: 0 !important; width: 100%; max-width: 440px; margin-top: 4px !important; border-radius: 18px; border: 1px solid var(--line); background: var(--white) !important; box-shadow: 0 4px 16px rgba(20,30,60,.08); overflow: hidden; }
.cfgv2 .qty-stepper--hero .qty-btn { flex: 0 0 auto; width: 66px !important; height: auto !important; align-self: stretch; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--green); font-size: 26px !important; font-weight: 400; box-shadow: none !important; }
.cfgv2 .qty-stepper--hero .qty-btn:hover { background: #eef3ff !important; }
.cfgv2 .qty-stepper--hero .qty-btn:disabled { opacity: .3; background: transparent !important; }
.cfgv2 .qty-stepper--hero .qty-field--display { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; height: auto !important; border: 0 !important; border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.cfgv2 .qty-stepper--hero .qty-value { font-size: 32px !important; font-weight: 800 !important; color: var(--green) !important; padding: 16px 8px !important; min-width: 0; letter-spacing: -.5px; }
/* Texte de disponibilité (pastille discrète avec icône). */
.cfgv2 .hf-range { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0 !important; padding: 8px 14px !important; border-radius: 999px; background: #eef3ff !important; color: var(--green-dark); font-size: 12.5px; font-weight: 600; }
.cfgv2 .hf-range-ic { flex: none; font-size: 14px; line-height: 1; }
/* Carte « Hauteur réellement visible » : redesign premium, centré, hiérarchisé. */
.cfgv2 .final-height { display: block; text-align: center; margin: 16px 0 0 !important; padding: 22px 18px !important; border-radius: 18px; background: #f4f7ff !important; border: 1px solid #d9e3fb; }
.cfgv2 .final-height-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 10px !important; border-radius: 50%; background: #fff !important; box-shadow: 0 3px 10px rgba(20,30,60,.10); font-size: 24px; line-height: 1; }
.cfgv2 .final-height-body { display: block; min-width: 0; }
.cfgv2 .final-height-label { display: block; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--green); }
.cfgv2 .final-height-val { display: block; font-size: 40px; font-weight: 900; color: var(--green); letter-spacing: -1px; line-height: 1.05; margin-top: 4px; }
.cfgv2 .final-height-sep { display: block; width: 34px; height: 3px; border-radius: 2px; background: #c9d6f5; margin: 12px auto !important; }
.cfgv2 .final-height-desc { display: block; font-size: 14px; color: var(--ink); line-height: 1.4; }
.cfgv2 .final-height-info { display: flex; align-items: flex-start; gap: 8px; text-align: left; margin: 14px 0 0 !important; padding: 10px 12px !important; border-radius: 12px; background: #fff !important; border: 1px solid #e3e9f5; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cfgv2 .final-height-info-ic { flex: none; line-height: 1.3; }
.cfgv2 .final-height-val.is-bumped { animation: cfgv2-bump .32s ease; }
/* Carte « Conseil de nos experts » : cliquable, ouvre l'aide contextuelle hauteur. */
.cfgv2 .hf-expert { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 0 !important; padding: 14px 16px !important; border-radius: 16px; border: 1px solid var(--line); background: var(--white) !important; box-shadow: 0 2px 8px rgba(20,30,60,.06); cursor: pointer; text-align: left; font: inherit; color: var(--ink); -webkit-appearance: none; appearance: none; transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease; margin-bottom:10px!important; }
.cfgv2 .hf-expert:hover { border-color: var(--green); box-shadow: 0 6px 16px rgba(7,85,184,.12); }
.cfgv2 .hf-expert:active { transform: scale(.99); }
.cfgv2 .hf-expert:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cfgv2 .hf-expert-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green) !important; color: #fff; font-size: 18px; line-height: 1; }
.cfgv2 .hf-expert-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cfgv2 .hf-expert-title { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.cfgv2 .hf-expert-text { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cfgv2 .hf-expert-arrow { flex: none; font-size: 24px; color: var(--muted); line-height: 1; }
/* Étape « Longueur du projet » : reprend le langage visuel de l'étape Hauteur. */
.cfgv2 .cfg-section--longueur .qty-stepper--hero { max-width: 520px; }
.cfgv2 .cfg-section--longueur .qty-stepper--hero .qty-field--length {
  flex: 1 1 auto; display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; justify-content: center;
  gap: 6px; min-height: 64px;
}
.cfgv2 .cfg-section--longueur .qty-stepper--hero .qty-field--length input {
  width: 5ch; min-width: 0; text-align: center; padding: 0 !important;
  font-size: 34px; font-weight: 800; color: var(--green); letter-spacing: -.6px;
}
.cfgv2 .cfg-section--longueur .qty-stepper--hero .qty-field--length .qty-unit {
  margin: 0 !important; padding: 0 !important; font-size: 24px; font-weight: 800; color: var(--green-dark); line-height: 1;
}
.cfgv2 .final-length .final-height-label { letter-spacing: .55px; }

/* Raccourcis de longueur : style proche des actions premium de l'étape Hauteur. */
.cfgv2 .cfg-section--longueur .length-presets { gap: 8px; margin-top: 12px !important; }
.cfgv2 .cfg-section--longueur .preset-chip {
  border-radius: 999px; padding: 8px 16px !important; font-size: 13px; font-weight: 700;
  border-color: #d8e0ef; box-shadow: none;
}
.cfgv2 .cfg-section--longueur .preset-chip:hover {
  border-color: var(--green); background: #eef3ff !important;
}
.cfgv2 .cfg-section--longueur .preset-chip.is-active {
  background: #eef3ff !important; border-color: var(--green); color: var(--green-dark); box-shadow: 0 0 0 1px var(--green);
}
/* Étape « Angles » : même grammaire visuelle que l'étape Hauteur. */
.cfgv2 .cfg-section--angles .qty-stepper--hero { max-width: 520px; }
.cfgv2 .cfg-section--angles .qty-stepper--hero .qty-field--angles {
  flex: 1 1 auto; display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; justify-content: center;
  gap: 6px; min-height: 64px;
}
.cfgv2 .cfg-section--angles .qty-stepper--hero .qty-field--angles input {
  width: 3ch; min-width: 0; text-align: center; padding: 0 !important;
  font-size: 34px; font-weight: 800; color: var(--green); letter-spacing: -.6px;
}
.cfgv2 .cfg-section--angles .qty-stepper--hero .qty-field--angles .qty-unit {
  margin: 0 !important; padding: 0 !important; font-size: 19px; font-weight: 800; color: var(--green-dark); line-height: 1;
}
.cfgv2 .final-angles .final-height-label { letter-spacing: .55px; }
.cfgv2 .final-angles .angles-viz { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 2px; }
.cfgv2 .final-angles .angles-viz-svg { width: min(260px, 100%); height: auto; overflow: visible; }
.cfgv2 .final-angles .angles-viz-path { fill: none; stroke: var(--green); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.cfgv2 .final-angles .angles-viz-nodes circle { fill: #fff; stroke: var(--green); stroke-width: 3; }
.cfgv2 .final-angles .angles-viz-label { font-size: 13px; font-weight: 800; color: var(--green-dark); letter-spacing: .2px; text-align: center; }
.cfgv2 .final-angles .angles-viz-svg.is-bumped { animation: cfgv2-fade-swap .24s ease; }

@keyframes cfgv2-fade-swap {
  0% { opacity: .35; transform: scale(.985); }
  100% { opacity: 1; transform: scale(1); }
}

/* Étape « Départs / Arrivées » : même grammaire visuelle que l'étape Hauteur. */
.cfgv2 .cfg-section--departs .qty-stepper--hero { max-width: 560px; }
.cfgv2 .cfg-section--departs .qty-stepper--hero .qty-field--departs {
  flex: 1 1 auto; display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; justify-content: center;
  gap: 6px; min-height: 64px;
}
.cfgv2 .cfg-section--departs .qty-stepper--hero .qty-field--departs input {
  width: 3ch; min-width: 0; text-align: center; padding: 0 !important;
  font-size: 34px; font-weight: 800; color: var(--green); letter-spacing: -.6px;
}
.cfgv2 .cfg-section--departs .qty-stepper--hero .qty-field--departs .qty-unit {
  margin: 0 !important; padding: 0 !important; font-size: 19px; font-weight: 800; color: var(--green-dark); line-height: 1;
}
.cfgv2 .final-departs .final-height-label { letter-spacing: .55px; }
.cfgv2 .final-departs .departs-viz { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 2px; }
.cfgv2 .final-departs .departs-viz-svg { width: min(270px, 100%); height: auto; overflow: visible; }
.cfgv2 .final-departs .departs-viz-path { fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 5; }
.cfgv2 .final-departs .departs-viz-wall { stroke: #94a3b8; stroke-width: 10; stroke-linecap: round; }
.cfgv2 .final-departs .departs-viz-nodes circle { fill: #fff; stroke: var(--green); stroke-width: 3; }
.cfgv2 .final-departs .departs-viz-label { font-size: 13px; font-weight: 800; color: var(--green-dark); letter-spacing: .2px; text-align: center; }
.cfgv2 .final-departs .departs-viz-svg.is-bumped { animation: cfgv2-fade-swap .24s ease; }

/* Étape « Réglage de la hauteur visible » : profondeur d'enfouissement directe. */
.cfgv2 .cfg-section--enfouissement .qty-stepper--hero { max-width: 520px; }
.cfgv2 .cfg-section--enfouissement .qty-stepper--hero .qty-field--enf {
  flex: 1 1 auto; display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; justify-content: center;
  gap: 6px; min-height: 64px;
}
.cfgv2 .cfg-section--enfouissement .qty-stepper--hero .qty-field--enf input {
  width: 3ch; min-width: 0; text-align: center; padding: 0 !important;
  font-size: 34px; font-weight: 800; color: var(--green); letter-spacing: -.6px;
}
.cfgv2 .cfg-section--enfouissement .qty-stepper--hero .qty-field--enf .qty-unit {
  margin: 0 !important; padding: 0 !important; font-size: 19px; font-weight: 800; color: var(--green-dark); line-height: 1;
}
.cfgv2 .final-enf .enf-viz { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 2px; }
.cfgv2 .final-enf .enf-viz-svg { width: min(280px, 100%); height: auto; overflow: visible; }
.cfgv2 .final-enf .enf-viz-visible { fill: #95a3b8; }
.cfgv2 .final-enf .enf-viz-buried { fill: #6b7280; }
.cfgv2 .final-enf .enf-viz-ground { stroke: #64748b; stroke-width: 2.5; stroke-dasharray: 7 4; stroke-linecap: round; }
.cfgv2 .final-enf .enf-viz-ground-tag { fill: rgba(255,255,255,.92); stroke: #cbd5e1; stroke-width: 1; }
.cfgv2 .final-enf .enf-viz-ground-label { font-size: 9.5px; font-weight: 800; fill: #475569; letter-spacing: .2px; }
.cfgv2 .final-enf .enf-viz-quote { stroke: var(--green); stroke-width: 3; stroke-linecap: round; }
.cfgv2 .final-enf .enf-viz-node { fill: #fff; stroke: var(--green); stroke-width: 3; }
.cfgv2 .final-enf .enf-viz-svg.is-bumped { animation: cfgv2-fade-swap .24s ease; }
.cfgv2 .final-enf .enf-viz-label { font-size: 13px; font-weight: 800; color: var(--green-dark); letter-spacing: .2px; text-align: center; }
.cfgv2 .final-enf .enf-meta { display: block; font-size: 13px; color: var(--muted); }
.cfgv2 .final-enf .enf-meta strong { color: var(--green-dark); font-weight: 800; }
.cfgv2 .cfg-section--enfouissement .enf-expert-card {
  margin-top: 12px;
  padding: 14px 14px 12px !important;
  border: 1px solid #d9e3f3;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}
.cfgv2 .cfg-section--enfouissement .enf-expert-h {
  margin: 0 0 6px !important;
  font-size: 13px;
  font-weight: 800;
  color: #1e3a8a;
  letter-spacing: .2px;
}
.cfgv2 .cfg-section--enfouissement .enf-expert-p {
  margin: 0 0 10px !important;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.cfgv2 .cfg-section--enfouissement .enf-expert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.cfgv2 .cfg-section--enfouissement .enf-expert-list li {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px !important;
  border-radius: 10px;
  border: 1px solid #dde6f5;
  background: #fff !important;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
}
.cfgv2 .cfg-section--enfouissement .enf-expert-list li strong {
  color: var(--green-dark);
  font-weight: 800;
}
.cfgv2 .cfg-section--enfouissement .enf-expert-highlight {
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px;
  border: 1px solid #ecd7a4;
  background: #fff6df !important;
  color: #6b4c1f;
  font-size: 12.75px;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .cfgv2 .cfg-section--longueur .qty-stepper--hero .qty-btn { width: 56px !important; }
  .cfgv2 .cfg-section--longueur .qty-stepper--hero .qty-field--length input { width: 4.5ch; min-width: 0; font-size: 30px; }
  .cfgv2 .cfg-section--longueur .qty-stepper--hero .qty-field--length .qty-unit { font-size: 21px; }
  .cfgv2 .cfg-section--angles .qty-stepper--hero .qty-btn { width: 56px !important; }
  .cfgv2 .cfg-section--angles .qty-stepper--hero .qty-field--angles input { width: 2.8ch; min-width: 0; font-size: 30px; }
  .cfgv2 .cfg-section--angles .qty-stepper--hero .qty-field--angles .qty-unit { font-size: 17px; }
  .cfgv2 .cfg-section--departs .qty-stepper--hero .qty-btn { width: 56px !important; }
  .cfgv2 .cfg-section--departs .qty-stepper--hero .qty-field--departs input { width: 2.8ch; min-width: 0; font-size: 30px; }
  .cfgv2 .cfg-section--departs .qty-stepper--hero .qty-field--departs .qty-unit { font-size: 17px; }
  .cfgv2 .final-departs .departs-viz-svg { width: min(230px, 100%); }
  .cfgv2 .cfg-section--enfouissement .qty-stepper--hero .qty-btn { width: 56px !important; }
  .cfgv2 .cfg-section--enfouissement .qty-stepper--hero .qty-field--enf input { width: 2.8ch; min-width: 0; font-size: 30px; }
  .cfgv2 .cfg-section--enfouissement .qty-stepper--hero .qty-field--enf .qty-unit { font-size: 17px; }
  .cfgv2 .cfg-section--enfouissement .enf-expert-card { padding: 12px 12px 10px !important; border-radius: 14px; }
  .cfgv2 .cfg-section--enfouissement .enf-expert-list li { grid-template-columns: 1fr; gap: 4px; }
  .cfgv2 .cfg-section--enfouissement .enf-expert-highlight { font-size: 12.5px; }
  .cfgv2 .final-enf .enf-viz-svg { width: min(236px, 100%); }
}
/* Indicateur permanent de hauteur finale (footer). */
/* Hauteur visible sous chaque carte de profondeur d'enfouissement. */
.cfgv2 .enf-final { display: block; margin-top: 4px !important; font-size: 12px; color: var(--green-dark); font-weight: 600; }
.cfgv2 .enf-final strong { font-weight: 900; }
/* ===== Assistant Soubassement : synthèse + visualisation + cartes enrichies ===== */
.cfgv2 .soub-synthese { display: flex; gap: 16px; align-items: stretch; margin: 0 0 18px !important; padding: 14px 16px !important; border-radius: 14px; background: var(--green-light); border: 1px solid var(--green); }
.cfgv2 .soub-synthese-body { flex: 1 1 auto; min-width: 0; }
.cfgv2 .ss-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--green-dark); margin: 0 0 8px !important; }
.cfgv2 .ss-list { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 5px; }
.cfgv2 .ss-list li { font-size: 14px; color: var(--ink); display: flex; align-items: baseline; gap: 6px; margin: 0 !important; }
.cfgv2 .ss-list li[hidden] { display: none; }
.cfgv2 .ss-ic { flex: none; }
.cfgv2 .ss-list strong { font-weight: 900; color: var(--green-dark); }
.cfgv2 .soub-viz { flex: none; width: 92px; min-height: 156px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.cfgv2 .viz-visible { position: relative; width: 54px; background: linear-gradient(180deg, #9fb0c4, #7f92a8); border-radius: 4px 4px 0 0; }
.cfgv2 .viz-ground { width: 100%; border-top: 2px dashed #6b7480; text-align: center; font-size: 9.5px; color: #6b7480; padding: 1px 0 0 !important; margin: 2px 0 !important; }
.cfgv2 .viz-buried { position: relative; width: 54px; background: #7a828e; border-radius: 0 0 4px 4px; }
.cfgv2 .viz-buried[hidden] { display: none; }
.cfgv2 .viz-cap { position: absolute; left: calc(100% + 5px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 10px; font-weight: 700; color: var(--green-dark); display: none; }
.cfgv2 .viz-buried .viz-cap { color: #6b7480; }
.cfgv2 .soub-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0 !important; }
.cfgv2 .soub-h { font-size: 12.5px; color: var(--green-dark); font-weight: 600; }
.cfgv2 .soub-h strong { font-weight: 900; }
.cfgv2 .soub-p { font-size: 12.5px; font-weight: 900; color: var(--green-dark); background: var(--green-light); border: 1px solid var(--green); border-radius: 12px; padding: 1px 8px !important; }
/* CFG-UI-043 : prix des soubassements au format identique aux panneaux. */
.cfgv2 .soub-info .soub-cardprice { flex: 1 0 100%; margin-top: 2px; }
.cfgv2 .card.is-reco { box-shadow: 0 0 0 2px var(--green); }
@media (max-width: 560px) { .cfgv2 .soub-viz { width: 78px; min-height: 140px; } }
/* Champs numériques des steppers (longueur, angles, départs, occultation, quantités
   portillons / portail / goujons / capuchons...) : la bordure vient du conteneur
   .qty-field. On neutralise la bordure par défaut du navigateur (sinon bordure noire
   sur les champs non listés) pour TOUS les inputs d'un .qty-field. */
.cfgv2 .qty-field input { width: 58px; height: 100%; border: 0 !important; box-shadow: none !important; background: transparent !important; text-align: center; padding: 0 2px 0 12px !important; font-weight: 400; font-size: 16px; }
.cfgv2 .qty-field input:focus { outline: none !important; border: 0 !important; }
.cfgv2 .qty-field .qty-unit { padding: 0 12px 0 8px; margin-left: 4px; margin-right: 10px!important; color: var(--ink); font-size: 13px; font-weight: 700; }
/* Raccourcis de longueur (style secondaire, discret) + note. */
.cfgv2 .length-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 5px !important; }
.cfgv2 .presets-label { font-size: 12.5px; color: var(--text); font-weight: 600; margin-right: 4px; }
.cfgv2 .preset-chip { background: #fff !important; border: 1.5px solid var(--line); color: var(--text); border-radius: 22px; padding: 9px 20px !important; font-size: 13.5px; line-height: 1.2; cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cfgv2 .preset-chip:hover { border-color: var(--green); background: var(--green-light); }
.cfgv2 .preset-chip:active { transform: translateY(1px); }
.cfgv2 .preset-chip.is-active { background: var(--green-light); border-color: var(--green); color: var(--text); font-weight: 800; box-shadow: 0 2px 6px rgba(26,60,220,.2); }
.cfgv2 .length-note { font-size: 12px; color: var(--muted); line-height: 1.4; margin: 12px 0 0 !important; max-width: 520px; }

/* ---- Toast + widget aide ---- */
.cfgv2 .toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 70; font-weight: 600; font-size: 14px; box-shadow: var(--shadow); }
.cfgv2 .toast[hidden] { display: none; }
.cfgv2 .help-widget { position: fixed; right: 18px; bottom: calc(var(--cfg-vv-offset, 0px) + var(--cfg-footer-h, 88px) + 14px); z-index: 40; display: inline-flex; align-items: center; gap: 12px; max-width: min(340px, calc(100vw - 32px)); min-height: 56px; padding: 12px 16px; border: 1.5px solid #2b5cff; border-radius: 999px; background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); color: #1f3f8f; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 22px rgba(43,92,255,.14); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; }
.cfgv2 .help-widget-ic { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #eef3ff; font-size: 18px; line-height: 1; }
.cfgv2 .help-widget-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfgv2 .help-widget-arrow { flex: none; font-size: 26px; line-height: 1; color: #1f3f8f; }
@media (hover: hover) and (pointer: fine) { .cfgv2 .help-widget:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(43,92,255,.18); border-color: #1f4fd4; } }
.cfgv2 .help-widget:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(43,92,255,.12); }
.cfgv2 .help-widget:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---- Notification de confirmation « Panneaux sélectionnés » (au-dessus de la sticky bar) ---- */
.cfgv2 .cfg-confirm { position: fixed; left: 50%; bottom: calc(var(--cfg-vv-offset, 0px) + var(--cfg-footer-h, 88px) + 14px); transform: translate(-50%, 18px); z-index: 65; width: min(420px, calc(100vw - 24px)); box-sizing: border-box; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); box-shadow: 0 14px 34px rgba(2,6,23,.22); opacity: 0; pointer-events: none; transition: opacity .28s ease, transform .28s ease; }
.cfgv2 .cfg-confirm.show { opacity: 1; transform: translate(-50%, 0); }
.cfgv2 .cfg-confirm-ic { font-size: 20px; line-height: 1.25; flex: none; }
.cfgv2 .cfg-confirm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfgv2 .cfg-confirm-t { font-size: 12px; font-weight: 800; color: var(--green-dark); text-transform: uppercase; letter-spacing: .3px; }
.cfgv2 .cfg-confirm-model { font-size: 15px; font-weight: 800; color: var(--ink); }
.cfgv2 .cfg-confirm-calc { font-size: 13px; color: var(--muted); font-weight: 600; }
.cfgv2 .cfg-confirm-total { font-size: 15px; font-weight: 900; color: var(--green-dark); margin-top: 2px; }

/* ---- Étapes formulaire client (réutilise fieldset existants) ---- */
.cfgv2 .step fieldset { border: none; margin: 0; padding: 0; }
.cfgv2 .step fieldset > .listingActionButton { display: none !important; }
.cfgv2 .step .fs-title { font-size: 22px; margin: 0 0 6px; }
.cfgv2 .step .fs-subtitle { font-size: 15px; color: var(--muted); margin: 0 0 20px; font-weight: 600; }
.cfgv2 .step .form-floating { position: relative; margin-bottom: 16px; }
.cfgv2 .step .form-control, .cfgv2 .step .form-select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; background: var(--white); }
.cfgv2 .step .form-control:focus, .cfgv2 .step .form-select:focus { outline: 2px solid var(--green); border-color: var(--green); }
.cfgv2 .step .form-floating > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; order: -1; }
.cfgv2 .step .form-floating { display: flex; flex-direction: column; }
.cfgv2 .step .form-check { margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start; }
.cfgv2 .step .form-check-input { margin-top: 4px; }
.cfgv2 .step .form-check-label { font-size: 13.5px; color: var(--ink); }
.cfgv2 .step .captcha { margin: 18px 0; }
.cfgv2 .input-invalid { border-color: #dc3545 !important; outline-color: #dc3545 !important; }

@media (max-width: 720px) {
  .cfgv2 .layout { padding: 0 14px; margin-top: 22px; }
  .cfgv2 .color-card { width: calc(50% - 8px); }
}

/* Règles plein-écran limitées explicitement à la page du configurateur.
   Les !important internes à .cfgv2 restent nécessaires à cause du reset #msform *. */
html.cfgv2-page .theme-si3b-body {
    margin: 0!important;
}

html.cfgv2-page .ccm-custom-style-container{
    display:none;
}

html.cfgv2-page footer{
    display:none;
}

html.cfgv2-page #site-header{
  display:none;
}

html.cfgv2-page nav{
  display:none;
}

body.cfgv2-page{
  background-color: #f4f6fa;
}

/* ============================================================= */
/*  OVERRIDES anti-conflit avec le thème devis (#msform *, swiper) */
/* ============================================================= */

/* 1) Le thème applique #msform *{background:transparent} (spécificité ID)
   qui écrase le fond de nos cartes/pastilles/swatches. On restaure. */
.cfgv2 .thumb { background: var(--thumb-bg) !important; }
.cfgv2 .card,
.cfgv2 .color-card,
.cfgv2 .pill { background: var(--white) !important; }
.cfgv2 .pill.selected { background: var(--green-light) !important; }
.cfgv2 .color-card .swatch { background: var(--c, #ccc) !important; }
.cfgv2 .advisor { background: var(--advisor-bg) !important; }
.cfgv2 .bom-item { background: var(--white) !important; }
.cfgv2 .expert-block { background: var(--green-light) !important; }
.cfgv2 .config-recap { background: var(--white) !important; }
.cfgv2 .btn-primary { background: var(--green) !important; color: var(--white) !important; }
.cfgv2 .btn-outline { background: var(--white) !important; }
.cfgv2 .btn-phone { background: var(--olive) !important; color: var(--white) !important; }
.cfgv2 .cfg-alert { background: #f8d7da !important; }
.cfgv2 .step .form-control,
.cfgv2 .step .form-select,
.cfgv2 .length-field input,
.cfgv2 .length-field textarea { background: var(--white) !important; }

/* 2) Le configurateur est rendu dans un conteneur du thème qui centre le
   texte : on force l'alignement à gauche. */
.cfgv2 .layout,
.cfgv2 .step,
.cfgv2 .project { text-align: left; }
.cfgv2 .step-title,
.cfgv2 .group-title,
.cfgv2 .project-title,
.cfgv2 .config-recap-title,
.cfgv2 .bom-section-title { text-align: left; }

/* 3) Protège notre barre du bas des règles footer{display:none} du thème. */
.cfgv2 .nav-footer { display: block !important; }
.cfgv2-fixed-host { margin: 0 !important; }
/* 3b) Sur la page de départ (landing), on masque toute l'application. La classe
   est posée sur <html> (spécificité qui bat le display:block!important ci-dessus)
   et gère aussi les éléments déplacés dans le host fixe (.cfgv2-fixed-host). */
html.cfgv2-intro .subheader,
html.cfgv2-intro .layout,
html.cfgv2-intro .nav-footer,
html.cfgv2-intro .help-widget { display: none !important; }

/* 4) Le thème applique #msform *{padding:0;margin:0} (spécificité ID) qui
   écrase les paddings/marges de tous nos composants (cartes, pastilles,
   inputs, espacements). On restaure les valeurs de la maquette. */
.cfgv2 .card-body { padding: 12px 14px !important; }
.cfgv2 .card-desc { margin: 6px 0 10px !important; }
.cfgv2 .card-name { margin: 0 !important; }
.cfgv2 .pill { padding: 13px 26px !important; }
.cfgv2 .color-card .color-name { padding: 12px 8px !important; }
.cfgv2 .color-card .color-sub { padding: 0 8px 10px !important; }
.cfgv2 .color-cards--ambiance .color-card .color-name { padding: 12px 8px 2px !important; }
.cfgv2 .color-accroche { padding: 0 10px 14px !important; }
.cfgv2 .color-badge-reco { padding: 4px 9px !important; }
.cfgv2 .length-field input,
.cfgv2 .step .form-control,
.cfgv2 .step .form-select { padding: 13px 14px !important; }
.cfgv2 .length-field input { padding-right: 42px !important; }
.cfgv2 .advisor { padding: 16px 20px !important; margin: 20px 0 0 !important; }
.cfgv2 .advisor-text { margin: 0 !important; }
.cfgv2 .bom-item { padding: 12px 14px !important; }
.cfgv2 .bom-list { margin: 0 !important; padding: 0 !important; }
.cfgv2 .expert-block { padding: 18px 20px !important; margin-top: 26px !important; }
.cfgv2 .config-recap { padding: 20px !important; margin-top: 30px !important; }
.cfgv2 .config-recap-title { margin: 0 0 16px !important; }
.cfgv2 .btn { padding: 12px 22px !important; }
.cfgv2 .btn-phone { padding: 11px 18px !important; }
.cfgv2 .cfg-alert { padding: 12px 14px !important; }
.cfgv2 .cfg-loader { padding: 40px 20px !important; }
.cfgv2 .step-title { margin: 0 0 22px !important; }
.cfgv2 .group-title { margin: 26px 0 14px !important; }
.cfgv2 .group-title:first-child { margin-top: 0 !important; }
.cfgv2 .project-title { margin: 0 0 22px !important; }
.cfgv2 .bom-section-title { margin: 22px 0 12px !important; }
.cfgv2 .bom-total { margin-top: 20px !important; padding-top: 16px !important; }
.cfgv2 .reassure-note { margin: 20px 0 0 !important; }
.cfgv2 .step .form-floating { margin-bottom: 16px !important; }
.cfgv2 .step .form-check { margin-bottom: 14px !important; }
.cfgv2 .nav-inner { padding: 12px 24px !important; }
.cfgv2 .subheader { padding: 0 !important; }
.cfgv2 .subheader-row { padding: 0 16px !important; }

.cfgv2 .nav-footer {
  display:block!important;
}

/* 5) Espacement entre les cartes d'occultation et le bloc de détails
   (« Quelle longueur souhaitez-vous occulter ? »). */
.cfgv2 #occult-details { margin-top: 28px !important; }

/* 6) Masquage global des prix (classe .cfgv2-no-prices posée par la vue
   quand $showPrices = false). Complément au JS. */
.cfgv2-no-prices .card-price,
.cfgv2-no-prices .nav-subtotal,
.cfgv2-no-prices .bom-price,
.cfgv2-no-prices .bom-total { display: none !important; }

.cfgv2 #soub-compoplak { margin-top: 28px !important; }

.cfgv2 #soub-beton { margin-top: 28px !important; }

/* Espacement des blocs conditionnels (étape Pose + enfouissement). */
.cfgv2 #pose-goujon { margin-top: 28px !important; }
.cfgv2 #pose-beton { margin-top: 28px !important; }
.cfgv2 #pose-beton:not([hidden]) { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px !important; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.cfgv2 #pose-beton .group-title { margin-top: 0 !important; }
.cfgv2 #enfouissement-block { margin-top: 28px !important; }
.cfgv2 #enfouissement-details { margin-top: 28px !important; }
.cfgv2 #occult-echantillon,
.cfgv2 #occult-matiere,
.cfgv2 #occult-composite-info,
.cfgv2 #occult-composite-pose,
.cfgv2 #occult-length-block,
.cfgv2 #occult-couleur-composite,
.cfgv2 #occult-couleur-pvc { margin-top: 28px !important; }

/* Texte d'aide sous une question. */
.cfgv2 .help-text { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 8px 0 0 !important; }

/* Sélecteur (profondeur d'enfouissement, etc.). */
.cfgv2 .cfg-select { width: 100%; max-width: 380px; padding: 12px 14px !important; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; background: var(--white) !important; color: var(--ink); }
.cfgv2 .cfg-select:focus { outline: 2px solid var(--green); border-color: var(--green); }

/* Illustration (schéma) dans une infobulle. */
.cfgv2 .info-illus { display: block; width: 100%; max-width: 240px; margin: 0 auto 14px; }
.cfgv2 .info-illus--wide { max-width: 340px; }

/* Récapitulatif projet (tiroir latéral piloté par le bandeau). */
.cfgv2 .rc-group { margin-bottom: 16px; }
.cfgv2 .rc-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--green-dark); margin-bottom: 8px; }
.cfgv2 .rc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.cfgv2 .rc-row:last-child { border-bottom: 0; }
.cfgv2 .rc-k { font-size: 13.5px; color: var(--muted); }
.cfgv2 .rc-v { font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: right; }
.cfgv2 .rc-subtotal { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 12px; padding: 12px 14px; background: var(--green-light); border-radius: 10px; font-size: 15px; color: var(--green-dark); }
.cfgv2 .rc-subtotal strong { font-size: 18px; }
.cfgv2 .rc-note { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 0 0 14px; }

/* Tableau de bord récapitulatif (refonte). */
.cfgv2 .rc-hero { position: sticky; top: 0; z-index: 3; margin: -4px -2px 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, var(--green-dark), var(--green)); color: #fff; box-shadow: 0 6px 18px rgba(7, 85, 184, .28); }
.cfgv2 .rc-hero-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; opacity: .85; margin-bottom: 10px; }
.cfgv2 .rc-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.cfgv2 .rc-hero-grid > div { display: flex; flex-direction: column; gap: 2px; }
.cfgv2 .rc-hero-l { font-size: 11.5px; opacity: .85; }
.cfgv2 .rc-hero-v { font-size: 17px; font-weight: 900; line-height: 1.1; }
.cfgv2 .rc-hero-total { color: #fff; }
.cfgv2 .rc-hero-note { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .3px; display: inline-flex; align-items: center; gap: 6px; opacity: .95; }
.cfgv2 .rc-hero-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7CFC9B; box-shadow: 0 0 0 0 rgba(124, 252, 155, .7); animation: rc-pulse 1.8s infinite; }
@keyframes rc-pulse { 0% { box-shadow: 0 0 0 0 rgba(124, 252, 155, .6); } 70% { box-shadow: 0 0 0 7px rgba(124, 252, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(124, 252, 155, 0); } }

.cfgv2 .rc-preview { margin: 0 0 16px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cfgv2 .rc-schema { display: block; width: 100%; height: auto; border-radius: 8px; }
.cfgv2 .rc-preview-bar { width: 68%; min-height: 30px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, var(--green) 0 3px, #cfe0f5 3px 12px), repeating-linear-gradient(0deg, var(--green) 0 3px, #cfe0f5 3px 12px); background-blend-mode: multiply; border: 2px solid var(--green-dark); }
.cfgv2 .rc-preview-cap { font-size: 13px; color: var(--muted); }
.cfgv2 .rc-preview-cap strong { color: var(--green-dark); font-size: 15px; }

.cfgv2 .rc-sec { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cfgv2 .rc-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cfgv2 .rc-sec-t { font-size: 13px; font-weight: 800; letter-spacing: .2px; color: var(--green-dark); }
.cfgv2 .rc-edit { border: 1px solid var(--green); color: var(--green-dark); background: #fff; font: inherit; font-size: 11.5px; font-weight: 800; padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.cfgv2 .rc-edit:hover { background: var(--green); color: #fff; }
.cfgv2 .rc-r { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; }
.cfgv2 .rc-r + .rc-r { border-top: 1px dashed var(--line); }
.cfgv2 .rc-r--strong .rc-v { color: var(--green-dark); font-size: 15px; }
.cfgv2 .rc-r--free .rc-v { color: #1a8f42; font-weight: 800; }
/* Encart pédagogique « configuration adaptée » (angles / murs) dans le récap. */
.cfgv2 .rc-adapt { background: var(--green-light); border-color: var(--green); }
.cfgv2 .rc-adapt-list { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.cfgv2 .rc-adapt-list li { margin-bottom: 4px; }
.cfgv2 .rc-adapt-list li:last-child { margin-bottom: 0; }
/* Sélecteur rapide de hauteur souhaitée dans le récap */
.cfgv2 .rc-r--hstep { align-items: center; }
.cfgv2 .rc-hstepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(20,30,60,.10); flex: none; }
.cfgv2 .rc-hstep { width: 30px; height: 30px; border: 0; background: #fff; color: var(--green-dark); font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.cfgv2 .rc-hstep:hover:not(:disabled) { background: var(--green-light); }
.cfgv2 .rc-hstep:disabled { color: var(--muted); opacity: .4; cursor: default; }
.cfgv2 .rc-hval { min-width: 62px; text-align: center; font-size: 14px; font-weight: 800; color: var(--green-dark); padding: 0 4px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.cfgv2 .rc-price .rc-total { margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--green); }
.cfgv2 .rc-price .rc-total .rc-k { font-weight: 800; color: var(--ink); font-size: 14px; }
.cfgv2 .rc-price .rc-total .rc-v { font-size: 18px; font-weight: 900; color: var(--green-dark); }

.cfgv2 .rc-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cfgv2 .rc-check li { position: relative; padding-left: 26px; font-size: 13px; color: var(--ink); line-height: 1.35; }
.cfgv2 .rc-check li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-light); color: var(--green-dark); font-size: 11px; font-weight: 900; }
.cfgv2 .rc-check--ok li::before { background: #e4f6e9; color: #1a8f42; }

.cfgv2 .rc-alert { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: #fff7e8; border: 1px solid #f4d18a; }
.cfgv2 .rc-alert-head { font-size: 12.5px; font-weight: 800; color: #a4650a; margin-bottom: 6px; }
.cfgv2 .rc-alert p { margin: 0 0 6px; font-size: 12.5px; color: #6b4a0c; line-height: 1.4; }
.cfgv2 .rc-alert p:last-child { margin-bottom: 0; }

/* 7) Header responsive mobile : titre légèrement réduit, bouton Expert compact. */
@media (max-width: 600px) {
  .cfgv2 .subheader-title { font-size: 18px; }
  .cfgv2 .expert-btn { padding: 0 12px; font-size: 13px; }

  /* Encadré conseil : texte plus compact sur mobile. */
  .cfgv2 .advisor { padding: 12px 14px !important; gap: 12px; }
  .cfgv2 .advisor-avatar { width: 40px; height: 40px; }
  .cfgv2 .advisor-text { font-size: 12.5px; line-height: 1.3; }

  /* Footer : dispositions des boutons selon l'état. */
  .cfgv2 .nav-inner { padding: 10px 14px !important; }
  .cfgv2 .nav-inner.nav--solo #btn-prev,
  .cfgv2 .nav-inner.nav--solo .nav-subtotal { display: none !important; }
  .cfgv2 .nav-inner.nav--solo #btn-next,
  .cfgv2 .nav-inner.nav--solo #btn-submit { flex: 1 1 100% !important; width: 100% !important; }
  .cfgv2 .nav-inner.nav--split .nav-subtotal { display: none !important; }
  .cfgv2 .nav-inner.nav--split #btn-prev,
  .cfgv2 .nav-inner.nav--split #btn-next,
  .cfgv2 .nav-inner.nav--split #btn-submit { flex: 1 1 0 !important; }

    /* Carte mobile du bas : total, détail, puis CTA jumelés. */
  .cfgv2 .nav-footer {
    box-shadow: 0 -10px 28px rgba(15, 23, 42, .10);
    background: linear-gradient(180deg, rgba(255,255,255,.98), #fff);
  }
  .cfgv2 .nav-footer.has-price .nav-mobile { display: block; padding: 6px 12px 4px; }
  .cfgv2 .nav-footer.has-price .nm-subtotal {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
  }
  .cfgv2 .nav-footer.has-price .nm-sub-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--muted);
  }
  .cfgv2 .nav-footer.has-price .nm-sub-value {
    margin-left: auto;
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
    color: var(--ink);
  }
  .cfgv2 .nav-footer.has-price .nm-sub-cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #d6def0;
    background: #f7faff;
    color: #1f3f8f;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
  }
  .cfgv2 .nav-footer.has-price .nm-sub-cta-ic { font-size: 14px; }
  .cfgv2 .nav-footer.has-price .nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: 10px;
    padding: 0 12px 10px;
  }
  .cfgv2 .nav-footer.has-price .nav-inner .nav-subtotal { display: none !important; }
  .cfgv2 .nav-footer.has-price .nav-inner #btn-prev,
  .cfgv2 .nav-footer.has-price .nav-inner #btn-next,
  .cfgv2 .nav-footer.has-price .nav-inner #btn-cart,
  .cfgv2 .nav-footer.has-price .nav-inner #btn-submit {
    width: 100% !important;
    min-height: 48px;
    padding: 0 12px !important;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .07);
  }
  .cfgv2 .nav-footer.has-price .nav-inner #btn-prev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff !important;
    border: 1px solid #dde4ef;
    color: var(--ink);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
  }
  .cfgv2 .nav-footer.has-price .nav-inner #btn-prev::before { content: '←'; font-size: 18px; line-height: 1; }
  .cfgv2 .nav-footer.has-price .nav-inner #btn-next,
  .cfgv2 .nav-footer.has-price .nav-inner #btn-submit,
  .cfgv2 .nav-footer.has-price .nav-inner #btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, #2b5cff 0%, #1147d9 100%) !important;
    color: #fff;
    border: 1px solid #1b4fe0;
  }
  .cfgv2 .nav-footer.has-price .nav-inner #btn-next::after,
  .cfgv2 .nav-footer.has-price .nav-inner #btn-submit::after,
  .cfgv2 .nav-footer.has-price .nav-inner #btn-cart::after { content: '→'; font-size: 18px; line-height: 1; }
  .cfgv2 .nav-inner.nav--solo { grid-template-columns: 1fr !important; }
  .cfgv2 .nav-inner.nav--split { grid-template-columns: 1fr 1fr !important; }
  .cfgv2 .nav-inner.nav--price { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) !important; }
  .cfgv2 .nav-inner.nav--solo #btn-prev,
  .cfgv2 .nav-inner.nav--solo .nav-subtotal { display: none !important; }
  .cfgv2 .nav-inner.nav--solo #btn-next,
  .cfgv2 .nav-inner.nav--solo #btn-submit { width: 100% !important; }
  .cfgv2 .nav-inner.nav--split .nav-subtotal { display: none !important; }
  .cfgv2 .nav-inner.nav--split #btn-prev,
  .cfgv2 .nav-inner.nav--split #btn-next,
  .cfgv2 .nav-inner.nav--split #btn-submit { width: 100% !important; }

  /* Le widget « Besoin d'aide ? » ne doit pas recouvrir la carte récap :
     on le remonte au-dessus du footer (hauteur mesurée en JS). */
  .cfgv2 .nav-footer.has-price ~ .help-widget {
    bottom: calc(var(--cfg-vv-offset, 0px) + var(--cfg-footer-h, 88px) + 12px) !important;
  }
  .cfgv2 .help-widget {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    justify-content: center;
    min-height: 54px;
    padding: 12px 14px;
  }
  .cfgv2 .help-widget-ic { width: 32px; height: 32px; font-size: 17px; }
  .cfgv2 .help-widget-txt { font-size: 13.5px; }
  .cfgv2 .help-widget-arrow { font-size: 24px; }
}
@media (min-width: 601px) {
  .cfgv2 .help-widget { min-width: 250px; }
}
@media (max-width: 380px) {
  .cfgv2 .brand img { max-width: 105px !important; }
  .cfgv2 .btn-phone { padding: 7px 10px !important; font-size: 12px !important; }
}

/* 8) Bouton "Continuer/Suivant" grisé mais cliquable, et mise en évidence
   rouge des champs/groupes manquants au clic. */
.cfgv2 .btn.is-disabled,
.cfgv2 .btn-primary.is-disabled {
  background: var(--state-disabled-bg) !important;
  color: var(--state-disabled-fg) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.cfgv2 .group-invalid {
  outline: 2px solid #dc3545 !important;
  outline-offset: 6px;
  border-radius: 12px;
}

/* Cartes/pastilles désactivées par une règle métier (on désactive, on ne masque pas). */
.cfgv2 .pill.is-disabled {
  opacity: .45;
  cursor: not-allowed !important;
  filter: grayscale(0.4);
}
/* Cartes désactivées : on grise le contenu mais on garde l'icône (i) nette et cliquable. */
.cfgv2 .card.is-disabled,
.cfgv2 .color-card.is-disabled { cursor: not-allowed !important; }
/* On grise le contenu (image + textes) mais jamais l'icône d'aide, qui reste nette
   et cliquable même sur une carte désactivée. L'icône étant désormais dans le titre,
   on cible chaque élément de contenu (opacity sur l'élément, pas sur un parent). */
.cfgv2 .card.is-disabled .thumb,
.cfgv2 .card.is-disabled .panel-swatch,
.cfgv2 .card.is-disabled .soub-presence-swatch,
.cfgv2 .card.is-disabled .soub-type-swatch,
.cfgv2 .card.is-disabled .soub-beton-swatch,
.cfgv2 .card.is-disabled .card-name,
.cfgv2 .card.is-disabled .card-desc,
.cfgv2 .card.is-disabled .card-price,
.cfgv2 .card.is-disabled .panel-sub,
.cfgv2 .card.is-disabled .panel-badge,
.cfgv2 .card.is-disabled .soub-presence-sub,
.cfgv2 .card.is-disabled .soub-type-sub,
.cfgv2 .card.is-disabled .soub-beton-sub,
.cfgv2 .card.is-disabled .soub-presence-badge,
.cfgv2 .card.is-disabled .soub-type-badge,
.cfgv2 .card.is-disabled .soub-beton-badge,
.cfgv2 .card.is-disabled .card-tags,
.cfgv2 .card.is-disabled .card-badge,
.cfgv2 .color-card.is-disabled .swatch,
.cfgv2 .color-card.is-disabled .color-thumb,
.cfgv2 .color-card.is-disabled .color-name,
.cfgv2 .color-card.is-disabled .color-sub,
.cfgv2 .color-card.is-disabled .color-accroche { opacity: .45; filter: grayscale(0.4); }
.cfgv2 .card.is-disabled .info-btn,
.cfgv2 .color-card.is-disabled .info-btn { opacity: 1 !important; filter: none !important; cursor: pointer !important; pointer-events: auto; }
.cfgv2 .card.is-disabled .soub-presence-check,
.cfgv2 .card.is-disabled .soub-type-check,
.cfgv2 .card.is-disabled .soub-beton-check { opacity: .45; }
/* Message d'explication d'une règle (option désactivée). */
.cfgv2 .cfg-rule-msg {
  margin: 12px 0 0 !important;
  padding: 10px 14px !important;
  background: var(--advisor-bg) !important;
  color: var(--advisor-fg);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.cfgv2 .cfg-rule-msg[hidden] { display: none; }

/* US-CRO-039 : notification standard, positive et cohérente, de toute adaptation automatique. */
.cfgv2 .cfg-auto-toast {
  position: sticky;
  top: 8px;
  z-index: 50;
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px !important;
  padding: 12px 16px !important;
  background: var(--green-light) !important;
  color: var(--advisor-fg);
  border: 1px solid var(--green);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgba(7,85,184,.16);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.cfgv2 .cfg-auto-toast.is-show { opacity: 1; transform: translateY(0); }
.cfgv2 .cfg-auto-toast[hidden] { display: none !important; }
.cfgv2 .cfg-auto-toast-ic { flex: none; font-size: 16px; line-height: 1.35; }
.cfgv2 .cfg-auto-toast-txt { flex: 1; }
.cfgv2 .cfg-auto-toast-txt strong { color: var(--green-dark); }

/* CRO-042 : indicateur « pré-sélectionné » sur les cartes accessoires recommandés. */
.cfgv2 .addon-preselected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--green-dark);
  background: var(--green-light) !important;
  border-radius: 999px;
  padding: 3px 10px !important;
}
/* CRO-043 : justification de la recommandation (raison d'expert) sous la quantité. */
.cfgv2 .addon-reason {
  margin: 4px 0 0 !important;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.4;
}
/* CRO-044 : accordéon « détail du calcul » (cumul multi-sources). */
.cfgv2 .addon-breakdown { margin-top: 6px; font-size: 12px; }
.cfgv2 .addon-breakdown summary { cursor: pointer; color: var(--green-dark); font-weight: 700; list-style: none; }
.cfgv2 .addon-breakdown summary::-webkit-details-marker { display: none; }
.cfgv2 .addon-breakdown summary::before { content: "▸ "; }
.cfgv2 .addon-breakdown[open] summary::before { content: "▾ "; }
.cfgv2 .addon-breakdown ul { list-style: none; margin: 6px 0 0 !important; padding: 8px 10px !important; background: var(--green-light) !important; border-radius: 8px; }
.cfgv2 .addon-breakdown li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0 !important; }
.cfgv2 .addon-breakdown li.addon-breakdown-total { margin-top: 4px; padding-top: 6px !important; border-top: 1px solid var(--line); font-weight: 800; color: var(--ink); }

/* US2 : pédagogie muret plein / creux (affiché sous l'option « Sur un muret »). */
.cfgv2 .muret-help { display: grid; gap: 12px; margin-top: 12px !important; }
.cfgv2 .muret-help[hidden] { display: none; }
@media (min-width: 640px) { .cfgv2 .muret-help { grid-template-columns: 1fr 1fr; } }
.cfgv2 .muret-type { background: var(--green-light) !important; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px !important; }
.cfgv2 .muret-type-t { margin: 0 0 4px !important; font-size: 14px; font-weight: 800; color: var(--ink); }
.cfgv2 .muret-type-d { margin: 0 0 6px !important; font-size: 13px; color: var(--muted); line-height: 1.4; }
.cfgv2 .muret-type-lbl { margin: 0 0 4px !important; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cfgv2 .muret-type-list { margin: 0 !important; padding: 0 0 0 18px !important; font-size: 13px; color: var(--ink); }
.cfgv2 .muret-type-list li { padding: 1px 0 !important; }

call-us-selector{
  display:none;
}

/* ---- Étape « Portillons » (accès piéton) ----
   NB : le formulaire applique un reset ID-level `#msform * { background:transparent; margin:0; padding:0 }`
   qui bat les sélecteurs de classe. On force donc background/padding/margin avec !important. */
.cfgv2 .portillon-block { margin-top: 0 !important; padding: 0 !important; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; }
.cfgv2 .portillon-block[hidden] { display: none; }
.cfgv2 .portillon-block-title { margin: 0 0 12px !important; font-size: 17px; font-weight: 800; color: var(--ink); }
.cfgv2 .portillon-block .group-title { margin-top: 14px !important; margin-bottom: 6px !important; }
.cfgv2 .portillon-sync-hint { font-weight: 600; font-size: 12px; color: var(--muted); }
/* Colliers de fixation : 4 options sur une ligne, vignettes compactes (desktop + mobile). */
.cfgv2 .card-grid--collier4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px; }
.cfgv2 .card-grid--collier4 .card-body { padding: 8px 9px !important; }
.cfgv2 .card-grid--collier4 .card-name { font-size: 12.5px; line-height: 1.2; }
.cfgv2 .card-grid--collier4 .card-desc { font-size: 11px; margin: 4px 0 0; line-height: 1.3; }
.cfgv2 .card-grid--collier4 .thumb--cross { font-size: 20px; min-height: 34px; }
.cfgv2 .card-grid--collier4 .card-select-btn { display: none !important; }
@media (max-width: 720px) {
  .cfgv2 .card-grid--collier4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px; }
  .cfgv2 .card-grid--collier4 .card-body { padding: 6px !important; }
  .cfgv2 .card-grid--collier4 .card-name { font-size: 10.5px; line-height: 1.15; }
  .cfgv2 .card-grid--collier4 .card-desc { display: none; }
  .cfgv2 .card-grid--collier4 .thumb--cross { font-size: 16px; min-height: 26px; }
}
/* Sélecteur compact (petits labels sélectionnables) — colliers de fixation. */
.cfgv2 .chip-select { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px !important; }
.cfgv2 .chip-choice { padding: 8px 14px !important; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white) !important; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, color .15s; -webkit-appearance: none; appearance: none; }
.cfgv2 .chip-choice:hover { border-color: var(--muted); }
.cfgv2 .chip-choice.selected { border-color: var(--green); background: var(--green-light) !important; color: var(--green-dark); box-shadow: 0 0 0 2px var(--state-selected, rgba(26,60,220,.18)); }
/* Cartes hauteur « pastilles » compactes. */
.cfgv2 .card-grid--pills { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cfgv2 .card--pill { min-height: 0; padding: 14px 10px !important; display: flex; align-items: center; justify-content: center; text-align: center; }
.cfgv2 .card--pill .card-name { font-weight: 700; font-size: 15px; }
/* Vignette « aucun » (croix). */
.cfgv2 .thumb--cross { display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--muted); background: #f3f5f9 !important; }
/* Réassurance produit. */
.cfgv2 .portillon-reassure { list-style: none; margin: 16px 0 0 !important; padding: 14px 16px !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 18px; background: #f4faf6 !important; border: 1px solid #cdead6; border-radius: 12px; }
.cfgv2 .portillon-reassure li { font-size: 13px; font-weight: 600; color: #1f7a43; }
/* Impact prix du portillon. */
.cfgv2 .portillon-impact { margin-top: 14px !important; }
.cfgv2 .portillon-impact-v { font-size: 16px; font-weight: 800; color: var(--green); }
.cfgv2 .portillon-impact-v small { font-weight: 600; font-size: 12px; color: var(--muted); }
.cfgv2 .portillon-impact-na { font-size: 13px; font-weight: 600; color: var(--muted); }
.cfgv2-no-prices .portillon-impact { display: none; }
/* CFG-GATE-059 : lignes de prix des options (composant Panneaux) + impact global détaillé. */
.cfgv2 .portillon-price-line { display: flex; flex-direction: column; align-items: flex-end; margin: 6px 0 2px !important; min-height: 18px; }
.cfgv2 .portillon-price-line:empty { display: none; }
.cfgv2 .portillon-impact-box { margin-top: 6px !important; padding: 12px 14px !important; border: 1px solid var(--line); border-radius: 12px; background: var(--green-light) !important; }
.cfgv2 .portillon-impact-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--green-dark); margin-bottom: 6px !important; }
.cfgv2 .portillon-impact-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink); padding: 2px 0 !important; }
.cfgv2 .portillon-impact-row span:last-child { font-weight: 700; white-space: nowrap; }
.cfgv2 .portillon-impact-save span:last-child { color: #1f7a43; }
.cfgv2 .portillon-impact-total { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px !important; padding-top: 8px !important; border-top: 1px solid var(--line); font-size: 15px; font-weight: 900; color: var(--green-dark); }
.cfgv2-no-prices .portillon-price-line, .cfgv2-no-prices .portillon-impact-box { display: none; }
/* Cartes couleur portillon : la grande vignette affiche l'image produit (--thumb). */
.cfgv2 .color-cards--portillon .color-card .swatch { background-color: #eaeef6 !important; background-image: var(--thumb, none) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
/* Image d'illustration d'un accessoire portillon (embase, collier...). */
.cfgv2 .portillon-illus { display: block; max-width: 120px; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; margin: 2px 0 8px !important; background: #f7f9fc !important; }

/* Étape 20 « Configuration Portland » : refonte premium mobile (charte + maquette). */
.cfgv2 .step--portland .portland-intro { margin: 0 0 14px !important; font-size: 13px; color: var(--muted); line-height: 1.45; }
.cfgv2 .step--portland .portland-panel {
  padding: 14px 14px 16px !important;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(20,30,60,.06);
}
.cfgv2 .step--portland .portland-panel + .portland-panel { margin-top: 12px !important; }
.cfgv2 .step--portland .portland-panel > .group-title { margin: 0 0 10px !important; font-size: 18px; display: flex; align-items: center; gap: 7px; }
.cfgv2 .step--portland .portland-step-index { color: var(--ink); font-weight: 900; }

.cfgv2 .step--portland .color-cards[data-group="portland_couleur"],
.cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card,
.cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card {
  width: 100%;
  min-height: 94px;
  padding: 0 !important;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card .swatch,
.cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card .swatch {
  flex: 0 0 31%;
  min-width: 90px;
  max-width: 148px;
  border-radius: 0;
  border-right: 1px solid var(--line);
  background-color: var(--c, #eaeef6) !important;
  background-image: none !important;
}
.cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card .cc-body,
.cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card .cc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 44px 12px 14px !important;
}
.cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card .color-name,
.cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card .color-name { font-size: 18px; font-weight: 800; }
.cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card .color-sub,
.cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card .color-sub { font-size: 13px; color: var(--muted); font-weight: 700; }
.cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card .cc-check,
.cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card .cc-check {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #d2dbeb;
  background: #fff !important;
}
.cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card.selected .cc-check,
.cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card.selected .cc-check {
  border-color: var(--green);
  background: var(--green) !important;
}
.cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card.selected .cc-check::before,
.cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card.selected .cc-check::before {
  content: "\2713";
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  display: block;
  text-align: center;
}

/* US-CONF-145 : Portland hauteur — liste verticale identique à Carolina. */
.cfgv2 .step--portland .portland-height-grid { display: flex; flex-direction: column; gap: 8px; }
.cfgv2 .step--portland .portland-height-grid .card--pill { justify-content: flex-start !important; text-align: left !important; min-height: 68px !important; padding: 0 !important; border-radius: 16px !important; }
.cfgv2 .step--portland .portland-height-grid .card--pill.selected { border-color: #2b5cff !important; background: #f0f5ff !important; box-shadow: 0 0 0 2px rgba(43,92,255,.18) !important; }
.cfgv2 .step--portland .portland-height-grid .card--pill.selected::after { top: 50% !important; right: 16px !important; transform: translateY(-50%); width: 22px !important; height: 22px !important; font-size: 12px !important; background: #2b5cff !important; }
.cfgv2 .step--portland .portland-height-grid .card--pill .card-body { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 14px 52px 14px 16px !important; width: 100% !important; text-align: left !important; }
.cfgv2 .step--portland .portland-height-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cfgv2 .step--portland .portland-height-grid .card-name { font-size: 19px !important; font-weight: 800 !important; text-align: left !important; line-height: 1.2; }
.cfgv2 .step--portland .portland-height-grid .card-desc { font-size: 13px !important; color: #6b7280; font-style: italic; text-align: left !important; margin: 0 !important; }
.cfgv2 .step--portland .portland-height-grid .card-price { text-align: right !important; margin: 0 !important; flex-shrink: 0; min-width: 110px; }
.cfgv2 .step--portland .portland-height-grid .card-total { font-size: 17px !important; font-weight: 700 !important; color: #2b5cff !important; display: block; text-align: right; }
.cfgv2 .step--portland .portland-height-grid .card-unit { font-size: 12px; color: #6b7280; display: block; text-align: right; }

.cfgv2 .step--portland [data-group="portland_occ"] .card { min-height: 86px; }
.cfgv2 .step--portland [data-group="portland_occ"] .card .card-title-row { display: flex; align-items: center; gap: 8px; }
.cfgv2 .step--portland [data-group="portland_occ"] .card .card-title-row .card-name { margin-right: auto; }
.cfgv2 .step--portland [data-group="portland_occ"] .card .card-desc { margin-top: 2px !important; }
.cfgv2 .step--portland #portland-occ-block { margin-top: 12px !important; }
.cfgv2 .step--portland #portland-occ-block .advice { margin-top: 10px !important; }
.cfgv2 .step--portland .portland-qty-stepper { margin-top: 12px !important; }

.cfgv2 .step--portland .chip-select {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.cfgv2 .step--portland .chip-choice {
  min-height: 42px;
  padding: 8px 6px !important;
  border-radius: 999px;
  text-align: center;
  font-size: 12.5px;
}
.cfgv2 .step--portland .portillon-details { margin-top: 10px !important; }
.cfgv2 .step--portland .portillon-impact-box { border-radius: 14px; }

@media (max-width: 560px) {
  .cfgv2 .step--portland .portland-panel { padding: 12px 12px 14px !important; border-radius: 14px; }
  .cfgv2 .step--portland .portland-panel > .group-title { font-size: 16px; }
  .cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card,
  .cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card { min-height: 100px; }
  .cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card .cc-body,
  .cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card .cc-body { padding-right: 40px !important; }
  .cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card .color-name,
  .cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card .color-name { font-size: 16px; }
  .cfgv2 .step--portland .chip-select { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Étape 21 « Configuration Carolina » : structure premium mobile (charte + maquette). */
.cfgv2 .step--carolina .carolina-intro { margin: 0 0 14px !important; font-size: 13px; color: var(--muted); line-height: 1.45; }
.cfgv2 .step--carolina .carolina-panel { padding: 14px 14px 16px !important; border: 1px solid var(--line); border-radius: 16px; background: #fff !important; box-shadow: 0 2px 10px rgba(20,30,60,.06); }
.cfgv2 .step--carolina .carolina-panel + .carolina-panel { margin-top: 12px !important; }
.cfgv2 .step--carolina .carolina-panel > .group-title { margin: 0 0 10px !important; font-size: 18px; display: flex; align-items: center; gap: 7px; }
.cfgv2 .step--carolina .carolina-step-index { color: var(--ink); font-weight: 900; }

.cfgv2 .step--carolina .carolina-height-grid { display: flex; flex-direction: column; gap: 8px; }
.cfgv2 .step--carolina .carolina-height-grid .card--pill {
  justify-content: flex-start !important;
  text-align: left !important;
  min-height: 68px !important;
  padding: 0 !important;
  border-radius: 16px !important;
}
.cfgv2 .step--carolina .carolina-height-grid .card--pill.selected {
  border-color: #2b5cff !important;
  background: #f0f5ff !important;
  box-shadow: 0 0 0 2px rgba(43,92,255,.18) !important;
}
.cfgv2 .step--carolina .carolina-height-grid .card--pill.selected::after {
  top: 50% !important; right: 16px !important; transform: translateY(-50%);
  width: 22px !important; height: 22px !important; font-size: 12px !important;
  background: #2b5cff !important;
}
.cfgv2 .step--carolina .carolina-height-grid .card--pill .card-body {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: space-between !important;
  gap: 12px !important; padding: 14px 52px 14px 16px !important;
  width: 100% !important; text-align: left !important;
}
.cfgv2 .step--carolina .carolina-height-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cfgv2 .step--carolina .carolina-height-grid .card-name { font-size: 19px !important; font-weight: 800 !important; text-align: left !important; line-height: 1.2; }
.cfgv2 .step--carolina .carolina-height-grid .card-desc { font-size: 13px !important; color: #6b7280; font-style: italic; text-align: left !important; margin: 0 !important; }
.cfgv2 .step--carolina .carolina-height-grid .card-price { text-align: right !important; margin: 0 !important; flex-shrink: 0; min-width: 110px; }
.cfgv2 .step--carolina .carolina-height-grid .card-total { font-size: 17px !important; font-weight: 700 !important; color: #2b5cff !important; display: block; text-align: right; }
.cfgv2 .step--carolina .carolina-height-grid .card-unit { font-size: 12px; color: #6b7280; display: block; text-align: right; }

.cfgv2 .step--carolina [data-group="carolina_platine"] .card .thumb {
  flex: 0 0 22%;
  max-width: 92px;
  min-height: 100%;
  border-right: 1px solid var(--line);
  background: #f7f9fc !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px !important;
}
.cfgv2 .step--carolina [data-group="carolina_platine"] .card .thumb .portillon-illus {
  max-width: none;
  width: 100%;
  margin: 0 !important;
  border: 0;
  background: transparent !important;
  object-fit: contain;
}
.cfgv2 .step--carolina .carolina-qty-stepper { margin-top: 12px !important; }

.cfgv2 .step--carolina .chip-select {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.cfgv2 .step--carolina .chip-choice {
  min-height: 42px;
  padding: 8px 6px !important;
  border-radius: 999px;
  text-align: center;
  font-size: 12.5px;
}

@media (max-width: 560px) {
  .cfgv2 .step--carolina .carolina-panel { padding: 12px 12px 14px !important; border-radius: 14px; }
  .cfgv2 .step--carolina .carolina-panel > .group-title { font-size: 16px; }
  .cfgv2 .step--carolina .carolina-height-grid .card { min-height: 96px; }
  .cfgv2 .step--carolina .carolina-height-grid .card .card-body { padding-right: 58px !important; }
  .cfgv2 .step--carolina .carolina-height-grid .card .card-name { font-size: 16.5px; }
  .cfgv2 .step--carolina .carolina-height-grid .card .card-total { font-size: 18px; }
  .cfgv2 .step--carolina .carolina-height-grid .card .card-unit { font-size: 11.5px; }
  .cfgv2 .step--carolina [data-group="carolina_platine"] .card .thumb { max-width: 84px; }
  .cfgv2 .step--carolina .chip-select { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Carolina / Portland / Redan - passe ergonomie mobile premium (CRO-062). */
.cfgv2 .step--carolina .carolina-intro,
.cfgv2 .step--portland .portland-intro { margin-bottom: 10px !important; font-size: 12.5px; color: #5d6a82; }

.cfgv2 .step--carolina .carolina-panel,
.cfgv2 .step--portland .portland-panel {
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
}
.cfgv2 .step--carolina .carolina-panel + .carolina-panel,
.cfgv2 .step--portland .portland-panel + .portland-panel { margin-top: 16px !important; }

.cfgv2 .step--carolina,
.cfgv2 .step--portland { padding-bottom: 96px !important; }

.cfgv2 .step--carolina .carolina-panel > .group-title,
.cfgv2 .step--portland .portland-panel > .group-title {
  margin: 0 0 10px !important;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.cfgv2 .step--carolina .carolina-step-index,
.cfgv2 .step--portland .portland-step-index { font-size: .95em; }
/* Titre avec info-btn : réduire la taille pour éviter le wrap du bouton sur mobile */
.cfgv2 .step--portland .portland-panel > .group-title.cfg-has-info { font-size: 22px; align-items: center; flex-wrap: nowrap; }
.cfgv2 .step--portland .portland-panel > .group-title.cfg-has-info .info-btn--title { flex: none; }

.cfgv2 .step--carolina .color-cards[data-group="carolina_couleur"],
.cfgv2 .step--portland .color-cards[data-group="portland_couleur"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.cfgv2 .step--carolina .color-cards[data-group="carolina_couleur"] .color-card,
.cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card {
  border: 1.5px solid #e3e8f2;
  border-radius: 16px;
  min-height: 120px;
  box-shadow: 0 2px 8px rgba(25,38,67,.05);
}
.cfgv2 .step--carolina .color-cards[data-group="carolina_couleur"] .color-card.selected,
.cfgv2 .step--portland .color-cards[data-group="portland_couleur"] .color-card.selected,
.cfgv2 .step--portland .color-cards[data-group="portland_occ_couleur"] .color-card.selected,
.cfgv2 .step--carolina .carolina-height-grid .card.selected,
.cfgv2 .step--portland .portland-height-grid .card.selected,
.cfgv2 .step--redan .rep-table tr.is-selected {
  border-color: #2b5cff !important;
  box-shadow: 0 0 0 1px rgba(43,92,255,.22);
}

.cfgv2 .step--carolina .carolina-height-grid,
.cfgv2 .step--portland .portland-height-grid { gap: 10px; }
.cfgv2 .step--carolina .carolina-height-grid { grid-template-columns: 1fr; }
.cfgv2 .step--carolina .carolina-height-grid .card,
.cfgv2 .step--portland .portland-height-grid .card {
  border-radius: 14px;
  border: 1.5px solid #e3e8f2;
  min-height: 118px;
}
.cfgv2 .step--carolina .carolina-height-grid .card .card-name,
.cfgv2 .step--portland .portland-height-grid .card .card-name { font-size: 17px; }

.cfgv2 .step--carolina [data-group="carolina_platine"] .card,
.cfgv2 .step--portland [data-group="portland_occ"] .card {
  border-radius: 14px;
  border: 1.5px solid #e3e8f2;
  min-height: 86px;
}

.cfgv2 .step--carolina .chip-choice,
.cfgv2 .step--portland .chip-choice {
  min-height: 44px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.cfgv2 .step--carolina .portillon-impact-box,
.cfgv2 .step--portland .portillon-impact-box {
  border-radius: 14px;
  background: linear-gradient(180deg, #f5f8ff 0%, #eef3ff 100%) !important;
  border-color: #d7e2fb;
}
.cfgv2 .step--carolina .portillon-impact-title,
.cfgv2 .step--portland .portillon-impact-title { color: #1f3f8f; }
.cfgv2 .step--carolina .portillon-impact-total,
.cfgv2 .step--portland .portillon-impact-total { color: #1f3f8f; border-top-color: #d7e2fb; }

/* Blue cc-check for portillon color-card selection */
.cfgv2 .step--carolina .color-cards--horizontal .color-card.selected .cc-check,
.cfgv2 .step--portland .color-cards--horizontal .color-card.selected .cc-check,
.cfgv2 .step--carolina .color-cards[data-group="california_occ_couleur"] .color-card.selected .cc-check { border-color: #2b5cff !important; background: #2b5cff !important; }

/* Blue selected state for height cards + platine cards */
.cfgv2 .step--carolina .carolina-height-grid .card.selected::after,
.cfgv2 .step--carolina [data-group="carolina_platine"] .card.selected::after { background: #2b5cff !important; }
.cfgv2 .step--carolina [data-group="carolina_platine"] .card.selected,
.cfgv2 .step--carolina .chip-choice.selected { border-color: #2b5cff !important; box-shadow: 0 0 0 1px rgba(43,92,255,.22); }
.cfgv2 .step--carolina .chip-choice.selected,
.cfgv2 .step--portland .chip-choice.selected { background: #eef3ff !important; color: #1f3f8f !important; border-color: #2b5cff !important; box-shadow: 0 0 0 1px rgba(43,92,255,.22); }

/* Height card layout: left text + right price column */
.cfgv2 .step--carolina .carolina-height-grid .card .card-body { display: flex; align-items: center; padding: 14px 56px 14px 16px !important; gap: 10px; }
.cfgv2 .step--carolina .carolina-height-grid .carolina-height-main { flex: 1; }
.cfgv2 .step--carolina .carolina-height-grid .card .card-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cfgv2 .step--carolina .carolina-height-grid .card .card-total { font-size: 16px; font-weight: 900; color: #1f3f8f; }
.cfgv2 .step--carolina .carolina-height-grid .card .card-total small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cfgv2 .step--carolina .carolina-height-grid .card .card-unit { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* Platine card: image larger, card taller */
.cfgv2 .step--carolina [data-group="carolina_platine"] .card.selected { border-color: #2b5cff !important; background: #f7faff !important; }
.cfgv2 .step--carolina [data-group="carolina_platine"] .card { min-height: 96px; }
.cfgv2 .step--carolina [data-group="carolina_platine"] .card .thumb { flex: 0 0 28%; max-width: 100px; }

.cfgv2 .step--carolina .hf-expert,
.cfgv2 .step--portland .hf-expert {
  margin-top: 12px !important;
  border-radius: 16px;
  border: 1px solid #d9e4fb;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%) !important;
}

/* step--redan : overrides CRO-062 déplacés dans le bloc principal CRO-023-v2 ci-dessus */

@media (max-width: 640px) {
  .cfgv2 .step--carolina .carolina-panel > .group-title,
  .cfgv2 .step--portland .portland-panel > .group-title { font-size: 27px; }
}

@media (max-width: 560px) {
  .cfgv2 .step--carolina .carolina-panel > .group-title,
  .cfgv2 .step--portland .portland-panel > .group-title { font-size: 24px; margin-bottom: 9px !important; }
  .cfgv2 .step--carolina .carolina-height-grid { grid-template-columns: 1fr; }
  .cfgv2 .step--carolina .carolina-height-grid .card { min-height: 100px; }
  .cfgv2 .step--carolina .chip-select,
  .cfgv2 .step--portland .chip-select { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
 * CRO-020 v2 — Refonte étape « Portillon » (mobile-first, progressive).
 * background/padding/margin forcés en !important (reset #msform *).
 * ===================================================================== */
/* Étape 1 : deux grandes cartes (Aucun / Ajouter). */
.cfgv2 .card-grid--duo { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
/* Sélection directe des cartes : on masque les boutons « Sélectionner » injectés. */
.cfgv2 .step[data-step="18"] .card-select-btn { display: none !important; }
/* Sous-étapes numérotées. */
.cfgv2 .portillon-substep { margin-top: 18px !important; }
.cfgv2 .portillon-step-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--ink); margin: 24px 0 12px !important; }
.cfgv2 .portillon-step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--state-selected) !important; color: #fff; font-size: 14px; font-weight: 800; flex: none; }
/* Cartes modèles : hauteur uniforme. */
.cfgv2 .card-grid--models .card { height: 100%; }
/* Accordéon « Voir les avantages ». */
.cfgv2 .portillon-details { margin: 14px 0 4px !important; border: 1px solid var(--line); border-radius: 12px; padding: 2px 14px !important; background: var(--white) !important; }
.cfgv2 .portillon-details > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink); padding: 12px 0 !important; list-style: none; }
.cfgv2 .portillon-details > summary::-webkit-details-marker { display: none; }
.cfgv2 .portillon-details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px !important; }
.cfgv2 .portillon-details .portillon-reassure { border: 0 !important; background: transparent !important; margin: 0 !important; padding: 4px 0 12px !important; }
/* Bandeau de réassurance CRO (avant le CTA sticky). */
.cfgv2 .portillon-cro-strip { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px !important; padding: 14px 16px !important; background: #f4faf6 !important; border: 1px solid #cdead6; border-radius: 12px; }
.cfgv2 .portillon-cro-item { font-size: 13px; font-weight: 600; color: #1f7a43; }
/* Étape « Portail » : aperçu visuel + caractéristiques techniques. */
.cfgv2 .portail-preview { margin: 6px 0 14px !important; padding: 12px !important; background: #f7f9fc !important; border: 1px solid var(--line); border-radius: 14px; text-align: center; }
/* CFG-GATE-060 : image d'en-tête (Portland / Carolina / California) plafonnée en hauteur
   pour libérer la première question au-dessus de la ligne de flottaison, surtout sur mobile.
   object-fit: contain conserve l'intégralité et la qualité du visuel (aucun recadrage). */
.cfgv2 .portail-preview img { max-width: 100%; max-height: 180px; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
@media (max-width: 560px) {
  .cfgv2 .portail-preview { margin: 4px 0 10px !important; padding: 8px !important; }
  .cfgv2 .portail-preview img { max-height: 120px; }
}
.cfgv2 .portillon-specs { list-style: none; margin: 4px 0 12px !important; padding: 0 !important; }
.cfgv2 .portillon-specs li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 2px !important; margin: 0 !important; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cfgv2 .portillon-specs li:last-child { border-bottom: 0; }
.cfgv2 .portillon-specs li span { color: var(--muted); }
.cfgv2 .portillon-specs li strong { color: var(--ink); font-weight: 700; text-align: right; }
/* Message d'économie (poteau retiré grâce aux colliers). */
.cfgv2 .portillon-savings { margin: 10px 0 4px !important; padding: 12px 14px !important; background: #f4faf6 !important; border: 1px solid #cdead6; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: #1f7a43; }
.cfgv2 .portillon-savings[hidden] { display: none; }
/* Accordéon d'aide (infobulle colliers). */
.cfgv2 .portillon-details--info > summary { color: var(--blue, #00a8ff); }
.cfgv2 .portillon-details--info .help-text { margin: 4px 0 10px !important; }
/* Pastilles de hauteur avec prix (portail). */
.cfgv2 .card-grid--pills-price .card--pill { flex-direction: column !important; gap: 3px; min-height: 58px; padding: 12px 14px !important; }
.cfgv2 .card-grid--pills-price .card--pill .card-price { font-size: 12.5px !important; font-weight: 700; color: var(--green-dark); }

/* ============================================================================
   CORRECTIF THÈME — Le reset du thème « #msform * { padding:0; margin:0;
   background:transparent } » (sélecteur ID) écrase les encarts .cfgv2 non
   protégés par !important : paddings/marges qui sautent, puces (✓) qui
   chevauchent le texte. On ré-assure ici les propriétés touchées en !important
   pour les étapes Finaliser, Livraison, Terrain et Retrait en agence.
   ============================================================================ */
/* --- Finaliser votre projet --- */
.cfgv2 #pose-service-encart { margin: 16px 0 4px !important; }
.cfgv2 .pose-estimate { padding: 16px 18px !important; margin: 0 0 20px !important; }
.cfgv2 .fin-block { margin: 0 0 26px !important; }
/* --- Votre terrain --- */
.cfgv2 .terrain-help-q { margin: 0 0 12px !important; }
.cfgv2 .terrain-help-note { margin: 12px 0 0 !important; }
.cfgv2 .terrain-slope-p { margin: 0 0 12px !important; }
.cfgv2 .terrain-ai-intro { margin: 0 0 14px !important; }
/* --- Livraison : listes à puces (✓) --- */
.cfgv2 .livr-hero-benefits { margin: 12px 0 !important; padding: 0 !important; }
.cfgv2 .livr-hero-benefits li { padding-left: 22px !important; }
.cfgv2 .livr-card-benefits { margin: 2px 0 !important; padding: 0 !important; }
.cfgv2 .livr-card-benefits li { padding-left: 18px !important; }
/* --- Livraison : boîtes, résumés, comparatif, FAQ, sticky --- */
.cfgv2 .livr-sticky-in { padding: 10px 14px !important; }
.cfgv2 .livr-compare summary { padding: 14px 16px !important; }
.cfgv2 .livr-compare-table th, .cfgv2 .livr-compare-table td { padding: 10px 12px !important; }
.cfgv2 .livr-costs-detail summary { padding: 8px 0 !important; }
.cfgv2 .livr-faq-item summary { padding: 12px 14px !important; }
.cfgv2 .livr-faq-item p { margin: 0 14px 14px !important; }
/* --- Retrait en agence --- */
.cfgv2 .ag-save { margin: 18px 0 !important; }
.cfgv2 .ag-store-rows { margin: 10px 0 !important; }
.cfgv2 .ag-store-hours { margin: 10px 0 !important; }
.cfgv2 .ag-check-list li { padding-left: 22px !important; }
.cfgv2 .ag-step > summary { padding: 14px 16px !important; }
.cfgv2 .ag-step-body { padding: 0 16px 16px !important; }
.cfgv2 .ag-step-desc { margin: 0 0 8px !important; }
.cfgv2 .agsvc-dur.is-on .ag-dur-radio { background: #fff !important; }

/* ============================================================================
   CORRECTIF THÈME (complément automatisé) — Le reset ID « #msform * { margin:0;
   padding:0; background:transparent } » l'emporte sur toute règle de classe
   .cfgv2 sans !important. Diagnostic live (Playwright) : les déclarations
   ci-dessous étaient calculées à 0 / transparent (marges, paddings et fonds
   « collés »). On ré-assure les valeurs d'origine en !important. Ordre source
   conservé pour respecter la cascade entre règles de même spécificité.
   ============================================================================ */
/* Base / cartes / groupes */
.cfgv2 .layout { margin-right: auto !important; margin-left: auto !important; }
.cfgv2 .group-title { margin-top: 26px !important; }
.cfgv2 .card-tags { margin-top: 4px !important; }
.cfgv2 .config-criteria { margin-top: 2px !important; }
.cfgv2 .card { background: var(--white) !important; }
.cfgv2 .card-desc { margin: 6px 0 10px !important; }
.cfgv2 .card-unit { margin-top: 1px !important; }
.cfgv2 .card-price--free { margin-top: 4px !important; }
/* Produits additionnels */
.cfgv2 .addon-card .addon-name { padding-right: 26px !important; }
.cfgv2 .addon-actions { margin-top: 6px !important; }
.cfgv2 .addon-subtotal { margin-top: 6px !important; }
.cfgv2 .addon-premium-foot { margin-top: 8px !important; }
.cfgv2 .addon-preselected { margin-top: 6px !important; }
.cfgv2 .chip-row { margin-top: 10px !important; }
/* Votre terrain */
.cfgv2 .terrain-card .terrain-card-ic { margin-bottom: 2px !important; }
.cfgv2 .terrain-help { margin-top: 14px !important; }
.cfgv2 .terrain-help-head { margin-bottom: 8px !important; }
.cfgv2 .terrain-slope { margin-top: 16px !important; }
.cfgv2 .terrain-slope-head { margin-bottom: 6px !important; }
.cfgv2 .terrain-ai { margin-top: 18px !important; }
.cfgv2 .terrain-ai-head { margin-bottom: 12px !important; }
.cfgv2 .terrain-ai-badge { margin-top: 3px !important; }
.cfgv2 .terrain-reco { margin-bottom: 12px !important; }
.cfgv2 .terrain-reco-title { margin-bottom: 8px !important; }
.cfgv2 .terrain-reco-line { padding: 4px 0 !important; }
.cfgv2 .terrain-reco-ic { margin-right: 8px !important; }
.cfgv2 .terrain-score { margin-bottom: 12px !important; }
.cfgv2 .terrain-score-bar { margin: 8px 0 6px !important; background: rgb(230, 234, 240) !important; }
.cfgv2 .terrain-score-bar span { background: rgb(26, 143, 66) !important; }
.cfgv2 .terrain-score--ok .terrain-score-bar span { background: rgb(26, 143, 66) !important; }
.cfgv2 .terrain-estim { margin-bottom: 14px !important; }
.cfgv2 .terrain-estim-head { margin-bottom: 8px !important; }
.cfgv2 .terrain-estim-note { margin: 8px 0 0 !important; }
.cfgv2 .terrain-advanced-sum { padding: 14px 16px !important; }
.cfgv2 .terrain-advanced-body { padding: 4px 16px 16px !important; }
/* Répartition des poteaux (pose en redan) */
.cfgv2 .rep-optim small { margin-top: 2px !important; }
.cfgv2 .rep-foot { margin-top: 12px !important; }
.cfgv2 .rep-warn { margin-top: 12px !important; }
.cfgv2 .rep-conseil-head { margin-bottom: 6px !important; }
.cfgv2 .rep-conseil-p { margin: 0 0 8px !important; }
.cfgv2 .rep-conseil-list li { margin-bottom: 3px !important; }
.cfgv2 .rep-marche-stepper .qty-suffix-inline { padding-right: 6px !important; }
/* Livraison */
.cfgv2 .livr-price { margin-top: 6px !important; }
.cfgv2 .livr-acc { margin-bottom: 20px !important; margin-top: 22px !important; }
.cfgv2 .livr-acc-cards { margin-top: 6px !important; }
.cfgv2 .livr-sticky { margin-bottom: 16px !important; }
.cfgv2 .livr-choice-eta { margin-top: 2px !important; }
.cfgv2 .livr-urgency { margin-bottom: 16px !important; }
.cfgv2 .livr-hero { margin-bottom: 22px !important; }
.cfgv2 .livr-hero-head { margin-bottom: 12px !important; }
.cfgv2 .livr-hero-top { margin-top: 4px !important; }
.cfgv2 .livr-hero-eta { margin-bottom: 6px !important; }
.cfgv2 .livr-hero-confidence { margin-bottom: 14px !important; }
.cfgv2 .livr-social { margin-top: 12px !important; }
.cfgv2 .livr-card-cta { margin-top: 6px !important; }
.cfgv2 .livr-acc-help { margin-top: 12px !important; }
.cfgv2 .livr-acc-help summary { padding: 8px 0 !important; }
.cfgv2 .livr-acc-help p { margin: 6px 0 !important; }
.cfgv2 .livr-compare { margin-top: 20px !important; }
.cfgv2 .livr-faq { margin-top: 18px !important; }
.cfgv2 .livr-faq-title { margin-bottom: 8px !important; }
.cfgv2 .livr-faq-item { margin-bottom: 8px !important; }
.cfgv2 .livr-card-note { font-size: 12px; color: var(--muted); font-style: italic; margin: 6px 0 0 !important; }
/* Encart explicatif des frais logistiques soubassements (US6). */
.cfgv2 .livr-logi { border: 1px solid var(--line); border-radius: 12px; background: var(--green-light) !important; padding: 14px 16px !important; margin: 16px 0 !important; }
.cfgv2 .livr-logi-head { font-size: 14px; font-weight: 800; color: var(--green-dark); margin: 0 0 6px !important; }
.cfgv2 .livr-logi-p { font-size: 13px; color: var(--ink); margin: 0 0 8px !important; line-height: 1.5; }
.cfgv2 .livr-logi-list { margin: 0 0 8px !important; padding: 0 0 0 18px !important; }
.cfgv2 .livr-logi-list li { font-size: 12.5px; color: var(--ink); margin: 0 0 5px !important; line-height: 1.45; }
.cfgv2 .livr-logi-note { font-size: 11.5px; color: var(--muted); font-style: italic; margin: 0 !important; line-height: 1.4; }
/* Jauge « livraison offerte » (US7) — chariot embarqué. */

/* ============================================================================
   Harmonisation multi-etapes avec la charte de l'etape « Couleur de votre cloture »
   Etapes ciblees : 18, 36, 19, 20, 21, 22, 6, 15, 27 + sous-etapes associees.
   ============================================================================ */

.cfgv2 .step[data-step="18"] .step-title,
.cfgv2 .step[data-step="36"] .step-title,
.cfgv2 .step[data-step="19"] .step-title,
.cfgv2 .step[data-step="20"] .group-title,
.cfgv2 .step[data-step="21"] .group-title,
.cfgv2 .step[data-step="22"] .group-title,
.cfgv2 .step[data-step="15"] .fin-q-title,
.cfgv2 .step[data-step="27"] .fin-q-title {
  font-weight: 800;
  letter-spacing: -.01em;
}

.cfgv2 .step[data-step="20"] .portillon-block,
.cfgv2 .step[data-step="21"] .portillon-block,
.cfgv2 .step[data-step="22"] .portillon-block,
.cfgv2 .step[data-step="15"] .fin-cards,
.cfgv2 .step[data-step="27"] .card-grid--delai {
  margin-top: 10px !important;
}

/* Choix horizontaux premium (meme logique visuelle que .color-cards--horizontal). */
.cfgv2 .card-grid--choice-h {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cfgv2 .card-grid--choice-h .card {
  position: relative;
  width: 100% !important;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 124px;
  padding: 0 !important;
  text-align: left;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--white) !important;
  box-shadow: 0 2px 8px rgba(20,30,60,.06);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .12s ease;
}
.cfgv2 .card-grid--choice-h .card:not(.selected):hover {
  transform: translateY(-2px);
  border-color: var(--state-hover-line);
  box-shadow: 0 8px 18px rgba(20,30,60,.10);
}
.cfgv2 .card-grid--choice-h .card:active { transform: scale(.995); }
.cfgv2 .card-grid--choice-h .card .thumb {
  position: relative;
  flex: 0 0 38%;
  max-width: 176px;
  height: auto;
  min-height: 124px;
  border-radius: 0;
  margin: 0 !important;
  align-self: stretch;
}
.cfgv2 .card-grid--choice-h .card .thumb.thumb--cross {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #8ba0bc;
  background: #eef2f8 !important;
}
.cfgv2 .card-grid--choice-h .card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cfgv2 .card-grid--choice-h .card .card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 14px 54px 14px 16px !important;
}
.cfgv2 .card-grid--choice-h .card .card-name {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.22;
}
.cfgv2 .card-grid--choice-h .card .card-desc {
  margin: 2px 0 0 !important;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  font-style: italic;
}
.cfgv2 .card-grid--choice-h .card .card-badge {
  align-self: flex-start;
  margin: 0 0 4px !important;
}

/* Cercle de selection a droite (comme la charte couleur). */
.cfgv2 .card-grid--choice-h .card::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #cfd8e6;
  background: #fff;
  box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease;
}
.cfgv2 .card-grid--choice-h .card.selected {
  border-color: var(--green);
  background: #eef3ff !important;
  box-shadow: 0 0 0 1px var(--green);
}
.cfgv2 .card-grid--choice-h .card.selected::before {
  content: "\2713";
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 0 3px #fff;
  animation: cfgv2-pop .2s ease;
}
.cfgv2 .card-grid--choice-h .card.selected::after { content: none !important; }

/* Variante sans vignette (etapes 15/27) : conserve la grammaire visuelle horizontale. */
.cfgv2 .step[data-step="15"] .card-grid--choice-h .card,
.cfgv2 .step[data-step="27"] .card-grid--choice-h .card {
  min-height: 98px;
}
.cfgv2 .step[data-step="15"] .card-grid--choice-h .card .card-body,
.cfgv2 .step[data-step="27"] .card-grid--choice-h .card .card-body {
  padding-left: 16px !important;
}

/* Etape 6 : renforce la proximite avec la charte couleur (cartes et panneaux). */
.cfgv2 .step[data-step="6"] .addon-card .addon-body,
.cfgv2 .step[data-step="6"] .addon-premium-body {
  gap: 4px;
}
.cfgv2 .step[data-step="6"] .addon-card .addon-name,
.cfgv2 .step[data-step="6"] .addon-premium-name {
  font-size: 16px;
  font-weight: 800;
}

@media (max-width: 700px) {
  .cfgv2 .card-grid--choice-h .card { min-height: 116px; }
  .cfgv2 .card-grid--choice-h .card .thumb { max-width: 40%; min-height: 116px; }
  .cfgv2 .card-grid--choice-h .card .card-body { padding: 12px 50px 12px 14px !important; }
  .cfgv2 .card-grid--choice-h .card .card-name { font-size: 17px; }
}

/* ---- Étape 18 — Portillons (port18) : charte graphique premium ---- */
/* Selected: bleu cohérent avec charte #2b5cff (override du green par défaut). */
.cfgv2 .step[data-step="18"] .card-grid--choice-h .card.selected { border-color: #2b5cff; box-shadow: 0 0 0 1px rgba(43,92,255,.3); background: #f6f9ff !important; }
.cfgv2 .step[data-step="18"] .card-grid--choice-h .card.selected::before { content: "\2713"; color: #fff; font-size: 14px; font-weight: 800; line-height: 22px; text-align: center; border-color: #2b5cff; background: #2b5cff; box-shadow: 0 0 0 3px #fff; animation: cfgv2-pop .2s ease; }
/* Wrapper pour badge "⭐ Recommandé" flottant au-dessus de la carte. */
.cfgv2 .port18-card-wrap { position: relative; margin-top: 0; }
.cfgv2 .port18-card-wrap .card { width: 100% !important; }
.cfgv2 .port18-reco-badge { position: static; display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; padding: 3px 10px; margin-bottom: 5px; background: #2b5cff; color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; pointer-events: none; line-height: 1.4; }
/* Swatches coloris dans la carte "Ajouter". */
.cfgv2 .port18-swatches { display: flex; align-items: center; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.cfgv2 .port18-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.15); display: inline-block; flex-shrink: 0; }
.cfgv2 .port18-swatch-label { font-size: 12px; color: var(--muted); font-weight: 600; }
/* Vos avantages. */
.cfgv2 .port18-avantage { margin-top: 14px!important; padding: 16px!important; background: #eef5ff !important; border: 1px solid #d0e3ff; border-radius: 18px; }
.cfgv2 .port18-avantage-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cfgv2 .port18-avantage-ic { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; font-size: 18px; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.cfgv2 .port18-avantage-title { font-size: 16px; font-weight: 900; color: #1f3f8f; }
.cfgv2 .port18-avantage-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
.cfgv2 .port18-avantage-item { font-size: 12.5px; font-weight: 600; color: #334766; text-align: center; line-height: 1.4; }
/* Conseil de nos experts. */
.cfgv2 .port18-conseil { width: 100%; margin-top: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; background: #fffbf0 !important; border: 1px solid #f0d98c; border-radius: 18px; text-align: left; cursor: pointer; font: inherit; box-shadow: 0 2px 8px rgba(200,160,0,.08); transition: box-shadow .15s, transform .12s; }
.cfgv2 .port18-conseil:hover { box-shadow: 0 6px 16px rgba(200,160,0,.14); transform: translateY(-1px); }
.cfgv2 .port18-conseil-ic { font-size: 26px; flex-shrink: 0; }
.cfgv2 .port18-conseil-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cfgv2 .port18-conseil-title { font-size: 15px; font-weight: 800; color: #1a1a1a; display: block; }
.cfgv2 .port18-conseil-desc { font-size: 13px; color: var(--muted); line-height: 1.45; display: block; }
.cfgv2 .port18-conseil-arrow { font-size: 20px; color: var(--muted); flex-shrink: 0; }
/* Besoin d'aide ? */
.cfgv2 .port18-help { width: 100%; margin-top: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; background: #fff !important; border: 1px solid var(--line); border-radius: 18px; text-align: left; cursor: pointer; font: inherit; box-shadow: 0 2px 8px rgba(20,30,60,.05); transition: box-shadow .15s, transform .12s; }
.cfgv2 .port18-help:hover { box-shadow: 0 6px 16px rgba(20,30,60,.10); transform: translateY(-1px); }
.cfgv2 .port18-help-ic { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: #f3f5f9; border: 1.5px solid var(--line); border-radius: 50%; font-size: 15px; font-weight: 900; color: var(--ink); flex-shrink: 0; }
.cfgv2 .port18-help-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cfgv2 .port18-help-title { font-size: 15px; font-weight: 800; color: var(--ink); display: block; }
.cfgv2 .port18-help-desc { font-size: 13px; color: var(--muted); display: block; }
.cfgv2 .port18-help-arrow { font-size: 20px; color: var(--muted); flex-shrink: 0; }

/* ---- Étape 32 — Type de pose composite : charte graphique premium ---- */
/* Badge : bleu coh\u00e9rent charte. */
.cfgv2 .step[data-step="32"] .soub-type-badge { background: #2b5cff !important; }
/* Selected state : bleu. */
.cfgv2 .step[data-step="32"] .soub-type-card.selected { border-color: #2b5cff; box-shadow: 0 0 0 1px rgba(43,92,255,.3); background: #f6f9ff; }
.cfgv2 .step[data-step="32"] .soub-type-card.selected .soub-type-check { border-color: #2b5cff; background: #2b5cff !important; }
/* card-desc : sous-titre gras-italique sur sa propre ligne, texte normal en dessous. */
.cfgv2 .step[data-step="32"] .soub-type-card .card-desc { font-style: normal; font-size: 12.5px; line-height: 1.5; }
.cfgv2 .step[data-step="32"] .soub-type-card .card-desc strong { font-style: italic; font-weight: 800; display: block; margin-bottom: 3px; font-size: 13px; color: var(--ink); }
/* Coloris : label "Coloris disponibles" en ligne pleine, points en dessous. */
.cfgv2 .step[data-step="32"] .pose-colors { flex-wrap: wrap; gap: 5px 6px; margin-top: 10px !important; }
.cfgv2 .step[data-step="32"] .pose-colors-l { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--muted); }
.cfgv2 .step[data-step="32"] .pose-color-dot { width: 22px !important; height: 22px !important; }
/* Prix hero value : grand + bleu. */
.cfgv2 .step[data-step="32"] .soub-type-card .card-price { margin-top: 10px !important; display: flex; flex-direction: column; gap: 1px; }
.cfgv2 .step[data-step="32"] .soub-type-card .card-total { font-size: 19px; font-weight: 900; color: #2b5cff; line-height: 1.15; }
.cfgv2 .step[data-step="32"] .soub-type-card .card-total small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.cfgv2 .step[data-step="32"] .soub-type-card .card-unit { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 0 !important; }

.cfgv2 .livr-free { border: 1px solid var(--green); border-radius: 12px; background: var(--green-light) !important; padding: 14px 16px !important; margin: 14px 0 !important; }
.cfgv2 .livr-free--ok { background: #e8f7ee !important; }
.cfgv2 .livr-free-head { font-size: 14px; font-weight: 800; color: var(--green-dark); margin: 0 0 8px !important; line-height: 1.4; }
.cfgv2 .livr-free-p { font-size: 13px; color: var(--ink); margin: 0 0 8px !important; line-height: 1.5; }
.cfgv2 .livr-free-bar { position: relative; height: 12px; border-radius: 6px; background: #d7dce6 !important; overflow: hidden; margin: 0 0 4px !important; }
.cfgv2 .livr-free-bar span { display: block; height: 100%; background: var(--green) !important; border-radius: 6px; transition: width .4s ease; }
.cfgv2 .livr-free-pct { font-size: 12px; font-weight: 800; color: var(--green-dark); text-align: right; margin: 0 !important; }
.cfgv2 .livr-free-sub { font-size: 11.5px; color: var(--muted); margin: 6px 0 0 !important; line-height: 1.4; }
/* US9 — Cartes de sélection d'agence (retrait). */
.cfgv2 .ag-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 10px 0 !important; }
.cfgv2 .ag-card { position: relative; display: flex; flex-direction: column; text-align: left; font: inherit; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white) !important; overflow: hidden; cursor: pointer; padding: 0 !important; transition: border-color .15s, box-shadow .15s, transform .12s ease; }
.cfgv2 .ag-card:hover { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-2px); }
.cfgv2 .ag-card.is-selected { border-color: var(--green); box-shadow: 0 0 0 2px var(--state-selected); }
.cfgv2 .ag-card--reco { border-color: var(--green); }
.cfgv2 .ag-card-flag { position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--green) !important; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 9px !important; border-radius: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.cfgv2 .ag-card-photo { display: flex; align-items: flex-end; min-height: 74px; padding: 10px 12px !important; background: linear-gradient(135deg, var(--green-dark), var(--green)) !important; }
.cfgv2 .ag-card-photo-city { color: #fff; font-size: 18px; font-weight: 900; letter-spacing: .3px; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.cfgv2 .ag-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px !important; }
.cfgv2 .ag-card-name { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.cfgv2 .ag-card-addr { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cfgv2 .ag-card-rows { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 0 !important; }
.cfgv2 .ag-card-row { font-size: 12px; color: var(--ink); line-height: 1.4; }
.cfgv2 .ag-card-status { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.cfgv2 .ag-card-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #d33 !important; flex: none; }
.cfgv2 .ag-card-status.is-open { color: #1a7a3a; }
.cfgv2 .ag-card-status.is-open::before { background: #1a8f42 !important; }
.cfgv2 .ag-card-stock { color: var(--green-dark); font-weight: 600; }
.cfgv2 .ag-card-cta { margin: 10px 0 0 !important; text-align: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--green) !important; border-radius: 22px; padding: 9px 12px !important; }
.cfgv2 .ag-card:not(.is-selected) .ag-card-cta { background: #fff !important; color: var(--green-dark); border: 1.5px solid var(--green); }
@media (max-width: 560px) { .cfgv2 .ag-cards { grid-template-columns: 1fr; } }
/* US11 — Offre « tarière week-end offerte ». */
.cfgv2 .ag-step-flag--offer { background: #b8860b !important; color: #fff !important; }
.cfgv2 .ag-tar-offer { border: 1px solid #d4a017; border-radius: 12px; background: #fff7e0 !important; padding: 12px 14px !important; margin: 0 0 12px !important; }
.cfgv2 .ag-tar-offer-t { font-size: 14px; font-weight: 800; color: #8a6d00; margin: 0 0 4px !important; }
.cfgv2 .ag-tar-offer-p { font-size: 12.5px; color: var(--ink); margin: 0 !important; line-height: 1.45; }
.cfgv2 .agsvc-dur--free { border-color: #d4a017 !important; }
.cfgv2 .agsvc-dur-free { color: #8a6d00; font-weight: 800; }
/* US1 récap — conteneur du récapitulatif complet dans l'étape Récapitulatif. */
.cfgv2 .recap-full { max-width: 760px; margin: 8px auto 18px !important; }
.cfgv2 .recap-full .rc-sec,
.cfgv2 .recap-full .rc-hero,
.cfgv2 .recap-full .rc-preview,
.cfgv2 .recap-full .rc-alert { margin-left: 0 !important; margin-right: 0 !important; }
/* US2 récap — contrôle de quantité (+/-) sur les lignes accessoires éditables. */
.cfgv2 .bom-qty { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0 !important; }
.cfgv2 .bom-qty-val { min-width: 28px; text-align: center; font-weight: 800; font-size: 14px; color: var(--ink); }
/* ===== US5 — Refonte UX du formulaire « Mes informations » ===== */
.cfgv2 .coords-fs { max-width: 880px; margin: 0 auto !important; }
.cfgv2 .coords-fs .fs-title { font-size: 24px; font-weight: 900; color: var(--ink); margin: 0 0 4px !important; }
.cfgv2 .coords-fs .fs-subtitle { font-size: 14px; color: var(--muted); font-weight: 600; margin: 0 0 22px !important; line-height: 1.5; }
.cfgv2 .coords-fs .req-star { color: #e11d48; font-weight: 800; }
.cfgv2 .coords-fs .row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0 !important; }
.cfgv2 .coords-fs .col-md-6 { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; }
.cfgv2 .coords-fs .form-floating { display: flex; flex-direction: column; margin: 0 0 18px !important; }
.cfgv2 .coords-fs .form-floating > label {
  position: static !important; order: -1; height: auto !important; width: auto !important;
  padding: 0 !important; margin: 0 0 7px !important; transform: none !important; opacity: 1 !important;
  pointer-events: auto !important; font-size: 13px !important; font-weight: 700 !important; color: var(--ink) !important;
}
.cfgv2 .coords-fs [requiredinput] + label::after { content: " *"; color: #e11d48; font-weight: 800; }
.cfgv2 .coords-fs .form-control,
.cfgv2 .coords-fs .form-select {
  width: 100%; min-height: 52px; padding: 14px 16px !important; border: 1.5px solid var(--line) !important;
  border-radius: 12px !important; font-size: 15px !important; color: var(--ink); background: var(--white) !important;
  transition: border-color .15s, box-shadow .15s;
}
.cfgv2 .coords-fs .form-control::placeholder { color: #aab0b8 !important; opacity: 1 !important; }
.cfgv2 .coords-fs .form-control:hover,
.cfgv2 .coords-fs .form-select:hover { border-color: var(--muted) !important; }
.cfgv2 .coords-fs .form-control:focus,
.cfgv2 .coords-fs .form-select:focus {
  outline: none !important; border-color: var(--green) !important;
  box-shadow: 0 0 0 3px var(--state-selected, rgba(26, 60, 220, .18)) !important;
}
@media (max-width: 640px) {
  .cfgv2 .coords-fs { max-width: 100%; }
  .cfgv2 .coords-fs .row { grid-template-columns: 1fr; gap: 0; }
}
/* US6 — Validation temps réel + combobox recherchable */
.cfgv2 .coords-fs .field-error { font-size: 12px; color: #e11d48; font-weight: 600; margin: 6px 0 0 !important; line-height: 1.4; }
.cfgv2 .coords-fs .form-floating.has-error .form-control,
.cfgv2 .coords-fs .form-floating.has-error .form-select,
.cfgv2 .coords-fs .form-floating.has-error .sselect-input {
  border-color: #e11d48 !important; box-shadow: 0 0 0 3px rgba(225, 29, 72, .14) !important;
}
.cfgv2 .coords-fs .input-invalid { border-color: #e11d48 !important; }
.cfgv2 .sselect { position: relative; }
.cfgv2 .sselect-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; background: var(--white) !important; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.14); max-height: 260px; overflow: auto; }
.cfgv2 .sselect-opt { padding: 10px 14px !important; font-size: 14px; color: var(--ink); cursor: pointer; }
.cfgv2 .sselect-opt:hover, .cfgv2 .sselect-opt.is-active { background: var(--green-light) !important; }
.cfgv2 .sselect-opt.is-sel { font-weight: 800; color: var(--green-dark); }
.cfgv2 .sselect-empty { padding: 12px 14px !important; color: var(--muted); font-size: 13px; }
/* Occultation (récap + sélecteur rapide + longueur) */
.cfgv2 .occult-recap { margin-bottom: 18px !important; }
.cfgv2 .occult-recap-price { margin-top: 6px !important; }
.cfgv2 .occult-quick { margin: -6px 0 18px !important; }
.cfgv2 .occult-quick-l { margin-bottom: 8px !important; }
.cfgv2 .occlen-ref { margin: 0 0 8px !important; }
.cfgv2 .occlen-warn { margin-top: 10px !important; }
/* Poteaux (assistant / schéma / pastilles hauteur) */
.cfgv2 .pot-assure strong { margin-bottom: 4px !important; }
.cfgv2 .pot-reco2-schema { padding: 6px !important; background: rgb(255, 255, 255) !important; }
.cfgv2 .pan-hrow-badge { padding: 2px 8px !important; background: var(--green) !important; margin-left: 4px !important; }
.cfgv2 .pan-hrow-delta small { margin-top: 1px !important; }
.cfgv2 .pan-reco-tip strong { margin-bottom: 4px !important; }
/* Pose (encart pro) */
.cfgv2 .pose-encart-head { margin-bottom: 6px !important; }
.cfgv2 .pose-encart-p { margin: 0 0 10px !important; }
/* Finaliser */
.cfgv2 .fin-q-head { margin-bottom: 12px !important; }
.cfgv2 .fin-optional { margin-left: 6px !important; }
.cfgv2 .reassure-note strong { margin-bottom: 2px !important; }
/* Navigation + récap projet + BOM */
.cfgv2 .nav-footer { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
.cfgv2 .nav-inner { margin: 0 auto !important; }
.cfgv2 .project { margin: 0 auto !important; }
.cfgv2 .bom-attrs { margin-top: 3px !important; }
.cfgv2 .bom-attrs .color-circle { margin-right: 4px !important; }
.cfgv2 .cfg-row { padding-bottom: 10px !important; }
.cfgv2 .cfg-defs dd { margin: 0 0 4px !important; }
.cfgv2 .btn-block { margin-top: 16px !important; }
.cfgv2 .info-btn--title { margin-left: 8px !important; }
.cfgv2 .info-tip strong { margin-bottom: 4px !important; }
/* Steppers de quantité / hauteur */
.cfgv2 .qty-value { padding: 11px 18px !important; }
.cfgv2 .qty-stepper--compact .qty-value { padding: 9px 16px !important; }
.cfgv2 .qty-field .qty-unit { padding: 0 12px 0 8px !important; margin-left: 4px !important; }
.cfgv2 .final-height-note { margin-top: 2px !important; }
.cfgv2 .soub-info .soub-cardprice { margin-top: 2px !important; }
/* Étape Coordonnées (formulaire) */
.cfgv2 .step .form-floating > label { margin-bottom: 6px !important; }
.cfgv2 .step .captcha { margin-top: 18px !important; }
/* Récap serveur (hero + alerte) */
.cfgv2 .rc-hero { background: linear-gradient(135deg, var(--green-dark), var(--green)) !important; }
.cfgv2 .rc-alert p { margin: 0 0 6px !important; }
/* Récap projet (dashboard) — le reset #msform écrase margin/padding : on ré-assure
   toutes les respirations internes en !important (hero, sections, lignes, alertes). */
.cfgv2 .rc-hero { margin: -4px -2px 14px !important; padding: 14px 16px !important; }
.cfgv2 .rc-hero-title { margin-bottom: 10px !important; }
.cfgv2 .rc-hero-note { margin-top: 10px !important; }
.cfgv2 .rc-preview { margin: 0 0 16px !important; padding: 8px !important; }
.cfgv2 .rc-sec { margin-bottom: 14px !important; padding: 12px 14px !important; }
.cfgv2 .rc-sec-head { margin-bottom: 8px !important; padding-bottom: 8px !important; }
.cfgv2 .rc-edit { padding: 4px 12px !important; }
.cfgv2 .rc-r { padding: 5px 0 !important; }
.cfgv2 .rc-adapt-list { margin: 4px 0 0 !important; padding-left: 18px !important; }
.cfgv2 .rc-adapt-list li { margin-bottom: 4px !important; }
.cfgv2 .rc-hval { padding: 0 4px !important; }
.cfgv2 .rc-price .rc-total { margin-top: 6px !important; padding-top: 10px !important; }
.cfgv2 .rc-check { margin: 0 !important; padding: 0 !important; }
.cfgv2 .rc-check li { padding-left: 26px !important; }
.cfgv2 .rc-alert { margin-bottom: 14px !important; padding: 12px 14px !important; }
.cfgv2 .rc-alert-head { margin-bottom: 6px !important; }
.cfgv2 .rc-title { margin-bottom: 8px !important; }
.cfgv2 .rc-row { padding: 5px 0 !important; }
.cfgv2 .rc-subtotal { margin: 8px 0 12px !important; padding: 12px 14px !important; }
.cfgv2 .rc-note { margin: 0 0 14px !important; }
@media (max-width: 560px) {
  .cfgv2 .pot-reco2-schema { margin: 0 auto !important; }
}

/* ================================================================
   US-UI-XXX — Mode Saisie mobile : masque uniquement le footer
   pendant la saisie d'un champ pour maximiser l'espace visible.
   Déclenché par la classe .editing ajoutée au JS sur focus/blur.
   ================================================================ */

/* Transition fluide sur le footer — TOUJOURS active pour un retour en douceur */
.cfgv2-fixed-host .nav-footer {
  transition: opacity 220ms ease-out, transform 220ms ease-out;
  will-change: opacity, transform;
}

/* Footer uniquement : glisse vers le bas (position:fixed → translateY n'affecte pas le flux) */
.cfgv2-fixed-host.editing .nav-footer {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

/* US-UI-XXX – Footer différé : masqué au chargement de chaque étape (mobile),
   réapparaît après la première interaction (slide-up + fade). */
.cfgv2-fixed-host.footer-deferred .nav-footer {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

/* Champ actif : bordure primaire + ombre de focus */
.cfgv2.editing input:focus,
.cfgv2.editing textarea:focus,
.cfgv2.editing select:focus {
  border-color: #2b5cff !important;
  box-shadow: 0 0 0 3px rgba(43,92,255,.18) !important;
  outline: none;
}


/* Etape Longueur a occulter : meme langage visuel que l'etape Longueur du projet */
.cfgv2 .cfg-section--occlen .qty-stepper--hero { max-width: 520px; }
.cfgv2 .cfg-section--occlen .qty-stepper--hero .qty-field--length {
  flex: 1 1 auto; display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; justify-content: center;
  gap: 6px; min-height: 64px;
}
.cfgv2 .cfg-section--occlen .qty-stepper--hero .qty-field--length input {
  width: 5ch; min-width: 0; text-align: center; padding: 0 !important;
  font-size: 34px; font-weight: 800; color: var(--green); letter-spacing: -.6px;
}
.cfgv2 .cfg-section--occlen .qty-stepper--hero .qty-field--length .qty-unit {
  margin: 0 !important; padding: 0 !important; font-size: 24px; font-weight: 800; color: var(--green-dark); line-height: 1;
}

/* ================================================================
   US-CONF-UX-021 — Widget aide integre au flux des etapes (non flottant)
   Le bouton #help-widget est deplace en JS dans chaque step.step.
   A l'interieur d'un .step il passe en position static : card blanche.
   ================================================================ */

/* Neutralise le fixed + pill du widget quand il est place dans un step */
.cfgv2 .step .help-widget {
  position: static !important;
  z-index: auto !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 64px !important;
  margin-top: 20px !important;
  padding: 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: var(--white) !important;
  box-shadow: 0 2px 8px rgba(20,30,60,.06) !important;
  color: var(--ink) !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

/* Icone : fond bleu pale */
.cfgv2 .step .help-widget .help-widget-ic {
  flex: none !important;
  background: #eef3ff !important;
  color: var(--green) !important;
  width: 40px !important; height: 40px !important; font-size: 18px !important;
}

/* Bloc titre + sous-titre */
.cfgv2 .step .help-widget .help-widget-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}

.cfgv2 .step .help-widget .help-widget-txt {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  white-space: normal !important;
  overflow: visible !important;
}

.cfgv2 .step .help-widget .help-widget-sub {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  line-height: 1.4 !important;
}

/* Chevron */
.cfgv2 .step .help-widget .help-widget-arrow {
  flex: none !important;
  font-size: 24px !important;
  color: var(--muted) !important;
}

/* ================================================================
   STEP 6 — Redesign produits additionnels (maquette premium)
   ================================================================ */

/* --- Hero header --- */
.cfgv2 .addon-hero {
  text-align: center;
  margin: 0 0 20px !important;
}
.cfgv2 .addon-hero-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 8px !important;
  line-height: 1.1;
}
.cfgv2 .addon-hero-badge {
  display: inline-block;
  padding: 4px 14px !important;
  background: #eef3ff !important;
  color: #1a3cdc;
  border: 1px solid #c5d4f8;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cfgv2 .addon-hero-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 0 !important;
}

/* --- Benefit pills (horizontal) --- */
.cfgv2 .install-scan-card {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
}
.cfgv2 .install-scan-ic {
  flex: none;
  font-size: 22px;
  line-height: 1;
}
.cfgv2 .install-scan-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cfgv2 .install-scan-k {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.cfgv2 .install-scan-v {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
}

/* --- Section headers (reco / extra) --- */
.cfgv2 .addon-section-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px !important;
}
.cfgv2 .addon-section-ic {
  flex: none;
  font-size: 24px;
  line-height: 1;
  margin-top: 2px;
}
.cfgv2 .addon-section-ic--extra {
  font-size: 20px;
}
.cfgv2 .addon-section-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
  margin: 0 !important;
}
.cfgv2 .addon-section-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin: 3px 0 0 !important;
  line-height: 1.4;
}

/* --- Addon cards : nouvelle grille 1-col desktop (cartes larges 3-colonnes internes) --- */
.cfgv2 .step[data-step="6"] .addon-cards {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

/* --- Addon card : layout 3 colonnes --- */
.cfgv2 .step[data-step="6"] .addon-card {
  display: grid !important;
  grid-template-columns: 88px 1fr 130px !important;
  grid-template-rows: auto !important;
  column-gap: 14px !important;
  row-gap: 0 !important;
  align-items: start !important;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1.5px solid var(--line) !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(20,30,60,.05) !important;
  transition: border-color .15s, box-shadow .15s, opacity .15s !important;
}
.cfgv2 .step[data-step="6"] .addon-card.status-accepted {
  border-color: #1a8f42 !important;
  box-shadow: 0 0 0 3px rgba(26,143,66,.12) !important;
}
.cfgv2 .step[data-step="6"] .addon-card.status-refused {
  opacity: .5 !important;
}
.cfgv2 .step[data-step="6"] .addon-card:not(.status-accepted):not(.status-refused):hover {
  border-color: var(--state-hover-line) !important;
  box-shadow: 0 6px 18px rgba(20,30,60,.10) !important;
}

/* Column 1 : image + chip */
.cfgv2 .addon-card-side {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cfgv2 .step[data-step="6"] .addon-media {
  width: 80px !important;
  height: 80px !important;
  border-radius: 12px !important;
  flex: none !important;
  background: #f4f6f9 !important;
}
.cfgv2 .addon-chip {
  display: inline-block;
  padding: 3px 8px !important;
  background: #fff7e0 !important;
  color: #8a6100;
  border: 1px solid #e8c65b;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  text-align: center;
  line-height: 1.4;
}

/* Column 2 : content */
.cfgv2 .addon-card-body {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-right: 4px;
}
.cfgv2 .addon-card-body .addon-info {
  position: absolute;
  top: 12px;
  right: 12px;
}
.cfgv2 .step[data-step="6"] .addon-card .addon-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  padding-right: 0 !important;
  margin: 0 !important;
}
.cfgv2 .addon-unit-line {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin: 2px 0 4px !important;
}
.cfgv2 .addon-card-body .addon-reason {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 !important;
}
.cfgv2 .step[data-step="6"] .addon-breakdown {
  margin-top: 6px;
}

/* Column 3 : controls (stepper + price + actions) */
.cfgv2 .addon-card-ctrl {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.cfgv2 .addon-card-ctrl .qty-stepper--addon {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--line) !important;
  border-radius: 999px !important;
  overflow: hidden;
  background: #fff !important;
  width: 100%;
}
.cfgv2 .addon-card-ctrl .qty-stepper--addon .qty-btn {
  width: 32px;
  height: 34px;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  flex: none;
  cursor: pointer;
}
.cfgv2 .addon-card-ctrl .qty-stepper--addon .qty-btn:hover {
  background: #f4f6f8 !important;
}
.cfgv2 .addon-card-ctrl .qty-stepper--addon input[type="number"] {
  flex: 1;
  width: 36px !important;
  min-width: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.cfgv2 .addon-subtotal-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.cfgv2 .addon-subtotal-val {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
}
.cfgv2 .addon-subtotal-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.cfgv2 .addon-card-ctrl .addon-choice {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.cfgv2 .addon-card-ctrl .addon-accept,
.cfgv2 .addon-card-ctrl .addon-refuse {
  width: 38px;
  height: 38px;
  border-radius: 10px !important;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1.5px solid;
  background: #fff !important;
  transition: background .15s, color .15s, border-color .15s;
}
.cfgv2 .addon-card-ctrl .addon-accept {
  color: #1a8f42;
  border-color: #1a8f42;
}
.cfgv2 .addon-card-ctrl .addon-refuse {
  color: #c0392b;
  border-color: #e0c0bc;
  background: #fef5f5 !important;
}
.cfgv2 .addon-card-ctrl .addon-accept:hover { background: #1a8f42 !important; color: #fff; }
.cfgv2 .addon-card-ctrl .addon-refuse:hover { background: #c0392b !important; color: #fff; border-color: #c0392b; }
.cfgv2 .step[data-step="6"] .addon-card.status-accepted .addon-accept {
  background: #1a8f42 !important; color: #fff;
}
.cfgv2 .step[data-step="6"] .addon-card.status-refused .addon-refuse {
  background: #c0392b !important; color: #fff; border-color: #c0392b;
}

/* --- Premium card (support boite aux lettres) : blue --- */
.cfgv2 .step[data-step="6"] .addon-premium {
  border-color: #2b5cff !important;
  background: linear-gradient(180deg, #f0f4ff 0%, #fff 100%) !important;
}
.cfgv2 .step[data-step="6"] .addon-premium .addon-premium-badge {
  background: #eef3ff !important;
  color: #1a3cdc;
  border-color: #c5d4f8 !important;
}
.cfgv2 .step[data-step="6"] .addon-premium .addon-premium-price {
  color: #1a3cdc;
}
.cfgv2 .step[data-step="6"] .addon-premium .addon-premium-btn {
  background: #2b5cff !important;
}
.cfgv2 .step[data-step="6"] .addon-premium .addon-premium-btn:hover {
  background: #1a3cdc !important;
}
.cfgv2 .step[data-step="6"] .addon-premium .addon-premium-btn.is-added {
  background: #1a3cdc !important;
}
.cfgv2 .step[data-step="6"] .addon-premium .addon-premium-benefits li::before {
  color: #1a3cdc;
}

/* --- Mobile (≤ 600px) --- */
@media (max-width: 600px) {
  .cfgv2 .step[data-step="6"] .addon-card {
    grid-template-columns: 72px 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .cfgv2 .addon-card-side { grid-column: 1; grid-row: 1; }
  .cfgv2 .addon-card-body { grid-column: 2; grid-row: 1; }
  .cfgv2 .addon-card-ctrl {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--line);
    margin-top: 8px !important;
    width: 100%;
  }
  .cfgv2 .addon-card-ctrl .qty-stepper--addon { width: auto; flex: none; }
  .cfgv2 .step[data-step="6"] .addon-media { width: 64px !important; height: 64px !important; }
  .cfgv2 .install-scan-grid { grid-template-columns: 1fr !important; }
}

/* Hover */
@media (hover: hover) and (pointer: fine) {
  .cfgv2 .step .help-widget:hover {
    border-color: var(--green) !important;
    box-shadow: 0 6px 16px rgba(7,85,184,.12) !important;
    transform: none !important;
  }
}

/* ================================================================
   STEP 23 — Pose en redan : redesign mobile (SKILL.md)
   ================================================================ */

/* Label de la marche : flex column pour titre + sous-titre */
.cfgv2 .step--redan .rep-marche-l {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cfgv2 .step--redan .rep-marche-l-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-style: normal;
}

/* --- Mobile ≤560px --- */
@media (max-width: 560px) {

  /* Hero : une seule colonne, image cachée → texte pleine largeur */
  .cfgv2 .step--redan .rep-hero {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
  .cfgv2 .step--redan .rep-hero-img {
    display: none !important;
  }
  .cfgv2 .step--redan .rep-hero-title {
    font-size: 26px !important;
  }

  /* Label marche sur mobile */
  .cfgv2 .step--redan .rep-marche-l {
    font-size: 16px !important;
  }
}

/* Stepper marche : réutilise qty-stepper--hero — override des anciennes règles rep-marche-stepper */
.cfgv2 .step--redan .rep-marche-stepper {
  display: flex !important;
  align-items: stretch !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  background: var(--white) !important;
  box-shadow: 0 4px 16px rgba(20,30,60,.08) !important;
  max-width: 360px;
  overflow: hidden;
  gap: 0 !important;
}
.cfgv2 .step--redan .rep-marche-stepper .qty-btn {
  flex: 0 0 auto;
  width: 66px !important;
  height: auto !important;
  align-self: stretch !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--green) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  min-width: 0 !important;
}
.cfgv2 .step--redan .rep-marche-stepper .qty-btn:hover {
  background: #eef3ff !important;
}
/* Champ valeur marche */
.cfgv2 .step--redan .qty-field--marche {
  flex: 1 1 auto;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  border: 0 !important;
  border-left: 1px solid var(--line) !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
}
.cfgv2 .step--redan .qty-field--marche input[type="number"] {
  width: 3ch;
  min-width: 0;
  text-align: center;
  padding: 0 !important;
  font-size: 34px;
  font-weight: 800;
  color: var(--green);
  -webkit-text-fill-color: var(--green);
  letter-spacing: -.6px;
  border: 0;
  background: transparent;
}
.cfgv2 .step--redan .qty-field--marche .qty-unit {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px;
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1;
}

/* Stepper dans la table poteaux : touch targets ≥ 40px */
.cfgv2 .step--redan .rep-table .qty-stepper--addon .qty-btn {
  min-width: 40px !important;
  height: 40px !important;
  font-size: 18px !important;
  border-radius: 10px !important;
}
.cfgv2 .step--redan .rep-table .qty-stepper--addon input[type="number"] {
  width: 38px !important;
  font-size: 14px !important;
}

@media (max-width: 560px) {
  .cfgv2 .step--redan .rep-table .qty-stepper--addon .qty-btn {
    min-width: 44px !important;
    height: 44px !important;
  }
  .cfgv2 .step--redan .rep-table .qty-stepper--addon input[type="number"] {
    width: 40px !important;
  }

  /* Action buttons : labels plus courts via ellipsis */
  .cfgv2 .step--redan .rep-act-body {
    font-size: 13px !important;
  }
  .cfgv2 .step--redan .rep-act-body small {
    font-size: 11px !important;
  }
}

/* Conseil : summary collapsible */
.cfgv2 .step--redan details.rep-conseil {
  padding: 0 !important;
  cursor: default;
}
.cfgv2 .step--redan .rep-conseil-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px !important;
  list-style: none;
  cursor: pointer;
  border-radius: 16px;
  -webkit-user-select: none;
  user-select: none;
}
.cfgv2 .step--redan details.rep-conseil[open] .rep-conseil-summary {
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid #f0d38f;
}
.cfgv2 .step--redan .rep-conseil-summary::-webkit-details-marker { display: none; }
.cfgv2 .step--redan .rep-conseil-summary::marker { display: none; }
.cfgv2 .step--redan .rep-conseil-summary .rep-conseil-ic {
  font-size: 20px;
  flex: none;
}
.cfgv2 .step--redan .rep-conseil-summary > span:nth-child(2) {
  flex: 1;
  font-size: 15px;
  font-weight: 900;
  color: #92400e;
}
.cfgv2 .step--redan .rep-conseil-arrow {
  flex: none;
  font-size: 20px;
  font-weight: 800;
  color: #92400e;
  transition: transform .2s ease;
}
.cfgv2 .step--redan details.rep-conseil[open] .rep-conseil-arrow {
  transform: rotate(90deg);
}
.cfgv2 .step--redan details.rep-conseil .rep-conseil-inner {
  padding: 0 16px 16px !important;
}
.cfgv2 .step--redan details.rep-conseil .rep-conseil-body {
  flex: 1;
  min-width: 0;
}

/* ================================================================
   STEP 23 — Tableau poteaux : card layout mobile portrait
   Remplace le layout stacked précédent — chaque ligne devient une carte.
   ================================================================ */
@media (max-width: 560px) {

  /* Conteneur : plus de bordure globale, les cartes ont leur propre bord.
     overflow: hidden coupe les débordements horizontaux du <table>. */
  .cfgv2 .step--redan .rep-table-wrap {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Table et tbody → flex column, contraints à 100% du wrapper */
  .cfgv2 .step--redan .rep-table,
  .cfgv2 .step--redan .rep-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Thead masqué */
  .cfgv2 .step--redan .rep-table thead { display: none !important; }

  /* Chaque tr = une carte */
  .cfgv2 .step--redan .rep-table tr,
  .cfgv2 .step--redan .rep-table tr:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 1.5px solid var(--line) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    background: #fff !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border-bottom: 1.5px solid var(--line) !important;
  }
  .cfgv2 .step--redan .rep-table tr.rep-row-reco {
    border-color: #2b5cff !important;
    background: #f6f9ff !important;
  }
  .cfgv2 .step--redan .rep-table tr.rep-row-reco td:first-child {
    border-left: 0 !important;
  }

  /* Toutes les cellules → flex row, contraintes à 100% de la carte */
  .cfgv2 .step--redan .rep-table td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 0 !important;
    border: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hauteur : titre proéminent de la carte */
  .cfgv2 .step--redan .rep-table .rep-h {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--ink) !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding-bottom: 10px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  /* Cellule quantité : stepper pleine largeur */
  .cfgv2 .step--redan .rep-table .rep-q {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .cfgv2 .step--redan .rep-table .rep-q::before {
    content: "Quantité" !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    display: block !important;
  }
  .cfgv2 .step--redan .rep-table .qty-stepper--addon {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;   /* écrase le flex: none global */
    align-self: stretch !important;
    margin: 0 !important;
    display: flex !important;
    border: 1.5px solid var(--line) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
    gap: 0 !important;
  }
  .cfgv2 .step--redan .rep-table .qty-stepper--addon .qty-btn {
    flex: 0 0 52px !important;
    min-width: 52px !important;
    height: 48px !important;
    font-size: 22px !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: #f8faff !important;
  }
  .cfgv2 .step--redan .rep-table .qty-stepper--addon .qty-btn:active {
    background: #eef3ff !important;
  }
  .cfgv2 .step--redan .rep-table .qty-stepper--addon input[type="number"] {
    flex: 1 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    text-align: center !important;
    width: auto !important;
    min-width: 0 !important;
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
    opacity: 1 !important;
    border: 0 !important;
    border-left: 1.5px solid var(--line) !important;
    border-right: 1.5px solid var(--line) !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* Marge de scellement */
  .cfgv2 .step--redan .rep-table .rep-marge {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding-top: 8px !important;
  }
  .cfgv2 .step--redan .rep-table .rep-marge::before {
    content: "Marge de scellement" !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
  }
  .cfgv2 .step--redan .rep-table .rep-marge-v {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--ink) !important;
  }
  .cfgv2 .step--redan .rep-gauge {
    width: 100% !important;
    height: 6px !important;
    margin-top: 2px !important;
    border-radius: 999px !important;
  }

  /* Compatibilité : pill alignée à gauche */
  .cfgv2 .step--redan .rep-table .rep-compat {
    justify-content: flex-start !important;
    padding-top: 2px !important;
    padding-bottom: 4px !important;
  }

  /* Sous-total : petit, aligné à droite */
  .cfgv2 .step--redan .rep-table .rep-sub {
    font-size: 12px !important;
    color: var(--muted) !important;
    justify-content: flex-end !important;
    padding-top: 2px !important;
  }
  .cfgv2 .step--redan .rep-table .rep-sub::before {
    content: "Sous-total : " !important;
    font-weight: 600 !important;
  }
}

/* ================================================================
   STEP 38 — Mode de livraison : choix Me faire livrer / Retirer en agence
   Cartes horizontales, même style que soubassement (soub-presence-card).
   ================================================================ */
.cfgv2 .livr-mode-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cfgv2 .livr-mode-card {
  position: relative;
  width: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 128px;
  padding: 0 !important;
  text-align: left;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(20,30,60,.06);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.cfgv2 .livr-mode-card:not(.selected):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(20,30,60,.10);
  border-color: var(--state-hover-line);
}
.cfgv2 .livr-mode-card:active { transform: scale(.995); }

/* Swatch (emoji) */
.cfgv2 .livr-mode-swatch {
  flex: 0 0 110px;
  max-width: 110px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  background: #f0f4ff !important;
  min-height: 128px;
}
.cfgv2 .livr-mode-card--eco .livr-mode-swatch {
  background: #f0fff4 !important;
}

/* Body */
.cfgv2 .livr-mode-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 14px 12px 14px 16px !important;
}
.cfgv2 .livr-mode-badge {
  align-self: flex-start;
  margin: 0 0 4px !important;
  padding: 4px 10px !important;
  border-radius: 999px;
  background: var(--green) !important;
  color: #fff !important;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(20,30,60,.15);
}
.cfgv2 .livr-mode-card .card-name {
  padding: 0 !important;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.cfgv2 .livr-mode-sub {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.cfgv2 .livr-mode-card .card-desc {
  margin: 2px 0 0 !important;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* Pastille "-5%" pour la carte retrait agence */
.cfgv2 .livr-mode-eco-flag {
  position: absolute;
  top: 10px;
  right: 44px;
  padding: 3px 9px !important;
  border-radius: 999px;
  background: #1a8f42 !important;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .2px;
  box-shadow: 0 2px 6px rgba(26,143,66,.3);
}

/* Check indicator (round circle → checkmark when selected) */
.cfgv2 .livr-mode-check {
  flex: none;
  align-self: center;
  position: relative;
  box-sizing: border-box !important;
  width: 26px;
  height: 26px;
  margin: 0 22px 0 12px !important;
  border-radius: 50%;
  border: 2px solid #cfd8e6;
  background: #fff !important;
  transition: background .15s ease, border-color .15s ease;
}
.cfgv2 .livr-mode-card.selected {
  border-color: var(--green);
  background: #eef3ff;
  box-shadow: 0 0 0 1px var(--green);
}
.cfgv2 .livr-mode-card.selected .livr-mode-check {
  border-color: var(--green);
  background: var(--green) !important;
  box-shadow: 0 0 0 3px #fff;
}
.cfgv2 .livr-mode-card.selected .livr-mode-check::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  animation: cfgv2-pop .2s ease;
}
.cfgv2 .livr-mode-card--eco.selected {
  border-color: #1a8f42;
  box-shadow: 0 0 0 1px #1a8f42;
}
.cfgv2 .livr-mode-card--eco.selected .livr-mode-check {
  background: #1a8f42 !important;
  border-color: #1a8f42;
}

@media (max-width: 560px) {
  .cfgv2 .livr-mode-swatch {
    flex: 0 0 80px;
    max-width: 80px;
    font-size: 32px;
    min-height: 122px;
  }
  .cfgv2 .livr-mode-card { min-height: 122px; }
  .cfgv2 .livr-mode-card .card-name { font-size: 16px; }
  .cfgv2 .livr-mode-check { margin-right: 6px !important; }
  .cfgv2 .livr-mode-eco-flag { right: 36px; }
}
   Statuts selected/unselected, checkbox toggle, footer sticky.
   ================================================================ */

/* Badge de section (optionnels / recommandés) */
.cfgv2 .addon-section-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.cfgv2 .addon-section-badge--reco {
  color: #1a8f42;
  font-weight: 800;
}

/* Statut selected : pré-coché, non encore committé → bordure bleue */
.cfgv2 .step[data-step="6"] .addon-card.status-selected {
  border-color: #2b5cff !important;
  box-shadow: 0 0 0 2px rgba(43,92,255,.13) !important;
}
/* Statut unselected : décoché → grisé */
.cfgv2 .step[data-step="6"] .addon-card.status-unselected {
  opacity: .65 !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
/* Hover sur unselected : indique la sélectabilité */
.cfgv2 .step[data-step="6"] .addon-card.status-unselected:hover {
  opacity: .85 !important;
  border-color: #2b5cff !important;
}
/* Premium selected */
.cfgv2 .step[data-step="6"] .addon-premium.status-selected {
  border-color: #2b5cff !important;
  box-shadow: 0 0 0 2px rgba(43,92,255,.13) !important;
}
.cfgv2 .step[data-step="6"] .addon-premium.status-unselected {
  opacity: .7;
}

/* ---- Checkbox toggle ---- */
.cfgv2 .addon-checkbox {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: #fff !important;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, transform .1s;
  padding: 0 !important;
  flex: none;
}
.cfgv2 .addon-checkbox svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity .15s;
}
/* Coché (selected ou accepted) */
.cfgv2 .addon-checkbox.addon-checkbox--on {
  background: #2b5cff !important;
  border-color: #2b5cff;
}
.cfgv2 .addon-checkbox.addon-checkbox--on svg {
  opacity: 1;
}
/* Accepté post-validation */
.cfgv2 .step[data-step="6"] .addon-card.status-accepted .addon-checkbox {
  background: #1a8f42 !important;
  border-color: #1a8f42;
}
.cfgv2 .step[data-step="6"] .addon-card.status-accepted .addon-checkbox svg {
  opacity: 1;
}
.cfgv2 .addon-checkbox:active {
  transform: scale(.9);
}
/* Décalage du contenu de la carte pour laisser place à la checkbox absolue */
.cfgv2 .step[data-step="6"] .addon-card.status-selected .addon-card-side,
.cfgv2 .step[data-step="6"] .addon-card.status-unselected .addon-card-side,
.cfgv2 .step[data-step="6"] .addon-card.status-accepted .addon-card-side,
.cfgv2 .step[data-step="6"] .addon-card.status-refused .addon-card-side {
  padding-top: 0;
}
/* Sur mobile : décalage pour ne pas chevaucher le contenu */
@media (max-width: 560px) {
  .cfgv2 .addon-checkbox {
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
}

/* ---- Footer de validation sticky ---- */
.cfgv2 .addon-footer-wrap {
  position: sticky;
  bottom: 0;
  z-index: 50;
  padding: 10px 0 6px;
  background: linear-gradient(to top, rgba(255,255,255,1) 55%, rgba(255,255,255,0));
  pointer-events: none;
  margin-top: 24px !important;
}
.cfgv2 .addon-footer-card {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px !important;
  background: #fff !important;
  border: 1.5px solid #2b5cff;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(43,92,255,.18);
}
.cfgv2 .addon-footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.cfgv2 .addon-footer-ic {
  font-size: 26px;
  flex: none;
}
.cfgv2 .addon-footer-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 !important;
}
.cfgv2 .addon-footer-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin: 2px 0 0 !important;
  line-height: 1.4;
}
.cfgv2 .addon-footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}
.cfgv2 .addon-footer-total {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  min-height: 16px;
}
.cfgv2 .addon-footer-btn {
  min-height: 48px;
  padding: 0 24px !important;
  border-radius: 24px;
  border: none;
  background: #2b5cff !important;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, transform .12s;
  white-space: nowrap;
}
.cfgv2 .addon-footer-btn:hover { background: #1a4ce0 !important; }
.cfgv2 .addon-footer-btn:active { transform: scale(.97); }

@media (max-width: 560px) {
  .cfgv2 .addon-footer-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cfgv2 .addon-footer-right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .cfgv2 .addon-footer-btn {
    flex: 1;
    text-align: center;
  }
}

/* ---- Bouton simple toggle (lasure, vis sans chips) ---- */
.cfgv2 .addon-simple-btn.is-added {
  background: #1a8f42 !important;
  border-color: #1a8f42;
}
/* Statut "selected" pour les simple cards */
.cfgv2 .addon-card--simple.status-selected .addon-simple-btn {
  background: #2b5cff !important;
  border-color: #2b5cff;
  color: #fff;
}
.cfgv2 .addon-card--simple.status-unselected {
  opacity: .65;
}
/* ============================================================
   STEP 16 — Livraison : redesign premium v2 (ldv2-*)
   ============================================================ */

/* En-tête */
.cfgv2 .ldv2-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.cfgv2 .ldv2-header-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #eff3ff; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.cfgv2 .ldv2-header-title { font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.28; margin: 0 0 4px; }
.cfgv2 .ldv2-header-sub { font-size: 13.5px; color: var(--muted); margin: 0; }

/* Carte recommandée */
.cfgv2 .ldv2-reco-card { position: relative; padding: 20px 20px 0; border: 2px solid #2b5cff; border-radius: 20px; background: #fff; overflow: hidden; margin-bottom: 12px; }
.cfgv2 .ldv2-reco-badge { position: absolute; top: 0; left: 20px; padding: 5px 14px; background: #2b5cff; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .07em; border-radius: 0 0 10px 10px; }
.cfgv2 .ldv2-reco-top { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; margin-bottom: 14px; }
.cfgv2 .ldv2-reco-truck { flex: none; width: 100px; height: 80px; border-radius: 12px; background: #f0f4ff; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.cfgv2 .ldv2-reco-id { flex: 1; min-width: 0; }
.cfgv2 .ldv2-reco-name { font-size: 20px; font-weight: 900; color: var(--ink); margin-bottom: 2px; }
.cfgv2 .ldv2-price { font-size: 20px; font-weight: 900; color: #2b5cff; line-height: 1.15; margin-bottom: 4px; }
.cfgv2 .ldv2-price small { font-size: 12px; font-weight: 700; color: var(--muted); }
.cfgv2 .ldv2-price--free s { font-size: 13px; color: var(--muted); }
.cfgv2 .ldv2-price--free strong { font-size: 17px; color: var(--green-dark); }
.cfgv2 .ldv2-rating-label { font-size: 11px; color: var(--muted); margin-left: 4px; vertical-align: middle; }
.cfgv2 .ldv2-reco-feats { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.cfgv2 .ldv2-reco-feat { font-size: 12px; font-weight: 600; color: #444; display: flex; align-items: center; gap: 5px; }

/* Checkmarks */
.cfgv2 .ldv2-reco-benefits { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 7px; }
.cfgv2 .ldv2-reco-benefits li { position: relative; padding-left: 22px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cfgv2 .ldv2-reco-benefits li::before { content: "\2713"; position: absolute; left: 0; color: var(--green-dark); font-weight: 900; font-size: 15px; }

/* ETA box */
.cfgv2 .ldv2-reco-bot { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.cfgv2 .ldv2-reco-eta { display: inline-flex; flex-direction: column; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 14px; text-align: center; min-width: 110px; }
.cfgv2 .ldv2-reco-eta-lbl { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.cfgv2 .ldv2-reco-eta-val { font-size: 15px; font-weight: 800; color: #2b5cff; }

/* CTA */
.cfgv2 .ldv2-reco-cta { display: block; width: calc(100% + 40px); margin-left: -20px; padding: 16px 20px; background: #2b5cff; color: #fff; font-size: 15px; font-weight: 700; border: none; cursor: pointer; text-align: center; border-radius: 0 0 18px 18px; transition: background .15s; }
.cfgv2 .ldv2-reco-cta:hover { background: #1a4adb; }
.cfgv2 .ldv2-reco-card.is-selected .ldv2-reco-cta { background: #14a24a; }

/* Social proof */
.cfgv2 .ldv2-social { text-align: center; font-size: 12.5px; color: var(--muted); margin-bottom: 20px; }

/* Timeline processus */
.cfgv2 .ldv2-process { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 14px 20px; margin-bottom: 14px; }
.cfgv2 .ldv2-process-title { font-size: 14.5px; font-weight: 800; color: var(--ink); margin: 0 0 16px; }
.cfgv2 .ldv2-track { display: flex; align-items: center; margin-bottom: 10px; padding: 0 4px; }
.cfgv2 .ldv2-track-circle { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #eff3ff; display: flex; align-items: center; justify-content: center; }
.cfgv2 .ldv2-track-ico { font-size: 20px; line-height: 1; }
.cfgv2 .ldv2-track-num { position: absolute; bottom: -3px; right: -5px; width: 17px; height: 17px; border-radius: 50%; background: #2b5cff; color: #fff; font-size: 9px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.cfgv2 .ldv2-track-line { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #c8d4f0 0 4px, transparent 4px 8px); margin: 0 2px; }
.cfgv2 .ldv2-process-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cfgv2 .ldv2-ps-info { text-align: center; padding: 0 2px; }
.cfgv2 .ldv2-ps-label { font-size: 10.5px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 3px; }
.cfgv2 .ldv2-ps-sub { font-size: 9.5px; color: var(--muted); line-height: 1.4; }

/* Accordéons */
.cfgv2 .ldv2-accordion { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.cfgv2 .ldv2-accordion summary.ldv2-accordion-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; user-select: none; }
.cfgv2 .ldv2-accordion summary.ldv2-accordion-head::-webkit-details-marker { display: none; }
.cfgv2 .ldv2-accordion-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; background: #eff3ff; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #2b5cff; font-weight: 900; }
.cfgv2 .ldv2-accordion-arr { margin-left: auto; color: var(--muted); font-size: 14px; transition: transform .2s; }
.cfgv2 .ldv2-accordion[open] .ldv2-accordion-arr { transform: rotate(180deg); }
.cfgv2 .ldv2-accordion-body { padding: 14px 16px 16px; border-top: 1.5px solid var(--line); }

/* Autres modes dans l'accordéon */
.cfgv2 .ldv2-other-modes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

/* Accès difficile synthèse */
.cfgv2 .ldv2-acces-warn { background: #fff8e1; border: 1px solid #ffe082; border-radius: 12px; padding: 12px 14px; font-size: 13px; color: #6d4c00; margin-bottom: 14px; }

/* ============================================================
   STEP 39 — Accès livraison : cartes style gamme (card-grid--acces)
   ============================================================ */
.cfgv2 .card-grid--acces { grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.cfgv2 .acces-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: #f0f4fb; display: block; width: 100%; }
.cfgv2 .acces-thumb svg { display: block; width: 100%; height: 100%; }
.cfgv2 .acces-step-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.45; }

/* ============================================================
   CORRECTIF #msform * — ldv2-* + livraison
   Le reset global #msform *{background:transparent;padding:0;margin:0}
   (spécificité ID > class) écrase tous les éléments sans !important.
   ============================================================ */

/* Backgrounds */
.cfgv2 .ldv2-header-ic      { background: #eff3ff !important; }
.cfgv2 .ldv2-reco-card      { background: #fff !important; }
.cfgv2 .ldv2-reco-badge     { background: #2b5cff !important; }
.cfgv2 .ldv2-reco-truck     { background: #f0f4ff !important; overflow: hidden !important; }
.cfgv2 .ldv2-reco-cta       { background: #2b5cff !important; }
.cfgv2 .ldv2-reco-cta:hover { background: #1a4adb !important; }
.cfgv2 .ldv2-reco-card.is-selected .ldv2-reco-cta { background: #14a24a !important; }
.cfgv2 .ldv2-process        { background: #fff !important; }
.cfgv2 .ldv2-track-circle   { background: #eff3ff !important; }
.cfgv2 .ldv2-track-num      { background: #2b5cff !important; border: 2px solid #fff !important; }
.cfgv2 .ldv2-track-line     { background: repeating-linear-gradient(90deg,#c8d4f0 0 4px,transparent 4px 8px) !important; }
.cfgv2 .ldv2-accordion      { background: #fff !important; }
.cfgv2 .ldv2-accordion-ic   { background: #eff3ff !important; }
.cfgv2 .ldv2-acces-warn     { background: #fff8e1 !important; }
.cfgv2 .acces-thumb         { background: #f0f4fb !important; }

/* Paddings */
.cfgv2 .ldv2-reco-card            { padding: 20px 20px 0 !important; }
.cfgv2 .ldv2-reco-badge           { padding: 5px 14px !important; }
.cfgv2 .ldv2-reco-eta             { padding: 8px 14px !important; }
.cfgv2 .ldv2-reco-cta             { padding: 16px 20px !important; }
.cfgv2 .ldv2-process              { padding: 18px 14px 20px !important; }
.cfgv2 .ldv2-track                { padding: 0 4px !important; }
.cfgv2 .ldv2-ps-info              { padding: 0 2px !important; }
.cfgv2 .ldv2-reco-benefits        { padding: 0 !important; }
.cfgv2 .ldv2-reco-benefits li     { padding-left: 22px !important; }
.cfgv2 .ldv2-accordion summary.ldv2-accordion-head { padding: 14px 16px !important; }
.cfgv2 .ldv2-accordion-body       { padding: 14px 16px 16px !important; }
.cfgv2 .ldv2-acces-warn           { padding: 12px 14px !important; }

/* Margins */
.cfgv2 .ldv2-header         { margin-bottom: 24px !important; }
.cfgv2 .ldv2-header-title   { margin: 0 0 4px !important; }
.cfgv2 .ldv2-header-sub     { margin: 0 !important; }
.cfgv2 .ldv2-reco-card      { margin-bottom: 12px !important; }
.cfgv2 .ldv2-reco-top       { margin-top: 22px !important; margin-bottom: 14px !important; }
.cfgv2 .ldv2-reco-name      { margin-bottom: 2px !important; }
.cfgv2 .ldv2-price          { margin-bottom: 4px !important; }
.cfgv2 .ldv2-reco-feats     { margin-top: 7px !important; }
.cfgv2 .ldv2-reco-benefits  { margin: 0 0 12px !important; }
.cfgv2 .ldv2-reco-bot       { margin-bottom: 14px !important; }
.cfgv2 .ldv2-reco-eta-lbl   { margin-bottom: 2px !important; }
.cfgv2 .ldv2-reco-cta       { margin-left: -20px !important; }
.cfgv2 .ldv2-social         { margin-bottom: 20px !important; }
.cfgv2 .ldv2-process        { margin-bottom: 14px !important; }
.cfgv2 .ldv2-process-title  { margin: 0 0 16px !important; }
.cfgv2 .ldv2-track          { margin-bottom: 10px !important; }
.cfgv2 .ldv2-track-line     { margin: 0 2px !important; }
.cfgv2 .ldv2-ps-label       { margin-bottom: 3px !important; }
.cfgv2 .ldv2-accordion      { margin-bottom: 10px !important; }
.cfgv2 .ldv2-accordion-arr  { margin-left: auto !important; }
.cfgv2 .ldv2-other-modes    { margin-bottom: 16px !important; }
.cfgv2 .ldv2-acces-warn     { margin-bottom: 14px !important; }
.cfgv2 .acces-step-note     { margin-bottom: 14px !important; }
.cfgv2 .ldv2-rating-label   { margin-left: 4px !important; }

/* livr-card sub-éléments */
.cfgv2 .livr-card-cta      { margin-top: 6px !important; }
.cfgv2 .livr-card-benefits { padding: 0 !important; margin: 2px 0 !important; }
.cfgv2 .livr-card-benefits li { padding-left: 18px !important; }

/* Fix: bloquer le ::after générique (.card.selected::after ✓) sur livr-mode-card */
.cfgv2 .livr-mode-card::after { content: none !important; display: none !important; }

/* Images livraison dans ldv2-reco-truck */
.cfgv2 .ldv2-reco-truck img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; }

/* ==========================================================================
   US-LIV-116 — Jauge intelligente de progression vers la livraison offerte
   Préfixe : afg (addon-free-gauge)
   Toutes les propriétés bg/padding/margin sont !important car #msform *
   reset les surcharge (sélecteur ID > class).
   ========================================================================== */

/* --- Conteneur principal --- */
.cfgv2 #addon-free-gauge { margin: 0 0 16px !important; padding: 0 !important; }

/* Blocs internes : reset explicite contre #msform * */
.cfgv2 .afg,
.cfgv2 .afg * { box-sizing: border-box; }

.cfgv2 .afg {
  background: #f0f4ff !important;
  border: 1.5px solid #c2d0f8;
  border-radius: 12px;
  padding: 16px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}

/* Variantes d'état — couleurs progressives */
.cfgv2 .afg--s2 { background: #fff8eb !important; border-color: #f5c842; }
.cfgv2 .afg--s3 { background: #fff3e0 !important; border-color: #f59c42; }
.cfgv2 .afg--reached { background: #edf9f0 !important; border-color: #2ecc71; }

/* --- Header : icône + texte principal --- */
.cfgv2 .afg-header {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-ic {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  background: transparent !important;
  padding: 0 !important;
}
.cfgv2 .afg-header-text {
  flex: 1;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-title {
  font-weight: 700;
  font-size: 15px;
  color: #1a2a5e;
  padding: 0 !important;
  margin: 0 0 2px !important;
  background: transparent !important;
}
.cfgv2 .afg--reached .afg-title { color: #1a6e38; font-size: 17px; }
.cfgv2 .afg-sub {
  font-size: 13px;
  color: #444;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-urgency {
  font-size: 13px;
  font-weight: 600;
  color: #b85c00;
  padding: 0 !important;
  margin: 2px 0 0 !important;
  background: transparent !important;
}
.cfgv2 .afg--s3 .afg-urgency { color: #c0390b; }

/* --- Barre de progression --- */
.cfgv2 .afg-bar-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-bar {
  flex: 1;
  height: 10px;
  background: #dce5ff !important;
  border-radius: 999px;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}
.cfgv2 .afg--s2 .afg-bar { background: #fae8b0 !important; }
.cfgv2 .afg--s3 .afg-bar { background: #fad4a0 !important; }
.cfgv2 .afg--reached .afg-bar { background: #b8edd0 !important; }

.cfgv2 .afg-fill {
  display: block;
  height: 100%;
  background: #1a3cdc !important;
  border-radius: 999px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  padding: 0 !important;
  margin: 0 !important;
  min-width: 4px;
}
.cfgv2 .afg--s2 .afg-fill { background: #e8a800 !important; }
.cfgv2 .afg--s3 .afg-fill { background: #e07000 !important; }
.cfgv2 .afg--reached .afg-fill { background: #27ae60 !important; }

.cfgv2 .afg-pct {
  font-size: 12px;
  font-weight: 700;
  color: #1a3cdc;
  white-space: nowrap;
  min-width: 40px;
  text-align: right;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg--s2 .afg-pct { color: #b87c00; }
.cfgv2 .afg--s3 .afg-pct { color: #c05800; }
.cfgv2 .afg--reached .afg-pct { color: #1a6e38; }

/* --- Description texte + liste avantages --- */
.cfgv2 .afg-desc {
  font-size: 13px;
  color: #333;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-perks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-perks li {
  font-size: 13px;
  color: #1a6e38;
  font-weight: 600;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg--reached .afg-perks li { color: #14552c; }

/* --- Bloc économies --- */
.cfgv2 .afg-saving {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  background: #e8f0fe !important;
  border: 1px solid #c2d0f8;
  border-radius: 8px;
  padding: 8px 12px !important;
  margin: 4px 0 0 !important;
}
.cfgv2 .afg-saving--on {
  background: #d4f5e1 !important;
  border-color: #7de0a8;
}
.cfgv2 .afg-saving-lbl {
  font-size: 13px;
  color: #444;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-saving-val {
  font-size: 16px;
  font-weight: 800;
  color: #1a3cdc;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-saving--on .afg-saving-val { color: #1a6e38; }

/* --- Badge "rapproche de la livraison offerte" sur les cartes premium --- */
.cfgv2 .addon-premium-badge--livr {
  background: #fff8d6 !important;
  color: #7c5c00;
  border: 1px solid #f5c842;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px !important;
  margin: 2px 0 6px !important;
  display: inline-block;
}

/* --- Responsive mobile --- */
@media (max-width: 479.98px) {
  .cfgv2 .afg { padding: 12px !important; }
  .cfgv2 .afg-title { font-size: 14px; }
  .cfgv2 .afg-saving { flex-direction: column !important; align-items: flex-start; gap: 2px; }
  .cfgv2 .afg-saving-val { font-size: 15px; }
}

/* ==========================================================================
   US-LIV-115 — Section "produits conseillés" dans la jauge
   Affichée uniquement quand économies > montant restant (intérêt financier réel)
   ========================================================================== */

/* Conteneur de la section reco */
.cfgv2 .afg-reco {
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 12px 0 0 !important;
  margin: 4px 0 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-reco-head {
  font-size: 13px;
  font-weight: 700;
  color: #1a2a5e;
  padding: 0 0 8px !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg--s2 .afg-reco-head { color: #7c5000; }
.cfgv2 .afg--s3 .afg-reco-head { color: #7c3000; }

/* Liste des articles */
.cfgv2 .afg-reco-list {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Ligne produit */
.cfgv2 .afg-reco-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 8px;
  padding: 8px 10px !important;
  margin: 0 !important;
}
.cfgv2 .afg--s2 .afg-reco-item { background: rgba(255,255,255,.7) !important; }
.cfgv2 .afg--s3 .afg-reco-item { background: rgba(255,255,255,.8) !important; }

.cfgv2 .afg-reco-item-left {
  flex: 1;
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-reco-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a2a5e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-reco-item-detail {
  font-size: 11px;
  color: #666;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .afg-reco-item-detail strong { color: #1a2a5e; }

/* Bouton "+ Ajouter" */
.cfgv2 .afg-reco-add {
  flex-shrink: 0;
  background: #1a3cdc !important;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px !important;
  margin: 0 !important;
  cursor: pointer;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.cfgv2 .afg-reco-add:hover { background: #1230b0 !important; transform: translateY(-1px); }
.cfgv2 .afg-reco-add:active { transform: none; }
.cfgv2 .afg--s2 .afg-reco-add { background: #e8a800 !important; }
.cfgv2 .afg--s2 .afg-reco-add:hover { background: #c88c00 !important; }
.cfgv2 .afg--s3 .afg-reco-add { background: #e07000 !important; }
.cfgv2 .afg--s3 .afg-reco-add:hover { background: #c05800 !important; }

/* Responsive mobile */
@media (max-width: 479.98px) {
  .cfgv2 .afg-reco-item { flex-direction: column !important; align-items: flex-start; gap: 6px; }
  .cfgv2 .afg-reco-add { width: 100% !important; text-align: center; padding: 8px 12px !important; }
  .cfgv2 .afg-reco-item-name { white-space: normal; }
}

/* ==========================================================================
   US-LIV-101 à 114 — Refonte premium de l'étape Livraison
   Préfixe : ldv2-hero, ldv2-step, ldv2-compare
   Toutes les props bg/padding/margin sont !important (reset #msform *)
   ========================================================================== */

/* ── HERO (US-LIV-101, 102, 103, 105, 109, 114) ─────────────────────── */
.cfgv2 .ldv2-hero {
  background: #f5f7ff !important;
  border: 2px solid #c2d0f8;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 20px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  transition: border-color .25s;
}
.cfgv2 .ldv2-hero--selected { border-color: #1a8f42; background: #edf9f0 !important; }
.cfgv2 .ldv2-hero--free { border-color: #1a8f42; }

/* Image véhicule */
.cfgv2 .ldv2-hero-visual {
  position: relative;
  background: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 180px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cfgv2 .ldv2-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; padding: 0 !important; margin: 0 !important; }
.cfgv2 .ldv2-hero-truck-ico { font-size: 72px; line-height: 1; padding: 0 !important; margin: 0 !important; background: transparent !important; }

.cfgv2 .ldv2-hero-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #1a3cdc !important;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 6px;
  padding: 4px 10px !important;
  margin: 0 !important;
  text-transform: uppercase;
}
.cfgv2 .ldv2-hero--selected .ldv2-hero-badge { background: #1a8f42 !important; }

/* Corps */
.cfgv2 .ldv2-hero-body {
  padding: 16px !important;
  margin: 0 !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cfgv2 .ldv2-hero-name {
  font-size: 20px;
  font-weight: 800;
  color: #1a2a5e;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* KPI : prix + délai (US-LIV-103) */
.cfgv2 .ldv2-hero-kpi {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-hero-price {
  font-size: 22px;
  font-weight: 800;
  color: #1a2a5e;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-hero-price .ldv2-hero-price-ttc { font-size: 13px; font-weight: 400; color: #666; }
.cfgv2 .ldv2-hero-price--free { color: #1a8f42; font-size: 18px; }
.cfgv2 .ldv2-hero-price--free .ldv2-hero-price-orig { font-size: 13px; font-weight: 400; color: #999; margin-right: 6px; }
.cfgv2 .ldv2-hero-price--free .ldv2-hero-price-val { font-size: 20px; }

.cfgv2 .ldv2-hero-eta {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: #e8f0fe !important;
  border-radius: 8px;
  padding: 6px 10px !important;
  margin: 0 !important;
}
.cfgv2 .ldv2-hero-eta-ic { font-size: 18px; flex-shrink: 0; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.cfgv2 .ldv2-hero-eta-body { padding: 0 !important; margin: 0 !important; background: transparent !important; }
.cfgv2 .ldv2-hero-eta-lbl { font-size: 11px; color: #666; display: block; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.cfgv2 .ldv2-hero-eta-val { font-size: 14px; font-weight: 700; color: #1a2a5e; padding: 0 !important; margin: 0 !important; background: transparent !important; }

/* Bénéfices (US-LIV-102) */
.cfgv2 .ldv2-hero-benefits {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cfgv2 .ldv2-hero-benefits li {
  font-size: 14px;
  color: #1a5e38;
  font-weight: 600;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Mini-jauge dans le hero (US-LIV-105) */
.cfgv2 .ldv2-hero-gauge {
  background: #fff3e0 !important;
  border: 1px solid #f5c842;
  border-radius: 8px;
  padding: 8px 10px !important;
  margin: 0 !important;
}
.cfgv2 .ldv2-hero-gauge-lbl { font-size: 12px; color: #7c5000; margin: 0 0 5px !important; background: transparent !important; padding: 0 !important; }
.cfgv2 .ldv2-hero-gauge-bar { height: 6px; background: #fad4a0 !important; border-radius: 999px; overflow: hidden; padding: 0 !important; margin: 0 !important; }
.cfgv2 .ldv2-hero-gauge-bar span { display: block; height: 100%; background: #e07000 !important; border-radius: 999px; transition: width .5s; padding: 0 !important; margin: 0 !important; }

/* CTA + confirmation (US-LIV-114) */
.cfgv2 .ldv2-hero-cta {
  width: 100%;
  background: #1a3cdc !important;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 20px !important;
  margin: 0 !important;
  cursor: pointer;
  transition: background .15s, transform .1s;
  text-align: center;
}
.cfgv2 .ldv2-hero-cta:hover { background: #1230b0 !important; transform: translateY(-1px); }
.cfgv2 .ldv2-hero-cta:active { transform: none; }
.cfgv2 .ldv2-hero-cta--selected {
  background: #1a8f42 !important;
  cursor: default;
}
.cfgv2 .ldv2-hero-cta--selected:hover { background: #157234 !important; transform: none; }
.cfgv2 .ldv2-hero-confirm {
  font-size: 13px;
  color: #1a5e38;
  text-align: center;
  padding: 0 !important;
  margin: -4px 0 0 !important;
  background: transparent !important;
}

/* Rating */
.cfgv2 .ldv2-hero-rating {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-hero-rating .terrain-stars { flex-shrink: 0; }

/* ── PROCESSUS (US-LIV-104, 110) ──────────────────────────────────────── */
.cfgv2 .ldv2-process {
  background: #fff !important;
  border: 1.5px solid #e8eaf6;
  border-radius: 14px;
  padding: 16px !important;
  margin: 0 0 16px !important;
}
.cfgv2 .ldv2-process-title {
  font-size: 16px;
  font-weight: 800;
  color: #1a2a5e;
  padding: 0 0 14px !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-steps {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-step {
  display: grid !important;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-step-head {
  grid-column: 1;
  grid-row: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-step-num {
  width: 28px;
  height: 28px;
  background: #1a3cdc !important;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 !important;
}
.cfgv2 .ldv2-step-ic { font-size: 14px; margin: 3px 0 0 !important; padding: 0 !important; background: transparent !important; }
.cfgv2 .ldv2-step-line {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  width: 2px;
  min-height: 10px;
  background: #c2d0f8 !important;
  margin: 2px auto !important;
  padding: 0 !important;
  border-radius: 999px;
}
.cfgv2 .ldv2-step-body {
  grid-column: 2;
  grid-row: 1 / 3;
  padding: 0 0 14px !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-step-label {
  font-size: 14px;
  font-weight: 700;
  color: #1a2a5e;
  padding: 2px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-step-dur {
  font-size: 11px;
  color: #1a3cdc;
  font-weight: 600;
  padding: 0 !important;
  margin: 1px 0 3px !important;
  background: transparent !important;
}
.cfgv2 .ldv2-step-desc {
  font-size: 13px;
  color: #444;
  line-height: 1.4;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* ── COMPARER LES MODES (US-LIV-106) ─────────────────────────────────── */
.cfgv2 .ldv2-compare-grid {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 12px !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-compare-card {
  background: #f8f9fe !important;
  border: 1.5px solid #dde1f7;
  border-radius: 10px;
  padding: 12px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
.cfgv2 .ldv2-compare-card--sel { border-color: #1a3cdc; background: #eef1ff !important; }
.cfgv2 .ldv2-compare-card--unavail {
  background: #fafafa !important;
  border-color: #e0e0e0;
  opacity: .8;
}
.cfgv2 .ldv2-compare-card-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-compare-card-name { font-size: 14px; font-weight: 700; color: #1a2a5e; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.cfgv2 .ldv2-compare-card--unavail .ldv2-compare-card-name { color: #888; }
.cfgv2 .ldv2-compare-card-price { font-size: 14px; font-weight: 700; color: #1a2a5e; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.cfgv2 .ldv2-compare-card-price--free { color: #1a8f42; }
.cfgv2 .ldv2-compare-card-why { font-size: 12px; color: #666; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.cfgv2 .ldv2-compare-card-eta { font-size: 12px; color: #555; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.cfgv2 .ldv2-compare-card-benefits {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-compare-card-benefits li { font-size: 12px; color: #444; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.cfgv2 .ldv2-compare-card-cta {
  background: #1a3cdc !important;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px !important;
  margin: 4px 0 0 !important;
  cursor: pointer;
  width: 100%;
  transition: background .15s;
}
.cfgv2 .ldv2-compare-card-cta:hover { background: #1230b0 !important; }
.cfgv2 .ldv2-compare-card-cta.is-selected { background: #1a8f42 !important; cursor: default; }

/* ── SOUS-ACCORDÉON (US-LIV-107) ─────────────────────────────────────── */
.cfgv2 .ldv2-sub-acc {
  border: 1px solid #e8eaf6;
  border-radius: 8px;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.cfgv2 .ldv2-sub-acc-head {
  font-size: 13px;
  font-weight: 600;
  color: #1a2a5e;
  cursor: pointer;
  padding: 10px 12px !important;
  margin: 0 !important;
  background: transparent !important;
  list-style: none;
  user-select: none;
}
.cfgv2 .ldv2-sub-acc-head::-webkit-details-marker { display: none; }
.cfgv2 .ldv2-sub-acc[open] .ldv2-sub-acc-head { border-bottom: 1px solid #e8eaf6; }
.cfgv2 .ldv2-sub-acc-body { padding: 12px !important; margin: 0 !important; background: transparent !important; }
.cfgv2 .livr-costs-inner { display: flex !important; flex-direction: column; gap: 4px; padding: 0 !important; margin: 0 0 8px !important; background: transparent !important; }

/* ── FOOTER US-LIV-113 : "Livraison incluse" ─────────────────────────── */
.cfgv2 .nav-price-sub { font-size: 10px !important; }

@media (max-width: 639.98px) {
  .cfgv2 .ldv2-hero-visual { height: 140px; }
  .cfgv2 .ldv2-hero-name { font-size: 18px; }
  .cfgv2 .ldv2-hero-price { font-size: 19px; }
  .cfgv2 .ldv2-hero-cta { font-size: 15px; padding: 12px 16px !important; }
}

/* ===========================================================
   US-CONF-147 — Longueur à occulter : résumé & tarif estimatif
   =========================================================== */
/* Raccourcis de longueur dans la section occlen */
.cfgv2 .cfg-section--occlen .length-presets { gap: 8px; margin-top: 12px !important; }
.cfgv2 .cfg-section--occlen .preset-chip { font-size: 13px; padding: 7px 16px !important; }
/* Encart hf-range adapté au texte bi-ligne */
.cfgv2 .occlen-range { border-radius: 14px !important; align-items: flex-start !important; line-height: 1.45; }
/* Boîte résumé & tarif */
.cfgv2 .occlen-recap-box { margin: 16px 0 0 !important; padding: 16px !important; border-radius: 16px; background: #f4f7ff !important; border: 1px solid #d9e3fb; }
.cfgv2 .occlen-recap-head { display: flex; align-items: flex-start; gap: 12px; }
.cfgv2 .occlen-recap-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff !important; box-shadow: 0 2px 8px rgba(20,30,60,.10); font-size: 20px; line-height: 1; }
.cfgv2 .occlen-recap-meta { flex: 1 1 auto; min-width: 0; }
.cfgv2 .occlen-recap-title { display: block; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; color: var(--green-dark); margin-bottom: 5px; }
.cfgv2 .occlen-recap-sub,
.cfgv2 .occlen-recap-travees { display: block; font-size: 13px; color: var(--ink); line-height: 1.45; }
.cfgv2 .occlen-recap-sub strong,
.cfgv2 .occlen-recap-travees strong { font-weight: 800; color: var(--green-dark); }
.cfgv2 .occlen-recap-price-col { flex: none; text-align: right; min-width: 90px; }
.cfgv2 .occlen-recap-from { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.cfgv2 .occlen-recap-price { display: block; margin: 2px 0 !important; }
.cfgv2 .occlen-recap-price strong { font-size: 21px; font-weight: 900; color: var(--green-dark); letter-spacing: -.5px; line-height: 1.1; }
.cfgv2 .occlen-recap-price small { font-size: 11px; font-weight: 700; color: var(--muted); }
.cfgv2 .occlen-recap-per { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cfgv2 .occlen-recap-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0 !important; padding: 10px 12px !important; border-radius: 10px; background: #fff !important; border: 1px solid #e3e9f5; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cfgv2 .occlen-recap-note-ic { flex: none; line-height: 1.35; }

/* US-CONF-147 */
.cfgv2 .cfg-section--occlen .length-presets { gap: 8px; margin-top: 12px !important; }
.cfgv2 .cfg-section--occlen .preset-chip { font-size: 13px; padding: 7px 16px !important; }
.cfgv2 .occlen-range { border-radius: 14px !important; align-items: flex-start !important; line-height: 1.45; }
.cfgv2 .occlen-recap-box { margin: 16px 0 0 !important; padding: 16px !important; border-radius: 16px; background: #f4f7ff !important; border: 1px solid #d9e3fb; }
.cfgv2 .occlen-recap-head { display: flex; align-items: flex-start; gap: 12px; }
.cfgv2 .occlen-recap-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff !important; box-shadow: 0 2px 8px rgba(20,30,60,.10); font-size: 20px; line-height: 1; }
.cfgv2 .occlen-recap-meta { flex: 1 1 auto; min-width: 0; }
.cfgv2 .occlen-recap-title { display: block; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; color: var(--green-dark); margin-bottom: 5px; }
.cfgv2 .occlen-recap-sub, .cfgv2 .occlen-recap-travees { display: block; font-size: 13px; color: var(--ink); line-height: 1.45; }
.cfgv2 .occlen-recap-sub strong, .cfgv2 .occlen-recap-travees strong { font-weight: 800; color: var(--green-dark); }
.cfgv2 .occlen-recap-price-col { flex: none; text-align: right; min-width: 90px; }
.cfgv2 .occlen-recap-from { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.cfgv2 .occlen-recap-price { display: block; margin: 2px 0 !important; }
.cfgv2 .occlen-recap-price strong { font-size: 21px; font-weight: 900; color: var(--green-dark); letter-spacing: -.5px; line-height: 1.1; }
.cfgv2 .occlen-recap-price small { font-size: 11px; font-weight: 700; color: var(--muted); }
.cfgv2 .occlen-recap-per { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cfgv2 .occlen-recap-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0 !important; padding: 10px 12px !important; border-radius: 10px; background: #fff !important; border: 1px solid #e3e9f5; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cfgv2 .occlen-recap-note-ic { flex: none; line-height: 1.35; }

/* ============================================================================
   UX PATCH 210 — corrections ciblées configurateur clôture rigide
   ============================================================================ */

/* STEP 6 — Les 3 repères sont informatifs, pas des cartes sélectionnables. */
.cfgv2 .step[data-step="6"] .install-scan-card,
.cfgv2 .step[data-step="6"] .install-scan-card:hover {
  cursor: default !important;
  transform: none !important;
  transition: none !important;
  border-color: var(--line) !important;
  box-shadow: 0 2px 8px rgba(20,30,60,.06) !important;
  background: #f9fbff !important;
}

/* STEP 6 — Sélection directe par ligne : pas d'animation globale/bump. */
.cfgv2 .step[data-step="6"] .addon-card,
.cfgv2 .step[data-step="6"] .addon-premium {
  animation: none !important;
  transform: none !important;
}
.cfgv2 .step[data-step="6"] .addon-card:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(20,30,60,.05) !important;
}
.cfgv2 .step[data-step="6"] .addon-card.status-accepted,
.cfgv2 .step[data-step="6"] .addon-card.status-accepted:hover {
  border-color: #1a8f42 !important;
  box-shadow: 0 0 0 3px rgba(26,143,66,.12) !important;
  opacity: 1 !important;
}
.cfgv2 .step[data-step="6"] .addon-card.status-refused,
.cfgv2 .step[data-step="6"] .addon-card.status-refused:hover {
  border-color: var(--line) !important;
  box-shadow: 0 2px 8px rgba(20,30,60,.05) !important;
}
.cfgv2 .step[data-step="6"] .addon-premium.status-accepted,
.cfgv2 .step[data-step="6"] .addon-premium.status-accepted:hover {
  border-color: #1a8f42 !important;
  box-shadow: 0 0 0 3px rgba(26,143,66,.12) !important;
}
.cfgv2 .step[data-step="6"] .addon-premium.status-refused:hover {
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* STEP 27 — Planning : lecture alignée à gauche comme « Réalisation du projet ». */
.cfgv2 .step[data-step="27"] .card-grid--delai .card {
  text-align: left !important;
}
.cfgv2 .step[data-step="27"] .card-grid--delai .card-body {
  align-items: flex-start !important;
  text-align: left !important;
}
.cfgv2 .step[data-step="27"] .card-grid--delai .card-name,
.cfgv2 .step[data-step="27"] .card-grid--delai .card-desc {
  text-align: left !important;
}

/* STEP 16 — Retrait agence : informations secondaires en divulgation progressive. */
.cfgv2 .ag-card-quick {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 6px !important;
  padding: 4px 8px !important;
  border-radius: 999px;
  background: #eef8f1 !important;
  color: var(--green-dark);
  font-size: 11.5px;
  font-weight: 750;
}
.cfgv2 .ag-card-rows--selected {
  margin-top: 7px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--line);
}
.cfgv2 .ag-compact-section {
  margin: 12px 0 !important;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff !important;
  overflow: hidden;
}
.cfgv2 .ag-compact-section > summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 13px 42px 13px 16px !important;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  background: #fff !important;
}
.cfgv2 .ag-compact-section > summary::-webkit-details-marker { display: none; }
.cfgv2 .ag-compact-section > summary::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  background: transparent !important;
  transition: transform .15s ease;
}
.cfgv2 .ag-compact-section[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.cfgv2 .ag-compact-section[open] { border-color: #ccd8ef; }
.cfgv2 .ag-compact-body {
  padding: 0 16px 16px !important;
  background: #fff !important;
}
.cfgv2 .ag-compact-body .ag-load,
.cfgv2 .ag-compact-body .ag-check { margin: 0 0 12px !important; }
.cfgv2 .ag-compact-body .ag-store-map { margin-top: 2px !important; }
.cfgv2 .ag-compact-section--faq .livr-faq { margin: 0 !important; }

/* STEP 9 — Bootstrap .form-floating utilise label::after pour un cache blanc.
   Ici le label n'est plus flottant : on neutralise entièrement ce pseudo-élément,
   puis on le réutilise uniquement pour l'astérisque requis. */
.cfgv2 .coords-fs .form-floating > label {
  display: inline-flex !important;
  align-items: baseline !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
}
.cfgv2 .coords-fs .form-floating > label::after {
  content: "" !important;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.cfgv2 .coords-fs [requiredinput] + label::after {
  content: " *" !important;
  position: static !important;
  display: inline !important;
  margin-left: 2px !important;
  color: #e11d48 !important;
  background: transparent !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.cfgv2 .coords-fs .form-control,
.cfgv2 .coords-fs .form-select,
.cfgv2 .coords-fs .sselect-input {
  background-clip: padding-box !important;
}

/* =====================================================================
   UX 211 — Bifurcation Récapitulatif : Panier / Devis
   #msform * dans le thème impose margin/padding/background:transparent ;
   les !important ci-dessous sont donc volontaires et limités à .cfgv2.
   ===================================================================== */
.cfgv2 .recap-paths {
  margin: 22px 0 24px !important;
  padding: 20px !important;
  border: 1px solid #dfe6ef !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
}
.cfgv2 .recap-paths-head { margin: 0 0 14px !important; }
.cfgv2 .recap-paths-head h3 {
  margin: 0 0 5px !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
}
.cfgv2 .recap-paths-head p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
}
.cfgv2 .recap-paths-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.cfgv2 .recap-path {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: 96px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 15px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
.cfgv2 .recap-path--cart {
  border: 2px solid #1147d9 !important;
  background: linear-gradient(180deg, #2b5cff 0%, #1147d9 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(17, 71, 217, .18) !important;
}
.cfgv2 .recap-path--quote {
  border: 1px solid #d7e0ed !important;
  background: #f8fafc !important;
  color: var(--ink) !important;
}
.cfgv2 .recap-path:not(:disabled):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .11) !important;
}
.cfgv2 .recap-path-ic {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  font-size: 22px !important;
  background: rgba(255,255,255,.16) !important;
}
.cfgv2 .recap-path--quote .recap-path-ic { background: #edf3ff !important; }
.cfgv2 .recap-path-body { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
.cfgv2 .recap-path-title { font-size: 15px !important; line-height: 1.2 !important; font-weight: 900 !important; color: inherit !important; }
.cfgv2 .recap-path-sub { font-size: 12.5px !important; line-height: 1.35 !important; font-weight: 600 !important; color: inherit !important; opacity: .82 !important; }
.cfgv2 .recap-path-arrow { font-size: 21px !important; font-weight: 900 !important; color: inherit !important; }
.cfgv2 .recap-path:disabled,
.cfgv2 .recap-path.is-disabled {
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: #d7dde7 !important;
  background: #eef1f5 !important;
  color: #6f7783 !important;
  opacity: .78 !important;
}
.cfgv2 .recap-cart-note {
  margin: 12px 0 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #f0c36b !important;
  border-radius: 11px !important;
  background: #fff8e8 !important;
  color: #78510b !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}
@media (max-width: 700px) {
  .cfgv2 .recap-paths { padding: 14px !important; border-radius: 15px !important; }
  .cfgv2 .recap-paths-grid { grid-template-columns: 1fr !important; }
  .cfgv2 .recap-path { min-height: 86px !important; padding: 14px !important; }
}

/* Le récap contient maintenant ses propres CTA : le footer ne garde que Retour. */
.cfgv2 .nav-inner.nav--recap { justify-content: flex-start !important; }
.cfgv2 .nav-inner.nav--recap #btn-prev { position: static !important; transform: none !important; }


/* UX214 — PVC toujours visible : une hauteur incompatible désactive la carte
   au lieu de la masquer, avec une explication lisible. */
.cfgv2 .pvc-incompat-note {
  display: block;
  margin-top: 8px !important;
  padding: 7px 9px !important;
  border-radius: 8px;
  background: #fff7ed !important;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 12px;
  line-height: 1.35;
}
.cfgv2 .pvc-incompat-note[hidden] { display: none !important; }
.cfgv2 #matiere-pvc.is-disabled { opacity: 1; }
.cfgv2 #matiere-pvc.is-disabled .soub-type-body > :not(.pvc-incompat-note) { opacity: .48; }
.cfgv2 #matiere-pvc.is-disabled .pvc-incompat-note { opacity: 1; filter: none; }


/* =====================================================================
   UX215 — Récapitulatif : actions Panier / Devis dans la nav-footer
   Les grandes cartes UX211 ont été retirées du contenu du récapitulatif.
   ===================================================================== */
.cfgv2 .nav-inner.nav--recap {
  justify-content: flex-start !important;
  gap: 12px !important;
}
.cfgv2 .nav-inner.nav--recap .nav-subtotal { display: none !important; }
.cfgv2 .nav-inner.nav--recap #btn-prev {
  position: static !important;
  transform: none !important;
  flex: 0 0 auto !important;
}
.cfgv2 .nav-inner.nav--recap #btn-cart-recap {
  margin-left: auto !important;
}
.cfgv2 .nav-inner.nav--recap .nav-recap-action {
  min-width: 190px !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.cfgv2 .nav-inner.nav--recap #btn-devis-recap {
  background: #fff !important;
}
.cfgv2 .nav-inner.nav--recap #btn-devis-recap:hover {
  background: var(--green-light) !important;
}
.cfgv2 .nav-inner.nav--recap .nav-recap-action[hidden] { display: none !important; }

/* Le message d'éligibilité panier reste dans le récap mais sans carte CTA autour. */
.cfgv2 .step[data-step="8"] .recap-cart-note {
  margin: 10px 0 18px !important;
}

@media (max-width: 700px) {
  .cfgv2 .nav-inner.nav--recap {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .cfgv2 .nav-inner.nav--recap #btn-cart-recap { margin-left: 0 !important; }
  .cfgv2 .nav-inner.nav--recap .nav-recap-action {
    min-width: 0 !important;
    width: 100% !important;
    padding: 11px 10px !important;
    font-size: 13px !important;
  }
  .cfgv2 .nav-inner.nav--recap #btn-prev {
    width: 44px !important;
    min-width: 44px !important;
    padding: 11px 8px !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
    position: relative !important;
  }
  .cfgv2 .nav-inner.nav--recap #btn-prev::after {
    content: '←' !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-indent: 0 !important;
    font-size: 18px !important;
  }
}

/* =====================================================================
   UX216 — Récapitulatif desktop en 2 colonnes + footer mobile aligné
   ===================================================================== */
@media (min-width: 901px) {
  /* Le récap a besoin de plus de largeur que les étapes de questionnaire. */
  .cfgv2 .step[data-step="8"] .project {
    max-width: 1180px !important;
    width: 100% !important;
  }

  .cfgv2 .step[data-step="8"] .recap-desktop-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }

  .cfgv2 .step[data-step="8"] .recap-products-pane,
  .cfgv2 .step[data-step="8"] .recap-project-pane {
    min-width: 0 !important;
  }

  .cfgv2 .step[data-step="8"] .recap-products-pane .bom-section-title {
    margin-top: 0 !important;
  }

  .cfgv2 .step[data-step="8"] .recap-project-pane {
    margin-top: 0 !important;
    align-self: start !important;
  }

  .cfgv2 .step[data-step="8"] .recap-project-pane .recap-full {
    max-width: none !important;
    width: 100% !important;
    margin: 8px 0 18px !important;
  }
}

/* Tablette/mobile : retour au flux historique sur une seule colonne. */
@media (max-width: 900px) {
  .cfgv2 .step[data-step="8"] .recap-desktop-grid {
    display: block !important;
  }
  .cfgv2 .step[data-step="8"] .recap-project-pane {
    margin-top: 30px !important;
  }
}

@media (max-width: 700px) {
  /* UX215 croisait encore l'ancien ::before du footer mobile "has-price" avec
     le nouvel ::after du bouton compact : la flèche pouvait se retrouver sous
     la ligne des CTA. Une seule icône, centrée dans le vrai bouton. */
  .cfgv2 .nav-footer.has-price .nav-inner.nav--recap #btn-prev::before,
  .cfgv2 .nav-inner.nav--recap #btn-prev::before {
    content: none !important;
    display: none !important;
  }

  .cfgv2 .nav-inner.nav--recap {
    align-items: stretch !important;
  }

  .cfgv2 .nav-inner.nav--recap #btn-prev {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 46px !important;
    line-height: 1 !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    overflow: visible !important;
    position: relative !important;
  }

  .cfgv2 .nav-inner.nav--recap #btn-prev::after {
    content: '←' !important;
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    text-indent: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
}


/* =====================================================================
   UX217 — Récapitulatif : le hero sticky reste sous le sous-header desktop
   ===================================================================== */
@media (min-width: 901px) {
  .cfgv2 .step[data-step="8"] .recap-project-pane .rc-hero {
    top: 64px !important;
  }
}


/* =====================================================================
   UX218 — Récapitulatif : sticky sous-header + retour mobile robuste
   ===================================================================== */
/* Le sous-header du configurateur fait 56 px et reste sticky en haut.
   Le hero du récap doit donc se coller SOUS celui-ci sur desktop comme
   sur mobile, avec une petite respiration visuelle. */
.cfgv2 .step[data-step="8"] .recap-project-pane .rc-hero {
  top: 64px !important;
  scroll-margin-top: 64px !important;
}

/* Le bouton Précédent utilise désormais une vraie icône dans le DOM.
   Cela évite les conflits entre les anciens ::before/::after du footer
   mobile et les styles du thème. */
.cfgv2 #btn-prev .nav-prev-icon {
  display: none !important;
}
.cfgv2 #btn-prev .nav-prev-label {
  display: inline !important;
}

@media (max-width: 700px) {
  .cfgv2 .nav-inner.nav--recap #btn-prev {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-indent: 0 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
  }
  .cfgv2 .nav-footer.has-price .nav-inner.nav--recap #btn-prev::before,
  .cfgv2 .nav-footer.has-price .nav-inner.nav--recap #btn-prev::after,
  .cfgv2 .nav-inner.nav--recap #btn-prev::before,
  .cfgv2 .nav-inner.nav--recap #btn-prev::after {
    content: none !important;
    display: none !important;
  }
  .cfgv2 .nav-inner.nav--recap #btn-prev .nav-prev-label {
    display: none !important;
  }
  .cfgv2 .nav-inner.nav--recap #btn-prev .nav-prev-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 19px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
  }
}