/**
 * configurateur.css — Styles du configurateur Filwood.
 *
 * Scopé sous #cfg-root pour éviter tout conflit avec le thème.
 * Variables CSS définies localement dans #cfg-root.
 */

#cfg-root {
  /* Police : Montserrat si chargée localement, sinon fallback système proche. */
  /* Pour auto-héberger : déposer les fichiers woff2 dans assets/fonts/ et
     enregistrer un @font-face dans un fichier CSS séparé chargé avant celui-ci. */
  --cfw-font: "Montserrat", "Gill Sans", "Gill Sans MT", Optima, Candara, Calibri, sans-serif;
  --gold: #b8871f;
  --gold-dk: #8c650f;
  --gold-lt: #f6edda;
  --gold-glow: rgba(184, 135, 31, .12);
  --gold-ring: rgba(184, 135, 31, .22);
  --sand: #faf6ef;
  --sand2: #f0e9d8;
  --ink: #18120a;
  --bark: #4a3320;
  --bark-lt: #7a5f42;
  --border: #dfd0b5;
  --border-lt: #ede4d2;
  --white: #fff;
  --green: #246040;
  --green-lt: #e5f2eb;
  --green-md: #3a8c5a;
  --amber-lt: #fff8e1;
  --amber-bd: #d4a017;
  --r-sm: 10px;
  --r: 16px;
  --t: .22s cubic-bezier(.4, 0, .2, 1);
  --shadow-sm: 0 2px 8px rgba(80, 40, 10, .07);
  --shadow: 0 6px 24px rgba(80, 40, 10, .10);
  --shadow-lg: 0 12px 48px rgba(80, 40, 10, .14);
}

#cfg-root,
#cfg-root * {
  box-sizing: border-box;
  font-family: var(--cfw-font);
  -webkit-font-smoothing: antialiased;
}

/* ── Honeypot caché ── */
#cfg-root .cfg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Mobile header / bandeau (masqués par défaut) ── */
#cfg-root .cfg-mob-header,
#cfg-root .cfg-mob-delivery {
  display: none;
}

/* ════════════════════════════
   SHELL + SIDEBAR
════════════════════════════ */

#cfg-root .cfg-shell {
  display: grid;
  grid-template-columns: 252px 1fr;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

#cfg-root .cfg-sidebar {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 30px 22px 28px;
  color: #fff;
}

#cfg-root .cfg-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

#cfg-root .cfg-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#cfg-root .cfg-brand-name {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  line-height: 1;
}

#cfg-root .cfg-brand-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, .38);
  letter-spacing: .04em;
  line-height: 1;
  margin-top: 3px;
}

#cfg-root .cfg-sidebar-tagline h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 7px;
}

#cfg-root .cfg-sidebar-tagline h1 em {
  color: var(--gold);
  font-style: italic;
}

#cfg-root .cfg-sidebar-tagline p {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .38);
}

/* ── Nav étapes ── */

#cfg-root .cfg-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#cfg-root .cfg-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}

#cfg-root .cfg-nav-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--t);
}

#cfg-root .cfg-nav-dot span {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .28);
  transition: var(--t);
}

#cfg-root .cfg-nav-seg {
  width: 1.5px;
  height: 13px;
  background: rgba(255, 255, 255, .1);
  margin-left: 12px;
}

#cfg-root .cfg-nav-lbl {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .28);
  transition: var(--t);
}

#cfg-root .cfg-nav-item.active .cfg-nav-dot {
  background: var(--gold);
  border-color: var(--gold);
}

#cfg-root .cfg-nav-item.active .cfg-nav-dot span,
#cfg-root .cfg-nav-item.active .cfg-nav-lbl {
  color: #fff;
}

#cfg-root .cfg-nav-item.active .cfg-nav-lbl {
  font-weight: 600;
}

#cfg-root .cfg-nav-item.done .cfg-nav-dot {
  background: rgba(184, 135, 31, .18);
  border-color: var(--gold);
}

#cfg-root .cfg-nav-item.done .cfg-nav-dot span {
  color: var(--gold);
}

#cfg-root .cfg-nav-item.done .cfg-nav-lbl {
  color: rgba(255, 255, 255, .38);
}

/* ── Livraison sidebar ── */

#cfg-root .cfg-sidebar-delivery {
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  background: rgba(255, 255, 255, .03);
}

#cfg-root .cfg-delivery-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gold);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
}

#cfg-root .cfg-delivery-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#cfg-root .cfg-delivery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255, 255, 255, .38);
}

#cfg-root .cfg-delivery-row strong {
  color: rgba(255, 255, 255, .72);
  font-weight: 600;
}

/* ════════════════════════════
   MAIN + ÉTAPES
════════════════════════════ */

#cfg-root .cfg-main {
  background: var(--sand);
}

#cfg-root .cfg-step {
  display: none;
  flex-direction: column;
  padding: 34px 30px 28px;
  animation: cfgIn .25s ease both;
  min-height: 560px;
}

#cfg-root .cfg-step.active {
  display: flex;
}

@keyframes cfgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

#cfg-root .cfg-step-head {
  margin-bottom: 22px;
}

#cfg-root .cfg-chip {
  display: inline-block;
  padding: 4px 11px;
  margin-bottom: 11px;
  background: var(--sand2);
  color: var(--bark);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#cfg-root .cfg-step-head h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  line-height: 1.11;
  color: var(--ink);
  margin-bottom: 6px;
}

#cfg-root .cfg-step-head p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--bark-lt);
}

/* ── Cartes ── */

#cfg-root .cfg-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  flex: 1;
  align-content: start;
}

#cfg-root .cfg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  box-shadow: var(--shadow-sm);
}

#cfg-root .cfg-card:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--gold-glow);
}

#cfg-root .cfg-card.selected {
  border-color: var(--gold);
  background: #fffdf8;
  box-shadow: 0 0 0 3px var(--gold-ring);
}

#cfg-root .cfg-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#cfg-root .cfg-card-body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
}

#cfg-root .cfg-card-ico {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

#cfg-root .cfg-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

#cfg-root .cfg-tag {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gold-lt);
  color: var(--gold-dk);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

#cfg-root .cfg-card-text strong {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

#cfg-root .cfg-card-hint {
  font-size: 11px;
  line-height: 1.5;
  color: var(--bark-lt);
}

#cfg-root .cfg-check {
  position: absolute;
  top: 11px;
  right: 11px;
  opacity: 0;
  transition: opacity var(--t);
  color: var(--gold);
}

#cfg-root .cfg-card.selected .cfg-check {
  opacity: 1;
}

/* ── Pills ── */

#cfg-root .cfg-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  flex: 1;
  align-content: start;
}

#cfg-root .cfg-pill {
  position: relative;
  cursor: pointer;
}

#cfg-root .cfg-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#cfg-root .cfg-pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  background: var(--white);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
  box-shadow: var(--shadow-sm);
}

#cfg-root .cfg-pill:hover span {
  border-color: var(--gold);
  box-shadow: 0 4px 14px var(--gold-glow);
}

#cfg-root .cfg-pill.selected span {
  border-color: var(--gold);
  background: #fffdf8;
  color: var(--gold-dk);
  box-shadow: 0 0 0 3px var(--gold-ring);
}

#cfg-root .cfg-pill-full {
  grid-column: 1 / -1;
}

#cfg-root .cfg-pill-full span {
  min-height: 46px;
  font-size: 12.5px;
}

/* ── Fréquences ── */

#cfg-root .cfg-freqs {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

#cfg-root .cfg-freq {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
  box-shadow: var(--shadow-sm);
}

#cfg-root .cfg-freq input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#cfg-root .cfg-freq:hover { border-color: var(--gold); }

#cfg-root .cfg-freq.selected {
  border-color: var(--gold);
  background: #fffdf8;
  box-shadow: 0 0 0 3px var(--gold-ring);
}

#cfg-root .cfg-freq.selected .cfg-check {
  opacity: 1;
}

#cfg-root .cfg-freq-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#cfg-root .cfg-freq-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#cfg-root .cfg-freq-title strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

#cfg-root .cfg-freq-body p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--bark-lt);
}

#cfg-root .cfg-eco {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--green-lt);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

/* ── Grille résultats test ── */

#cfg-root .cfg-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
  flex: 1;
  align-content: start;
}

#cfg-root .cfg-result-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  box-shadow: var(--shadow-sm);
}

#cfg-root .cfg-result-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

#cfg-root .cfg-result-card.best { border-color: var(--gold-dk); }

#cfg-root .cfg-result-qty {
  font-size: 26px;
  font-weight: 700;
  color: var(--gold-dk);
  line-height: 1;
}

#cfg-root .cfg-result-detail {
  font-size: 12px;
  line-height: 1.5;
  color: var(--bark-lt);
}

#cfg-root .cfg-result-dur {
  padding: 7px 10px;
  background: var(--gold-lt);
  border: 1px solid #e8cc88;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-dk);
}

#cfg-root .cfg-result-transport {
  font-size: 12px;
  font-weight: 500;
}

#cfg-root .cfg-result-cta {
  margin-top: auto;
  padding: 10px;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--cfw-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  width: 100%;
}

#cfg-root .cfg-result-cta:hover {
  background: var(--gold-dk);
  transform: translateY(-1px);
}

#cfg-root .cfg-best-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--gold-dk);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 0 var(--r) 0 var(--r-sm);
}

/* ── Stepper ── */

#cfg-root .cfg-stepper-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

#cfg-root .cfg-stepper-lbl {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

#cfg-root .cfg-stepper {
  display: flex;
  align-items: center;
  gap: 14px;
}

#cfg-root .cfg-s-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--sand);
  color: var(--bark);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), border-color var(--t), color var(--t);
}

#cfg-root .cfg-s-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

#cfg-root .cfg-s-val {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  min-width: 42px;
  text-align: center;
}

#cfg-root .cfg-libre-comp {
  font-size: 13px;
  color: var(--bark-lt);
  padding: 10px 14px;
  background: var(--sand);
  border-radius: var(--r-sm);
  margin-bottom: 14px;
  border-left: 3px solid var(--gold);
}

/* ── Bandeau remise quantité ── */

#cfg-root .cfg-qty-discount {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  margin-bottom: 14px;
  line-height: 1.5;
  transition: background .2s, border-color .2s;
}

#cfg-root .cfg-qty-discount--active {
  background: #edf7ee;
  border-left: 3px solid var(--green-md);
  color: #2a6a35;
}

#cfg-root .cfg-qty-discount--active strong {
  color: var(--green);
}

#cfg-root .cfg-qty-discount--hint {
  background: #fffbec;
  border-left: 3px solid var(--gold);
  color: var(--bark);
}

#cfg-root .cfg-qty-discount--hint strong {
  color: var(--gold-dk);
}

#cfg-root .cfg-qty-discount--special {
  background: #eef4fb;
  border-left: 3px solid #4a7fc1;
  color: #2a4a74;
}

#cfg-root .cfg-qty-discount--special strong {
  color: #1e3a5f;
}

/* ── Récap livraison ── */

#cfg-root .cfg-delivery-recap {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  margin-bottom: 14px;
}

#cfg-root .cfg-delivery-recap-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--bark-lt);
  margin-bottom: 8px;
}

#cfg-root .cfg-delivery-recap-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#cfg-root .cfg-delivery-recap-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}

#cfg-root .cfg-delivery-recap-row span { color: var(--bark-lt); }
#cfg-root .cfg-delivery-recap-row strong { color: var(--green-md); }

/* ── Bénéfices abonnement ── */

#cfg-root .cfg-benefits {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

#cfg-root .cfg-benefit {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}

#cfg-root .cfg-benefit-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--green-lt);
  border: 1.5px solid #b8dcc8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
}

#cfg-root .cfg-benefit-body { flex: 1; }

#cfg-root .cfg-benefit-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

#cfg-root .cfg-benefit-desc {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--bark-lt);
}

#cfg-root .cfg-conclusion {
  font-size: 13px;
  line-height: 1.65;
  color: var(--bark);
  padding: 12px 14px;
  background: var(--gold-lt);
  border-radius: var(--r-sm);
  border: 1px solid #e6cc88;
  margin-top: 4px;
}

/* ════════════════════════════
   TABLEAU ABONNEMENT (desktop)
════════════════════════════ */

#cfg-root .cfg-sub-wrap {
  overflow-x: auto;
  border-radius: var(--r);
  border: 1.5px solid var(--border);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

#cfg-root table.cfg-sub {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 460px;
}

#cfg-root .cfg-sub thead tr {
  background: var(--ink);
  color: #fff;
}

#cfg-root .cfg-sub thead th {
  color: #fff;
}

#cfg-root .cfg-sub th {
  padding: 12px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

#cfg-root .cfg-sub tbody tr {
  border-bottom: 1px solid var(--border-lt);
  cursor: pointer;
  transition: background var(--t);
}

#cfg-root .cfg-sub tbody tr:last-child { border-bottom: none; }
#cfg-root .cfg-sub tbody tr:not(.abo-group-header) { cursor: pointer; }
#cfg-root .cfg-sub tbody tr:not(.abo-group-header):hover { background: var(--gold-lt); }

#cfg-root .cfg-sub tbody tr.selected-row {
  background: #fffdf0;
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

#cfg-root .cfg-sub td {
  padding: 12px 14px;
  vertical-align: middle;
}

#cfg-root .t-dur {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--sand2);
  color: var(--bark);
  font-size: 11.5px;
  font-weight: 700;
}

#cfg-root .t-freq {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--green-lt);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
}

#cfg-root .t-price { font-weight: 600; color: var(--ink); }
#cfg-root .t-price.t-price--green { color: var(--green-md); font-weight: 700; }

#cfg-root .t-old {
  display: block;
  text-decoration: line-through;
  color: var(--bark-lt);
  font-size: 11px;
}

#cfg-root .t-monthly { color: var(--green-md); font-weight: 700; }
#cfg-root .t-monthly.t-monthly--black { color: var(--bark); font-weight: 500; }

/* ── Divers ── */

#cfg-root .cfg-logistics-note {
  padding: 14px 16px;
  background: var(--gold-lt);
  border: 1px solid #e8cc88;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.6;
  color: var(--bark);
  margin-bottom: 14px;
}

#cfg-root .cfg-logistics-note strong { color: var(--gold-dk); }

#cfg-root .cfg-split-info {
  font-size: 13px;
  color: var(--bark-lt);
  padding: 10px 14px;
  background: var(--sand);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--gold);
}

/* ── Confirmation ── */

#cfg-root .cfg-confirm-card {
  background: var(--green);
  color: #f0faf2;
  border-radius: var(--r);
  padding: 26px 24px;
  margin-bottom: 18px;
  text-align: center;
}

#cfg-root .cfg-confirm-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 26px;
}

#cfg-root .cfg-confirm-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 7px;
}

#cfg-root .cfg-confirm-detail {
  font-size: 14px;
  line-height: 1.65;
  opacity: .85;
}

/* ── Récapitulatif ── */

#cfg-root .cfg-summary {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 18px;
}

#cfg-root .cfg-sum-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bark-lt);
  margin-bottom: 12px;
}

#cfg-root .cfg-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-lt);
  font-size: 13.5px;
}

#cfg-root .cfg-sum-row:last-child { border-bottom: none; }
#cfg-root .cfg-sum-row .k { color: var(--bark-lt); }
#cfg-root .cfg-sum-row .v { font-weight: 500; color: var(--ink); }
#cfg-root .cfg-sum-row .v.green { color: var(--green-md); font-weight: 600; }

/* ── Camion ── */

#cfg-root .cfg-truck-card {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r);
  padding: 26px 24px;
  margin-bottom: 18px;
  text-align: center;
}

#cfg-root .cfg-truck-ico { font-size: 40px; margin-bottom: 12px; }

#cfg-root .cfg-truck-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

#cfg-root .cfg-truck-detail {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .65);
}

#cfg-root .cfg-green-note {
  background: var(--green-lt);
  border: 1px solid #b8dcc8;
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-size: 13px;
  color: var(--green);
  font-weight: 500;
  margin-bottom: 18px;
}

#cfg-root .cfg-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--amber-bd);
  border-radius: var(--r-sm);
  background: var(--amber-lt);
  font-size: 12.5px;
  line-height: 1.55;
  color: #7c4a0a;
  margin-top: 10px;
}

#cfg-root .cfg-pay-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--sand2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--bark);
  font-weight: 500;
  margin-bottom: 14px;
}

/* ── Contact ── */

#cfg-root .cfg-contact-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--white);
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--bark);
}

#cfg-root .cfg-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
  align-content: start;
}

#cfg-root .cfg-field-full { grid-column: 1 / -1; }

#cfg-root .cfg-field label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

#cfg-root .cfg-field input,
#cfg-root .cfg-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  background: var(--white);
  font-family: var(--cfw-font);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}

#cfg-root .cfg-field textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.55;
}

#cfg-root .cfg-field input:focus,
#cfg-root .cfg-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* ── Footer étape ── */

#cfg-root .cfg-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border-lt);
}

/* ── Boutons ── */

#cfg-root .cfg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--cfw-font);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}

#cfg-root .cfg-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

#cfg-root .cfg-btn-primary {
  padding: 13px 22px;
  background: var(--gold);
  color: #fff;
  box-shadow: 0 4px 16px rgba(184, 135, 31, .3);
  flex-shrink: 0;
}

#cfg-root .cfg-btn-primary:hover:not(:disabled) {
  background: var(--gold-dk);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(184, 135, 31, .38);
}

#cfg-root .cfg-btn-ghost {
  padding: 12px 18px;
  background: transparent;
  color: var(--bark-lt);
  border: 1.5px solid var(--border);
}

#cfg-root .cfg-btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-dk);
}

#cfg-root .cfg-btn-green {
  padding: 13px 22px;
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 16px rgba(36, 96, 64, .25);
  flex-shrink: 0;
}

#cfg-root .cfg-btn-green:hover { background: var(--green-md); }

/* ════════════════════════════
   MOBILE (≤ 700px)
════════════════════════════ */

@media (max-width: 700px) {

  /* Header mobile */
  #cfg-root .cfg-mob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px 11px;
    background: var(--ink);
    border-radius: 16px 16px 0 0;
  }

  #cfg-root .cfg-mob-brand {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  #cfg-root .cfg-mob-brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #cfg-root .cfg-mob-brand-name {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .05em;
    color: #fff;
    line-height: 1;
  }

  #cfg-root .cfg-mob-brand-sub {
    font-size: 9.5px;
    color: rgba(255, 255, 255, .4);
    letter-spacing: .03em;
    margin-top: 2px;
  }

  #cfg-root .cfg-mob-prog {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #cfg-root .cfg-mob-dots {
    display: flex;
    gap: 5px;
    align-items: center;
  }

  #cfg-root .cfg-mob-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    flex-shrink: 0;
    transition: width var(--t), background var(--t), border-radius var(--t);
  }

  #cfg-root .cfg-mob-dot.done { background: rgba(184, 135, 31, .5); }

  #cfg-root .cfg-mob-dot.active {
    width: 20px;
    border-radius: 4px;
    background: var(--gold);
  }

  #cfg-root .cfg-mob-step-lbl {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, .4);
    white-space: nowrap;
  }

  /* Bandeau livraison mobile */
  #cfg-root .cfg-mob-delivery {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fffdf5;
    border-bottom: 1px solid #e8d5a8;
    font-size: 10px;
    color: var(--bark-lt);
    flex-wrap: wrap;
    text-align: center;
  }

  #cfg-root .cfg-mob-delivery strong {
    color: var(--gold-dk);
    font-weight: 700;
  }

  /* Layout */
  #cfg-root .cfg-sidebar { display: none; }

  #cfg-root .cfg-shell {
    grid-template-columns: 1fr;
    border-radius: 0 0 16px 16px;
    border-top: none;
    max-width: 100%;
    margin: 0;
  }

  #cfg-root .cfg-step {
    padding: 18px 14px 20px;
    min-height: auto;
  }

  /* Lignes 1294-1295, remplace par : */
  #cfg-root .cfg-step-head h2 { font-size: 20px; line-height: 1.1; margin-bottom: 3px; }
  #cfg-root .cfg-step-head p  { font-size: 12.5px; line-height: 1.35; }
  #cfg-root .cfg-card-text strong { line-height: 1.15; }
  #cfg-root .cfg-card-hint        { line-height: 1.25; }
  #cfg-root .cfg-cards         { grid-template-columns: 1fr; gap: 8px; }
  #cfg-root .cfg-pills         { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #cfg-root .cfg-pills .cfg-pill span { font-size: 13px; min-height: 50px; }
  #cfg-root .cfg-result-grid   { grid-template-columns: 1fr; }
  #cfg-root .cfg-form-grid     { grid-template-columns: 1fr; }

  #cfg-root .cfg-footer {
    flex-direction: column-reverse;
    gap: 8px;
    margin-top: 18px;
  }

  #cfg-root .cfg-btn {
    width: 100%;
    justify-content: center;
    min-height: 50px;
    font-size: 14px;
  }

  #cfg-root .cfg-btn-ghost { min-height: 44px; }
  #cfg-root .cfg-stepper-row { padding: 13px 14px; }
  #cfg-root .cfg-s-val { font-size: 22px; }

  /* ── Tableau abonnement → cartes empilées sur mobile ── */

  #cfg-root .cfg-sub-wrap {
    overflow-x: visible;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  #cfg-root table.cfg-sub { min-width: 0; font-size: 12px; }
  #cfg-root .cfg-sub thead { display: none; }

  /* Lignes d'offres : blocs blancs avec bordure */
  #cfg-root .cfg-sub tbody tr:not(.abo-group-header) {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    margin-bottom: 9px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    padding: 13px 14px;
  }

  #cfg-root .cfg-sub tbody tr:not(.abo-group-header):last-child { margin-bottom: 0; }

  /* En-têtes de groupe (Stock 3 mois, etc.) : séparateur discret, pas de bloc */
  #cfg-root .cfg-sub tbody tr.abo-group-header {
    display: block;
    border: none;
    border-top: 2px solid var(--gold-lt, #e8d5a8);
    border-radius: 0;
    margin: 14px 0 6px;
    background: transparent;
    box-shadow: none;
    padding: 8px 4px 2px;
  }

  #cfg-root .cfg-sub tbody tr.abo-group-header:first-child {
    border-top: none;
    margin-top: 0;
  }

  #cfg-root .cfg-sub tbody tr.abo-group-header td {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--bark-lt);
    text-transform: uppercase;
    letter-spacing: .06em;
    justify-content: flex-start;
  }

  #cfg-root .cfg-sub tbody tr.abo-group-header td::before { display: none; }

  #cfg-root .cfg-sub tbody tr:last-child { margin-bottom: 0; }

  #cfg-root .cfg-sub tbody tr.selected-row {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
    background: #fffdf0;
  }

  #cfg-root .cfg-sub td {
    padding: 4px 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
  }

  #cfg-root .cfg-sub td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bark-lt);
    flex-shrink: 0;
    margin-right: 8px;
  }

  /* 1re cellule = en-tête de carte : durée + fréquence, sans label */
  #cfg-root .cfg-sub td:first-child {
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-lt);
    justify-content: flex-start;
  }

  #cfg-root .cfg-sub td:first-child::before { display: none; }


  /* Auto-avancement mobile : masquer le bouton Continuer dans les étapes
   * avec cards ou pills (l'avancement se fait au toucher de la vignette).
   * Garder le bouton Continuer pour les étapes avec stepper (quantités). */
  #cfg-root .cfg-step:has(.cfg-cards) .cfg-footer .cfg-btn-primary,
  #cfg-root .cfg-step:has(.cfg-pills) .cfg-footer .cfg-btn-primary {
    display: none;
  }

  /* Exception : si l'étape a aussi un stepper, on garde le bouton */
  #cfg-root .cfg-step:has(.cfg-cards):has(.cfg-stepper) .cfg-footer .cfg-btn-primary,
  #cfg-root .cfg-step:has(.cfg-pills):has(.cfg-stepper) .cfg-footer .cfg-btn-primary {
    display: flex;
  }

  /* S'assurer que le bouton Retour reste toujours visible */
  #cfg-root .cfg-footer .cfg-btn-ghost {
    display: flex !important;
  }
} /* fin @media 700px */

/* ── Déchargement ── */
#cfg-root .cfg-tag-price {
  background: #fde8e8;
  color: #b91c1c;
}

#cfg-root .cfg-alert-warning {
  border-color: #fca5a5;
  background: #fff5f5;
  color: #7f1d1d;
  align-items: flex-start;
  gap: 10px;
}

#cfg-root .cfg-alert-warning svg {
  color: #b91c1c;
  margin-top: 1px;
}

#cfg-root .cfg-alert-warning div {
  font-size: 12.5px;
  line-height: 1.6;
}

#cfg-root .cfg-alert-warning strong {
  font-weight: 700;
  color: #7f1d1d;
}
/* ══════════════════════════════════════════════
   ÉVOLUTIONS CDC — Filwood
   ══════════════════════════════════════════════ */

/* ── FONC-03 : Avertissement modification quantité panier ── */
#cfg-root #cfgCartQtyWarning,
#cfgCartQtyWarning {
  display: none;
  align-items: flex-start;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #78350f;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 12px;
}
#cfgCartQtyWarning svg { color: #b45309; flex-shrink: 0; margin-top: 2px; }

/* ── FONC-02 : Prix HT avant panier (camion) ── */
#cfg-root .cfg-truck-price-ht,
#cfgTruckPriceHT {
  font-size: 18px;
  font-weight: 700;
  color: var(--green, #2d6a4f);
  margin-top: 8px;
  text-align: center;
}

/* ── FONC-04 : Tableau abonnements — groupes visuels ── */
/* Ligne en-tête de groupe (non cliquable) */
#cfg-root .cfg-sub tbody tr.abo-group-header {
  cursor: default;
  pointer-events: none;
}
#cfg-root .cfg-sub tbody tr.abo-group-header:hover {
  background: var(--cream, #fdf8f0);
}
#cfg-root .cfg-sub tbody tr.abo-group-header td:first-child {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--bark);
  border-bottom: 2px solid var(--gold-lt, #f3d996);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
#cfg-root table.cfg-sub .t-dur {
  font-weight: 700;
  font-size: 13px;
  color: var(--bark);
}
#cfg-root table.cfg-sub .t-freq {
  font-size: 12px;
  color: var(--bark-lt);
  margin-left: 6px;
}

/* ── FONC-06 / FONC-01 : Volume + dimensions dans les cartes résultat ── */
#cfg-root .cfg-result-detail {
  font-size: 12.5px;
  color: var(--bark-lt);
  margin-top: 3px;
  line-height: 1.5;
}

/* ── FONC-07 : Note clarification transport dans les récapitulatifs ── */
.cfg-sum-transport-note,
#cfg-root .cfg-sum-transport-note {
  font-size: 11.5px;
  color: var(--bark-lt, #9a7c5c);
  background: #fafaf7;
  border: 1px solid var(--border-lt, #e8e0d0);
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 10px;
  line-height: 1.6;
}

/* ── FONC-05 : Transport split — couleurs ── */
#cfg-root .cfg-split-info {
  font-size: 13px;
  line-height: 1.65;
  padding: 10px 14px;
  background: var(--cream, #fdf8f0);
  border-radius: 10px;
  border: 1px solid var(--border-lt, #e8e0d0);
}

/* ── Responsive mobile FONC-04 : tableau abonnement ── */
@media (max-width: 700px) {
  #cfg-root .cfg-sub td:first-child .t-dur {
    font-size: 14px;
  }
  #cfg-root .cfg-sub td:first-child .t-freq {
    display: block;
    margin-left: 0;
    margin-top: 3px;
    font-size: 11.5px;
  }
  #cfgCartQtyWarning {
    font-size: 12.5px;
  }
  .cfg-sum-transport-note {
    font-size: 11px;
  }
}

/* ── Mention indicatif récapitulatif (FONC-CDC) ── */
#cfg-root .cfg-sum-indicatif {
  font-size: 12px;
  line-height: 1.6;
  color: #7a5f42;
  background: #fdfaf3;
  border: 1px solid #e8d9b8;
  border-left: 3px solid #b8871f;
  border-radius: 6px;
  padding: 9px 12px;
  margin: 0 0 12px;
}
#cfg-root .cfg-sum-indicatif strong {
  color: #5c3d1e;
  display: block;
  margin-bottom: 2px;
}

/* ── Bouton "Continuer mes achats" page panier WooCommerce ── */
.cfw-continue-shopping-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 2px solid var(--bark, #8b6914);
  color: var(--bark, #8b6914) !important;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.18s, color 0.18s;
  cursor: pointer;
}
.cfw-continue-shopping-btn:hover {
  background: var(--bark, #8b6914);
  color: #fff !important;
}

/* ── Note transport avec ancre ── */
#cfg-transport-note {
  scroll-margin-top: 80px;
}