/* ==========================================================================
   UltraPC – Configurateur PC
   Palette du thème creacomputer (bleu #19488f, Open Sans héritée).
   Le vert, l'orange et le rouge sont réservés aux états de compatibilité.
   ========================================================================== */

.upc-cfg {
  --upc-blue: #19488f;
  --upc-blue-dark: #12366d;
  --upc-blue-soft: #e9eff9;
  --upc-sky: #128ece;
  --upc-orange: #f69c14;
  --upc-ink: #2b2f36;
  --upc-text: #555b66;
  --upc-muted: #8a909b;
  --upc-line: #e1e5ec;
  --upc-line-strong: #c9d0db;
  --upc-ground: #f5f7fa;
  --upc-surface: #fff;
  --upc-ok: #2e7d32;
  --upc-ok-soft: #e8f4ea;
  --upc-warn: #965c00;
  --upc-warn-soft: #fff3df;
  --upc-err: #c0282b;
  --upc-err-soft: #fdecec;
  --upc-radius: 8px;

  color: var(--upc-text);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 40px;
}
.upc-cfg *,
.upc-cfg *::before,
.upc-cfg *::after { box-sizing: border-box; }
.upc-cfg [hidden] { display: none !important; }
.upc-cfg button { font-family: inherit; }
.upc-cfg :focus-visible { outline: 2px solid var(--upc-sky); outline-offset: 2px; }

/* ---------- En-tête ---------- */
.upc-cfg__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 4px 0 18px; margin-bottom: 18px; border-bottom: 3px solid var(--upc-blue);
}
.upc-cfg__title { margin: 0 0 4px; font-size: 26px; font-weight: 700; color: var(--upc-ink); line-height: 1.2; }
.upc-cfg__lede { margin: 0; max-width: 70ch; color: var(--upc-text); }
.upc-cfg__reset {
  flex: 0 0 auto; background: none; border: 1px solid var(--upc-line-strong); border-radius: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--upc-text); cursor: pointer;
}
.upc-cfg__reset:hover { border-color: var(--upc-blue); color: var(--upc-blue); }

/* ---------- Mise en page ---------- */
.upc-cfg__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 991px) {
  .upc-cfg__body { grid-template-columns: 1fr; }
}
.upc-cfg__loading { padding: 40px 0; text-align: center; color: var(--upc-muted); }
.upc-cfg__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.upc-group {
  display: flex; align-items: center; gap: 10px; margin: 22px 0 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--upc-muted);
}
.upc-group::after { content: ""; flex: 1; height: 1px; background: var(--upc-line); }
.upc-group:first-child { margin-top: 0; }
.upc-group--toggle::after { display: none; }
.upc-group--toggle button {
  display: flex; align-items: center; gap: 10px; width: 100%; background: var(--upc-surface);
  border: 1px solid var(--upc-line); border-radius: var(--upc-radius); padding: 12px 14px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--upc-ink); text-align: left;
}
.upc-group--toggle button:hover { border-color: var(--upc-blue); }
.upc-group--toggle small {
  margin-left: auto; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--upc-muted);
}
.upc-group__chev {
  width: 8px; height: 8px; border-right: 2px solid var(--upc-blue); border-bottom: 2px solid var(--upc-blue);
  transform: rotate(-45deg); transition: transform .15s; flex: 0 0 auto;
}
.upc-group--toggle button[aria-expanded="true"] .upc-group__chev { transform: rotate(45deg); }
.upc-groupbody { margin-top: 8px; }

/* ---------- Ligne d'étape ---------- */
.upc-step {
  background: var(--upc-surface); border: 1px solid var(--upc-line); border-radius: var(--upc-radius);
  margin-bottom: 8px; transition: border-color .15s, box-shadow .15s;
}
.upc-step__row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 14px;
}
.upc-step.is-open { border-color: var(--upc-blue); box-shadow: 0 4px 18px -10px rgba(25, 72, 143, .45); }
.upc-step.is-filled { border-left: 4px solid var(--upc-blue); }
.upc-step.is-warn { border-left: 4px solid var(--upc-orange); }
.upc-step.is-block { border-color: var(--upc-err); border-left-width: 4px; background: var(--upc-err-soft); }
.upc-step.is-locked .upc-step__row { opacity: .75; }

.upc-step__icon {
  width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center;
  background: var(--upc-ground); color: var(--upc-muted);
}
.upc-step.is-filled .upc-step__icon { background: var(--upc-blue-soft); color: var(--upc-blue); }
.upc-step__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.upc-step__main { min-width: 0; }
.upc-step__label { font-size: 13px; font-weight: 700; color: var(--upc-ink); }
.upc-step__label small { font-weight: 400; color: var(--upc-muted); font-size: 12px; }
.upc-step__name {
  display: block; margin-top: 2px; font-size: 14px; color: var(--upc-ink); line-height: 1.35;
  overflow-wrap: anywhere;
}
.upc-step__name a { color: inherit; text-decoration: none; }
.upc-step__name a:hover { color: var(--upc-blue); text-decoration: underline; }
.upc-step__hint { margin-top: 2px; font-size: 13px; color: var(--upc-muted); }
/* Configuration préassemblée : composant fixé, ou choix borné. */
.upc-step__fixed { display: block; margin-top: 2px; font-size: 12px; color: var(--upc-muted); }
.upc-step__msg { margin-top: 5px; font-size: 12.5px; display: flex; gap: 6px; align-items: flex-start; }
.upc-step__msg.is-block { color: var(--upc-err); font-weight: 600; }
.upc-step__msg.is-warn { color: var(--upc-warn); }
.upc-step__msg.is-info { color: var(--upc-muted); }
.upc-step__msg.is-stock { color: var(--upc-err); }

.upc-step__side { display: flex; align-items: center; gap: 10px; }
.upc-step__price { text-align: right; font-weight: 700; color: var(--upc-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.upc-step__price small { display: block; font-weight: 400; font-size: 11.5px; color: var(--upc-muted); }

.upc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; line-height: 1;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.upc-btn--primary { background: var(--upc-blue); color: #fff; }
.upc-btn--primary:hover { background: var(--upc-blue-dark); color: #fff; }
.upc-btn--soft { background: var(--upc-blue-soft); color: var(--upc-blue); }
.upc-btn--soft:hover { background: var(--upc-blue); color: #fff; }
.upc-btn--ghost { background: transparent; border-color: var(--upc-line-strong); color: var(--upc-text); }
.upc-btn--ghost:hover { border-color: var(--upc-blue); color: var(--upc-blue); }
.upc-btn[disabled] { opacity: .55; cursor: not-allowed; }

.upc-step__remove {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid transparent; background: none;
  color: var(--upc-muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.upc-step__remove:hover { border-color: var(--upc-err); color: var(--upc-err); }

.upc-qty { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--upc-muted); }
.upc-qty select {
  border: 1px solid var(--upc-line-strong); border-radius: 6px; padding: 4px 6px; font-size: 13px;
  color: var(--upc-ink); background: #fff;
}

@media (max-width: 575px) {
  .upc-step__row { grid-template-columns: 36px minmax(0, 1fr); }
  .upc-step__icon { width: 36px; height: 36px; }
  .upc-step__side { grid-column: 1 / -1; justify-content: space-between; }
}

/* ---------- Chips de caractéristiques ---------- */
.upc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.upc-chip {
  font-size: 11.5px; padding: 2px 7px; border-radius: 4px; background: var(--upc-ground);
  border: 1px solid var(--upc-line); color: var(--upc-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Après un choix : la vue remonte sur l'étape, l'étape suivante s'illumine. */
.upc-step { scroll-margin-top: 16px; }
.upc-step.is-next { animation: upc-next 1.8s ease-out; }
@keyframes upc-next {
  0%, 30% { box-shadow: 0 0 0 3px rgba(18, 142, 206, .55); border-color: var(--upc-sky); }
  100% { box-shadow: 0 0 0 0 rgba(18, 142, 206, 0); }
}

/* ---------- Panneau de sélection ---------- */
.upc-picker { border-top: 1px solid var(--upc-line); background: var(--upc-ground); border-radius: 0 0 var(--upc-radius) var(--upc-radius); }
.upc-picker__bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px;
  border-bottom: 1px solid var(--upc-line);
}
.upc-picker__search {
  flex: 1 1 220px; min-width: 0; border: 1px solid var(--upc-line-strong); border-radius: 6px;
  padding: 8px 10px; font-size: 13.5px; color: var(--upc-ink); background: #fff;
}
.upc-picker__sort {
  border: 1px solid var(--upc-line-strong); border-radius: 6px; padding: 7px 8px; font-size: 13px;
  color: var(--upc-ink); background: #fff;
}
.upc-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--upc-text); cursor: pointer; margin: 0; }
.upc-switch input { width: 16px; height: 16px; accent-color: var(--upc-blue); margin: 0; }
.upc-picker__meta { padding: 8px 14px 0; font-size: 12.5px; color: var(--upc-muted); }
/* Filtres */
.upc-facets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--upc-line); }
.upc-facets[hidden] { display: none; }
.upc-facet { position: relative; }
.upc-facet > summary {
  list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--upc-line-strong); border-radius: 99px; background: #fff; padding: 6px 12px;
  font-size: 13px; font-weight: 600; color: var(--upc-text);
}
.upc-facet > summary::-webkit-details-marker { display: none; }
.upc-facet > summary::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); margin-left: 2px;
}
.upc-facet[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.upc-facet > summary:hover { border-color: var(--upc-blue); color: var(--upc-blue); }
.upc-facet > summary.is-active { background: var(--upc-blue-soft); border-color: var(--upc-blue); color: var(--upc-blue); }
.upc-facet__n {
  background: var(--upc-blue); color: #fff; border-radius: 99px; font-size: 11px; min-width: 18px; height: 18px;
  display: inline-grid; place-items: center; padding: 0 5px;
}
.upc-facet__panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 230px; max-width: 320px;
  max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--upc-line-strong);
  border-radius: 8px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35); padding: 6px;
}
.upc-facet__opt {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; margin: 0;
  padding: 6px 8px; border-radius: 5px; font-size: 13px; color: var(--upc-ink); cursor: pointer; font-weight: 400;
}
.upc-facet__opt:hover { background: var(--upc-ground); }
.upc-facet__opt input { width: 15px; height: 15px; margin: 0; accent-color: var(--upc-blue); }
.upc-facet__opt small { color: var(--upc-muted); font-variant-numeric: tabular-nums; }
.upc-facet__opt.is-empty { color: var(--upc-muted); }
.upc-facet__price { padding: 12px; display: grid; gap: 10px; min-width: 260px; }
.upc-facet__range { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--upc-muted); }
.upc-facet__range input {
  width: 92px; border: 1px solid var(--upc-line-strong); border-radius: 6px; padding: 6px 8px; font-size: 13px;
  color: var(--upc-ink); font-variant-numeric: tabular-nums;
}
.upc-link {
  background: none; border: 0; padding: 4px 2px; color: var(--upc-blue); font-size: 13px; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
@media (max-width: 575px) {
  .upc-facet { position: static; }
  .upc-facet__panel { left: 14px; right: 14px; max-width: none; }
  .upc-facets { position: relative; }
}

.upc-picker__notice {
  margin: 12px 14px 0; padding: 9px 12px 9px 34px; position: relative;
  background: var(--upc-blue-soft); border-radius: 6px; color: var(--upc-blue-dark);
  font-size: 13px; line-height: 1.45;
}
.upc-picker__notice::before {
  content: "i"; position: absolute; left: 11px; top: 9px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--upc-blue); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.upc-picker__list { list-style: none; margin: 0; padding: 10px 14px 6px; display: grid; gap: 8px; }
.upc-picker__more { padding: 4px 14px 14px; text-align: center; }
.upc-picker__empty { padding: 22px 14px; text-align: center; color: var(--upc-muted); }

.upc-item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--upc-line); border-radius: var(--upc-radius); padding: 10px 12px;
}
.upc-item:hover { border-color: var(--upc-line-strong); }
.upc-item.is-current { border-color: var(--upc-blue); box-shadow: inset 3px 0 0 var(--upc-blue); }
.upc-item.is-block { background: #fafbfc; }
.upc-item.is-block .upc-item__thumb img { opacity: .55; }
.upc-item__thumb { width: 56px; height: 56px; border-radius: 6px; background: var(--upc-ground); display: grid; place-items: center; overflow: hidden; }
.upc-item__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.upc-item__name { font-size: 13.5px; font-weight: 600; color: var(--upc-ink); line-height: 1.35; overflow-wrap: anywhere; }
.upc-item__name a { color: inherit; text-decoration: none; }
.upc-item__name a:hover { color: var(--upc-blue); text-decoration: underline; }
.upc-item__status { margin-top: 5px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.upc-item__status .is-ok { color: var(--upc-ok); }
.upc-item__status .is-warn { color: var(--upc-warn); }
.upc-item__status .is-block { color: var(--upc-err); font-weight: 600; }
.upc-item__status .is-info { color: var(--upc-muted); }
.upc-stock { font-weight: 600; }
.upc-stock.is-in { color: var(--upc-ok); }
.upc-stock.is-out { color: var(--upc-err); }
.upc-item__buy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.upc-item__price { font-weight: 700; color: var(--upc-ink); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.upc-item__price small { display: block; font-size: 11.5px; font-weight: 400; color: var(--upc-muted); }
.upc-item__price.is-up small { color: var(--upc-text); }

@media (max-width: 575px) {
  .upc-item { grid-template-columns: 48px minmax(0, 1fr); }
  .upc-item__thumb { width: 48px; height: 48px; }
  .upc-item__buy { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- Récapitulatif ---------- */
.upc-cfg__summary { position: sticky; top: 16px; }
@media (max-width: 991px) { .upc-cfg__summary { position: static; } }
.upc-sum { background: var(--upc-surface); border: 1px solid var(--upc-line); border-radius: var(--upc-radius); padding: 18px; }
.upc-sum__eyebrow { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--upc-muted); }
.upc-sum__total { margin: 4px 0 0; font-size: 28px; font-weight: 700; color: var(--upc-ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.upc-sum__count { margin: 2px 0 0; font-size: 13px; color: var(--upc-muted); }
.upc-sum__discount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; font-size: 13px; }
.upc-sum__discount s { color: var(--upc-muted); font-variant-numeric: tabular-nums; }
.upc-sum__discount span { color: var(--upc-ok); font-weight: 600; }
.upc-sum__discount b { color: var(--upc-ok); font-variant-numeric: tabular-nums; margin-left: auto; }
.upc-cfg__promo {
  display: flex; align-items: center; gap: 12px; margin: -6px 0 18px; padding: 10px 14px;
  background: var(--upc-ok-soft); border: 1px solid #cfe8d4; border-radius: var(--upc-radius); color: var(--upc-ink); font-size: 13.5px;
}
.upc-cfg__promo--preset a { font-weight: 600; text-decoration: underline; margin-left: 4px; }
.upc-cfg__promo b {
  flex: 0 0 auto; background: var(--upc-ok); color: #fff; border-radius: 6px; padding: 4px 9px; font-size: 15px; font-variant-numeric: tabular-nums;
}
.upc-sum__gauge { margin-top: 16px; }
.upc-sum__gauge-lab { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.upc-sum__gauge-lab b { color: var(--upc-ink); font-variant-numeric: tabular-nums; }
.upc-bar { height: 7px; border-radius: 99px; background: var(--upc-line); overflow: hidden; }
.upc-bar i { display: block; height: 100%; width: 0; background: var(--upc-blue); border-radius: 99px; transition: width .3s ease; }
.upc-bar i.is-warn { background: var(--upc-orange); }
.upc-bar i.is-block { background: var(--upc-err); }
.upc-sum__hint { margin: 5px 0 0; font-size: 12px; color: var(--upc-muted); }

.upc-checks { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--upc-line); display: grid; gap: 9px; }
.upc-checks:empty { display: none; }
.upc-checks li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 12.5px; line-height: 1.4; }
.upc-checks b { display: block; color: var(--upc-ink); font-weight: 600; }
.upc-checks .ico { font-weight: 700; text-align: center; }
.upc-checks .is-ok { color: var(--upc-ok); }
.upc-checks .is-warn { color: var(--upc-warn); }
.upc-checks .is-block { color: var(--upc-err); }
.upc-checks .is-info { color: var(--upc-muted); }

.upc-sum__assembly {
  display: grid; grid-template-columns: 20px 1fr; gap: 8px; margin: 14px 0 0; padding: 10px 12px;
  background: var(--upc-blue-soft); border-radius: 6px; font-size: 12.5px; color: var(--upc-text);
}
.upc-sum__assembly svg { width: 18px; height: 18px; fill: none; stroke: var(--upc-blue); stroke-width: 1.8; stroke-linejoin: round; margin-top: 1px; }
.upc-sum__assembly b { display: block; color: var(--upc-blue); }

.upc-sum__error {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 6px; background: var(--upc-err-soft);
  color: var(--upc-err); font-size: 13px; font-weight: 600;
}
.upc-sum__cta {
  display: block; width: 100%; margin-top: 16px; padding: 13px 14px; border: 0; border-radius: 7px;
  background: var(--upc-blue); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.upc-sum__cta:hover:not([disabled]) { background: var(--upc-blue-dark); }
.upc-sum__cta[disabled] { background: var(--upc-line-strong); color: #fff; cursor: not-allowed; }
.upc-sum__share {
  display: block; width: 100%; margin-top: 8px; padding: 10px 14px; border-radius: 7px; background: none;
  border: 1px solid var(--upc-line-strong); color: var(--upc-text); font-size: 13px; font-weight: 600; cursor: pointer;
}
.upc-sum__share:hover:not([disabled]) { border-color: var(--upc-blue); color: var(--upc-blue); }
.upc-sum__share[disabled] { opacity: .55; cursor: not-allowed; }
.upc-sum__link { margin-top: 10px; }
.upc-sum__link label { display: block; font-size: 12px; font-weight: 600; color: var(--upc-ink); margin-bottom: 4px; }
.upc-sum__link input {
  width: 100%; border: 1px solid var(--upc-line-strong); border-radius: 6px; padding: 7px 9px;
  font-size: 12.5px; color: var(--upc-ink); background: var(--upc-ground);
}
.upc-sum__note { margin: 12px 0 0; font-size: 12px; color: var(--upc-muted); line-height: 1.45; }

/* ---------- Barre mobile ---------- */
.upc-cfg__mobilebar { display: none; }
@media (max-width: 991px) {
  .upc-cfg__mobilebar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 10px 16px;
    background: #fff; border-top: 1px solid var(--upc-line); box-shadow: 0 -6px 18px -12px rgba(0, 0, 0, .35);
  }
  .upc-cfg__mobilebar b { display: block; font-size: 17px; color: var(--upc-ink); font-variant-numeric: tabular-nums; }
  .upc-cfg__mobilebar small { font-size: 12px; color: var(--upc-muted); }
  .upc-cfg__mobilebar-btn {
    background: var(--upc-blue); color: #fff; border-radius: 6px; padding: 10px 14px; font-weight: 700;
    font-size: 13px; text-decoration: none;
  }
  .upc-cfg__mobilebar-btn:hover, .upc-cfg__mobilebar-btn:focus { color: #fff; text-decoration: none; }
  .upc-cfg { padding-bottom: 70px; }
  /* La barre fixe ne doit pas couvrir le pied de page du site. */
  body.upc-has-mobilebar { padding-bottom: 70px; }
}

.upc-cfg__noscript { padding: 20px; background: var(--upc-warn-soft); color: var(--upc-warn); border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .upc-cfg * { transition: none !important; animation: none !important; }
}