/* ============================================================
   ZYNTROL Repair Configurator — Frontend (match 1:1 prototype)
   Design : noir profond + bleu électrique #5865f2 + or premium
   Toutes les règles préfixées .zrc-root pour isoler du thème WP.
   ============================================================ */

.zrc-root, .zrc-root *, .zrc-root *::before, .zrc-root *::after{
  box-sizing:border-box !important;
}
.zrc-root{
  max-width:var(--zrc-max-width);
  margin:0 auto;
  background: var(--zrc-page-bg) !important;
  color:var(--zrc-text) !important;
  font-family:var(--zrc-body-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif) !important;
  border-radius:24px;
  /* IMPORTANT : pas d'overflow:hidden ici, sinon position:sticky du sidebar ne fonctionne plus */
  overflow:visible;
  line-height:1.5;
  position:relative;
  isolation:isolate;
}
.zrc-root *{margin:0;padding:0}
.zrc-root h1,.zrc-root h2,.zrc-root h3,.zrc-root h4{
  font-family:var(--zrc-title-font, "Space Grotesk", "Inter", system-ui, sans-serif);
  color:var(--zrc-text);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
}
.zrc-root p{color:inherit}
.zrc-root ul,.zrc-root ol,.zrc-root li{list-style:none}
.zrc-root a{color:var(--zrc-primary);text-decoration:none}
.zrc-root img{max-width:100%;height:auto;display:block}
.zrc-root button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;margin:0;text-align:inherit;-webkit-appearance:none;appearance:none}
.zrc-root [hidden],.zrc-root .zrc-hidden{display:none !important;visibility:hidden !important}
.zrc-root section.zrc-pane{display:none !important}
.zrc-root section.zrc-pane.zrc-pane-active{display:block !important;visibility:visible !important}

/* ===== HERO ===== */
.zrc-hero{padding:56px 24px 48px;text-align:center;position:relative;overflow:hidden}
.zrc-hero-inner{position:relative;z-index:1;width:100%;margin:0 auto}
.zrc-root .zrc-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;
  border:1px solid var(--zrc-hero-badge-border) !important;
  background:var(--zrc-hero-badge-bg) !important;
  color:var(--zrc-hero-badge-color) !important;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.zrc-badge-icon{font-size:12px}
.zrc-root .zrc-title{
  font-size:var(--zrc-title-size-d) !important;font-weight:800;
  margin:22px 0 16px;
  color:var(--zrc-hero-title-color1);
}
.zrc-title-p1{color:var(--zrc-hero-title-color1)}
.zrc-title-p2{color:var(--zrc-hero-title-color2);margin-left:.2em}
.zrc-title-p2.is-grad{
  background:linear-gradient(135deg,var(--zrc-hero-title-color2),color-mix(in oklab,var(--zrc-hero-title-color2) 55%,white));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.zrc-root .zrc-subtitle{
  color:var(--zrc-muted);font-size:var(--zrc-subtitle-size-d) !important;
  margin:0 auto;max-width:680px;line-height:1.6;
}
.zrc-grad{
  background:linear-gradient(135deg,var(--zrc-primary),color-mix(in oklab,var(--zrc-primary) 55%,white));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.zrc-grad-premium{
  background:linear-gradient(135deg,var(--zrc-premium),color-mix(in oklab,var(--zrc-premium) 65%,white));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ===== MAIN LAYOUT ===== */
.zrc-main{padding:32px 24px 40px}
.zrc-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:1024px){.zrc-grid{grid-template-columns:1fr 360px;gap:40px}}
.zrc-flow{display:flex;flex-direction:column;gap:32px;min-width:0}

/* ===== STEPPER (pills - ancien style) ===== */
.zrc-stepper{
  list-style:none;padding:0;margin:0;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.zrc-stepper-pills .zrc-step{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  border:1px solid var(--zrc-border);
  background:color-mix(in oklab,var(--zrc-card-bg) 70%,transparent);
  color:var(--zrc-muted);
  font-size:13px;font-weight:600;
  transition:all .25s ease;cursor:pointer;
}
.zrc-stepper-pills .zrc-step:hover{color:var(--zrc-text);border-color:var(--zrc-border-strong)}
.zrc-stepper-pills .zrc-step.is-active{
  border-color:color-mix(in oklab,var(--zrc-primary) 60%,transparent);
  color:var(--zrc-primary);
  background:color-mix(in oklab,var(--zrc-primary) 12%,transparent);
  box-shadow:0 0 24px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*60%),transparent);
}
.zrc-stepper-pills .zrc-step.is-done{color:var(--zrc-text);border-color:var(--zrc-border-strong)}
.zrc-stepper-pills .zrc-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:999px;
  background:color-mix(in oklab,var(--zrc-text) 12%,transparent);
  font-size:12px;font-weight:700;
}
.zrc-stepper-pills .zrc-step.is-active .zrc-step-num{background:var(--zrc-primary);color:var(--zrc-primary-text)}
.zrc-stepper-pills .zrc-step-line{display:none}

/* ===== STEPPER (circles - nouveau style référence) ===== */
.zrc-stepper-circles .zrc-stepper{
  flex-wrap:nowrap;gap:0;justify-content:space-between;
  padding:8px 0 4px;width:100%;
}
.zrc-stepper-circles .zrc-step{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  flex:1 1 0;min-width:0;
  padding:0;background:none;border:0;
  color:var(--zrc-step-label,var(--zrc-muted));
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:color .25s ease;
}
.zrc-stepper-circles .zrc-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:999px;
  background:var(--zrc-step-bg);
  border:2px solid var(--zrc-step-border);
  color:var(--zrc-step-text);
  font-size:15px;font-weight:800;
  transition:all .25s ease;
  position:relative;z-index:2;
}
.zrc-stepper-circles .zrc-step-label{
  text-align:center;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.zrc-stepper-circles .zrc-step-line{
  position:absolute;top:21px;left:calc(50% + 24px);right:calc(-50% + 24px);
  height:2px;background:var(--zrc-step-line,var(--zrc-border));
  z-index:1;
}
.zrc-stepper-circles .zrc-step:hover{color:var(--zrc-text)}
.zrc-stepper-circles .zrc-step:hover .zrc-step-num{filter:brightness(1.1)}
.zrc-stepper-circles .zrc-step.is-active{color:var(--zrc-step-label-active)}
.zrc-stepper-circles .zrc-step.is-active .zrc-step-num{
  background:var(--zrc-step-bg-active);
  border-color:var(--zrc-step-border-active);
  color:var(--zrc-step-text-active);
  box-shadow:0 0 24px color-mix(in oklab,var(--zrc-step-bg-active) calc(var(--zrc-glow)*70%),transparent);
}
.zrc-stepper-circles .zrc-step.is-done{color:var(--zrc-step-label-done)}
.zrc-stepper-circles .zrc-step.is-done .zrc-step-num{
  background:var(--zrc-step-bg-done);
  border-color:var(--zrc-step-border-done);
  color:var(--zrc-step-text-done);
}
.zrc-stepper-circles .zrc-step.is-done .zrc-step-line,
.zrc-stepper-circles .zrc-step.is-active .zrc-step-line{
  background:var(--zrc-step-line-done,var(--zrc-primary));
}
@media(max-width:639px){
  .zrc-stepper-circles .zrc-step-num{width:34px;height:34px;font-size:13px}
  .zrc-stepper-circles .zrc-step-line{top:17px;left:calc(50% + 20px);right:calc(-50% + 20px)}
  .zrc-stepper-circles .zrc-step-label{font-size:9px;letter-spacing:.1em}
}

/* ===== Filtres catégories (étape 1) ===== */
.zrc-cat-filters{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:0 0 28px;
}
.zrc-root .zrc-cat-filter{
  display:inline-flex;align-items:center;
  padding:8px 18px;border-radius:999px;
  border:1px solid var(--zrc-border);
  background:color-mix(in oklab,var(--zrc-card-elev) 60%,transparent);
  color:var(--zrc-cat-color,#ffffff);
  font-size:var(--zrc-cat-size,11px);
  font-weight:var(--zrc-cat-weight,800);
  letter-spacing:var(--zrc-cat-ls,.16em);
  text-transform:uppercase;
  cursor:pointer;transition:all .2s ease;
}
.zrc-root .zrc-cat-filter:hover{border-color:var(--zrc-border-strong)}
.zrc-root .zrc-cat-filter.is-active{
  background:var(--zrc-primary);
  border-color:var(--zrc-primary);
  color:var(--zrc-cat-color-active,#ffffff);
  font-weight:var(--zrc-cat-weight-active,800);
  box-shadow:0 0 20px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*60%),transparent);
}

/* ===== PANEL principal ===== */
.zrc-panel{
  background:color-mix(in oklab,var(--zrc-panel-bg,#1c1c22) 60%,transparent);
  border:1px solid var(--zrc-border);
  border-radius:24px;
  padding:40px;
  backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.6);
}
@media(max-width:639px){.zrc-panel{padding:20px;border-radius:20px}}

.zrc-pane-title{
  font-size:var(--zrc-pane-title-size-d,1.875rem);font-weight:800;margin:0 0 8px;text-align:center;
  color:var(--zrc-pane-title-color1);
}
.zrc-pane-title-p1{color:var(--zrc-pane-title-color1)}
.zrc-pane-title-p2{
  margin-left:.2em;
  background:linear-gradient(135deg,var(--zrc-pane-title-color2),color-mix(in oklab,var(--zrc-pane-title-color2) 55%,white));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.zrc-pane-title-p2.is-premium{
  background:linear-gradient(135deg,var(--zrc-pane-title-color2-prem),color-mix(in oklab,var(--zrc-pane-title-color2-prem) 65%,white));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media(max-width:639px){.zrc-pane-title{font-size:var(--zrc-pane-title-size-m,1.5rem)}}
.zrc-pane-sub{color:var(--zrc-pane-subtitle-color);text-align:center;margin:0 0 32px;font-size:var(--zrc-pane-sub-size-d,.95rem)}
@media(max-width:639px){.zrc-pane-sub{font-size:var(--zrc-pane-sub-size-m,.875rem)}}
/* Pane 3 badge "Boostez votre réparation" */
.zrc-pane3-badge-wrap{text-align:center;margin:0 0 14px}
.zrc-root .zrc-pane3-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  background:var(--zrc-pane3-badge-bg) !important;
  color:var(--zrc-pane3-badge-color) !important;
  border:1px solid var(--zrc-pane3-badge-border) !important;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.zrc-pane3-badge-icon{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--zrc-pane3-badge-icon-size,13px);
  width:var(--zrc-pane3-badge-icon-size,13px);
  height:var(--zrc-pane3-badge-icon-size,13px);
  color:var(--zrc-pane3-badge-icon-color,currentColor);
  line-height:1;
}
.zrc-pane3-badge-icon svg{width:100%;height:100%;display:block}
.zrc-pane3-badge-icon img{width:100%;height:100%;object-fit:contain;display:block}
/* Card name / desc colors driven by tokens */
.zrc-root .zrc-card-name{color:var(--zrc-card-name-color) !important}
.zrc-root .zrc-card-desc{color:var(--zrc-card-desc-color) !important}
/* Sidebar upgrade dynamic badge */
.zrc-side-upg-badge{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;padding:5px 12px;border-radius:999px;
  background:color-mix(in oklab,var(--zrc-premium) 14%,transparent);
  color:var(--zrc-premium);
  border:1px solid color-mix(in oklab,var(--zrc-premium) 40%,transparent);
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 0 18px color-mix(in oklab,var(--zrc-premium) calc(var(--zrc-glow)*40%),transparent);
}
.zrc-side-upg-icon{font-size:11px}
.zrc-section-title{
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zrc-muted);
  margin:32px 0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.zrc-reco-count{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:999px;
  border:1px solid var(--zrc-reco-count-border);
  background:var(--zrc-reco-count-bg);
  color:var(--zrc-reco-count-color);
  font-size:var(--zrc-reco-count-size,11px);
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 0 18px color-mix(in oklab,var(--zrc-reco-count-color) calc(var(--zrc-glow)*40%),transparent);
  text-align:center;line-height:1.25;
  max-width:100%;box-sizing:border-box;
  white-space:normal;word-break:normal;overflow-wrap:break-word;hyphens:auto;
}
.zrc-reco-count > svg,
.zrc-reco-count > .zrc-reco-count-img{flex:0 0 auto}
@media (max-width:640px){
  .zrc-section-title{
    flex-wrap:wrap;align-items:flex-start;gap:10px;
  }
  .zrc-section-title > .zrc-reco-count{
    flex:1 1 100%;
    justify-content:center;
    padding:6px 10px;
    letter-spacing:.08em;
    font-size:10px;
  }
}

/* ===== MODELS GRID ===== */
.zrc-models{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:640px){.zrc-models{grid-template-columns:repeat(3,1fr);gap:18px}}
.zrc-model{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:var(--zrc-card-padding,20px);
  border:var(--zrc-card-border-width,1px) solid var(--zrc-card-border-color,var(--zrc-border));
  background:var(--zrc-card-bg,color-mix(in oklab,var(--zrc-card-elev) 60%,transparent));
  border-radius:18px;
  transition:all .25s ease;text-align:center;
  position:relative;
  min-width:0;width:100%;box-sizing:border-box;overflow:hidden;
}
.zrc-model:hover{
  border-color:var(--zrc-border-strong);
  transform:translateY(-2px);
  background:var(--zrc-card-bg-hover,var(--zrc-card-bg,var(--zrc-card-elev)));
}
.zrc-model.is-selected,
.zrc-model.is-selected:hover{
  border-color:var(--zrc-primary);
  background:var(--zrc-card-bg-selected,var(--zrc-card-bg,var(--zrc-card-elev)));
  box-shadow:0 0 0 1px var(--zrc-primary), 0 0 60px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*70%*var(--zrc-card-sel-glow,1.4)),transparent);
}
.zrc-model img{width:100%;max-width:var(--zrc-model-image-size,120px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.zrc-model-ph{
  width:80px;height:80px;display:flex;align-items:center;justify-content:center;
  font-size:48px;line-height:1;
  background:linear-gradient(135deg,color-mix(in oklab,var(--zrc-primary) 20%,transparent),color-mix(in oklab,var(--zrc-primary) 5%,transparent));
  border-radius:16px;
}
.zrc-model-meta{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;width:100%;min-width:0}
.zrc-model-brand{font-size:10px;color:var(--zrc-muted);text-transform:uppercase;letter-spacing:.14em;font-weight:600;text-align:center;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zrc-model-name{font-weight:700;font-size:1rem;color:var(--zrc-text);text-align:center;width:100%;max-width:100%;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;line-height:1.2}
.zrc-model.is-selected .zrc-model-name{color:var(--zrc-primary)}

/* ===== CARDS (repairs + upgrades) ===== */
.zrc-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:640px){.zrc-cards{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:1024px){.zrc-cards{grid-template-columns:repeat(3,1fr)}}
.zrc-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:var(--zrc-card-padding,20px);
  border:var(--zrc-card-border-width,1px) solid var(--zrc-card-border-color,var(--zrc-border));
  background:var(--zrc-card-bg,var(--zrc-card-elev));
  border-radius:18px;
  transition:all .25s ease;text-align:center;overflow:hidden;
}
.zrc-card:hover{
  border-color:var(--zrc-border-strong);
  transform:translateY(-2px);
  background:var(--zrc-card-bg-hover,var(--zrc-card-bg,var(--zrc-card-elev)));
}
.zrc-icon-img{width:var(--zrc-card-image-size,56px);height:var(--zrc-card-image-size,56px);display:inline-flex;align-items:center;justify-content:center;margin-top:8px}
.zrc-icon-img img{width:100%;height:100%;object-fit:contain}

.zrc-card.is-selected,
.zrc-card.is-selected:hover{
  border-color:var(--zrc-primary);
  background:var(--zrc-card-bg-selected,var(--zrc-card-bg,var(--zrc-card-elev)));
  box-shadow:0 0 0 1px var(--zrc-primary), 0 0 60px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*70%*var(--zrc-card-sel-glow,1.4)),transparent);
}
.zrc-card.is-recommended:not(.is-selected),
.zrc-card.is-recommended:not(.is-selected):hover{
  border-color:color-mix(in oklab,var(--zrc-primary) 70%,transparent);
  background:var(--zrc-card-bg,var(--zrc-card-elev));
  box-shadow:
    0 0 0 1px color-mix(in oklab,var(--zrc-primary) 60%,transparent),
    0 0 40px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*55%*var(--zrc-card-reco-glow,1.2)),transparent),
    0 0 80px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*30%*var(--zrc-card-reco-glow,1.2)),transparent);
  animation:zrc-reco-pulse 2.6s ease-in-out infinite;
}
@keyframes zrc-reco-pulse{
  0%,100%{box-shadow:
    0 0 0 1px color-mix(in oklab,var(--zrc-primary) 60%,transparent),
    0 0 40px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*55%*var(--zrc-card-reco-glow,1.2)),transparent),
    0 0 80px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*30%*var(--zrc-card-reco-glow,1.2)),transparent);}
  50%{box-shadow:
    0 0 0 1px color-mix(in oklab,var(--zrc-primary) 80%,transparent),
    0 0 55px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*75%*var(--zrc-card-reco-glow,1.2)),transparent),
    0 0 100px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*45%*var(--zrc-card-reco-glow,1.2)),transparent);}
}
.zrc-card.is-premium{
  border-color:color-mix(in oklab,var(--zrc-premium) 25%,var(--zrc-border));
}
.zrc-card.is-premium.is-selected,
.zrc-card.is-premium.is-selected:hover{
  border-color:var(--zrc-premium);
  background:var(--zrc-card-bg-selected,var(--zrc-card-bg,var(--zrc-card-elev)));
  box-shadow:0 0 0 1px var(--zrc-premium), 0 0 60px color-mix(in oklab,var(--zrc-premium) calc(var(--zrc-glow)*70%*var(--zrc-card-sel-glow,1.4)),transparent);
}
.zrc-icon{
  font-size:var(--zrc-card-image-size,42px);line-height:1;
  width:var(--zrc-card-image-size,42px);height:var(--zrc-card-image-size,42px);
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:8px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
}
.zrc-icon::before{font-size:inherit;width:1em;height:1em;line-height:1;}
.zrc-card-name{
  font-size:var(--zrc-card-title-size,.8rem);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--zrc-text);
  text-align:center;width:100%;
}
.zrc-card-desc{
  font-size:.78rem;color:var(--zrc-muted);line-height:1.4;
  min-height:2.2em;
  text-align:center;width:100%;
  text-transform:none;letter-spacing:normal;
}
.zrc-card-price{
  font-size:var(--zrc-price-size,1.125rem);font-weight:800;
  margin-top:auto;padding-top:8px;
  font-family:var(--zrc-title-font, "Space Grotesk", inherit);
  color:var(--zrc-text);
}
.zrc-card.is-selected .zrc-card-price{color:var(--zrc-primary)}
.zrc-card.is-premium.is-selected .zrc-card-price{color:var(--zrc-premium)}

.zrc-check{
  position:absolute;top:12px;right:12px;
  width:26px;height:26px;border-radius:999px;
  background:var(--zrc-card-check-bg,var(--zrc-primary));
  color:var(--zrc-card-check-color,#ffffff);
  display:none;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;
  box-shadow:0 0 16px color-mix(in oklab,var(--zrc-card-check-bg,var(--zrc-primary)) 60%,transparent);
}
.zrc-card.is-selected .zrc-check{display:flex}
.zrc-card.is-premium.is-selected .zrc-check{
  background:var(--zrc-card-check-bg-prem,var(--zrc-premium));
  color:var(--zrc-card-check-color-prem,var(--zrc-premium-text));
  box-shadow:0 0 16px color-mix(in oklab,var(--zrc-card-check-bg-prem,var(--zrc-premium)) 60%,transparent);
}

.zrc-tag-premium{
  position:absolute;top:8px;left:8px;
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;line-height:1.1;
  background:var(--zrc-tag-prem-bg,var(--zrc-premium));
  color:var(--zrc-tag-prem-color,var(--zrc-premium-text));
  border:1px solid var(--zrc-tag-prem-bg,var(--zrc-premium));
  box-shadow:0 2px 8px color-mix(in oklab,var(--zrc-tag-prem-bg,var(--zrc-premium)) 35%,transparent);
}
.zrc-tag-premium svg,.zrc-tag-premium .zrc-tag-ico{width:11px;height:11px;font-size:11px}

.zrc-tag-reco{
  position:absolute;top:8px;right:8px;
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;line-height:1.1;
  background:var(--zrc-card-reco-bg,var(--zrc-primary));
  color:var(--zrc-card-reco-color,#ffffff);
  box-shadow:0 2px 10px color-mix(in oklab,var(--zrc-card-reco-bg,var(--zrc-primary)) 40%,transparent);
  z-index:5;
}
.zrc-tag-reco svg,.zrc-tag-reco .zrc-tag-ico{width:11px;height:11px;font-size:11px}
.zrc-tag-reco .zrc-reco-text{color:inherit}
.zrc-card.is-premium .zrc-tag-reco{top:8px;right:8px}
.zrc-card.is-selected .zrc-tag-reco{display:none}
@media(max-width:639px){.zrc-tag-reco .zrc-reco-text{display:none}}
.zrc-tag-reco.is-icon-only{padding:5px;gap:0;line-height:1}
.zrc-tag-reco.is-icon-only .zrc-tag-ico{width:13px;height:13px;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.zrc-tag-reco-img{width:100%;height:100%;object-fit:contain;display:block}

/* ===== SERVICES (rows) ===== */
.zrc-services{display:flex;flex-direction:column;gap:10px}
.zrc-service{
  display:flex;align-items:center;gap:14px;
  padding:var(--zrc-service-padding,16px);
  border:var(--zrc-service-border-width,1px) solid var(--zrc-service-border-color,var(--zrc-border));
  background:var(--zrc-card-bg,color-mix(in oklab,var(--zrc-card-elev) 60%,transparent));
  border-radius:14px;
  transition:all .25s ease;text-align:left;width:100%;
}
.zrc-service:hover{
  border-color:var(--zrc-border-strong);
  transform:translateY(-2px);
  background:var(--zrc-card-bg-hover,var(--zrc-card-bg,var(--zrc-card-elev)));
}
.zrc-service.is-selected,
.zrc-service.is-selected:hover{
  border-color:var(--zrc-primary);
  background:var(--zrc-card-bg-selected,var(--zrc-card-bg,var(--zrc-card-elev)));
}
.zrc-checkbox{
  width:var(--zrc-service-cb-size,22px);height:var(--zrc-service-cb-size,22px);flex-shrink:0;
  border:2px solid var(--zrc-border-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
}
.zrc-service.is-selected .zrc-checkbox{background:var(--zrc-primary);border-color:var(--zrc-primary)}
.zrc-service.is-selected .zrc-checkbox::after{content:"✓";color:var(--zrc-primary-text);font-weight:800;font-size:13px}
.zrc-service-meta{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.zrc-service-name{font-weight:700;font-size:var(--zrc-service-name-size,.95rem);color:var(--zrc-service-name-color,var(--zrc-text));text-transform:var(--zrc-service-name-tt,none);letter-spacing:0}
.zrc-service-desc{font-size:var(--zrc-service-desc-size,.8rem);color:var(--zrc-service-desc-color,var(--zrc-muted));line-height:1.4}
.zrc-service .zrc-card-price{margin:0;padding:0;font-size:1rem}

/* ===== ACTIONS (Précédent / Continuer / Ajouter) ===== */
.zrc-actions{
  display:flex;justify-content:flex-end;gap:12px;
  border-top:1px solid var(--zrc-border);
  padding-top:24px;margin-top:40px;
}
.zrc-actions [data-action="prev"]{margin-right:auto}
.zrc-root .zrc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--zrc-btn-height,44px) !important;
  padding:0 var(--zrc-btn-padding-x,22px) !important;
  border-radius:var(--zrc-btn-radius,12px) !important;
  font-weight:700;
  font-size:var(--zrc-btn-font-size,13px) !important;
  letter-spacing:.08em;text-transform:uppercase;
  transition:all .2s ease;
  font-family:inherit;
  border:var(--zrc-btn-border-width,0px) solid var(--zrc-btn-border-color,transparent) !important;
  line-height:1 !important;
}
.zrc-root .zrc-btn[hidden]{display:none !important}
.zrc-root .zrc-btn-ghost{color:var(--zrc-muted) !important;background:transparent !important}
.zrc-root .zrc-btn-ghost:hover{color:var(--zrc-text) !important}
.zrc-root .zrc-btn-ghost:disabled{opacity:.4;cursor:not-allowed}
.zrc-root .zrc-btn-primary{
  background:var(--zrc-btn-bg,var(--zrc-primary)) !important;
  color:var(--zrc-btn-text,var(--zrc-primary-text)) !important;
  box-shadow:0 0 24px color-mix(in oklab,var(--zrc-btn-bg,var(--zrc-primary)) calc(var(--zrc-glow)*70%),transparent);
}
.zrc-btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.zrc-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;filter:none}
.zrc-btn-full{width:100%;margin-top:16px}
/* [v1.6.58] CTA plein largeur : jamais sur 2 lignes — MAJUSCULES gardées (cohérence visuelle) */
.zrc-root .zrc-btn-full{
  white-space:nowrap !important;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:639px){
  .zrc-root .zrc-btn-full{
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
    font-size:clamp(11px, 3vw, 13px) !important;
    padding:0 10px !important;
  }
}
@media(min-width:640px){
  .zrc-root .zrc-btn-full{
    font-size:var(--zrc-btn-font-size,13px) !important;
    letter-spacing:.08em !important;
    padding:0 var(--zrc-btn-padding-x,22px) !important;
  }
}

/* ===== SIDEBAR (Votre configuration) ===== */
.zrc-sidebar{display:none}
@media(min-width:1024px){
  .zrc-sidebar{display:block;align-self:start}
  .zrc-root.has-sticky .zrc-sidebar{position:sticky;top:130px}
}
.zrc-side-card{
  background:color-mix(in oklab,var(--zrc-card-bg) 70%,transparent);
  border:1px solid var(--zrc-border);
  border-radius:20px;
  overflow:hidden;
  backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.6);
}
/* --- Side hero (image manette + LIVE) --- */
.zrc-side-hero{
  position:relative;
  padding:24px 20px 20px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--zrc-card-elev) 90%,transparent),transparent 80%);
  border-bottom:1px solid var(--zrc-border);
  text-align:center;
}
.zrc-side-live{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  background:var(--zrc-side-live-bg);
  border:1px solid var(--zrc-side-live-border);
  color:var(--zrc-side-live-color);
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.zrc-side-live-dot{
  width:6px;height:6px;border-radius:999px;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
  animation:zrc-pulse 1.6s ease-in-out infinite;
}
@keyframes zrc-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.zrc-side-image{
  width:var(--zrc-side-image-size,180px);height:var(--zrc-side-image-size,180px);
  margin:8px auto 14px;
  display:flex;align-items:center;justify-content:center;
}
.zrc-side-image img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.zrc-side-emoji{font-size:96px;line-height:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.zrc-side-meta{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.zrc-side-brand{
  font-size:10px;color:var(--zrc-muted);
  letter-spacing:.2em;text-transform:uppercase;font-weight:700;
}
.zrc-side-modelname{font-size:.95rem;font-weight:800;color:var(--zrc-text)}

/* --- Side recap --- */
.zrc-side-recap{padding:20px 22px 4px}
.zrc-side-recap h3{
  margin:0 0 14px;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--zrc-muted);font-weight:700;
}
.zrc-side-body{display:flex;flex-direction:column;gap:0;font-size:.875rem;min-height:40px}
.zrc-side-line{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:8px 0;
}
.zrc-side-line .zrc-side-name{color:var(--zrc-muted);font-size:.85rem}
.zrc-side-line .zrc-side-price{font-weight:800;color:var(--zrc-text);font-family:var(--zrc-title-font, inherit);font-size:.9rem}
.zrc-side-line.is-premium .zrc-side-price{color:var(--zrc-premium)}
.zrc-side-line.is-premium .zrc-side-name{color:var(--zrc-premium)}
.zrc-side-prem-ico{color:var(--zrc-premium);margin-right:2px}
.zrc-side-options-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:10px;padding-top:14px;
  border-top:1px solid var(--zrc-border);
  font-size:.7rem;color:var(--zrc-muted);
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;
}
.zrc-side-options-total strong{font-size:.95rem;color:var(--zrc-text);font-family:var(--zrc-title-font, inherit)}

/* --- Side footer (total + CTA + réassurance) --- */
.zrc-side-footer{
  padding:18px 22px 22px;
  border-top:1px solid var(--zrc-border);
  background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--zrc-primary) 4%,transparent));
}
.zrc-side-total{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.75rem;color:var(--zrc-muted);
  text-transform:uppercase;letter-spacing:.18em;font-weight:800;
}
.zrc-side-total strong{
  font-size:var(--zrc-side-total-size,1.875rem);font-weight:800;
  color:var(--zrc-side-total-color,var(--zrc-primary));
  font-family:var(--zrc-title-font, "Space Grotesk", inherit);
  letter-spacing:-.02em;
}
.zrc-side-total.is-grad strong{
  background:linear-gradient(135deg,var(--zrc-side-total-color),var(--zrc-side-total-color2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.zrc-side-footer .zrc-btn-full{margin-top:var(--zrc-side-cta-gap,16px) !important}
.zrc-reassurance{
  margin:12px 0 0;text-align:center;
  font-size:11px;font-weight:500;
  color:var(--zrc-reassurance-color);
}
.zrc-reassurance.is-grad{
  background:linear-gradient(90deg,var(--zrc-reassurance-color),var(--zrc-reassurance-color2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:700;
}
.zrc-reassurance.is-glow{
  text-shadow:0 0 calc(var(--zrc-reassurance-glow,0.4)*16px) var(--zrc-reassurance-color2,var(--zrc-primary));
}

/* ===== RECAP (étape 4) ===== */
.zrc-recap{display:flex;flex-direction:column;gap:20px}
.zrc-recap-section h4{
  margin:0 0 10px;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--zrc-muted);font-weight:700;
}
.zrc-recap-section ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.zrc-recap-section li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 18px;
  background:color-mix(in oklab,var(--zrc-card-elev) 60%,transparent);
  border:1px solid var(--zrc-border);
  border-radius:12px;
  font-size:.95rem;
}
.zrc-recap-section li > strong{font-weight:700;font-family:var(--zrc-title-font, inherit)}
.zrc-recap-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:22px;
  background:color-mix(in oklab,var(--zrc-primary) 10%,transparent);
  border:1px solid color-mix(in oklab,var(--zrc-primary) 40%,transparent);
  border-radius:14px;margin-top:8px;
  box-shadow:0 0 32px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*40%),transparent);
}
.zrc-recap-total > span{font-size:.95rem;color:var(--zrc-text);font-weight:700}
.zrc-recap-total strong{
  font-size:2rem;font-weight:800;
  color:var(--zrc-primary);
  font-family:var(--zrc-title-font, "Space Grotesk", inherit);
  letter-spacing:-.02em;
}

/* ===== MOBILE BOTTOM BAR =====
   [v1.7.6] Sticky fiable peu importe le contexte Elementor :
   - position:fixed sur mobile pour rester collée au viewport pendant le scroll
   - un spacer (.zrc-mobile-bar-spacer) compense la hauteur pour ne pas masquer le contenu
   - quand le sentinel (.zrc-mb-sentinel placé après <main>) entre dans le viewport,
     la barre prend la classe zrc-mb-detached et redevient statique → elle se "détache"
     en bas naturellement, comme demandé. */
.zrc-mobile-bar{
  display:flex;flex-direction:column;gap:0;
  padding:0;
  border-top:1px solid var(--zrc-border);
  background:color-mix(in oklab,var(--zrc-card-bg) 97%,transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:9990;
  box-shadow:0 -6px 20px -8px rgba(0,0,0,.25);
}
.zrc-mobile-bar-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
  /* [v1.13.48.29] Hauteur réservée dès le 1er rendu → évite le CLS
     provoqué par l'apparition de la barre après hydratation JS. */
  min-height:calc(72px + env(safe-area-inset-bottom,0px));
  box-sizing:border-box;
}
.zrc-mobile-bar.zrc-mb-detached{
  position:relative;
  left:auto;right:auto;bottom:auto;
  z-index:auto;
  box-shadow:none;
}
.zrc-mobile-bar.zrc-mb-detached .zrc-mobile-bar-row{padding-bottom:14px;min-height:72px;}
.zrc-mobile-bar-spacer{
  display:block;
  height:72px; /* approx hauteur barre, surdimensionné par sécurité, ajusté en JS */
  height:calc(72px + env(safe-area-inset-bottom,0px));
}
.zrc-mb-sentinel{display:block;height:1px;width:100%;pointer-events:none;}
@media(min-width:1024px){
  .zrc-mobile-bar,.zrc-mobile-bar-spacer,.zrc-mb-sentinel{display:none}
}
.zrc-mobile-bar-row > div{flex:1;min-width:0}
.zrc-mb-label{
  display:block;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--zrc-muted);font-weight:700;
}
.zrc-mobile-bar .zrc-total{
  font-size:1.25rem;color:var(--zrc-mobile-total-color, var(--zrc-primary));
  font-weight:800;font-family:var(--zrc-title-font, "Space Grotesk", inherit);
  white-space:nowrap;
}
.zrc-mobile-bar-row .zrc-btn{flex-shrink:0}

/* [v1.13.48.27] Bandeau d'incitation bundle upgrades — desktop sidebar + mobile sticky */
.zrc-bundle-nudge{
  background:var(--zrc-bundle-nudge-bg,#ecfdf5);
  border:1px solid var(--zrc-bundle-nudge-border,#10b981);
  color:var(--zrc-bundle-nudge-text,#065f46);
  font-size:13px;line-height:1.35;font-weight:600;
  text-align:center;
}
.zrc-bundle-nudge[hidden]{display:none !important;}
.zrc-bundle-nudge--sidebar{
  margin:0 0 10px;
  padding:9px 12px;
  border-radius:10px;
}
.zrc-bundle-nudge--mobile{
  border-left:0;border-right:0;border-top:0;
  border-radius:0;
  padding:8px 14px;
  font-size:12.5px;
}

/* ===== Responsive ===== */
@media(max-width:640px){
  .zrc-root .zrc-title{font-size:var(--zrc-title-size-m) !important}
  .zrc-root .zrc-subtitle{font-size:var(--zrc-subtitle-size-m) !important}
  .zrc-hero{padding:36px 18px 32px}
  .zrc-main{padding:20px 12px 28px}
  .zrc-actions{padding-top:20px;margin-top:28px}
  /* [v1.6.54] Boutons CTA — taille mobile pilotée par l'admin (sauf mobile bar qui garde son override compact) */
  .zrc-root .zrc-btn:not(.zrc-mobile-bar .zrc-btn){
    height:var(--zrc-btn-height-m,var(--zrc-btn-height,44px)) !important;
    padding:0 var(--zrc-btn-padding-x-m,var(--zrc-btn-padding-x,22px)) !important;
    font-size:var(--zrc-btn-font-size-m,var(--zrc-btn-font-size,13px)) !important;
  }
  /* [v1.6.58] CTA récap mobile : libellé long "METTRE À JOUR MON PANIER" sur une seule ligne, en MAJUSCULES (cohérent avec les autres boutons). */
  .zrc-root .zrc-actions .zrc-btn[data-action="add"]{
    width:100% !important;
    flex:1 1 100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
    font-size:clamp(11px, 3vw, 13px) !important;
    padding:0 10px !important;
  }
}

/* ===== Toast ===== */
.zrc-toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  background:var(--zrc-card-bg);
  border:1px solid var(--zrc-border-strong);
  color:var(--zrc-text);
  padding:14px 22px;border-radius:14px;
  font-size:.9rem;font-weight:600;
  z-index:9999;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  opacity:0;transition:opacity .25s;
}
.zrc-toast.is-show{opacity:1}
.zrc-toast.is-error{border-color:#ff5577;color:#ff8899}
.zrc-toast.is-success{border-color:var(--zrc-primary);color:var(--zrc-primary)}

/* Image as icon for repair/upgrade cards (taille pilotée par --zrc-card-image-size / --zrc-upgrade-image-size) */
/* [v1.9.20] Fond/padding supprimés : l'image (PNG transparent inclus) s'affiche brute */
.zrc-root .zrc-icon-img{
  display:flex !important;align-items:center;justify-content:center;
  width:var(--zrc-card-image-size,56px) !important;
  height:var(--zrc-card-image-size,56px) !important;
  background:transparent;border-radius:0;padding:0;overflow:visible;
}
/* [v1.9.20] Taille spécifique pour les images d'upgrades */
.zrc-root .zrc-upgrade .zrc-icon-img{
  width:var(--zrc-upgrade-image-size,var(--zrc-card-image-size,56px)) !important;
  height:var(--zrc-upgrade-image-size,var(--zrc-card-image-size,56px)) !important;
}
/* [v1.9.21] La taille pilote aussi les Dashicons (.zrc-icon) et Lucide (.zrc-icon-lucide) */
.zrc-root .zrc-upgrade .zrc-icon{
  font-size:var(--zrc-upgrade-image-size,var(--zrc-card-image-size,42px)) !important;
  width:var(--zrc-upgrade-image-size,var(--zrc-card-image-size,42px)) !important;
  height:var(--zrc-upgrade-image-size,var(--zrc-card-image-size,42px)) !important;
}
.zrc-root .zrc-upgrade .zrc-icon-lucide{
  width:var(--zrc-card-icon-size,48px) !important;
  height:var(--zrc-card-icon-size,48px) !important;
}
.zrc-root .zrc-icon-img img{
  width:100%;height:100%;object-fit:contain;display:block;
}
/* Cartes : forcer la bordure pilotée par les variables, plus forte que le thème */
.zrc-root .zrc-model,
.zrc-root .zrc-card{
  padding:var(--zrc-card-padding,20px) !important;
  border:var(--zrc-card-border-width,1px) solid var(--zrc-card-border-color,var(--zrc-border)) !important;
  background:var(--zrc-card-bg,var(--zrc-card-elev)) !important;
}
.zrc-root .zrc-service{
  padding:var(--zrc-service-padding,16px) !important;
  border:var(--zrc-service-border-width,1px) solid var(--zrc-service-border-color,var(--zrc-border)) !important;
  background:var(--zrc-card-bg,var(--zrc-card-elev)) !important;
}
.zrc-root .zrc-model:hover,
.zrc-root .zrc-card:hover,
.zrc-root .zrc-service:hover{
  background:var(--zrc-card-bg-hover,var(--zrc-card-bg,var(--zrc-card-elev))) !important;
}
.zrc-root .zrc-card.is-recommended:not(.is-selected),
.zrc-root .zrc-card.is-recommended:not(.is-selected):hover{
  background:var(--zrc-card-bg,var(--zrc-card-elev)) !important;
}
/* États sélectionnés conservent leur bordure colorée */
.zrc-root .zrc-card.is-selected,
.zrc-root .zrc-model.is-selected{
  border-color:var(--zrc-primary) !important;
  background:var(--zrc-card-bg-selected,var(--zrc-card-bg,var(--zrc-card-elev))) !important;
}
.zrc-root .zrc-card.is-premium.is-selected{
  border-color:var(--zrc-premium) !important;
}
.zrc-root .zrc-service.is-selected{
  border-color:var(--zrc-primary) !important;
  background:var(--zrc-card-bg-selected,var(--zrc-card-bg,var(--zrc-card-elev))) !important;
}

/* === Compat === */
.zrc-empty{grid-column:1/-1;text-align:center;padding:24px;color:var(--zrc-muted);background:var(--zrc-card-bg);border:1px dashed var(--zrc-border);border-radius:var(--zrc-card-radius);font-size:.95rem}

/* ============= ÉTAPE 4 — RÉCAP (nouvelle mise en page) ============= */
.zrc-pane-recap{padding:0}
.zrc-recap{display:flex;flex-direction:column;gap:18px;align-items:stretch}
.zrc-recap-hero{display:flex;justify-content:center;margin-top:8px}
.zrc-recap-hero-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--zrc-recap-hero-icon-bg);
  color:var(--zrc-recap-hero-icon-color);
  font-size:28px;font-weight:900;
  box-shadow:0 0 30px color-mix(in oklab,var(--zrc-recap-hero-icon-color) calc(var(--zrc-glow)*40%),transparent);
}
/* [v1.6.49] .zrc-recap-title fusionne avec .zrc-pane-title :
   - taille pilotée par --zrc-pane-title-size-d/m (admin Typographie > Étapes)
   - dégradé hérité de .zrc-pane-title-p2
   - couleurs admin recap_title_color1/2 conservées et réinjectées */
.zrc-recap-title{
  text-align:center;margin:4px 0 0;
  font-family:var(--zrc-title-font,inherit);
  /* la taille vient de .zrc-pane-title (font-size:var(--zrc-pane-title-size-d)) */
  line-height:1.1;
}
.zrc-recap-title-p1{color:var(--zrc-recap-title-c1)}
/* La 2ème partie utilise le dégradé de .zrc-pane-title-p2.
   On surcharge la 2ème couleur du dégradé par --zrc-recap-title-c2 (admin). */
.zrc-recap-title-p2{
  --zrc-pane-title-color2: var(--zrc-recap-title-c2);
  margin-left:.2em;
}
.zrc-recap-sub{text-align:center;color:var(--zrc-muted);margin:0 0 6px;font-size:.95rem}

.zrc-recap-section{
  background:transparent;
  border:1px solid var(--zrc-recap-sec-border);
  border-radius:14px;
  padding:16px 18px;
}
.zrc-recap-label{
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zrc-recap-label);margin-bottom:10px;
}
.zrc-recap-section.is-upg .zrc-recap-label{color:var(--zrc-recap-label-upg)}
.zrc-recap-section.is-upg .zrc-recap-price{color:var(--zrc-recap-label-upg);font-weight:700}
.zrc-recap-line{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:6px 0;
}
.zrc-recap-line + .zrc-recap-line{border-top:1px dashed color-mix(in oklab,var(--zrc-recap-sec-border) 60%,transparent)}
.zrc-recap-name{color:var(--zrc-text);font-weight:600;font-size:.95rem}
.zrc-recap-price{color:var(--zrc-text);font-weight:700;font-size:.95rem;white-space:nowrap}

.zrc-recap-trust{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px;
}
@media(max-width:639px){.zrc-recap-trust{grid-template-columns:1fr}}
.zrc-recap-trust-card{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 12px;
  background:var(--zrc-recap-trust-bg);
  border:1px solid var(--zrc-recap-trust-border);
  border-radius:14px;text-align:center;
}
.zrc-recap-trust-icon{
  font-size:22px;color:var(--zrc-recap-trust-icon);
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:color-mix(in oklab,var(--zrc-recap-trust-icon) 12%,transparent);
}
.zrc-recap-trust-label{
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--zrc-recap-trust-label);
}

.zrc-recap-total-box{
  margin-top:6px;padding:18px 22px;
  background:color-mix(in oklab,var(--zrc-recap-total-bg) 35%,transparent);
  border:1px solid var(--zrc-recap-total-border);
  border-radius:16px;
  box-shadow:0 0 40px color-mix(in oklab,var(--zrc-recap-total-price) calc(var(--zrc-glow)*25%),transparent);
}
.zrc-recap-total-label{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--zrc-recap-total-label-c);margin-bottom:6px;
}
.zrc-recap-total-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.zrc-recap-total-price{
  font-family:var(--zrc-title-font,inherit);
  font-size:var(--zrc-recap-total-size,3.2rem);font-weight:900;line-height:1;
  color:var(--zrc-recap-total-price);
  text-shadow:0 0 24px color-mix(in oklab,var(--zrc-recap-total-price) calc(var(--zrc-glow)*45%),transparent);
}
.zrc-recap-total-note{color:var(--zrc-muted);font-size:.85rem}

/* === Icônes images / SVG (admin Récap & compteur reco) === */
.zrc-recap-hero-img{width:36px;height:36px;object-fit:contain;display:block}
.zrc-recap-trust-img{width:24px;height:24px;object-fit:contain;display:block}
.zrc-reco-count-img{width:14px;height:14px;object-fit:contain;display:inline-block;vertical-align:-2px;margin-right:4px}

/* === Dégradé prix géant Récap === */
.zrc-recap-total-price.is-grad{
  background:linear-gradient(135deg,var(--zrc-recap-total-price),var(--zrc-recap-total-price2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:none;
}

/* v1.6.17 — Loading state du bouton "Ajouter au panier" */
.zrc-spinner{
  display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:zrc-spin .7s linear infinite;
}
.zrc-btn.is-loading,.zrc-btn-full.is-loading{opacity:.85;cursor:progress;pointer-events:none;}
.zrc-btn-loading-label{font-weight:inherit;}
@keyframes zrc-spin{to{transform:rotate(360deg);}}

/* =================================================================
   [v1.6.41] Confort visuel des cartes (gap, hover lift, hauteur min)
   Toutes ces règles utilisent !important pour surcharger sans régression
   ================================================================= */
.zrc-root .zrc-card{
  gap: var(--zrc-card-gap-internal, 12px) !important;
  min-height: var(--zrc-card-min-height, auto) !important;
  transition:
    border-color var(--zrc-anim-duration, 300ms) ease,
    background var(--zrc-anim-duration, 300ms) ease,
    box-shadow var(--zrc-anim-duration, 300ms) ease,
    transform var(--zrc-anim-duration, 300ms) ease !important;
}
.zrc-root .zrc-card:hover{
  transform: translateY(calc(-1 * var(--zrc-card-hover-lift, 3px))) !important;
  box-shadow: 0 0 30px color-mix(in oklab, var(--zrc-primary) calc(var(--zrc-hover-glow, 0.3) * 60%), transparent) !important;
}
.zrc-root .zrc-card.is-premium:hover{
  box-shadow: 0 0 30px color-mix(in oklab, var(--zrc-premium) calc(var(--zrc-hover-glow, 0.3) * 60%), transparent) !important;
}
.zrc-root .zrc-model{
  transition:
    border-color var(--zrc-anim-duration, 300ms) ease,
    background var(--zrc-anim-duration, 300ms) ease,
    transform var(--zrc-anim-duration, 300ms) ease !important;
}
.zrc-root .zrc-model:hover{
  transform: translateY(calc(-1 * var(--zrc-card-hover-lift, 3px))) !important;
}

/* Icône Lucide upgrades — taille + couleur pilotables */
.zrc-root .zrc-icon-lucide{
  display:inline-flex;align-items:center;justify-content:center;
  width: var(--zrc-card-icon-size, 48px);
  height: var(--zrc-card-icon-size, 48px);
  margin-top: 8px;
  color: var(--zrc-card-icon-color, currentColor);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
  transition: transform var(--zrc-anim-duration, 300ms) ease;
}
.zrc-root .zrc-icon-lucide svg{ width:100%; height:100%; display:block; }
.zrc-root .zrc-card:hover .zrc-icon-lucide{ transform: scale(1.08); }
.zrc-root .zrc-card.is-selected .zrc-icon-lucide{ transform: scale(1.08); }
.zrc-root .zrc-card.is-premium .zrc-icon-lucide{ color: var(--zrc-premium); }

/* [v1.6.41] Badge Premium — taille + position pilotables */
.zrc-root .zrc-tag-premium{
  font-size: var(--zrc-tag-premium-size, 9px) !important;
}
.zrc-root .zrc-tag-premium svg,
.zrc-root .zrc-tag-premium .zrc-tag-ico{
  width: var(--zrc-tag-premium-icon-size, calc(var(--zrc-tag-premium-size, 9px) + 2px)) !important;
  height: var(--zrc-tag-premium-icon-size, calc(var(--zrc-tag-premium-size, 9px) + 2px)) !important;
  font-size: var(--zrc-tag-premium-icon-size, calc(var(--zrc-tag-premium-size, 9px) + 2px)) !important;
  color: var(--zrc-tag-premium-icon-color, currentColor) !important;
}
.zrc-root .zrc-tag-premium .zrc-tag-ico img{
  width:100%;height:100%;object-fit:contain;display:block;
}
.zrc-prem-top-right .zrc-tag-premium{
  left: auto !important;
  right: 8px !important;
}
.zrc-prem-top-right .zrc-card.is-premium .zrc-tag-reco{
  /* Si premium passe à droite, décale le reco à gauche pour éviter chevauchement */
  right: auto !important;
  left: 8px !important;
}

/* [v1.6.41] Badge Recommandé — taille pilotable */
.zrc-root .zrc-tag-reco.is-icon-only{
  width: var(--zrc-card-reco-size, 22px);
  height: var(--zrc-card-reco-size, 22px);
  padding: 0 !important;
  display:inline-flex;align-items:center;justify-content:center;
}
.zrc-root .zrc-tag-reco.is-icon-only .zrc-tag-ico{
  width: calc(var(--zrc-card-reco-size, 22px) - 8px) !important;
  height: calc(var(--zrc-card-reco-size, 22px) - 8px) !important;
  font-size: calc(var(--zrc-card-reco-size, 22px) - 8px) !important;
}

/* [v1.6.41] Animation cascade apparition cartes */
@keyframes zrc-card-in{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
.zrc-root:not(.zrc-no-anim) .zrc-cards .zrc-card,
.zrc-root:not(.zrc-no-anim) .zrc-models .zrc-model{
  animation: zrc-card-in var(--zrc-anim-duration, 300ms) ease both;
}
.zrc-root:not(.zrc-no-anim) .zrc-cards .zrc-card:nth-child(1),
.zrc-root:not(.zrc-no-anim) .zrc-models .zrc-model:nth-child(1){ animation-delay: calc(var(--zrc-anim-stagger, 40ms) * 0); }
.zrc-root:not(.zrc-no-anim) .zrc-cards .zrc-card:nth-child(2),
.zrc-root:not(.zrc-no-anim) .zrc-models .zrc-model:nth-child(2){ animation-delay: calc(var(--zrc-anim-stagger, 40ms) * 1); }
.zrc-root:not(.zrc-no-anim) .zrc-cards .zrc-card:nth-child(3),
.zrc-root:not(.zrc-no-anim) .zrc-models .zrc-model:nth-child(3){ animation-delay: calc(var(--zrc-anim-stagger, 40ms) * 2); }
.zrc-root:not(.zrc-no-anim) .zrc-cards .zrc-card:nth-child(4),
.zrc-root:not(.zrc-no-anim) .zrc-models .zrc-model:nth-child(4){ animation-delay: calc(var(--zrc-anim-stagger, 40ms) * 3); }
.zrc-root:not(.zrc-no-anim) .zrc-cards .zrc-card:nth-child(5),
.zrc-root:not(.zrc-no-anim) .zrc-models .zrc-model:nth-child(5){ animation-delay: calc(var(--zrc-anim-stagger, 40ms) * 4); }
.zrc-root:not(.zrc-no-anim) .zrc-cards .zrc-card:nth-child(6),
.zrc-root:not(.zrc-no-anim) .zrc-models .zrc-model:nth-child(6){ animation-delay: calc(var(--zrc-anim-stagger, 40ms) * 5); }
.zrc-root:not(.zrc-no-anim) .zrc-cards .zrc-card:nth-child(n+7),
.zrc-root:not(.zrc-no-anim) .zrc-models .zrc-model:nth-child(n+7){ animation-delay: calc(var(--zrc-anim-stagger, 40ms) * 6); }

.zrc-root.zrc-no-anim,
.zrc-root.zrc-no-anim *{
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce){
  .zrc-root *{ animation: none !important; transition: none !important; }
}

/* =================================================================
   [v1.6.48] Mobile robuste — protection 280-400px (Elementor/Woodmart)
   Corrige : débordement boutons actions, prix géant qui wrap,
   cases à cocher chevauchant icônes, padding cartes excessif.
   ================================================================= */
@media(max-width:400px){
  /* Containers : réduire les paddings gaspillés */
  .zrc-root .zrc-main{padding:14px 8px 24px !important}
  .zrc-root .zrc-hero{padding:28px 12px 24px !important}
  .zrc-root .zrc-panel{padding:14px !important;border-radius:18px !important}

  /* Cartes : padding interne plus compact */
  .zrc-root .zrc-card,
  .zrc-root .zrc-model{
    padding:12px 10px !important;
    gap:8px !important;
  }
  .zrc-root .zrc-models{gap:10px !important}
  .zrc-root .zrc-cards{gap:10px !important}

  /* Texte cartes : utiliser les tailles mobile pilotables */
  .zrc-root .zrc-card-name{font-size:var(--zrc-card-title-size-m,var(--zrc-card-title-size,.8rem)) !important}
  .zrc-root .zrc-card-price{font-size:var(--zrc-price-size-m,var(--zrc-price-size,1.125rem)) !important}

  /* Cases à cocher (services) : empêcher chevauchement icône */
  .zrc-root .zrc-service{gap:10px !important;padding:12px !important}
  .zrc-root .zrc-checkbox{flex-shrink:0 !important}
  .zrc-root .zrc-service-meta{min-width:0 !important}

  /* Check rond sur cartes : réduire pour ne pas chevaucher */
  .zrc-root .zrc-check{
    width:22px !important;height:22px !important;
    top:8px !important;right:8px !important;
    font-size:12px !important;
  }
  /* Badges premium/reco : plus petits pour ne pas envahir */
  .zrc-root .zrc-tag-premium{
    font-size:8px !important;padding:3px 7px !important;
    top:6px !important;left:6px !important;
  }
  .zrc-root .zrc-tag-reco{
    top:6px !important;right:6px !important;
  }

  /* Boutons actions Précédent/Continuer : empêcher débordement */
  .zrc-root .zrc-actions{
    flex-wrap:wrap !important;
    gap:8px !important;
    padding-top:16px !important;margin-top:20px !important;
  }
  .zrc-root .zrc-actions [data-action="prev"]{margin-right:0 !important}
  .zrc-root .zrc-actions .zrc-btn{
    flex:1 1 auto !important;
    padding:0 12px !important;
    min-width:0 !important;
    font-size:12px !important;
  }
  .zrc-root .zrc-actions .zrc-btn-full{flex:1 1 100% !important}

  /* Prix géant Récap : éviter le wrap du symbole € */
  .zrc-root .zrc-recap-total-price{
    font-size:var(--zrc-recap-total-size-m,2rem) !important;
    white-space:nowrap !important;
  }
  .zrc-root .zrc-recap-total-row{flex-wrap:wrap !important;gap:8px !important}
  .zrc-root .zrc-recap-total-box{padding:14px 16px !important}

  /* Bottom bar mobile : compresser pour éviter wrap du symbole € */
  .zrc-root .zrc-mobile-bar-row{padding:10px 10px !important;gap:8px !important}
  .zrc-root .zrc-mobile-bar-row > div{flex:0 0 auto !important;min-width:0 !important}
  .zrc-root .zrc-mobile-bar .zrc-total{font-size:1rem !important;white-space:nowrap !important}
  .zrc-root .zrc-mobile-bar .zrc-mb-label{font-size:9px !important}
  .zrc-root .zrc-mobile-bar-row .zrc-btn{
    padding:0 8px !important;font-size:10px !important;
    letter-spacing:.02em !important;
    flex:1 1 auto !important;min-width:0 !important;max-width:100% !important;
    white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
  }

  /* Toast : ne pas toucher les bords */
  .zrc-toast{
    max-width:calc(100vw - 24px) !important;
    padding:12px 16px !important;
    font-size:.85rem !important;
  }

  /* Stepper : ronds + labels plus compacts */
  .zrc-root .zrc-stepper-circles .zrc-step-num{width:30px !important;height:30px !important;font-size:12px !important}
  .zrc-root .zrc-stepper-circles .zrc-step-label{font-size:8px !important;letter-spacing:.08em !important}
  .zrc-root .zrc-stepper-circles{gap:4px !important}

  /* Récap : padding sections */
  .zrc-root .zrc-recap-section{padding:12px 14px !important}
}

/* Ultra-petits écrans (Galaxy Fold replié, ~280px) */
@media(max-width:320px){
  .zrc-root .zrc-stepper-circles .zrc-step-label{display:none !important}
  .zrc-root .zrc-models,
  .zrc-root .zrc-cards{grid-template-columns:1fr !important}
}

/* =================================================================
   [v1.6.52] Bannière "mode édition" intégrée (remplace l'ancien toast popup)
   ================================================================= */
.zrc-edit-banner{
  display:flex;align-items:center;gap:12px;
  margin:0 auto;
  max-width:var(--zrc-max-width);
  padding:12px 18px;
  background:color-mix(in oklab,var(--zrc-primary) 10%,transparent);
  border:1px solid color-mix(in oklab,var(--zrc-primary) 35%,transparent);
  border-radius:14px;
  color:var(--zrc-text);
  font-size:.9rem;line-height:1.4;
  box-shadow:0 0 30px color-mix(in oklab,var(--zrc-primary) calc(var(--zrc-glow)*20%),transparent);
  margin-top:16px;
  transition:opacity .2s ease;
}
.zrc-edit-banner-icon{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:color-mix(in oklab,var(--zrc-primary) 20%,transparent);
  color:var(--zrc-primary);
}
.zrc-edit-banner-icon svg{display:block;width:16px;height:16px}
.zrc-edit-banner-text{flex:1;min-width:0}
.zrc-edit-banner-text strong{color:var(--zrc-primary);font-weight:700}
.zrc-edit-banner-close{
  flex-shrink:0;
  background:transparent;border:0;cursor:pointer;
  width:28px;height:28px;border-radius:50%;
  color:var(--zrc-muted);font-size:1.4rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.zrc-edit-banner-close:hover{
  background:color-mix(in oklab,var(--zrc-primary) 15%,transparent);
  color:var(--zrc-text);
}
@media(max-width:400px){
  .zrc-edit-banner{
    margin-top:10px !important;
    padding:10px 12px !important;
    font-size:.8rem !important;
    gap:8px !important;
    border-radius:10px !important;
  }
  .zrc-edit-banner-icon{width:26px !important;height:26px !important}
  .zrc-edit-banner-icon svg{width:14px !important;height:14px !important}
  .zrc-edit-banner-close{width:24px !important;height:24px !important;font-size:1.2rem !important}
}

/* [v1.9.23] Combos / Promos — [v1.9.29] le badge sur les cartes est désormais
   un vrai <span class="zrc-tag-combo zrc-tag-combo--card"> injecté en JS,
   pour bénéficier de tous les réglages admin (fond/contour/icône/image/libellé). */
/* [v1.9.39] Pas de surcharge de graisse : on garde la même police/poids que
   les autres lignes du sidebar (le titre reste cohérent avec « Stick Drift Droit »). */

/* [v1.9.28] Badge Combo — calque visuel du badge Premium, utilisé sidebar + récap */
.zrc-tag-combo{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:999px;line-height:1.1;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  font-size: var(--zrc-tag-combo-size, 9px);
  background: var(--zrc-tag-combo-bg, #22c55e);
  color: var(--zrc-tag-combo-color, #0a0a0a);
  border:1px solid var(--zrc-tag-combo-border, var(--zrc-tag-combo-bg, #22c55e));
  box-shadow:0 2px 8px color-mix(in oklab, var(--zrc-tag-combo-bg, #22c55e) 35%, transparent);
  vertical-align:middle;
}
.zrc-tag-combo svg,
.zrc-tag-combo .zrc-tag-ico{
  width: var(--zrc-tag-combo-icon-size, calc(var(--zrc-tag-combo-size, 9px) + 2px));
  height: var(--zrc-tag-combo-icon-size, calc(var(--zrc-tag-combo-size, 9px) + 2px));
  font-size: var(--zrc-tag-combo-icon-size, calc(var(--zrc-tag-combo-size, 9px) + 2px));
  color: var(--zrc-tag-combo-icon-color, currentColor);
  display:inline-flex;align-items:center;justify-content:center;
}
.zrc-tag-combo .zrc-tag-ico img{ width:100%;height:100%;object-fit:contain;display:block; }

/* [v1.9.34] Combo — calque exact de Premium :
   - Sidebar : juste l'icône colorée (comme .zrc-side-prem-ico), pas de badge texte.
   - Récap   : label + price en accent (vert), name reste blanc (comme is-upg).
   On utilise --zrc-tag-combo-accent (version OPAQUE de tag_combo_bg, dérivée
   en PHP) pour que la couleur reste pleine même si le badge admin a une
   transparence. */
.zrc-side-combo-ico{ color: var(--zrc-tag-combo-accent, var(--zrc-tag-combo-bg, #22c55e)); margin-right:2px; display:inline-flex; align-items:center; }
.zrc-side-combo-ico svg, .zrc-side-combo-ico img{ width:1em; height:1em; }
.zrc-side-line.is-combo .zrc-side-name{ color: var(--zrc-tag-combo-accent, var(--zrc-tag-combo-bg, #22c55e)); display:inline-flex;align-items:center;gap:6px; }
.zrc-side-line.is-combo .zrc-side-price{ color: var(--zrc-tag-combo-accent, var(--zrc-tag-combo-bg, #22c55e)); font-weight:700; }
.zrc-recap-combo-ico{ color: var(--zrc-tag-combo-accent, var(--zrc-tag-combo-bg, #22c55e)); display:inline-flex; align-items:center; margin-right:2px; }
.zrc-recap-combo-ico svg, .zrc-recap-combo-ico img{ width:1em; height:1em; }
.zrc-recap-section.is-combo .zrc-recap-label{ color: var(--zrc-tag-combo-accent, var(--zrc-tag-combo-bg, #22c55e)); }
.zrc-recap-section.is-combo .zrc-recap-name{ color: var(--zrc-text); display:inline-flex;align-items:center;gap:6px; }
.zrc-recap-section.is-combo .zrc-recap-price{ color: var(--zrc-tag-combo-accent, var(--zrc-tag-combo-bg, #22c55e)); font-weight:700; }

/* [v1.9.39] Variante "carte" du badge Combo : placé en flux inline entre le
   titre (.zrc-card-name) et la description (.zrc-card-desc), centré
   horizontalement à la manière d'Amazon. */
.zrc-tag-combo--card{
  display:inline-flex;
  align-self:center;
  margin:6px auto;
  pointer-events:none;
  position:relative;
  z-index:1;
}

/* [v1.10.4] Badge "Manette ouverte" — calqué sur le badge Combo
   (variables CSS configurables depuis l'admin : fond, texte, bordure, icône, taille).
   Affichage : centré horizontalement entre le titre et la description, comme Combo. */
.zrc-root .zrc-tag-open{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:999px;line-height:1.15;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  font-size: var(--zrc-tag-open-size, 11px);
  background: var(--zrc-tag-open-bg, rgba(245,158,11,.15));
  color: var(--zrc-tag-open-color, #f59e0b);
  border:1px solid var(--zrc-tag-open-border, var(--zrc-tag-open-bg, rgba(245,158,11,.45)));
  box-shadow:0 2px 8px color-mix(in oklab, var(--zrc-tag-open-color, #f59e0b) 25%, transparent);
  vertical-align:middle;
  /* [v1.10.5] Pas de white-space:nowrap : le libellé doit pouvoir
     revenir à la ligne pour rester contenu dans la carte (responsive). */
  text-align:center;
  max-width:calc(100% - 12px);
  word-break:break-word;
}
.zrc-tag-open svg,
.zrc-tag-open .zrc-tag-ico,
.zrc-tag-open-ico{
  width: var(--zrc-tag-open-icon-size, calc(var(--zrc-tag-open-size, 11px) + 2px));
  height: var(--zrc-tag-open-icon-size, calc(var(--zrc-tag-open-size, 11px) + 2px));
  font-size: var(--zrc-tag-open-icon-size, calc(var(--zrc-tag-open-size, 11px) + 2px));
  color: var(--zrc-tag-open-icon-color, currentColor);
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  flex-shrink:0;
}
.zrc-tag-open .zrc-tag-ico img{ width:100%;height:100%;object-fit:contain;display:block; }

/* Variante "carte" — centrée horizontalement entre le titre et la description (calque Combo). */
.zrc-tag-open--card{
  display:inline-flex;
  align-self:center;
  margin:6px auto;
  pointer-events:none;
  position:relative;
  z-index:1;
  max-width:calc(100% - 12px);
}
.zrc-card.is-controller-open-discount{ position:relative; }
.zrc-card.is-controller-open-discount .zrc-card-price{
  color:var(--zrc-tag-open-color, #f59e0b);
}
/* [v1.13.42] Tailles paramétrables pour le prix courant et le prix barré
   sur les cartes éligibles à la remise « Manette ouverte » ------------ */
.zrc-card.is-controller-open-discount .zrc-card-price{
  font-size: var(--zrc-open-price-size, inherit);
}
.zrc-card.is-controller-open-discount .zrc-price-old{
  font-size: var(--zrc-open-price-old-size, .85em) !important;
  white-space: nowrap;
}
/* Évite le retour à la ligne du symbole € sur mobile pour les deux prix */
.zrc-card.is-controller-open-discount .zrc-card-price{
  white-space: nowrap;
}

/* [v1.10.5] Sidebar — section "Manette ouverte" (calque visuel de is-combo,
   accent = couleur du texte du badge). */
.zrc-side-open-ico{ color: var(--zrc-tag-open-color, #f59e0b); margin-right:2px; display:inline-flex; align-items:center; }
.zrc-side-open-ico svg, .zrc-side-open-ico img{ width:1em; height:1em; }
.zrc-side-line.is-open .zrc-side-name{ color: var(--zrc-tag-open-color, #f59e0b); display:inline-flex; align-items:center; gap:6px; }
.zrc-side-line.is-open .zrc-side-price{ color: var(--zrc-tag-open-color, #f59e0b); font-weight:700; }
.zrc-side-line.is-open-head .zrc-side-name{ font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.78rem; }
.zrc-side-line.is-open-item{ padding-left:6px; opacity:.92; }
.zrc-side-line.is-open-item .zrc-side-name{ font-weight:500; text-transform:none; letter-spacing:0; font-size:.85rem; }

/* [v1.10.5] Récap (étape 4) — section MANETTE OUVERTE (calque is-combo). */
.zrc-recap-section.is-open .zrc-recap-label{ color: var(--zrc-tag-open-color, #f59e0b); }
.zrc-recap-section.is-open .zrc-recap-name{ color: var(--zrc-text); }
.zrc-recap-section.is-open .zrc-recap-price,
.zrc-recap-price--open{ color: var(--zrc-tag-open-color, #f59e0b); font-weight:700; }




/* [v1.10.26] Étape Expédition --------------------------------------------- */
.zrc-pane-shipping .zrc-ship-countries{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:var(--zrc-gap, 12px); margin:0 0 24px;
}
.zrc-pane-shipping .zrc-ship-country{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-radius:var(--zrc-card-radius, 12px);
  background:var(--zrc-card-bg, var(--zrc-card-elev));
  border:var(--zrc-card-border-width,1px) solid var(--zrc-card-border-color,var(--zrc-border));
  color:var(--zrc-text); cursor:pointer; transition:transform .15s ease, border-color .15s ease, background .15s ease;
  font:inherit; text-align:left;
}
.zrc-pane-shipping .zrc-ship-country:hover{ transform:translateY(-1px); border-color:var(--zrc-primary); }
.zrc-pane-shipping .zrc-ship-country.is-selected{
  border-color:var(--zrc-primary); background:var(--zrc-card-bg-selected, var(--zrc-card-bg));
  box-shadow:0 0 0 2px color-mix(in oklab, var(--zrc-primary) 35%, transparent);
}
.zrc-pane-shipping .zrc-ship-country-flag,
.zrc-side-ship-flag,
.zrc-recap-ship-flag{
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla","EmojiOne Color","Android Emoji",sans-serif;
  font-size:1.6rem; line-height:1;
}
.zrc-pane-shipping .zrc-ship-country-label{ font-weight:600; }

.zrc-pane-shipping .zrc-ship-modes{
  display:flex; flex-direction:column; gap:10px; margin:0 0 16px;
}
.zrc-pane-shipping .zrc-ship-mode{
  display:flex; align-items:center; gap:12px;
  padding:var(--zrc-service-padding,16px);
  border-radius:var(--zrc-card-radius,12px);
  background:var(--zrc-card-bg, var(--zrc-card-elev));
  border:var(--zrc-service-border-width,1px) solid var(--zrc-service-border-color,var(--zrc-border));
  color:var(--zrc-text); cursor:pointer; font:inherit; text-align:left;
  transition:border-color .15s ease, background .15s ease;
}
.zrc-pane-shipping .zrc-ship-mode:hover{ border-color:var(--zrc-primary); }
.zrc-pane-shipping .zrc-ship-mode.is-selected{
  border-color:var(--zrc-primary);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--zrc-primary) 35%, transparent);
}
.zrc-pane-shipping .zrc-ship-mode .zrc-checkbox{
  width:var(--zrc-service-cb-size,22px); height:var(--zrc-service-cb-size,22px);
  border-radius:50%; border:2px solid var(--zrc-border-strong, var(--zrc-border));
  flex:0 0 auto; position:relative;
}
.zrc-pane-shipping .zrc-ship-mode.is-selected .zrc-checkbox{
  background:var(--zrc-primary); border-color:var(--zrc-primary);
}
.zrc-pane-shipping .zrc-ship-mode.is-selected .zrc-checkbox::after{
  content:'✓'; color:#fff; font-weight:700; font-size:.8rem;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.zrc-pane-shipping .zrc-ship-mode .zrc-service-meta{ flex:1; }
.zrc-pane-shipping .zrc-ship-mode .zrc-card-price{ font-weight:700; color:var(--zrc-ship-price-color, #fff); }

.zrc-pane-shipping .zrc-ship-outbound{
  margin:8px 0 0; padding:12px 14px; border-radius:10px;
  background:color-mix(in oklab, var(--zrc-primary) 6%, transparent);
  color:var(--zrc-text); font-size:.9rem;
}
.zrc-pane-shipping .zrc-ship-outbound-msg{ margin:0; }
.zrc-pane-shipping .zrc-ship-blocked{
  margin:12px 0 0; padding:14px 16px; border-radius:10px;
  background:color-mix(in oklab, #ef4444 8%, transparent);
  border:1px solid color-mix(in oklab, #ef4444 35%, transparent);
  color:var(--zrc-text);
}
.zrc-pane-shipping .zrc-ship-blocked-msg{ margin:0; }

/* [v1.10.30] Le label "EXPÉDITION" hérite de la couleur grise standard (var(--zrc-recap-label)) comme DIAGNOSTIC, etc. — pas de surcharge bleue. */
.zrc-side-line.is-ship-head .zrc-flag-img,
.zrc-side-line.is-ship .zrc-flag-img{ margin:0 4px 0 0; vertical-align:middle; }

/* [v1.10.27] Sidebar — ligne expédition */
.zrc-side-line.is-ship .zrc-side-ship-ico{
  display:inline-flex; align-items:center; vertical-align:-3px;
  color:var(--zrc-primary); margin-right:4px;
}
.zrc-side-line.is-ship-head{ margin-top:6px; }
.zrc-side-line.is-ship-head .zrc-side-name{ font-weight:600; }

/* [v1.10.34] WooCommerce cart/checkout/side-cart — ligne meta (icône + drapeau + texte)
   IMPORTANT : rester en inline normal pour ne pas casser le layout du side-cart Woodmart. */
.zrc-meta-line{
  display:inline;
  vertical-align:middle;
}
.zrc-meta-line .zrc-cart-meta-ico,
.zrc-cart-meta-ico{
  display:inline-block;
  vertical-align:-3px;
  line-height:1;
  color:currentColor;
  margin:0 4px 0 0;
}
.zrc-meta-line .zrc-cart-meta-ico svg,
.zrc-cart-meta-ico svg{
  display:block;
}
.zrc-meta-line .zrc-flag-img{
  display:inline-block;
  margin:0 4px 0 0 !important;
  vertical-align:-2px !important;
}
.zrc-meta-line .zrc-meta-text{
  display:inline;
}

/* ============================================================
   [v1.10.46] Délais (Express / Sur commande) — sous le prix des cartes
   ============================================================ */
.zrc-card-delay{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:4px;
  line-height:1.2;
  user-select:none;
  white-space:nowrap;
}
.zrc-card-delay .zrc-card-delay-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.zrc-card-delay .zrc-card-delay-ico svg{
  width:1em;
  height:1em;
  display:block;
}
.zrc-card-delay.is-fast{
  color:var(--zrc-delay-fast-text,#9ca3af);
  font-size:var(--zrc-delay-fast-size,12px);
  font-weight:var(--zrc-delay-fast-weight,500);
}
.zrc-card-delay.is-fast .zrc-card-delay-ico{ color:var(--zrc-delay-fast-icon,#22c55e); }
.zrc-card-delay.is-slow{
  color:var(--zrc-delay-slow-text,#9ca3af);
  font-size:var(--zrc-delay-slow-size,12px);
  font-weight:var(--zrc-delay-slow-weight,500);
}
.zrc-card-delay.is-slow .zrc-card-delay-ico{ color:var(--zrc-delay-slow-icon,#f59e0b); }

/* Service rows : le délai s'affiche en bout de ligne sous le prix */
.zrc-service .zrc-card-delay{
  position:absolute;
  right:14px;
  bottom:8px;
}
.zrc-service{ position:relative; }

/* Récap step 4 : message Délais avant le total-box */
.zrc-recap-delay{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  margin:8px 0 12px;
  border-radius:10px;
  font-size:.92rem;
  line-height:1.4;
  background:color-mix(in oklab, var(--zrc-card-elev) 70%, transparent);
  border:1px solid var(--zrc-border, rgba(255,255,255,.08));
}
.zrc-recap-delay.is-fast{
  border-color:color-mix(in oklab, var(--zrc-delay-fast-icon,#22c55e) 40%, transparent);
  background:color-mix(in oklab, var(--zrc-delay-fast-icon,#22c55e) 8%, var(--zrc-card-elev));
}
.zrc-recap-delay.is-slow{
  border-color:color-mix(in oklab, var(--zrc-delay-slow-icon,#f59e0b) 40%, transparent);
  background:color-mix(in oklab, var(--zrc-delay-slow-icon,#f59e0b) 8%, var(--zrc-card-elev));
}
.zrc-recap-delay .zrc-recap-delay-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  flex-shrink:0;
}
.zrc-recap-delay.is-fast .zrc-recap-delay-ico{
  color:var(--zrc-delay-fast-icon,#22c55e);
  background:color-mix(in oklab, var(--zrc-delay-fast-icon,#22c55e) 15%, transparent);
}
.zrc-recap-delay.is-slow .zrc-recap-delay-ico{
  color:var(--zrc-delay-slow-icon,#f59e0b);
  background:color-mix(in oklab, var(--zrc-delay-slow-icon,#f59e0b) 15%, transparent);
}
.zrc-recap-delay .zrc-recap-delay-ico svg{ width:16px; height:16px; }
.zrc-recap-delay .zrc-recap-delay-text{ flex:1; color:var(--zrc-text); }

/* [v1.13.22] Variante "intégrée" : la ligne Délais affichée À L'INTÉRIEUR
 * du bloc d'information (étape 4). Conserve les couleurs is-fast/is-slow
 * uniquement sur la pastille d'icône — pas de double encart. */
.zrc-info-block-delay-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0 0;
  padding-top:10px;
  border-top:1px solid color-mix(in oklab, var(--zrc-border, rgba(255,255,255,.08)) 100%, transparent);
  font-size:.92rem;
  line-height:1.4;
}
.zrc-info-block-delay-row .zrc-recap-delay-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  flex-shrink:0;
}
.zrc-info-block-delay-row.is-fast .zrc-recap-delay-ico{
  color:var(--zrc-delay-fast-icon,#22c55e);
  background:color-mix(in oklab, var(--zrc-delay-fast-icon,#22c55e) 15%, transparent);
}
.zrc-info-block-delay-row.is-slow .zrc-recap-delay-ico{
  color:var(--zrc-delay-slow-icon,#f59e0b);
  background:color-mix(in oklab, var(--zrc-delay-slow-icon,#f59e0b) 15%, transparent);
}
.zrc-info-block-delay-row .zrc-recap-delay-ico svg{ width:14px; height:14px; }
.zrc-info-block-delay-row.is-fast .zrc-recap-delay-text{
  color:var(--zrc-delay-fast-icon,#22c55e);
  font-weight:600;
}
.zrc-info-block-delay-row.is-slow .zrc-recap-delay-text{
  color:var(--zrc-delay-slow-icon,#f59e0b);
  font-weight:600;
}

/* ============================================================
 * [v1.10.51] Bouton "i" sur les cartes + Modale d'infos
 * ============================================================ */
.zrc-card-info-btn{
  position:absolute; right:8px; bottom:8px;
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  font:600 12px/1 var(--zrc-font, system-ui, sans-serif);
  font-style:italic;
  color:var(--zrc-muted, #9ca3af);
  background:color-mix(in oklab, var(--zrc-card-elev, #1a1f2e) 80%, transparent);
  border:1px solid var(--zrc-border, rgba(255,255,255,.08));
  cursor:pointer;
  transition:color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
  z-index:2;
  user-select:none;
}
.zrc-card-info-btn:hover{
  color:var(--zrc-primary, #5865f2);
  background:color-mix(in oklab, var(--zrc-primary, #5865f2) 14%, var(--zrc-card-elev, #1a1f2e));
  border-color:color-mix(in oklab, var(--zrc-primary, #5865f2) 40%, transparent);
  transform:scale(1.08);
}
.zrc-card-info-btn:focus-visible{
  outline:2px solid var(--zrc-primary, #5865f2);
  outline-offset:2px;
}
.zrc-card-info-btn--inline,
.zrc-help-info-btn--inline{
  position:static; margin-left:8px; width:24px; height:24px; font-size:13px;
  vertical-align:middle;
}
/* [v1.13.7] Bouton "i" générique d'aide — couleur amber très visible */
.zrc-help-info-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  font:800 13px/1 var(--zrc-font, system-ui, sans-serif);
  font-style:italic;
  color:#0b0f1a;
  background:#fbbf24;
  border:1px solid #fbbf24;
  box-shadow:0 0 0 2px color-mix(in oklab, #fbbf24 25%, transparent), 0 2px 8px -2px rgba(251,191,36,.5);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  user-select:none;
  vertical-align:middle;
  flex-shrink:0;
}
.zrc-help-info-btn:hover{
  background:#fcd34d;
  transform:scale(1.12);
  box-shadow:0 0 0 3px color-mix(in oklab, #fbbf24 35%, transparent), 0 4px 12px -2px rgba(251,191,36,.6);
}
.zrc-help-info-btn:focus-visible{
  outline:2px solid #fbbf24;
  outline-offset:2px;
}
/* La carte doit avoir position:relative pour ancrer le bouton (.zrc-card l'est déjà via les badges) */
.zrc-card{ position:relative; }
.zrc-service{ position:relative; }

/* Modale */
.zrc-info-modal{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  animation:zrcInfoFade .15s ease-out;
}
@keyframes zrcInfoFade{ from{opacity:0} to{opacity:1} }
.zrc-info-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
  cursor:pointer;
}
.zrc-info-modal__panel{
  position:relative;
  background:var(--zrc-card-elev, #1a1f2e);
  color:var(--zrc-text, #fff);
  border:1px solid var(--zrc-border, rgba(255,255,255,.1));
  border-radius:16px;
  max-width:480px; width:100%;
  max-height:85vh; overflow-y:auto;
  padding:24px 24px 20px;
  box-shadow:0 25px 60px -15px rgba(0,0,0,.7);
  animation:zrcInfoPop .2s cubic-bezier(.16,1,.3,1);
}
@keyframes zrcInfoPop{ from{opacity:0; transform:translateY(8px) scale(.97)} to{opacity:1; transform:none} }
.zrc-info-modal__close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:50%;
  border:0; background:transparent;
  color:var(--zrc-muted, #9ca3af);
  font-size:24px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.zrc-info-modal__close:hover{
  background:color-mix(in oklab, var(--zrc-text, #fff) 8%, transparent);
  color:var(--zrc-text, #fff);
}
.zrc-info-modal__title{
  margin:0 32px 16px 0;
  font-size:1.25rem; font-weight:700;
  color:var(--zrc-text, #fff);
}
/* [v1.12.1] Bloc média (image OU iframe YouTube) en haut de la modale "i" */
.zrc-info-modal__media{
  margin:0 0 18px;
  border-radius:10px;
  overflow:hidden;
  background:transparent;
}
.zrc-info-modal__image{
  display:block; width:100%; height:auto; max-height:360px;
  /* [v1.13.48.14] Plus de fond noir : on épouse le fond blanc de la modale */
  object-fit:contain; background:#fff;
}
.zrc-info-modal__video{
  position:relative; width:100%; padding-top:56.25%; /* 16:9 */
  background:#000;
}
.zrc-info-modal__video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.zrc-info-modal__section{ margin-bottom:18px; }
.zrc-info-modal__section h4{
  margin:0 0 8px;
  font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--zrc-primary, #5865f2);
}
.zrc-info-modal__section p,
.zrc-info-modal__section ul{
  margin:0; color:var(--zrc-text, #e5e7eb); font-size:.92rem; line-height:1.55;
}
.zrc-info-modal__section ul{ padding-left:18px; }
.zrc-info-modal__section li{ margin-bottom:4px; }
.zrc-info-modal__section li:last-child{ margin-bottom:0; }
/* [v1.13.47.0] Contenu riche HTML dans les modales info/aide (WYSIWYG) */
.zrc-info-modal__rich{ color:var(--zrc-text, #e5e7eb); font-size:.95rem; line-height:1.6; }
.zrc-info-modal__rich p{ margin:0 0 10px; }
.zrc-info-modal__rich p:last-child{ margin-bottom:0; }
.zrc-info-modal__rich h1,
.zrc-info-modal__rich h2,
.zrc-info-modal__rich h3,
.zrc-info-modal__rich h4,
.zrc-info-modal__rich h5,
.zrc-info-modal__rich h6{ margin:14px 0 6px; line-height:1.25; color:inherit; }
.zrc-info-modal__rich h2{ font-size:1.1rem; font-weight:700; }
.zrc-info-modal__rich h3{ font-size:1rem; font-weight:700; }
.zrc-info-modal__rich h4{ font-size:.95rem; font-weight:700; }
.zrc-info-modal__rich ul,
.zrc-info-modal__rich ol{ margin:6px 0 10px; padding-left:20px; }
.zrc-info-modal__rich li{ margin-bottom:4px; }
.zrc-info-modal__rich a{ color:var(--zrc-primary, #5865f2); text-decoration:underline; }
.zrc-info-modal__rich strong,
.zrc-info-modal__rich b{ font-weight:700; }
.zrc-info-modal__rich img{ max-width:100%; height:auto; border-radius:8px; margin:6px 0; display:block; }
.zrc-info-modal__rich blockquote{ margin:8px 0; padding:8px 12px; border-left:3px solid var(--zrc-primary, #5865f2); background:rgba(255,255,255,.04); border-radius:4px; }
.zrc-info-modal__rich code{ background:rgba(255,255,255,.08); padding:1px 5px; border-radius:3px; font-size:.85em; }
.zrc-info-modal__rich hr{ border:0; border-top:1px solid var(--zrc-border, rgba(255,255,255,.1)); margin:14px 0; }
.zrc-info-modal__footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:20px; padding-top:16px;
  border-top:1px solid var(--zrc-border, rgba(255,255,255,.08));
  flex-wrap:wrap;
}
.zrc-info-modal__price{
  font-size:1.15rem; font-weight:700;
  color:var(--zrc-text, #fff);
}
.zrc-info-modal__cta{
  flex:1 1 auto; min-width:160px;
  padding:12px 18px;
  border:0; border-radius:10px;
  background:var(--zrc-primary, #5865f2);
  color:#fff;
  font-size:.85rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer;
  transition:filter .15s, transform .15s;
}
.zrc-info-modal__cta:hover{ filter:brightness(1.1); transform:translateY(-1px); }
@media (max-width:480px){
  .zrc-info-modal__panel{ padding:20px 18px 16px; }
  .zrc-info-modal__title{ font-size:1.1rem; }
  .zrc-info-modal__footer{ flex-direction:column; align-items:stretch; }
  .zrc-info-modal__price{ text-align:center; }
}

/* [v1.10.57 / v1.10.58] Encart upsell — variables --zcs-* injectées par le JS si custom style */
.zrc-recap-upsell{
  display:flex; align-items:flex-start; gap:14px;
  margin:0 0 16px;
  padding:14px 16px;
  border-radius: var(--zcs-br, 14px);
  background: var(--zcs-bg, linear-gradient(135deg, color-mix(in oklab, #8b5cf6 14%, transparent), color-mix(in oklab, #22c55e 10%, transparent)));
  border: var(--zcs-bw, 1px) solid var(--zcs-border, color-mix(in oklab, #8b5cf6 35%, transparent));
  color: var(--zcs-text, var(--zrc-text));
}
.zrc-recap-upsell-ico{
  font-size:1.6rem; line-height:1; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:color-mix(in oklab, var(--zcs-icon, #8b5cf6) 18%, transparent);
  color: var(--zcs-icon, #8b5cf6);
}
.zrc-recap-upsell-ico svg{ width: var(--zcs-isize, 26px); height: var(--zcs-isize, 26px); }
.zrc-recap-upsell-ico img{ max-width: var(--zcs-isize, 26px); max-height: var(--zcs-isize, 26px); }
.zrc-recap-upsell-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.zrc-recap-upsell-title{ font-weight:700; font-size: var(--zcs-tsize, 1rem); line-height:1.25; color: var(--zcs-title, var(--zrc-text)); }
.zrc-recap-upsell-text{ font-size: var(--zcs-txsize, .92rem); line-height:1.45; color: var(--zcs-text, var(--zrc-muted, var(--zrc-text))); opacity:.92; }
.zrc-recap-upsell-cta{
  align-self:flex-start;
  margin-top:6px;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  border-radius:10px;
  background:var(--zrc-primary, #8b5cf6);
  color:#fff !important;
  font-weight:600; font-size:.88rem;
  text-decoration:none !important;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow:0 4px 14px -4px color-mix(in oklab, var(--zrc-primary, #8b5cf6) 60%, transparent);
}
.zrc-recap-upsell-cta:hover{ transform:translateY(-1px); opacity:.95; }
@media (max-width:520px){
  .zrc-recap-upsell{ flex-direction:column; gap:10px; padding:14px; }
  .zrc-recap-upsell-ico{ width:36px; height:36px; font-size:1.4rem; }
}

/* ============================================================
 * [v1.12.2] Sous-options par carte (menus déroulants)
 * Panneau qui se déplie sous la carte sélectionnée, en pleine largeur
 * de la grille `.zrc-cards`.
 * ============================================================ */
/* [v1.13.22.28] Modale centrée (style identique au modal "i") — panneau portalisé sous <body> */
.zrc-cards { position: relative; }

.zrc-card-subopts-backdrop{
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: zrcInfoFade .15s ease-out;
  cursor: pointer;
}
.zrc-card-subopts-backdrop[hidden]{ display:none; }

.zrc-card-subopts{
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  width: min(520px, calc(100vw - 32px));
  max-height: 85vh;
  overflow-y: auto;
  background: var(--zrc-card-elev, #1a1f2e);
  border: 1px solid var(--zrc-border, rgba(255,255,255,.1));
  border-radius: 16px;
  padding: 24px 24px 20px;
  box-shadow: 0 25px 60px -15px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #FAFAFA;
  animation: zrcSubOptsIn .2s cubic-bezier(.16,1,.3,1);
  pointer-events: auto;
}
.zrc-card-subopts[hidden]{ display:none; }
@keyframes zrcSubOptsIn{
  from{ opacity:0; transform: translate(-50%, -50%) scale(.97); }
  to  { opacity:1; transform: translate(-50%, -50%) scale(1); }
}
.zrc-card-subopts__head{
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 28px 4px 0;
}
.zrc-card-subopts__head strong{ color: #FAFAFA; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 1.05rem; display:block; margin-top:4px; }
.zrc-card-subopt-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zrc-card-subopt-label{
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.78);
  letter-spacing: .02em;
}
.zrc-card-subopt-req{ color:#ef4444; margin-left: 2px; }
.zrc-card-subopts .zrc-card-subopt-select{
  display: none !important;
}
.zrc-card-subopts .zrc-card-subopt-btns{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  width: 100%;
}
.zrc-card-subopt-btn{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  min-height: 62px;
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: #FAFAFA;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
  text-align: center;
  font-family: inherit;
}
.zrc-card-subopt-btn:hover{
  border-color: rgba(79,141,255,.55);
  background: rgba(79,141,255,.10);
}
.zrc-card-subopt-btn:active{ transform: scale(.96); }
.zrc-card-subopt-btn.is-active{
  border-color: #4F8DFF;
  background: rgba(79,141,255,.22);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(79,141,255,.18), inset 0 0 0 1px rgba(79,141,255,.4);
}
.zrc-card-subopt-btn.is-active::after{
  content: '✓';
  position: absolute;
  top: 3px; right: 5px;
  font-size: 10px;
  color: #4F8DFF;
  font-weight: 800;
}
.zrc-card-subopt-btn-ico{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: currentColor;
  pointer-events: none;
}
.zrc-card-subopt-btn-ico svg{ width: 100%; height: 100%; display:block; }
/* [v1.13.42.1] Toujours afficher le libellé sous l'icône pour lever
   toute ambiguïté (ex : Gauche / Droit / Les deux). */
.zrc-card-subopt-btn.has-icon{
  min-height: 72px;
  padding: 10px 8px 8px;
  gap: 6px;
}
.zrc-card-subopt-btn.has-icon .zrc-card-subopt-btn-txt{
  display: block;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.15;
  color: #FAFAFA;
}
.zrc-card-subopt-btn:not(.has-icon){
  min-height: 42px;
  padding: 10px 12px;
}
.zrc-card-subopt-btn:not(.has-icon) .zrc-card-subopt-btn-txt{
  font-size: .82rem;
}
/* [v1.13.48.30] Anti-débordement : les libellés longs (ex. « Transparent »)
   doivent se couper/rétrécir au lieu de sortir du bouton. */
.zrc-card-subopts .zrc-card-subopt-btns{
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.zrc-card-subopt-btn{ min-width: 0; overflow: hidden; }
.zrc-card-subopt-btn .zrc-card-subopt-btn-txt{
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
/* Pastille de couleur : icône ronde + libellé lisible en dessous */
.zrc-card-subopt-btn.is-swatch .zrc-card-subopt-btn-ico{ width: 22px; height: 22px; }
.zrc-card-subopt-btn.is-swatch{ min-height: 68px; }
.zrc-card-subopt-btn.is-swatch .zrc-card-subopt-btn-txt{
  font-size: .76rem;
  color: #FAFAFA;
}
.zrc-card-subopt-chip-ico{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 14px; height: 14px;
  vertical-align: -2px;
  margin-right: 2px;
}
.zrc-card-subopt-chip-ico + .zrc-card-subopt-chip-ico{ margin-left: 4px; }
.zrc-card-subopt-chip-ico svg{ width:100%; height:100%; display:block; }
.zrc-card-subopt-row.is-error .zrc-card-subopt-btns{
  outline: 1.5px solid #ef4444;
  outline-offset: 2px;
  border-radius: 10px;
}
.zrc-card-subopt-row.is-error .zrc-card-subopt-label{ color: #fca5a5; }
.zrc-card-subopts__close{
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border: 0; background: transparent;
  color: rgba(255,255,255,.6);
  font-size: 24px; line-height: 1;
  cursor: pointer; border-radius: 50%;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.zrc-card-subopts__close:hover{ color:#fff; background: rgba(255,255,255,.08); }

/* Résumé sur la carte (puces choisies + crayon pour rouvrir) */
.zrc-card-subopt-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 8px 4px 10px;
  background: rgba(79,141,255,.12);
  border: 1px solid rgba(79,141,255,.35);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  color: #cfe0ff;
  line-height: 1.2;
  max-width: 100%;
}
.zrc-card-subopt-chip-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zrc-card-subopt-edit{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(79,141,255,.25);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.zrc-card-subopt-edit:hover{ background: rgba(79,141,255,.45); }
@media (max-width: 480px){
  .zrc-card-subopts{ padding: 20px 18px 16px; }
}

/* Récap step 4 : sous-lignes sous le nom */
.zrc-recap-name .zrc-recap-sub{
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  font-weight: 400;
  color: var(--zrc-muted, #64748b);
  line-height: 1.4;
}
.zrc-recap-name .zrc-recap-sub-line::before{
  content: "↳ ";
  opacity: .6;
}

/* ============================================================
 * [v1.13.1] Bloc « Révision matérielle » — design panel inline
 * Affiché sous la grille modèles dès qu'un modèle avec révisions
 * est sélectionné. Conserve l'identité du configurateur (tokens
 * --zrc-* : card-elev, primary, border, glow).
 * ============================================================ */
.zrc-revisions-block{
  margin-top: 22px;
  padding: var(--zrc-rc-py, 22px) var(--zrc-rc-px, 22px);
  border-radius: var(--zrc-rc-radius, 16px);
  border: var(--zrc-rc-bw, 1px) solid var(--zrc-rc-bc, var(--zrc-border));
  background: var(--zrc-rc-bg, color-mix(in oklab, var(--zrc-card-elev) 88%, transparent));
  box-shadow:
    0 1px 0 color-mix(in oklab, #fff 4%, transparent) inset,
    0 18px 40px -22px rgba(0,0,0,.55);
  animation: zrcRevReveal .25s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
}
.zrc-revisions-block::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--zrc-rc-accent, var(--zrc-primary)), color-mix(in oklab, var(--zrc-rc-accent, var(--zrc-primary)) 30%, transparent));
  opacity: .95;
  display: var(--zrc-rc-accent-display, block);
}
@keyframes zrcRevReveal{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: none; }
}
.zrc-rev-title{
  margin: 0 0 4px;
  font-size: var(--zrc-rc-title-fs, 1rem);
  font-weight: var(--zrc-rc-title-fw, 700);
  letter-spacing: .01em;
  color: var(--zrc-rc-title-color, var(--zrc-text));
  display: block;
}
.zrc-rev-title::before{
  content: "";
  display: var(--zrc-rc-dot-display, inline-block);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--zrc-rc-dot-color, var(--zrc-primary));
  box-shadow: 0 0 12px color-mix(in oklab, var(--zrc-rc-dot-color, var(--zrc-primary)) calc(var(--zrc-glow)*70%), transparent);
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-2px);
}
.zrc-rev-sub{
  margin: 0 0 14px;
  font-size: var(--zrc-rc-sub-fs, .85rem);
  line-height: 1.5;
  color: var(--zrc-rc-sub-color, var(--zrc-muted, #9ca3af)) !important;
}
/* [v1.13.11] Couleurs personnalisables du bouton « i » dans la carte révision + suppression du glow jaune */
.zrc-revisions-block .zrc-help-info-btn{
  background: var(--zrc-rc-help-bg, #fbbf24) !important;
  border-color: var(--zrc-rc-help-bg, #fbbf24) !important;
  color: var(--zrc-rc-help-color, #0b0f1a) !important;
  box-shadow: none !important;
}
.zrc-revisions-block .zrc-help-info-btn:hover{
  box-shadow: none !important;
}
.zrc-rev-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.zrc-rev-grid .zrc-rev-btn{
  appearance: none;
  cursor: pointer;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--zrc-border);
  background: color-mix(in oklab, var(--zrc-card-elev) 70%, transparent);
  color: var(--zrc-text);
  font-size: .92rem; font-weight: 600; letter-spacing: .02em;
  text-align: center;
  transition: transform .12s ease, border-color .15s, background .15s, box-shadow .2s, color .15s;
  position: relative;
}
.zrc-rev-grid .zrc-rev-btn:hover{
  border-color: var(--zrc-border-strong, color-mix(in oklab, var(--zrc-primary) 35%, var(--zrc-border)));
  transform: translateY(-1px);
}
.zrc-rev-grid .zrc-rev-btn.is-active{
  border-color: color-mix(in oklab, var(--zrc-primary) 70%, transparent);
  background: color-mix(in oklab, var(--zrc-primary) 18%, transparent);
  color: var(--zrc-text);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--zrc-primary) 55%, transparent),
    0 0 22px color-mix(in oklab, var(--zrc-primary) calc(var(--zrc-glow)*55%), transparent);
}
.zrc-rev-grid .zrc-rev-btn.is-active::after{
  content: "✓";
  position: absolute; top: 6px; right: 8px;
  font-size: .75rem; font-weight: 800;
  color: var(--zrc-primary);
  opacity: .9;
}
/* [v1.13.9] Bouton "Je ne sais pas" — variables CSS pilotées depuis l'admin, !important pour neutraliser les boutons globaux du thème (Woodmart/Elementor) */
.zrc-rev-unknown{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  padding: var(--zrc-ru-py, 6px) var(--zrc-ru-px, 14px) !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  border-radius: var(--zrc-ru-radius, 999px) !important;
  border: var(--zrc-ru-bw, 1px) var(--zrc-ru-bs, dashed) var(--zrc-ru-bc, rgba(255,255,255,.18)) !important;
  background: var(--zrc-ru-bg, transparent) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--zrc-ru-color, #9ca3af) !important;
  font-family: inherit !important;
  font-size: var(--zrc-ru-fs, 11px) !important;
  font-weight: var(--zrc-ru-fw, 600) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-indent: 0 !important;
  text-align: center !important;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.zrc-rev-unknown:hover{
  color: var(--zrc-ru-active, #fbbf24) !important;
  border-color: color-mix(in oklab, var(--zrc-ru-active, #fbbf24) 45%, var(--zrc-ru-bc, rgba(255,255,255,.18))) !important;
}
.zrc-rev-unknown.is-active{
  border-style: solid !important;
  color: var(--zrc-ru-active, #fbbf24) !important;
  border-color: color-mix(in oklab, var(--zrc-ru-active, #fbbf24) 55%, transparent) !important;
  background: color-mix(in oklab, var(--zrc-ru-active, #fbbf24) 12%, transparent) !important;
}
.zrc-rev-unknown-ico{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: calc(var(--zrc-ru-fs, 11px) + 4px);
  height: calc(var(--zrc-ru-fs, 11px) + 4px);
  border-radius: 50%;
  background: color-mix(in oklab, currentColor 22%, transparent);
  font-size: calc(var(--zrc-ru-fs, 11px) * 0.85);
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.zrc-rev-unknown-txt{
  display: inline-block;
  padding-right: 2px; /* respiration visuelle à droite */
  line-height: 1;
}

.zrc-rev-warning{
  margin-top: 12px;
  padding: var(--zrc-rw-py, 10px) var(--zrc-rw-px, 12px) !important;
  border-radius: var(--zrc-rw-radius, 10px) !important;
  border: var(--zrc-rw-bw, 1px) solid var(--zrc-rw-bc, color-mix(in oklab, #fbbf24 45%, transparent)) !important;
  background: var(--zrc-rw-bg, color-mix(in oklab, #fbbf24 10%, transparent)) !important;
  color: var(--zrc-rw-color, #fde68a) !important;
  font-size: var(--zrc-rw-fs, .82rem); line-height: 1.45;
}

/* [v1.13.2] Champ « Numéro de série » — design panel mis en valeur */
.zrc-serial-field{
  margin-top: 18px;
  padding: var(--zrc-sn-py, 20px) var(--zrc-sn-px, 22px) !important;
  border-radius: var(--zrc-sn-radius, 16px) !important;
  border: var(--zrc-sn-bw, 1px) solid var(--zrc-sn-bc, var(--zrc-border)) !important;
  background: var(--zrc-sn-bg, color-mix(in oklab, var(--zrc-card-elev) 88%, transparent)) !important;
  box-shadow:
    0 1px 0 color-mix(in oklab, #fff 4%, transparent) inset,
    0 18px 40px -22px rgba(0,0,0,.55);
  position: relative;
  overflow: hidden;
}
.zrc-serial-field::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--zrc-primary), color-mix(in oklab, var(--zrc-primary) 30%, transparent));
  opacity: .95;
}
.zrc-serial-field.zrc-sn-no-accent::before{ display: none; }
.zrc-serial-label{
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font-size: var(--zrc-sn-label-size, 1rem); font-weight: 700; letter-spacing: .01em;
  line-height: 1.2;
  color: var(--zrc-sn-label-color, var(--zrc-text)) !important;
}
.zrc-serial-label::before{
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--zrc-primary);
  box-shadow: 0 0 12px color-mix(in oklab, var(--zrc-primary) calc(var(--zrc-glow)*70%), transparent);
  flex-shrink: 0;
}
.zrc-serial-field.zrc-sn-no-dot .zrc-serial-label::before{ display: none; }
.zrc-serial-label .zrc-help-info-btn--inline{ align-self: center; }
.zrc-serial-req{ color: #fbbf24; font-weight: 800; }
.zrc-serial-input{
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--zrc-sn-input-bc, var(--zrc-border)) !important;
  background: var(--zrc-sn-input-bg, color-mix(in oklab, var(--zrc-card-elev) 60%, transparent)) !important;
  color: var(--zrc-sn-input-color, var(--zrc-text)) !important;
  font-size: 1rem; font-weight: 600;
  letter-spacing: .04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transition: border-color .15s, box-shadow .2s, background .15s;
}
.zrc-serial-input::placeholder{
  color: var(--zrc-muted, #9ca3af);
  font-weight: 500;
  letter-spacing: .02em;
}
.zrc-serial-input:focus{
  outline: none;
  border-color: color-mix(in oklab, var(--zrc-primary) 70%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--zrc-primary) 22%, transparent),
    0 0 22px color-mix(in oklab, var(--zrc-primary) calc(var(--zrc-glow)*45%), transparent);
}
.zrc-serial-help{
  margin: 10px 0 0;
  font-size: .82rem; line-height: 1.5;
  color: var(--zrc-sn-help-color, var(--zrc-muted, #9ca3af)) !important;
}
.zrc-serial-error{
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, #ef4444 50%, transparent);
  background: color-mix(in oklab, #ef4444 12%, transparent);
  color: #fecaca;
  font-size: .82rem; font-weight: 600;
}
.zrc-serial-field.is-error{
  border-color: color-mix(in oklab, #ef4444 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, #ef4444 35%, transparent),
    0 0 22px color-mix(in oklab, #ef4444 25%, transparent);
}
.zrc-rev-warning{
  margin-top: 12px;
  padding: var(--zrc-rw-py, 10px) var(--zrc-rw-px, 12px) !important;
  border-radius: var(--zrc-rw-radius, 10px) !important;
  border: var(--zrc-rw-bw, 1px) solid var(--zrc-rw-bc, color-mix(in oklab, #fbbf24 45%, transparent)) !important;
  background: var(--zrc-rw-bg, color-mix(in oklab, #fbbf24 10%, transparent)) !important;
  color: var(--zrc-rw-color, #fde68a) !important;
  font-size: var(--zrc-rw-fs, .82rem); line-height: 1.45;
}
.zrc-revisions-block.is-error{
  border-color: color-mix(in oklab, #ef4444 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, #ef4444 35%, transparent),
    0 0 22px color-mix(in oklab, #ef4444 25%, transparent);
  animation: zrcRevShake .35s ease;
}
@keyframes zrcRevShake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  75%{ transform: translateX(4px); }
}
@media (max-width: 520px){
  .zrc-revisions-block{ padding: 18px 16px 14px; }
  .zrc-rev-grid{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .zrc-rev-grid .zrc-rev-btn{ padding: 10px 8px; font-size: .88rem; }
}

/* [v1.13.14] (i) info button — personnalisation pour le bloc Numéro de série */
.zrc-serial-field .zrc-help-info-btn{
  background: var(--zrc-sn-info-bg, #fbbf24) !important;
  color: var(--zrc-sn-info-color, #0b0f1a) !important;
  border-color: var(--zrc-sn-info-bc, var(--zrc-sn-info-bg, #fbbf24)) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--zrc-sn-info-bg, #fbbf24) 25%, transparent),
              0 2px 8px -2px color-mix(in oklab, var(--zrc-sn-info-bg, #fbbf24) 50%, transparent) !important;
}
.zrc-serial-field .zrc-help-info-btn:hover{
  background: var(--zrc-sn-info-hover-bg, var(--zrc-sn-info-bg, #fcd34d)) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--zrc-sn-info-bg, #fbbf24) 35%, transparent),
              0 4px 12px -2px color-mix(in oklab, var(--zrc-sn-info-bg, #fbbf24) 60%, transparent) !important;
}
.zrc-serial-field .zrc-help-info-btn:focus-visible{
  outline-color: var(--zrc-sn-info-bg, #fbbf24) !important;
}
.zrc-serial-field.zrc-sn-no-glow .zrc-help-info-btn,
.zrc-serial-field.zrc-sn-no-glow .zrc-help-info-btn:hover{
  box-shadow: none !important;
}

/* [v1.13.16] SN — couleur de l'astérisque, du placeholder et du message d'erreur */
.zrc-serial-field .zrc-serial-req{
  color: var(--zrc-sn-required-color, #ef4444) !important;
}
.zrc-serial-field .zrc-serial-input::placeholder{
  color: var(--zrc-sn-placeholder-color, var(--zrc-muted, #9ca3af)) !important;
  opacity: 1;
}
.zrc-serial-field .zrc-serial-error{
  color: var(--zrc-sn-error-color, #ef4444) !important;
}

/* [v1.13.23.5] Carte restreinte par révision (mode "Je ne sais pas")
   Le grisage est appliqué aux ENFANTS de la carte (pas à la carte elle-même)
   afin que le badge ::after reste en couleurs vives par-dessus. */
.zrc-card.is-rev-restricted,
.zrc-service.is-rev-restricted {
  cursor: help;
  position: relative;
}
.zrc-card.is-rev-restricted > *:not(.zrc-card-subopts),
.zrc-service.is-rev-restricted > *:not(.zrc-card-subopts) {
  opacity: 0.55;
  filter: grayscale(0.6);
  transition: opacity .2s ease, filter .2s ease;
}
.zrc-card.is-rev-restricted:hover > *:not(.zrc-card-subopts),
.zrc-service.is-rev-restricted:hover > *:not(.zrc-card-subopts) {
  opacity: 0.75;
  filter: grayscale(0.3);
}
.zrc-card.is-rev-restricted::after,
.zrc-service.is-rev-restricted::after {
  content: var(--zrc-rb-text, "\26A0  Précisez votre révision");
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  background: var(--zrc-rb-bg, #fbbf24);
  color: var(--zrc-rb-color, #0b0f1a);
  border: 1px solid var(--zrc-rb-bc, rgba(0,0,0,0.18));
  font-size: var(--zrc-rb-fs, 11px);
  font-weight: var(--zrc-rb-fw, 700);
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: var(--zrc-rb-radius, 999px);
  pointer-events: none;
  z-index: 5;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
  hyphens: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  opacity: 1;
  filter: none;
}
@media (max-width: 480px){
  .zrc-card.is-rev-restricted::after,
  .zrc-service.is-rev-restricted::after {
    font-size: calc(var(--zrc-rb-fs, 11px) - 2px);
    padding: 6px 10px;
    max-width: calc(100% - 16px);
    line-height: 1.2;
    white-space: normal;
    border-radius: 10px;
    width: max-content;
  }
}
@media (max-width: 360px){
  .zrc-card.is-rev-restricted::after,
  .zrc-service.is-rev-restricted::after {
    font-size: calc(var(--zrc-rb-fs, 11px) - 3px);
    padding: 3px 7px;
  }
}

/* [v1.13.23.5] Récap — icônes des sous-options affichées au lieu des IDs */
.zrc-recap-sub-line .zrc-recap-sub-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
}
.zrc-recap-sub-line .zrc-recap-sub-ico svg{
  width: 16px;
  height: 16px;
  display: block;
}




/* ==================================================================
   [v1.13.43] Quantité configurable par modèle — modale + puce ×N
   ================================================================== */
.zrc-model{ position:relative; }
.zrc-model-qty-chip{
  position:absolute; top:8px; right:8px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  background:#0F172A; color:#fff; font-weight:700; font-size:12px;
  padding:4px 8px; border-radius:999px;
  box-shadow:0 2px 8px rgba(15,23,42,.25);
  pointer-events:none;
}
.zrc-model-qty-chip .zrc-model-qty-edit{
  margin-left:2px; font-size:11px; opacity:.75; pointer-events:auto; cursor:pointer;
}
.zrc-qty-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:100001; width:min(420px, calc(100vw - 32px));
  background:#fff; border-radius:16px; padding:24px 22px 20px;
  box-shadow:0 20px 60px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.06);
}
.zrc-qty-modal[hidden]{ display:none; }
.zrc-qty-modal__close{
  position:absolute; top:10px; right:10px; width:30px; height:30px;
  background:transparent; border:0; font-size:22px; cursor:pointer; color:#64748b;
  border-radius:8px; line-height:1;
}
.zrc-qty-modal__close:hover{ background:#f1f5f9; color:#0f172a; }
.zrc-qty-modal__head{
  font-size:17px; font-weight:700; color:#0f172a; margin:0 0 6px; padding-right:24px;
}
.zrc-qty-modal__head strong{ color:#3B6FE0; }
.zrc-qty-modal__hint{
  font-size:12px; color:#64748b; margin:0 0 16px;
}
.zrc-qty-modal__btns{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(70px, 1fr)); gap:10px;
}
.zrc-qty-modal__btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:14px 8px; border:2px solid #e2e8f0; background:#fff;
  border-radius:12px; cursor:pointer; font-family:inherit; color:#0f172a;
  transition:border-color .15s, background .15s, transform .1s;
}
/* [v1.13.43.3] Texte toujours noir, quel que soit l'état (hover/active) — feedback via bordure + fond léger uniquement */
.zrc-qty-modal__btn:hover,
.zrc-qty-modal__btn:focus,
.zrc-qty-modal__btn:focus-visible{ border-color:#3B6FE0; background:#F0F6FF; color:#0f172a !important; }
.zrc-qty-modal__btn:hover .zrc-qty-modal__btn-num,
.zrc-qty-modal__btn:hover .zrc-qty-modal__btn-sub,
.zrc-qty-modal__btn:focus .zrc-qty-modal__btn-num,
.zrc-qty-modal__btn:focus .zrc-qty-modal__btn-sub{ color:#0f172a !important; }
.zrc-qty-modal__btn.is-active{
  border-color:#3B6FE0; background:#EAF2FF; color:#0f172a !important;
  box-shadow:0 4px 12px rgba(59,111,224,.18);
}
.zrc-qty-modal__btn.is-active .zrc-qty-modal__btn-num,
.zrc-qty-modal__btn.is-active .zrc-qty-modal__btn-sub{ color:#0f172a !important; }
.zrc-qty-modal__btn-num{ font-size:24px; font-weight:800; line-height:1; }
.zrc-qty-modal__btn-sub{ font-size:11px; opacity:.7; }
.zrc-qty-modal__btn.is-active .zrc-qty-modal__btn-sub{ opacity:.9; }
.zrc-qty-modal-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.45);
  z-index:100000; backdrop-filter:blur(2px);
}
@media (max-width:480px){
  .zrc-qty-modal{ padding:20px 16px 16px; }
  .zrc-qty-modal__head{ font-size:15px; }
}
/* [v1.13.43.3] Multiplicateur qty affiché à côté des noms d'items */
.zrc-side-qty-mul,
.zrc-recap-qty-mul{
  display:inline-block; margin-left:6px; padding:1px 6px;
  font-size:11px; font-weight:700; line-height:1.4;
  color:#3B6FE0; background:#EAF2FF; border-radius:6px;
  vertical-align:middle;
}
/* [v1.13.46.0] Variante nominative (libellés d'unités) */
.zrc-side-qty-names,
.zrc-recap-qty-names{
  display:inline; margin-left:4px;
  font-size:12px; font-weight:600; color:#64748b;
}

/* ==================================================================
   [v1.13.44] Quantité par service — puce ×N + sous-titre modale
   ================================================================== */
.zrc-service{ position:relative; }
.zrc-service-qty-chip{
  position:absolute; top:8px; right:8px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  background:#0F172A; color:#fff; font-weight:700; font-size:12px;
  padding:4px 8px; border-radius:999px;
  box-shadow:0 2px 8px rgba(15,23,42,.25);
  pointer-events:none;
}
.zrc-service-qty-chip .zrc-service-qty-edit{
  margin-left:2px; font-size:11px; opacity:.85; pointer-events:auto; cursor:pointer;
}
.zrc-qty-modal__svc{
  margin-top:4px; font-size:13px; font-weight:600; color:#64748b;
}

/* ============================================================
 * [v1.13.45.0] Uniformisation visuelle des modales — fond blanc /
 * texte noir (aligné sur le modal Quantité). Override des thèmes
 * sombres antérieurs des modales "i" (info) et "sous-options".
 * ============================================================ */
/* --- Modale "i" (info popup) --- */
.zrc-info-modal__panel{
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 20px 60px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.06) !important;
}
.zrc-info-modal__close{ color:#64748b !important; }
.zrc-info-modal__close:hover{ background:#f1f5f9 !important; color:#0f172a !important; }
.zrc-info-modal__title{ color:#0f172a !important; }
.zrc-info-modal__media{ background:#f1f5f9 !important; }
.zrc-info-modal__section h4{ color:#3B6FE0 !important; }
.zrc-info-modal__section p,
.zrc-info-modal__section ul,
.zrc-info-modal__section li{ color:#334155 !important; }
/* [v1.13.47.0] Force la lisibilité du contenu HTML riche sur fond blanc */
.zrc-info-modal__panel .zrc-info-modal__rich,
.zrc-info-modal__panel .zrc-info-modal__rich p,
.zrc-info-modal__panel .zrc-info-modal__rich li,
.zrc-info-modal__panel .zrc-info-modal__rich span{ color:#334155 !important; }
.zrc-info-modal__panel .zrc-info-modal__rich h1,
.zrc-info-modal__panel .zrc-info-modal__rich h2,
.zrc-info-modal__panel .zrc-info-modal__rich h3,
.zrc-info-modal__panel .zrc-info-modal__rich h4,
.zrc-info-modal__panel .zrc-info-modal__rich h5,
.zrc-info-modal__panel .zrc-info-modal__rich h6,
.zrc-info-modal__panel .zrc-info-modal__rich strong,
.zrc-info-modal__panel .zrc-info-modal__rich b{ color:#0f172a !important; }
.zrc-info-modal__panel .zrc-info-modal__rich a{ color:#3B6FE0 !important; }
.zrc-info-modal__panel .zrc-info-modal__rich blockquote{ background:#f1f5f9 !important; border-left-color:#3B6FE0 !important; color:#334155 !important; }
.zrc-info-modal__panel .zrc-info-modal__rich code{ background:#f1f5f9 !important; color:#0f172a !important; }
.zrc-info-modal__panel .zrc-info-modal__rich hr{ border-top-color:rgba(15,23,42,.12) !important; }
.zrc-info-modal__footer{ border-top:1px solid rgba(15,23,42,.08) !important; }
.zrc-info-modal__price{ color:#0f172a !important; }
.zrc-info-modal__cta{ background:#3B6FE0 !important; color:#fff !important; }

/* --- Modale "sous-options" (Palettes, Stick Drift Gauche/Droite, etc.) --- */
.zrc-card-subopts{
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 20px 60px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.06) !important;
}
.zrc-card-subopts__head{ color:#64748b !important; }
.zrc-card-subopts__head strong{ color:#0f172a !important; }
.zrc-card-subopt-label{ color:#334155 !important; }
.zrc-card-subopt-btn{
  background:#fff !important;
  color:#0f172a !important;
  border:2px solid #e2e8f0 !important;
}
.zrc-card-subopt-btn:hover{
  border-color:#3B6FE0 !important;
  background:#F0F6FF !important;
  color:#0f172a !important;
}
.zrc-card-subopt-btn.is-active{
  border-color:#3B6FE0 !important;
  background:#EAF2FF !important;
  color:#0f172a !important;
  box-shadow:0 4px 12px rgba(59,111,224,.18) !important;
}
.zrc-card-subopt-btn.is-active::after{ color:#3B6FE0 !important; }
.zrc-card-subopt-btn.has-icon .zrc-card-subopt-btn-txt{ color:#0f172a !important; }
.zrc-card-subopts__close{ color:#64748b !important; }
.zrc-card-subopts__close:hover{ background:#f1f5f9 !important; color:#0f172a !important; }
.zrc-card-subopt-row.is-error .zrc-card-subopt-btns{ outline-color:#ef4444 !important; }
.zrc-card-subopt-row.is-error .zrc-card-subopt-label{ color:#dc2626 !important; }

/* Résumé sur la carte (puce sélectionnée) reste sur fond sombre de la carte :
   contraste bleu -> on garde le style existant, mais on renforce la lisibilité. */

/* ============================================================
 * [v1.13.45.0] Bandeau info dans l'étape Pannes lorsque
 * model_qty >= 2 (mise en garde "pannes différentes = 2 commandes").
 * ============================================================ */
.zrc-qty-banner{
  display:flex; align-items:flex-start; gap:12px;
  margin:0 0 16px;
  padding:14px 16px;
  border-radius:12px;
  background:#FFF7ED;
  border:1px solid #FED7AA;
  color:#7C2D12;
}
.zrc-qty-banner__ico{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:#FDBA74; color:#7C2D12;
}
.zrc-qty-banner__body{ flex:1 1 auto; min-width:0; font-size:.9rem; line-height:1.4; }
.zrc-qty-banner__title{ font-weight:700; margin-bottom:2px; color:#7C2D12; }
.zrc-qty-banner__text{ color:#9A3412; }
.zrc-qty-banner__text strong{ color:#7C2D12; }
@media (max-width:520px){
  .zrc-qty-banner{ padding:12px 14px; gap:10px; }
  .zrc-qty-banner__ico{ width:28px; height:28px; }
}

/* [v1.13.48] Carte "redirection" (ex: « Autre » → contact) */
.zrc-card[data-redirect-url]{ position:relative; }
.zrc-card[data-redirect-url] .zrc-price,
.zrc-card[data-redirect-url] .zrc-card-price{ display:none !important; }
.zrc-card[data-redirect-url]::after{
  content:"↗";
  position:absolute; top:8px; right:10px;
  font-size:16px; font-weight:700; color:#3B6FE0;
  opacity:.85;
}

/* [v1.13.48.13] Logo transporteur dans les cartes de mode d'envoi */
.zrc-ship-mode .zrc-ship-mode-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:36px;
  flex:0 0 52px;
  background:#fff;
  border-radius:6px;
  padding:2px 4px;
  margin-right:8px;
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.zrc-ship-mode .zrc-ship-mode-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.zrc-ship-mode.has-logo{ align-items:center; }
@media (max-width:480px){
  .zrc-ship-mode .zrc-ship-mode-logo{ width:44px;height:30px;flex-basis:44px; }
}

/* [v1.13.48.40] Prix affiché sur les boutons de sous-options */
.zrc-card-subopt-btn-price{
  display:block;margin-top:2px;font-size:11px;font-weight:700;
  color:var(--zrc-accent,#22c55e);line-height:1.2;
}
.zrc-card-subopt-btn.is-active .zrc-card-subopt-btn-price{color:inherit}