/* ============================================================
   CONFIGURATEUR ALLIANCE v56 — BERMO PRODUCT STUDIO
   ------------------------------------------------------------
   Principe : un configurateur, pas une affiche.
   - l'alliance reste entière, grande et manipulable ;
   - aucune grande zone vide autour d'un petit viewport ;
   - les choix restent visibles dans un panneau dense ;
   - le prix accompagne le parcours sans masquer les options ;
   - tablette/mobile ont leur propre composition.
   ============================================================ */

#ca-configurator-wrap.ca-v56 {
  --ca56-navy: #001a3b;
  --ca56-navy-2: #002756;
  --ca56-ivory: #f4f0e8;
  --ca56-paper: #fbfaf7;
  --ca56-studio: #f2efe8;
  --ca56-gold: #c8a966;
  --ca56-gold-hi: #e4cf9d;
  --ca56-ink: #111318;
  --ca56-muted: #777267;
  --ca56-line: rgba(0,26,59,.10);
  --ca56-line-gold: rgba(200,169,102,.28);
  --ca56-ease: cubic-bezier(.22,.8,.26,.99);

  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: clip;
  border: 1px solid var(--ca56-line-gold);
  border-radius: 18px;
  background: var(--ca56-paper);
  color: var(--ca56-ink);
  box-shadow: 0 24px 70px rgba(0,26,59,.12);
  isolation: isolate;
}

/* La page BERMO porte déjà le H1. Ici, l'en-tête n'est qu'une barre d'outils. */
#ca-configurator-wrap.ca-v56 .ca-header {
  position: absolute;
  z-index: 30;
  top: 16px;
  right: 18px;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}
#ca-configurator-wrap.ca-v56 .ca-header-left { display: none; }
#ca-configurator-wrap.ca-v56 .ca-header-right {
  display: flex;
  gap: 7px;
  pointer-events: auto;
}
#ca-configurator-wrap.ca-v56 .ca-btn-icon {
  min-height: 34px;
  padding: 6px 10px;
  gap: 5px;
  border: 1px solid rgba(0,26,59,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #6e695f;
  box-shadow: 0 5px 18px rgba(0,26,59,.055);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 9px;
  letter-spacing: .015em;
  transition: transform .2s var(--ca56-ease), border-color .2s var(--ca56-ease), color .2s var(--ca56-ease);
}
#ca-configurator-wrap.ca-v56 .ca-btn-icon:hover,
#ca-configurator-wrap.ca-v56 .ca-btn-icon:focus-visible {
  transform: translateY(-1px);
  border-color: var(--ca56-gold);
  color: var(--ca56-navy);
}

/* ---------- DESKTOP : STUDIO + CONSOLE ---------- */
#ca-configurator-wrap.ca-v56 .ca-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(500px, 29vw, 580px);
  height: clamp(620px, 68svh, 730px);
  min-height: 0;
  align-items: stretch;
  background: var(--ca56-studio);
}

#ca-configurator-wrap.ca-v56 .ca-viewer-col {
  position: relative !important;
  top: auto !important;
  align-self: stretch !important;
  display: block;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 72% 72% at 48% 45%, rgba(255,255,255,.98) 0%, rgba(250,248,243,.98) 48%, rgba(237,232,222,.98) 100%);
}
#ca-configurator-wrap.ca-v56 .ca-viewer-col::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 25%, transparent 76%, rgba(0,26,59,.025)),
    linear-gradient(90deg, rgba(0,26,59,.025), transparent 18%, transparent 82%, rgba(0,26,59,.025));
}

/* Le vrai viewport occupe le studio, avec juste la marge nécessaire à un écrin. */
#ca-configurator-wrap.ca-v56 #ca-canvas-wrap,
#ca-configurator-wrap.ca-v56.bermo-ca-enhanced #ca-canvas-wrap.bermo-ca-viewport {
  position: absolute !important;
  inset: 16px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  border: 1px solid rgba(200,169,102,.14) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(ellipse 64% 72% at 50% 43%, #fff 0%, #fbf9f4 53%, #eee9df 100%) !important;
  box-shadow:
    inset 0 -70px 120px rgba(0,26,59,.025),
    0 18px 55px rgba(0,26,59,.045) !important;
  z-index: 0;
}
#ca-configurator-wrap.ca-v56 #ca-canvas,
#ca-configurator-wrap.ca-v56.bermo-ca-enhanced #ca-canvas.bermo-ca-visual {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  background: transparent !important;
  touch-action: none;
}

/* Les modes font partie du viewer, pas du flux vertical. */
#ca-configurator-wrap.ca-v56 .ca-pair-bar {
  position: absolute;
  z-index: 8;
  top: 28px;
  left: 30px;
  width: auto;
  max-width: calc(100% - 110px);
  margin: 0;
  align-items: flex-start;
  gap: 8px;
}
#ca-configurator-wrap.ca-v56 .ca-pair-mode {
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(0,26,59,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 24px rgba(0,26,59,.07);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
#ca-configurator-wrap.ca-v56 .ca-pair-mode-btn {
  min-height: 30px;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #746e64;
  font-size: 9px;
  letter-spacing: .12em;
}
#ca-configurator-wrap.ca-v56 .ca-pair-mode-btn.active {
  background: var(--ca56-navy);
  color: var(--ca56-ivory);
  box-shadow: none;
}
#ca-configurator-wrap.ca-v56 .ca-pair-select {
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(0,26,59,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 8px 24px rgba(0,26,59,.07);
}
#ca-configurator-wrap.ca-v56 .ca-pair-tools {
  position: absolute;
  z-index: 8;
  top: 82px;
  left: 30px;
  width: min(560px, calc(100% - 60px));
  margin: 0;
  padding: 8px 11px;
  border: 1px solid rgba(0,26,59,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 8px 24px rgba(0,26,59,.06);
}
#ca-configurator-wrap.ca-v56 .ca-viewer-actions {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  margin: 0;
}
#ca-configurator-wrap.ca-v56 .ca-viewer-hints {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 70px);
  justify-content: center;
  gap: 16px;
  color: #777166;
  font-size: 9px;
  opacity: .78;
}
#ca-configurator-wrap.ca-v56 .ca-warnings {
  position: absolute;
  z-index: 10;
  left: 30px;
  bottom: 28px;
  width: min(420px, calc(100% - 60px));
}
#ca-configurator-wrap.ca-v56 .ca-fs-btn {
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0,26,59,.10);
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  color: var(--ca56-navy);
  box-shadow: 0 8px 22px rgba(0,26,59,.07);
}

/* ---------- CONSOLE DE CONFIGURATION ---------- */
#ca-configurator-wrap.ca-v56 .ca-panel,
#ca-configurator-wrap.ca-v56.bermo-ca-enhanced .ca-panel.bermo-ca-controls {
  position: relative !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: 100% !important;
  padding: 62px 18px 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  border-left: 1px solid var(--ca56-line);
  background: var(--ca56-paper);
}
#ca-configurator-wrap.ca-v56 .ca-panel::-webkit-scrollbar { width: 6px; }
#ca-configurator-wrap.ca-v56 .ca-panel::-webkit-scrollbar-thumb { background: rgba(0,26,59,.14); border-radius: 10px; }
#ca-configurator-wrap.ca-v56 .ca-section {
  gap: 8px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(0,26,59,.065);
}
#ca-configurator-wrap.ca-v56 .ca-section-title,
#ca-configurator-wrap.ca-v56 .ca-panel .ca-section-title {
  width: 100%;
  padding: 0;
  border: 0;
  color: #716b61;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .17em;
}
#ca-configurator-wrap.ca-v56 .ca-step-n {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border: 1px solid rgba(0,26,59,.34);
  background: transparent;
  color: var(--ca56-navy);
  font-size: 9px;
}
#ca-configurator-wrap.ca-v56 .ca-help-btn {
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border-color: rgba(0,26,59,.16);
  color: #746e64;
}

#ca-configurator-wrap.ca-v56 .ca-model-btns { gap: 6px; }
#ca-configurator-wrap.ca-v56 .ca-model-btn,
#ca-configurator-wrap.ca-v56 .ca-interior-btn {
  min-height: 44px;
  padding: 5px 6px;
  border: 1px solid rgba(0,26,59,.10);
  border-radius: 8px;
  background: #fff;
  color: #7b756a;
  box-shadow: none;
  font-size: 9px;
  transition: transform .2s var(--ca56-ease), border-color .2s var(--ca56-ease), color .2s var(--ca56-ease), background .2s var(--ca56-ease);
}
#ca-configurator-wrap.ca-v56 .ca-model-btn:hover,
#ca-configurator-wrap.ca-v56 .ca-interior-btn:hover { transform: translateY(-1px); border-color: rgba(200,169,102,.72); }
#ca-configurator-wrap.ca-v56 .ca-model-btn.active,
#ca-configurator-wrap.ca-v56 .ca-interior-btn.active {
  border-color: var(--ca56-navy);
  background: #f7f4ed;
  color: var(--ca56-navy);
}
#ca-configurator-wrap.ca-v56 .ca-model-btn svg { width: 46px; height: 16px; }
#ca-configurator-wrap.ca-v56 .ca-interior-btn svg { width: 46px; height: 14px; }

#ca-configurator-wrap.ca-v56 .ca-metal-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 4px 6px;
}
#ca-configurator-wrap.ca-v56 .ca-metal-btn {
  min-width: 0;
  padding: 3px 2px 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 7.5px;
  line-height: 1.05;
}
#ca-configurator-wrap.ca-v56 .ca-metal-btn .ca-swatch,
#ca-configurator-wrap.ca-v56 .ca-swatch { width: 28px; height: 28px; }
#ca-configurator-wrap.ca-v56 .ca-metal-btn.active { border-color: var(--ca56-gold); background: rgba(200,169,102,.055); }
#ca-configurator-wrap.ca-v56 .ca-metal-btn.active .ca-swatch { outline-color: var(--ca56-gold); }

#ca-configurator-wrap.ca-v56 .ca-row-2 { gap: 12px; }
#ca-configurator-wrap.ca-v56 .ca-sub-section { gap: 6px; }
#ca-configurator-wrap.ca-v56 .ca-slider-wrap { gap: 4px; }
#ca-configurator-wrap.ca-v56 .ca-slider { height: 2px; }
#ca-configurator-wrap.ca-v56 .ca-slider::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  background: var(--ca56-navy);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--ca56-gold), 0 3px 7px rgba(0,26,59,.20);
}
#ca-configurator-wrap.ca-v56 .ca-slider-ticks { font-size: 7.5px; }
#ca-configurator-wrap.ca-v56 .ca-value { font-size: 10px; }
#ca-configurator-wrap.ca-v56 .ca-finish-btns { gap: 5px; }
#ca-configurator-wrap.ca-v56 .ca-finish-btn { border-radius: 7px; }
#ca-configurator-wrap.ca-v56 .ca-finish-preview { height: 24px; }

/* Résumé : compact, lisible, pas un gros bandeau qui cache les réglages. */
#ca-configurator-wrap.ca-v56 .ca-panel-summary {
  position: sticky;
  z-index: 15;
  bottom: 0;
  margin: 2px -18px 0;
  padding: 11px 18px 12px;
  border-top: 1px solid rgba(200,169,102,.28);
  background: rgba(0,26,59,.97);
  color: var(--ca56-ivory);
  box-shadow: 0 -10px 28px rgba(0,26,59,.10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
#ca-configurator-wrap.ca-v56 .ca-panel-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
#ca-configurator-wrap.ca-v56 .ca-panel-summary__eyebrow { color: var(--ca56-gold); font-size: 7px; letter-spacing: .20em; }
#ca-configurator-wrap.ca-v56 .ca-panel-summary__title { color: var(--ca56-ivory); font: 500 15px/1.1 "Cormorant Garamond", Georgia, serif; }
#ca-configurator-wrap.ca-v56 .ca-panel-summary__live { color: rgba(244,240,232,.55); font-size: 7px; letter-spacing: .12em; }
#ca-configurator-wrap.ca-v56 .ca-panel-summary__live i { width: 5px; height: 5px; background: var(--ca56-gold-hi); }
#ca-configurator-wrap.ca-v56 .ca-panel-summary .ca-pricing { width: 100%; gap: 10px; justify-content: flex-end; }
#ca-configurator-wrap.ca-v56 .ca-panel-summary .ca-pricing-simple { justify-content: space-between; }
#ca-configurator-wrap.ca-v56 .ca-panel-summary .ca-price-label { color: rgba(244,240,232,.50); font-size: 6.5px; letter-spacing: .13em; }
#ca-configurator-wrap.ca-v56 .ca-panel-summary .ca-price-val { color: var(--ca56-ivory); font-size: 11px; }
#ca-configurator-wrap.ca-v56 .ca-panel-summary .ca-total-val,
#ca-configurator-wrap.ca-v56 .ca-panel-summary .ca-pricing-simple .ca-total-val { color: var(--ca56-gold-hi); font: 500 25px/1 "Cormorant Garamond", Georgia, serif; }
#ca-configurator-wrap.ca-v56 .ca-panel-summary .ca-price-notes,
#ca-configurator-wrap.ca-v56 .ca-panel-summary .ca-footer-badges { margin-top: 5px; gap: 8px; color: rgba(244,240,232,.42); font-size: 7px; }

#ca-configurator-wrap.ca-v56 .ca-save-row,
#ca-configurator-wrap.ca-v56 .ca-adv-panel { border-top: 1px solid var(--ca56-line); background: #fff; }

/* Le thème v0.3.1 ne doit plus re-dimensionner le moteur interne. */
@media (min-width: 1180px) {
  #ca-configurator-wrap.ca-v56.bermo-ca-enhanced .bermo-ca-layout {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) clamp(500px,29vw,580px) !important;
    height: clamp(620px,68svh,730px) !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }
  #ca-configurator-wrap.ca-v56.bermo-ca-enhanced .bermo-ca-preview-column { min-width: 0 !important; min-height: 0 !important; height: 100% !important; padding: 0 !important; }
  #ca-configurator-wrap.ca-v56.bermo-ca-enhanced .bermo-ca-controls { height: 100% !important; max-height: 100% !important; overflow-y: auto !important; }
  #ca-configurator-wrap.ca-v56.bermo-ca-enhanced .bermo-ca-toolbar { min-height: 0 !important; padding: 0 !important; }
}

/* ---------- TABLETTE ---------- */
@media (max-width: 1179px) and (min-width: 901px) {
  #ca-configurator-wrap.ca-v56 .ca-main,
  #ca-configurator-wrap.ca-v56.bermo-ca-enhanced .bermo-ca-layout {
    grid-template-columns: minmax(0,1fr) 440px !important;
    height: 660px !important;
    min-height: 0 !important;
  }
  #ca-configurator-wrap.ca-v56 .ca-panel { padding-left: 16px !important; padding-right: 16px !important; }
  #ca-configurator-wrap.ca-v56 .ca-panel-summary { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* ---------- MOBILE / PETITE TABLETTE ---------- */
@media (max-width: 900px) {
  #ca-configurator-wrap.ca-v56 { border-radius: 14px; overflow: visible; }
  #ca-configurator-wrap.ca-v56 .ca-header {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    justify-content: flex-end;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ca56-line);
    background: var(--ca56-paper);
  }
  #ca-configurator-wrap.ca-v56 .ca-btn-icon { min-height: 32px; padding: 6px 8px; font-size: 0; }
  #ca-configurator-wrap.ca-v56 .ca-btn-icon svg { margin: 0; }

  #ca-configurator-wrap.ca-v56 .ca-main,
  #ca-configurator-wrap.ca-v56.bermo-ca-enhanced .bermo-ca-layout {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #ca-configurator-wrap.ca-v56 .ca-viewer-col,
  #ca-configurator-wrap.ca-v56.bermo-ca-enhanced .bermo-ca-preview-column {
    position: sticky !important;
    z-index: 20;
    top: 0 !important;
    height: clamp(340px, 43svh, 470px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--ca56-line-gold);
  }
  #ca-configurator-wrap.ca-v56 #ca-canvas-wrap,
  #ca-configurator-wrap.ca-v56.bermo-ca-enhanced #ca-canvas-wrap.bermo-ca-viewport { inset: 10px !important; border-radius: 11px !important; }
  #ca-configurator-wrap.ca-v56 .ca-pair-bar { top: 20px; left: 20px; }
  #ca-configurator-wrap.ca-v56 .ca-pair-tools { top: 68px; left: 20px; width: calc(100% - 40px); }
  #ca-configurator-wrap.ca-v56 .ca-viewer-hints { bottom: 13px; max-width: calc(100% - 40px); gap: 10px; font-size: 8px; }
  #ca-configurator-wrap.ca-v56 .ca-viewer-actions { bottom: 35px; }
  #ca-configurator-wrap.ca-v56 .ca-panel,
  #ca-configurator-wrap.ca-v56.bermo-ca-enhanced .ca-panel.bermo-ca-controls {
    height: auto !important;
    max-height: none !important;
    padding: 16px 14px 0 !important;
    overflow: visible !important;
    border-left: 0;
  }
  #ca-configurator-wrap.ca-v56 .ca-panel-summary { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 620px) {
  #ca-configurator-wrap.ca-v56 .ca-viewer-col,
  #ca-configurator-wrap.ca-v56.bermo-ca-enhanced .bermo-ca-preview-column { height: clamp(310px, 40svh, 400px) !important; }
  #ca-configurator-wrap.ca-v56 .ca-pair-mode-btn { padding: 6px 10px; font-size: 8px; }
  #ca-configurator-wrap.ca-v56 .ca-viewer-hints span:last-child { display: none; }
  #ca-configurator-wrap.ca-v56 .ca-metal-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #ca-configurator-wrap.ca-v56 .ca-row-2 { gap: 10px; }
}

/* Plein écran boutique : studio maximal mais cadrage identique. */
#ca-configurator-wrap.ca-v56:fullscreen {
  width: 100vw;
  height: 100vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ca56-paper);
}
#ca-configurator-wrap.ca-v56:fullscreen .ca-main { height: 100vh; max-width: none; }