/* css8 Product Configurator — wizard styling.
   Design language: square (no border-radius), --space-* rhythm, panels = white fill +
   --shadow-panel (no outline), borders only on cards/controls, --green-cart for commit. */

.cfg-wrap { max-width: 1180px; margin: 0 auto; padding: var(--space-3); }

/* Page-top hero — gradient banner matching the site (.gradient h1) + the zone/panel headers,
   so the title reads as a header band instead of floating bare on the slate body. */
.cfg-hero { background: var(--brand-gradient); color: #fff; box-shadow: var(--shadow-panel);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.cfg-hero--img { display: flex; align-items: center; gap: var(--space-4); }
.cfg-hero__text { flex: 1 1 auto; min-width: 0; }
.cfg-hero__img { flex: 0 0 auto; max-height: 96px; max-width: 220px; width: auto;
  /* product/system art (often on white/transparent) → clean white plate on the gradient */
  background: #fff; padding: var(--space-1); box-shadow: var(--shadow-panel); }
.cfg-hero__title { display: flex; align-items: center; gap: var(--space-2);
  font-size: 1.9em; margin: 0; letter-spacing: -.02em; }
.cfg-hero__title .icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.cfg-hero__intro { margin: var(--space-1) 0 0; color: rgba(255, 255, 255, .9);
  font-size: .98em; max-width: 72ch; }
@media (max-width: 640px) {
  .cfg-hero--img { flex-direction: column-reverse; align-items: flex-start; gap: var(--space-2); }
}

/* Empty / not-found state */
.cfg-h1 { display: flex; align-items: center; gap: var(--space-1); font-size: 1.7em; margin: 0 0 var(--space-2); }
.cfg-h1 .icon { width: 1.1em; height: 1.1em; }
.cfg-empty { color: #444; }

/* Configurators index (bare /configurateur route) */
.cfg-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-2); }
.cfg-index__card { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3);
  background: #fff; box-shadow: var(--shadow-panel); color: #1d2733; text-decoration: none;
  transition: box-shadow .15s, transform .15s; }
.cfg-index__card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .14); transform: translateY(-1px); }
.cfg-index__ico { display: inline-flex; color: var(--brand); flex: 0 0 auto; }
.cfg-index__ico .icon { width: 22px; height: 22px; }
.cfg-index__name { flex: 1 1 auto; font-weight: 700; }
.cfg-index__card > .icon { flex: 0 0 auto; width: 18px; height: 18px; color: #b2bac3; }

/* ── Progress header ─────────────────────────────────────────────────────── */
.cfg-progress { display: flex; align-items: center; gap: var(--space-2);
  background: #fff; box-shadow: var(--shadow-panel); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3); }
.cfg-progress__dots { display: flex; gap: var(--space-1); }
/* No scale transforms on dots — a scaled dot would re-scale the tooltip it hosts. Hover/current
   are shown with square rings (box-shadow) instead, keeping the tooltip at true size. */
.cfg-dot { position: relative; width: 14px; height: 14px; background: #d6d9de; display: inline-block;
  padding: 0; border: 0; cursor: pointer; transition: background .2s, box-shadow .2s; }
.cfg-dot:hover, .cfg-dot:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.cfg-dot--on { background: var(--brand); }

/* Hover tooltip: the step's chosen products (injected by config/steptip into the dot). */
.cfg-steptip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 60; display: block; min-width: 150px; max-width: 240px;
  text-align: left; background: #1d2733; color: #fff; padding: var(--space-1) var(--space-2);
  font-size: 12px; font-weight: 400; line-height: 1.5; box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  pointer-events: none; white-space: normal; }
.cfg-steptip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1d2733; }
.cfg-steptip__hd { display: block; font-weight: 700; margin-bottom: 2px; }
.cfg-steptip__row { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-steptip__q { color: #6fce5b; font-weight: 700; }
.cfg-steptip__empty { display: block; color: #b2bac3; font-style: italic; }
/* step errors in the tooltip — the quick "what's wrong here" glance */
.cfg-steptip__errs { display: block; margin-top: var(--space-1); padding-top: var(--space-1);
  border-top: 1px solid rgba(255, 255, 255, .15); }
.cfg-steptip__err { display: flex; align-items: flex-start; gap: var(--space-0);
  color: #ff9a9a; white-space: normal; line-height: 1.35; margin-top: 2px; }
.cfg-steptip__err .icon { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; }
/* validity (set by config/eval) overrides the progress colour; --cur ring still marks active */
.cfg-dot--ok { background: var(--green-cart); }
.cfg-dot--err { background: #d64545; }
.cfg-dot--cur { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7a8794; }   /* active step (no scale — hosts the tooltip) */
.cfg-progress__label { color: #444; font-size: .95em; }

/* ── Two-column layout: wizard + sticky live panel ───────────────────────── */
.cfg-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-3); align-items: start; }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.cfg-step { display: none; }
.cfg-step--active { display: block; animation: cfg-fade .25s ease; outline: none; }
@keyframes cfg-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Zones ───────────────────────────────────────────────────────────────── */
.cfg-zone { background: #fff; box-shadow: var(--shadow-panel); margin-bottom: var(--space-3); }
.cfg-zone__title { margin: 0; padding: var(--space-1) var(--space-3); color: #fff;
  font-variant: small-caps; font-weight: bold; letter-spacing: .02em;
  background: var(--cfg-zone-accent, var(--brand-gradient)); }
.cfg-zone__rows { padding: var(--space-2) var(--space-3); }

/* ── Presentational items (the "guided experience", interleaved with products) ─ */
/* TITRE — a subtitle grouping products within a zone */
.cfg-titre { margin: var(--space-2) 0 var(--space-1); font-size: 1em; font-weight: 700;
  color: #1d2733; border-bottom: 2px solid #eef0f2; padding-bottom: var(--space-0); }
.cfg-zone__rows > .cfg-titre:first-child { margin-top: 0; }

/* FAKETITRE — a sub-zone header bar (echoes the zone title, one notch quieter) */
.cfg-faketitre { margin: var(--space-2) calc(-1 * var(--space-3)) var(--space-2);
  padding: var(--space-0) var(--space-3); font-variant: small-caps; font-weight: bold;
  color: #fff; background: var(--brand-gradient); opacity: .9; }

/* COMMENTAIRE — a recommendation / note callout */
.cfg-comment { display: flex; gap: var(--space-1); align-items: flex-start;
  margin: var(--space-1) 0 var(--space-2); padding: var(--space-2);
  background: #fffbea; border-left: 3px solid #e0a63b; font-size: .88em; color: #6a5320; }
.cfg-comment .icon { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: #b07d1e; }
.cfg-comment__txt { line-height: 1.4; }
.cfg-var { font-weight: 700; color: #1f7a32; }   /* live {VAR} value inside a comment */

/* IMAGE — explanation picture */
.cfg-figure { margin: var(--space-2) 0; text-align: center; }
.cfg-figure__img { display: inline-block; border: 1px solid #eef0f2; }

/* >>> … <<< — collapsible group (native <details>, zero JS) */
.cfg-group { margin: var(--space-1) 0; border: 1px solid #eef0f2; }
.cfg-group__summary { cursor: pointer; padding: var(--space-1) var(--space-2);
  font-size: .85em; font-weight: 600; color: #4a5563; background: #f6f7f8;
  list-style: none; user-select: none; }
.cfg-group__summary::-webkit-details-marker { display: none; }
.cfg-group__summary::before { content: '▸'; margin-right: var(--space-1); color: #8a94a0; }
.cfg-group[open] > .cfg-group__summary::before { content: '▾'; }
.cfg-group__body { padding: 0 var(--space-2); }

/* ── Product row (a card-like control line) ──────────────────────────────── */
.cfg-row { display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; border-bottom: 1px solid #eef0f2;
  transition: background .2s, box-shadow .2s; }
.cfg-row:last-child { border-bottom: none; }
/* Error-spotting highlight (set live by config/eval): green = chosen & valid, red = implicated
   in a problem. Left accent bar via inset shadow (no layout shift) + a soft tint. */
.cfg-row--ok  { background: #f2fbf3; box-shadow: inset 3px 0 0 var(--green-cart); }
.cfg-row--err { background: #fdf0f0; box-shadow: inset 3px 0 0 #d64545; }
.cfg-row__img { flex: 0 0 56px; width: 56px; text-align: center; }
.cfg-row__img img { max-width: 56px; max-height: 56px; }
.cfg-row__info { flex: 1 1 auto; min-width: 0; }
.cfg-row__ref { font-weight: bold; color: #1d2733; text-decoration: none; }
.cfg-row__ref:hover { text-decoration: underline; }
/* Ref line: ref + preview eye + capability badges, cleanly aligned on one baseline. */
.cfg-row__head { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.cfg-row__badges { display: inline-flex; align-items: center; gap: var(--space-0); }
.cfg-row__icon { height: 15px; width: auto; display: block; opacity: .6; transition: opacity .15s; }
.cfg-row:hover .cfg-row__icon { opacity: .85; }

/* Quick-preview eye — a subtle square icon-button (square design: no radius) that lifts on
   hover; opens the shared product preview (no add-to-cart CTA in this context). */
.cfg-row__eye { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 auto; border: 0; padding: 0; background: none;
  cursor: pointer; color: #b2bac3; transition: color .15s, background .15s; }
.cfg-row__eye:hover, .cfg-row__eye:focus-visible { color: var(--brand); background: #eef1f3; outline: none; }
.cfg-row__eye .icon { width: 15px; height: 15px; }
.cfg-row__desc { font-size: .82em; color: #6a7480; line-height: 1.25; margin-top: 2px; }
.cfg-row__qty { flex: 0 0 auto; }
.cfg-row__fixed { display: flex; align-items: center; }
.cfg-row__fixedq { min-width: 38px; text-align: center; font-weight: bold; color: #555;
  border: 1px solid #d6d9de; padding: var(--space-0) var(--space-1); background: #f6f7f8; }

/* ── Mini rows = accessories/options of the product above (battery, SIM…) ────
   Indented, smaller, connected to the parent by a dotted tree branch. */
.cfg-row--mini { position: relative; margin-left: var(--space-3); padding-left: var(--space-3);
  padding-top: var(--space-1); padding-bottom: var(--space-1); border-bottom-color: #f4f6f7; }
.cfg-row--mini .cfg-row__img { flex-basis: 32px; width: 32px; }
.cfg-row--mini .cfg-row__img img { max-width: 32px; max-height: 32px; }
.cfg-row--mini .cfg-row__ref { font-size: .9em; }
.cfg-row--mini .cfg-row__desc { font-size: .72em; }
/* trunk (vertical dotted): from the parent down to this item's branch point… */
.cfg-row--mini::before { content: ''; position: absolute; left: var(--space-1);
  top: 0; height: 50%; border-left: 1px dotted #aeb6bf; }
/* …extended full-height when another accessory follows, so the trunk stays continuous */
.cfg-row--mini:has(+ .cfg-row--mini)::before { height: 100%; }
/* branch (horizontal dotted) reaching the item at the vertical centre */
.cfg-row--mini::after { content: ''; position: absolute; left: var(--space-1);
  top: 50%; width: var(--space-2); border-top: 1px dotted #aeb6bf; }

/* ── Per-zone error slot ─────────────────────────────────────────────────── */
.cfg-zone-err:empty { display: none; }
.cfg-zone-err__box { margin: 0 var(--space-3) var(--space-2); }
.cfg-zone-err__line { display: flex; align-items: center; gap: var(--space-1);
  background: #fdecec; color: #b3261e; padding: var(--space-1) var(--space-2);
  font-size: .85em; font-weight: 600; margin-top: var(--space-0); }
.cfg-zone-err__line .icon { width: 15px; height: 15px; }

/* ── Wizard nav ──────────────────────────────────────────────────────────────
   Sticky footer: floats at the bottom of the viewport while the (often long, most-used
   items on top) step scrolls, so Précédent / Étape suivante is always one click away —
   settles inline once you scroll to the actual end. Pure CSS, zero JS. */
.cfg-nav { position: sticky; bottom: var(--space-3); z-index: 20;
  /* A distinct floating island: shrink to its buttons + centre it (NOT full column width, which
     read as stuck), and lift it well off the page so it's clearly a control, not a layout row. */
  display: flex; width: fit-content; max-width: 100%; margin: var(--space-4) auto 0;
  align-items: center; gap: var(--space-2); padding: var(--space-1);
  background: #fff; border: 1px solid #e2e6ea; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); }
.cfg-nav > span:empty { display: none; }   /* step 1 has no Back — drop its placeholder so the pill centres on Next */
.cfg-nav button { display: inline-flex; align-items: center; gap: var(--space-1); }
.cfg-nav button .icon { width: 16px; height: 16px; }
/* The terminal CTA now reuses the shared .primary-button + .btn-hero look (single-sourced);
   only its icon is nudged up a touch here. */
.cfg-nav__finish .icon { width: 18px; height: 18px; }
/* On the short-panel mobile layout the sticky island is even more valuable; nothing to change. */

/* ── Live panel ──────────────────────────────────────────────────────────── */
.cfg-panel { position: sticky; top: var(--space-3); background: #fff; box-shadow: var(--shadow-panel); }
.cfg-panel__head { display: flex; align-items: center; gap: var(--space-1);
  background: var(--brand-gradient); color: #fff; font-weight: bold;
  padding: var(--space-1) var(--space-3); }
.cfg-panel__head .icon { width: 16px; height: 16px; }
.cfg-panel__body { padding: var(--space-3); font-size: .9em; }
.cfg-panel__hint { color: #6a7480; }

/* Live recap — the offer being built, under the panel body */
.cfg-panel__recap { border-top: 1px solid #eef0f2; padding: var(--space-2) var(--space-3) var(--space-3); }
.cfg-precap__head { display: flex; align-items: center; gap: var(--space-1);
  font-weight: 700; font-size: .82em; color: #4a5563; margin-bottom: var(--space-2); }
.cfg-precap__head .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.cfg-precap__count { margin-left: auto; font-weight: 700; color: #fff; background: var(--brand);
  padding: 1px var(--space-1); font-size: .95em; }
.cfg-precap__empty { color: #8a94a0; font-size: .82em; }
.cfg-precap__list { max-height: 280px; overflow: auto; display: flex; flex-direction: column; }
.cfg-precap__row { display: flex; align-items: center; gap: var(--space-1);
  font-size: .82em; padding: 2px 0; border-bottom: 1px solid #f4f6f7; }
.cfg-precap__row:last-child { border-bottom: none; }
.cfg-precap__img { flex: 0 0 24px; width: 24px; text-align: center; }
.cfg-precap__img img { max-width: 24px; max-height: 24px; vertical-align: middle; }
.cfg-precap__ref { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 600; color: #1d2733; }
.cfg-precap__qte { flex: 0 0 auto; color: #4a5563; font-weight: 700; }

.cfg-status { display: flex; align-items: center; gap: var(--space-1);
  font-weight: bold; padding: var(--space-1) var(--space-2); margin-bottom: var(--space-2); }
.cfg-status .icon { width: 18px; height: 18px; }
.cfg-status--ok { background: #e7f7e9; color: #1f7a32; }
.cfg-status--ko { background: #fdecec; color: #b3261e; }
.cfg-status--empty { background: #f1f3f5; color: #5b6470; }

.cfg-obs { border-left: 3px solid var(--brand); padding-left: var(--space-2); margin-bottom: var(--space-2); }
.cfg-obs__line { padding: 2px 0; }
.cfg-obs--neg { color: #b3261e; font-weight: 600; }
.cfg-obs--pos { color: #1f7a32; }
.cfg-obs--zero { color: #5b6470; }

.cfg-msg { display: flex; align-items: flex-start; gap: var(--space-1);
  padding: var(--space-1) var(--space-2); margin-top: var(--space-1); font-size: .88em; }
.cfg-msg .icon { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.cfg-msg--err { background: #fdecec; color: #b3261e; }
.cfg-msg--incompat { background: #fff4e5; color: #a45a00; }

.cfg-panel__godevis { display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-2); color: var(--brand); font-weight: 600; text-decoration: none; }
.cfg-panel__godevis:hover { text-decoration: underline; }

/* ── Finish modal ────────────────────────────────────────────────────────── */
.cfg-finish__warn { display: flex; align-items: center; gap: var(--space-1);
  background: #fff4e5; color: #a45a00; padding: var(--space-2); margin-bottom: var(--space-2); }
.cfg-finish__ok { display: flex; align-items: center; gap: var(--space-1);
  background: #e7f7e9; color: #1f7a32; padding: var(--space-2); margin-bottom: var(--space-2); }
.cfg-finish__warn .icon, .cfg-finish__ok .icon { width: 18px; height: 18px; }
.cfg-finish__recap { margin-bottom: var(--space-3); }
.cfg-recap { width: 100%; border-collapse: collapse; }
.cfg-recap td { padding: var(--space-1) var(--space-1); border-bottom: 1px solid #eef0f2; vertical-align: middle; }
.cfg-recap__img { width: 40px; text-align: center; }
.cfg-recap__ref { font-weight: 600; }
.cfg-recap__qte { text-align: right; white-space: nowrap; color: #444; }
.cfg-recap__empty { color: #777; }
.cfg-finish__label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.cfg-finish__input { width: 100%; padding: var(--space-1) var(--space-2);
  border: 1px solid #c8ccd1; font-size: 1.05em; box-sizing: border-box; }
.cfg-finish__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.cfg-finish__actions button { flex: 1 1 0; display: inline-flex; align-items: center;
  justify-content: center; gap: var(--space-1); padding: var(--space-2); }
.cfg-finish__actions .icon { width: 16px; height: 16px; }

/* ── Responsive: panel drops below on narrow viewports ───────────────────── */
@media (max-width: 860px) {
  .cfg-layout { grid-template-columns: 1fr; }
  .cfg-panel { position: static; order: -1; margin-bottom: var(--space-3); }
}