/* =============================================================
   Glassora — refonte complète du configurateur (skin éditorial clair)
   Chargé APRÈS glass-configurator.css + bg-glass-workflow.css.
   Aucune trace de Beaune Gravure : navy / or / off-white,
   Cormorant Garamond · Manrope · Inter, hairlines, subtil.
   ============================================================= */

/* ---- 1. Variables : bascule en thème clair ---- */
.bg-configurator{
  --bg-config-ink:#111827 !important;
  --bg-config-muted:#5F6470 !important;
  --bg-config-line:#ECEBE7 !important;
  --bg-config-panel:#ffffff !important;
  --bg-config-field:#FAFAF8 !important;
}
.bg-workflow{
  --wf-ink:#111827 !important;
  --wf-muted:#5F6470 !important;
  --wf-line:#ECEBE7 !important;
  --wf-panel:#ffffff !important;
  --wf-field:#FAFAF8 !important;
  --wf-accent:#111827 !important;
  --wf-radius:20px !important;
  --wf-radius-sm:14px !important;
}

/* ---- 2. Fond global clair + typographie de marque ---- */
.bg-configurator,
.bg-workflow,
.bg-configurator-hero{
  background:transparent !important;
  color:#111827 !important;
  font-family:'Inter',sans-serif !important;
}
body.page-template-page-personnaliser,
.glassora-configurator-page{ background:#FAFAF8 !important; }

.bg-configurator *,
.bg-workflow *{ text-shadow:none !important; }

/* ---- 3. Hero ---- */
body:has([data-bg-glass-configurator]) .nav-cta,
body:has([data-bg-glass-configurator]) .mm-cta{ display:none !important; }
.bg-configurator-hero{
  padding:clamp(120px,15vh,180px) 0 clamp(20px,4vh,40px) !important;
  text-align:center !important;
}
.bg-configurator-hero__shell{
  max-width:760px !important;
  margin-inline:auto !important;
  padding-inline:24px !important;
  display:grid !important;
  justify-items:center !important;
  text-align:center !important;
}
.bg-configurator-hero__eyebrow,
.bg-workflow__eyebrow,
.bg-configurator__eyebrow{
  color:#C8A96A !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  font-size:12px !important;
  letter-spacing:.28em !important;
  text-transform:uppercase !important;
}
.bg-configurator-hero__title{
  font-family:'Cormorant Garamond',serif !important;
  font-weight:500 !important;
  color:#111827 !important;
  font-size:clamp(38px,5.5vw,76px) !important;
  line-height:1.02 !important;
  letter-spacing:-.015em !important;
  text-transform:none !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
.bg-configurator-hero__lead{
  color:#5F6470 !important;
  font-size:17px !important;
  max-width:560px !important;
  margin-left:auto !important; margin-right:auto !important;
}

/* ---- 4. Panneaux ---- */
.bg-configurator__panel{
  background:#ffffff !important;
  border:1px solid #ECEBE7 !important;
  border-radius:20px !important;
  box-shadow:0 10px 30px rgba(17,24,39,.06) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.bg-configurator__panel h2,
.bg-configurator__panel h3,
.bg-configurator__group h3,
.bg-configurator__intro h2{
  font-family:'Cormorant Garamond',serif !important;
  font-weight:500 !important;
  color:#111827 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
}
.bg-configurator__group h3{ font-size:24px !important; }
.bg-configurator__intro h2{ font-size:28px !important; }
.bg-configurator__technique,
.bg-configurator__hint,
.bg-configurator__spec{ color:#5F6470 !important; font-family:'Inter',sans-serif !important; }
.bg-configurator__field-label,
.bg-configurator label > span,
.bg-configurator__qty label,
.bg-configurator__glass-row label{
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important; color:#111827 !important;
  letter-spacing:.02em !important;
}

/* ---- 5. Scène & aperçu : surface claire ---- */
.bg-configurator__stage{ background:transparent !important; }
.bg-configurator__preview{
  background:radial-gradient(70% 60% at 50% 42%,#ffffff,#F1EEE6) !important;
  border:1px solid #ECEBE7 !important;
  border-radius:24px !important;
  box-shadow:0 10px 30px rgba(17,24,39,.05) !important;
}
.bg-configurator__canvas{ background:transparent !important; }

/* ---- 6. Boutons : barre de vues (pills) ---- */
.bg-configurator__toolbar{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.bg-configurator__view{
  border:1px solid #ECEBE7 !important;
  background:#ffffff !important;
  color:#111827 !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  border-radius:999px !important;
  box-shadow:none !important;
}
.bg-configurator__view:hover{ border-color:#C8A96A !important; color:#7a6224 !important; }
.bg-configurator__view.is-active{
  background:#111827 !important;
  border-color:#111827 !important;
  color:#ffffff !important;
}

/* ---- 7. Boutons : outils ---- */
.bg-configurator__tool{
  border:1px solid #ECEBE7 !important;
  background:#ffffff !important;
  color:#111827 !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  border-radius:12px !important;
}
.bg-configurator__tool:hover,
.bg-configurator__tool:focus-visible{
  border-color:#C8A96A !important;
  background:#FAF7EF !important;
  color:#7a6224 !important;
}
.bg-configurator__tool.bg-configurator__tool--zoom{
  border-color:transparent !important;
  color:#0B1220 !important;
  background:linear-gradient(120deg,#C8A96A,#E6D4A3) !important;
  box-shadow:0 10px 24px rgba(200,169,106,.22) !important;
}
.bg-configurator__tool.bg-configurator__tool--zoom:hover{
  background:linear-gradient(120deg,#d4b878,#efe0b4) !important;
  color:#0B1220 !important;
}
.bg-configurator__tool--reset:hover{ border-color:#d8595b !important; background:#fbeeee !important; color:#9c2131 !important; }

/* ---- 8. Champs : selects, inputs, number ---- */
.bg-configurator__select,
.bg-configurator select,
.bg-configurator input[type="text"],
.bg-configurator input[type="number"],
.bg-configurator input[type="email"]{
  background:#ffffff !important;
  border:1px solid #ECEBE7 !important;
  border-radius:12px !important;
  color:#111827 !important;
  font-family:'Inter',sans-serif !important;
}
.bg-configurator input:focus,
.bg-configurator select:focus{
  outline:none !important;
  border-color:#C8A96A !important;
  box-shadow:0 0 0 3px rgba(200,169,106,.18) !important;
}
.bg-configurator__select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F6470' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-color:#ffffff !important;
  color:#111827 !important;
}

@media (min-width:721px){
  .bg-configurator select,
  .bg-configurator__select{
    appearance:none !important;
    -webkit-appearance:none !important;
    background-color:#ffffff !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F6470' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 14px center !important;
    border:1px solid #ECEBE7 !important;
    border-radius:12px !important;
    color:#111827 !important;
  }
  .bg-configurator select:hover,
  .bg-configurator select:focus,
  .bg-configurator select:focus-visible,
  .bg-configurator__select:hover,
  .bg-configurator__select:focus,
  .bg-configurator__select:focus-visible{
    background-color:#ffffff !important;
    color:#111827 !important;
  }
  .bg-configurator select option,
  .bg-configurator__select option{
    background:#ffffff !important;
    color:#111827 !important;
  }}

/* ---- 9. Upload logo/fichier ---- */
.bg-configurator__upload{
  background:#FAFAF8 !important;
  border:1px dashed #d8d5cc !important;
  border-radius:16px !important;
  color:#5F6470 !important;
}
.bg-configurator__upload:hover{ border-color:#C8A96A !important; color:#111827 !important; }

/* ---- 10. Éditeur de lignes (texte) ---- */
.bg-configurator__line-panel{
  background:#FAFAF8 !important;
  border:1px solid #ECEBE7 !important;
  border-radius:14px !important;
  position:relative !important;
  overflow:visible !important;
}
.bg-configurator__line-panel.has-open-font-picker{
  z-index:90 !important;
}
.bg-configurator__text-lines,
.bg-configurator__line-controls,
.bg-configurator__line-grid{
  overflow:visible !important;
}
.bg-configurator__line-panel summary{ color:#111827 !important; font-family:'Manrope',sans-serif !important; font-weight:600 !important; }
.bg-configurator__line-panel summary strong{ color:#5F6470 !important; font-weight:500 !important; }
.bg-configurator__format-buttons button{
  border:1px solid #ECEBE7 !important; background:#fff !important; color:#111827 !important; border-radius:10px !important;
  font-family:'Manrope',sans-serif !important;
}
.bg-configurator__format-buttons button[aria-pressed="true"]{ background:#111827 !important; color:#fff !important; border-color:#111827 !important; }
.bg-configurator__native-font-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.bg-configurator__font-picker{
  position:relative !important;
  z-index:20 !important;
}
.bg-configurator__font-picker-button{
  position:relative !important;
  width:100% !important;
  min-height:42px !important;
  padding:0 36px 0 13px !important;
  border:1px solid #ECEBE7 !important;
  border-radius:12px !important;
  background:#ffffff !important;
  color:#111827 !important;
  text-align:left !important;
  font-size:14px !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.bg-configurator__font-picker-button::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.5px solid #5F6470;
  border-bottom:1.5px solid #5F6470;
  transform:translateY(-65%) rotate(45deg);
}
.bg-configurator__font-picker.is-open .bg-configurator__font-picker-button{
  border-color:#C8A96A !important;
  box-shadow:0 0 0 3px rgba(200,169,106,.16) !important;
}
.bg-configurator__font-picker-menu{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  left:0 !important;
  right:0 !important;
  z-index:80 !important;
  display:none !important;
  max-height:280px !important;
  overflow:auto !important;
  padding:8px !important;
  border:1px solid #ECEBE7 !important;
  border-radius:14px !important;
  background:#ffffff !important;
  box-shadow:0 18px 46px rgba(17,24,39,.16) !important;
}
.bg-configurator__font-picker.is-open .bg-configurator__font-picker-menu{
  display:grid !important;
}
.bg-configurator__font-picker-group{
  padding:9px 9px 5px !important;
  color:#8a6d2b !important;
  font-family:'Manrope',sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
.bg-configurator__font-picker-option{
  width:100% !important;
  min-height:36px !important;
  padding:0 10px !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  color:#111827 !important;
  text-align:left !important;
  font-size:16px !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.bg-configurator__font-picker-option:hover,
.bg-configurator__font-picker-option:focus-visible{
  background:#FAF7EF !important;
  color:#7a6224 !important;
  outline:0 !important;
}
.bg-configurator__font-picker-option.is-active{
  background:#111827 !important;
  color:#ffffff !important;
}

/* ---- 11. Boutons d'action (CTA) ---- */
.bg-configurator__bat-button,
.bg-configurator__mobile-bat-button,
[data-bg-mobile-download-pdf]{
  background:#111827 !important;
  color:#ffffff !important;
  border:1px solid #111827 !important;
  border-radius:14px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  box-shadow:none !important;
}
.bg-configurator__bat-button:hover,
.bg-configurator__mobile-bat-button:hover,
[data-bg-mobile-download-pdf]:hover{ background:#0B1220 !important; transform:translateY(-2px); box-shadow:0 14px 30px rgba(17,24,39,.2) !important; }
.bg-configurator__glass-preview-button,
.bg-configurator__equal-size,
.bg-configurator__select-all,
.bg-configurator__sheet-validate{
  background:transparent !important;
  color:#111827 !important;
  border:1px solid #111827 !important;
  border-radius:14px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  text-transform:none !important;
}
.bg-configurator__glass-preview-button:hover,
.bg-configurator__equal-size:hover,
.bg-configurator__select-all:hover,
.bg-configurator__sheet-validate:hover{ border-color:#C8A96A !important; color:#7a6224 !important; }

/* ---- 12. Steppers / quick-adjust / métriques ---- */
.bg-configurator__stepper,
.bg-configurator__quick-adjust{ background:#FAFAF8 !important; border:1px solid #ECEBE7 !important; border-radius:14px !important; }
.bg-configurator__stepper-btn,
.bg-configurator__quick-adjust-btn{ background:#fff !important; border:1px solid #ECEBE7 !important; color:#111827 !important; border-radius:10px !important; }
.bg-configurator__stepper-btn:hover,
.bg-configurator__quick-adjust-btn:hover{ border-color:#C8A96A !important; color:#7a6224 !important; }
.bg-configurator__metrics{ color:#111827 !important; font-family:'Manrope',sans-serif !important; font-weight:600 !important; }

/* ---- 13. Validation / résumé ---- */
.bg-configurator__summary{ background:#FAFAF8 !important; border:1px solid #ECEBE7 !important; border-radius:14px !important; color:#111827 !important; }

/* ---- 14. Modèles & thèmes (cartes) ---- */
.bg-configurator__model-picker button,
.bg-configurator__theme-list button,
.bg-configurator__tpl-grid button,
.bg-workflow__card,
.bg-workflow__option{
  background:#ffffff !important;
  border:1px solid #ECEBE7 !important;
  border-radius:16px !important;
  color:#111827 !important;
}
.bg-configurator__model-picker button.is-active,
.bg-configurator__theme-list button.is-active,
.bg-configurator__tpl-grid button.is-active,
.bg-workflow__card.is-active,
.bg-workflow__option.is-active,
.bg-workflow [aria-selected="true"]{
  border-color:#C8A96A !important;
  box-shadow:0 0 0 2px rgba(200,169,106,.35) !important;
}

/* ---- 15. Workflow (stepper de sélection) ---- */
.bg-workflow__title,
.bg-workflow h2,
.bg-workflow h3{ font-family:'Cormorant Garamond',serif !important; font-weight:500 !important; color:#111827 !important; text-transform:none !important; }
.bg-workflow__back,
.bg-workflow__breadcrumb a,
.bg-workflow__breadcrumb span{ color:#5F6470 !important; }
.bg-workflow [class*="accent"],
.bg-workflow [style*="8b1020"]{ background:#111827 !important; }

/* ---- 16. Mobile : surfaces claires ---- */
.bg-configurator__mobile-hero-title span{ color:#C8A96A !important; }
.bg-configurator__mobile-hero-title h2{ font-family:'Cormorant Garamond',serif !important; color:#111827 !important; text-shadow:none !important; }
.bg-configurator__mobile-hero-title p{ color:#5F6470 !important; }
.bg-configurator__mobile-control,
.bg-configurator__mobile-bat-bar{
  background:#ffffff !important;
  border-color:#ECEBE7 !important;
  color:#111827 !important;
  box-shadow:0 10px 30px rgba(17,24,39,.06) !important;
}
.bg-configurator__views,
.bg-configurator__tools{ background:rgba(255,255,255,.85) !important; border:1px solid #ECEBE7 !important; box-shadow:0 10px 24px rgba(17,24,39,.08) !important; }

/* ---- 17. Modale aperçu ---- */
.bg-configurator__modal-backdrop{ background:rgba(11,18,32,.55) !important; }
.bg-configurator__modal-dialog{ background:#ffffff !important; border:1px solid #ECEBE7 !important; border-radius:24px !important; }
/* Fermeture de l'apercu : une croix, rien d'autre. Le disque sombre du CSS de
   base (rgba(11,11,13,.72), croix blanche) faisait une pastille lourde posee sur
   la photo du verre.
   SANS `!important` a dessein : le skin est charge apres le CSS de base, il le
   bat donc a specificite egale — tandis que l'atelier mobile, dont la regle est
   plus specifique, garde SON bouton rond blanc, plus sur au doigt. */
.bg-configurator__modal-close{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:transparent;
  border:0;
  border-radius:0;
  color:#5F6470;
  font-size:1.75rem;
  font-weight:300;
  line-height:1;
  transition:color .18s ease;
}
.bg-configurator__modal-close:hover,
.bg-configurator__modal-close:focus-visible{
  color:#111827;
  outline:none;
}

/* ---- 18. Détails fins ---- */
.bg-configurator__collapse{ background:transparent !important; color:#111827 !important; }
.bg-configurator__mobile-edit-lock{ background:#111827 !important; color:#fff !important; border-radius:999px !important; }

/* ---- 19. Badge recto/verso : point or (au lieu du rouge BG) ---- */
.bg-configurator__side-badge{ color:#5F6470 !important; border:1px solid #ECEBE7 !important; background:rgba(255,255,255,.9) !important; border-radius:10px !important; }
.bg-configurator__side-badge::before{ background:#C8A96A !important; }
.bg-configurator__side-badge.is-active::before{ background:#111827 !important; box-shadow:0 0 0 3px rgba(17,24,39,.12) !important; }
.bg-configurator__view--side[aria-pressed="true"]{ border-color:#C8A96A !important; color:#7a6224 !important; background:#FAF7EF !important; }

/* ---- 20. Garde-fous : neutralise tout reliquat bordeaux/vert/cuivré BG ---- */
.bg-configurator [style*="8b1020"],
.bg-configurator [style*="b0172b"]{ background:#111827 !important; }
.bg-configurator__collapse-icon::before,
.bg-configurator__collapse-icon::after{ background:#C8A96A !important; }

/* ---- 21. États d'édition mobile : rouge/vert BG → navy (verrouillé) / or (édition) ---- */
@media (max-width:720px){
  .bg-configurator__preview{ border:1.5px solid #ECEBE7 !important; box-shadow:0 12px 30px rgba(17,24,39,.07) !important; }
  .bg-configurator__mobile-edit-lock{ border:1px solid #111827 !important; background:#111827 !important; color:#fff !important; box-shadow:none !important; }
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__mobile-edit-lock{ border-color:transparent !important; background:linear-gradient(120deg,#C8A96A,#E6D4A3) !important; color:#0B1220 !important; }}
/* ---- 22. Bordeaux BG (#8b1020/#b0172b) → navy/or, partout ---- */
.bg-configurator [style*="8b1020"],
.bg-configurator [style*="b0172b"],
.bg-configurator__mobile-control-submit > button:first-child{
  background:#111827 !important; color:#ffffff !important; border-color:#111827 !important;
}
.bg-configurator input[type="range"],
.bg-workflow input[type="range"]{ accent-color:#C8A96A !important; }
.bg-configurator__mobile-edit-lock-icon{ background:#fff !important; }

/* ---- 23. Mobile : preview verrouillé/déverrouillé + vue active (sélecteurs forts) ---- */
@media (max-width:720px){
  .bg-configurator.is-mobile-edit-locked .bg-configurator__preview{ border:1.5px solid #ECEBE7 !important; box-shadow:0 12px 30px rgba(17,24,39,.07) !important; }
  .bg-configurator__view.is-active,
  .bg-configurator__tool.is-active{ background:#111827 !important; border-color:#111827 !important; color:#ffffff !important; box-shadow:none !important; }
  .bg-configurator__view[data-bg-config-view]{ border-color:#ECEBE7 !important; background:#ffffff !important; color:#111827 !important; }
  .bg-configurator__view[data-bg-config-view].is-active{ border-color:#111827 !important; background:#111827 !important; color:#ffffff !important; box-shadow:none !important; }}

/* ---- 24. Canvas : cadre rouge/vert BG (sur l'élément canvas) → hairline / or ---- */
@media (max-width:720px){
  .bg-configurator__canvas,
  .bg-configurator.is-mobile-edit-locked .bg-configurator__canvas{ border:1px solid #ECEBE7 !important; box-shadow:none !important; outline:none !important; }
  .bg-configurator__mobile-edit-lock-icon{ background:#fff !important; border-color:transparent !important; box-shadow:none !important; }}

/* ---- 25. Bouton « Ajouter au panier » (CTA commerce, or) ---- */
.bg-configurator__add-cart{
  background:linear-gradient(120deg,#C8A96A,#E6D4A3) !important;
  color:#0B1220 !important;
  border:1px solid transparent !important;
  border-radius:14px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  box-shadow:0 12px 30px rgba(200,169,106,.28) !important;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease) !important;
}
.bg-configurator__add-cart:hover{ transform:translateY(-2px); background:linear-gradient(120deg,#d4b878,#efe0b4) !important; color:#0B1220 !important; }

/* Bouton "Demander un devis" : secondaire (outline or), à côté de l'ajout panier. */
.bg-configurator__devis{
  display:block !important;
  width:100% !important;
  margin-top:10px !important;
  padding:15px 22px !important;
  background:transparent !important;
  color:#0B1220 !important;
  border:1px solid #C8A96A !important;
  border-radius:14px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  font-size:14px !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease) !important;
}
.bg-configurator__devis:hover{ background:#C8A96A !important; color:#0B1220 !important; }
.bg-configurator__devis.is-loading{ opacity:.75; }
/* Mobile : le bar d'action passe le devis en pleine largeur sur une 2e ligne. */
.bg-configurator__mobile-bat-bar{ flex-wrap:wrap !important; }
.bg-configurator__mobile-devis{
  flex:1 0 100% !important;
  order:3;
  margin-top:8px !important;
  padding:13px 18px !important;
  background:transparent !important;
  color:#0B1220 !important;
  border:1px solid #C8A96A !important;
  border-radius:14px !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;
  text-transform:none !important;
  cursor:pointer;
}
.bg-configurator__mobile-devis:hover{ background:#C8A96A !important; color:#0B1220 !important; }
.glassora-cart-note{ font-family:'Inter',sans-serif; }
.bg-configurator__file-input{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }

/* ---- 26. Desktop seulement : bibliotheque atelier / occasions & modeles ---- */
@media (min-width:721px){
  .bg-configurator__panel--left{
    position:relative !important;
    top:auto !important;
    align-self:flex-start !important;
    max-height:calc(100dvh - 116px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    z-index:6 !important;
    transform:none !important;
  }
  .bg-configurator__themes{
    padding:18px !important;
    background:#FAFAF8 !important;
    border:1px solid #ECEBE7 !important;
    border-radius:18px !important;
  }
  .bg-configurator__themes > h3,
  .bg-configurator__templates h3{
    margin:0 0 12px !important;
    color:#111827 !important;
    font-family:'Cormorant Garamond',serif !important;
    font-size:1.34rem !important;
    font-weight:500 !important;
    line-height:1.08 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
  }
  .bg-configurator__theme-card{
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:12px !important;
    min-height:86px !important;
    padding:14px !important;
    background:#ffffff !important;
    border:1px solid #ECEBE7 !important;
    border-radius:16px !important;
    box-shadow:0 8px 22px rgba(17,24,39,.045) !important;
  }
  .bg-configurator__theme-card:hover,
  .bg-configurator__theme-card:focus-visible{
    background:#ffffff !important;
    border-color:#C8A96A !important;
    box-shadow:0 14px 30px rgba(17,24,39,.075) !important;
    transform:translateY(-1px) !important;
  }
  .bg-configurator__theme-card.is-active{
    background:#ffffff !important;
    border-color:#C8A96A !important;
    box-shadow:inset 0 0 0 1px rgba(200,169,106,.35),0 14px 30px rgba(17,24,39,.07) !important;
  }
  .bg-configurator__theme-icon{
    width:44px !important;
    height:44px !important;
    background:#FAF7EF !important;
    border:1px solid rgba(200,169,106,.38) !important;
    border-radius:14px !important;
    color:#7a6224 !important;
    font-size:1.35rem !important;
  }
  .bg-configurator__theme-icon i{
    display:block !important;
    font-size:1.35rem !important;
    line-height:1 !important;
  }
  .bg-configurator__theme-copy{
    gap:5px !important;
  }
  .bg-configurator__theme-copy strong{
    color:#111827 !important;
    font-family:'Manrope',sans-serif !important;
    font-size:.92rem !important;
    font-weight:700 !important;
    line-height:1.2 !important;
  }
  .bg-configurator__theme-copy span{
    display:block !important;
    overflow:visible !important;
    color:#5F6470 !important;
    font-family:'Inter',sans-serif !important;
    font-size:.76rem !important;
    line-height:1.42 !important;
    text-overflow:clip !important;
    white-space:normal !important;
  }
  .bg-configurator__templates{
    padding:18px !important;
    background:#FAFAF8 !important;
    border:1px solid #ECEBE7 !important;
    border-radius:18px !important;
  }
  .bg-configurator__collapse{
    align-items:center !important;
  }
  .bg-configurator__collapse-icon{
    border-color:#ECEBE7 !important;
    color:#7a6224 !important;
    background:#ffffff !important;
  }
  .bg-configurator__tpl-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:12px !important;
  }
  .bg-configurator__tpl-card,
  .bg-configurator__tpl-card.is-active{
    background:#ffffff !important;
  }
  .bg-configurator__tpl-card{
    gap:8px !important;
    padding:9px !important;
    border:1px solid #ECEBE7 !important;
    border-radius:14px !important;
    box-shadow:0 8px 22px rgba(17,24,39,.04) !important;
  }
  .bg-configurator__tpl-card:hover,
  .bg-configurator__tpl-card:focus-visible{
    background:#ffffff !important;
    border-color:#C8A96A !important;
    box-shadow:0 12px 26px rgba(17,24,39,.07) !important;
    outline:none !important;
  }
  .bg-configurator__tpl-card.is-active{
    border-color:#C8A96A !important;
    box-shadow:inset 0 0 0 1px rgba(200,169,106,.32),0 12px 26px rgba(17,24,39,.06) !important;
  }
  .bg-configurator__tpl-art{
    background:#FAFAF8 !important;
    border:1px solid #ECEBE7 !important;
    border-radius:10px !important;
  }
  .bg-configurator__tpl-name{
    color:#111827 !important;
    font-family:'Inter',sans-serif !important;
    font-size:.7rem !important;
    font-weight:600 !important;
    line-height:1.25 !important;
    white-space:normal !important;
  }
  .bg-configurator__tpl-fields--inline{
    background:#ffffff !important;
    border-color:#ECEBE7 !important;
    border-radius:14px !important;
  }
  .bg-configurator__tpl-fields-head strong{
    color:#111827 !important;
  }
  .bg-configurator__tpl-fields-head span{
    color:#5F6470 !important;
    font-size:.72rem !important;
  }
  /* État vide : thème sélectionné mais aucun modèle disponible */
  .bg-configurator__tpl-empty{
    grid-column:1 / -1 !important;
    margin:12px 0 0 !important;
    padding:14px !important;
    background:#ffffff !important;
    border:1px dashed #d8d5cc !important;
    border-radius:14px !important;
    color:#5F6470 !important;
    font-family:'Inter',sans-serif !important;
    font-size:.78rem !important;
    line-height:1.5 !important;
  }}

/* ---- 27. Mobile seulement : lisibilite des cartes et taille sans contour lourd ---- */
@media (max-width:720px){
  .bg-configurator__mobile-control,
  .bg-configurator__mobile-control *{
    text-shadow:none !important;
  }
  .bg-configurator__mobile-control{
    background:#ffffff !important;
    color:#111827 !important;
    border:1px solid #ECEBE7 !important;
    box-shadow:0 14px 36px rgba(17,24,39,.08) !important;
  }
  .bg-configurator__mobile-control-head h2,
  .bg-configurator__mobile-control-input label,
  .bg-configurator__mobile-control-actions strong,
  .bg-configurator__mobile-control-summary strong{
    color:#111827 !important;
  }
  .bg-configurator__mobile-control-head p,
  .bg-configurator__mobile-control-actions span,
  .bg-configurator__mobile-control-summary span{
    color:#5F6470 !important;
  }
  .bg-configurator__mobile-control-input > div,
  .bg-configurator__mobile-control-actions button,
  .bg-configurator__mobile-control-summary{
    background:#ffffff !important;
    border:1px solid #ECEBE7 !important;
    box-shadow:none !important;
  }
  .bg-configurator__mobile-control-summary{
    background:#ffffff !important;
    border:1px solid #ECEBE7 !important;
    color:#111827 !important;
    box-shadow:0 10px 26px rgba(17,24,39,.06) !important;
  }
  .bg-configurator__mobile-control-summary span{
    color:#5F6470 !important;
    opacity:1 !important;
    text-shadow:none !important;
  }
  .bg-configurator__mobile-control-summary strong{
    color:#111827 !important;
    opacity:1 !important;
    text-shadow:none !important;
  }
  .bg-configurator__mobile-control-summary span{
    font-family:'Manrope',sans-serif !important;
    font-size:.72rem !important;
    font-weight:700 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
  }
  .bg-configurator__mobile-control-summary strong{
    font-family:'Manrope',sans-serif !important;
    font-size:.98rem !important;
    font-weight:800 !important;
  }
  .bg-configurator__mobile-control-input input{
    color:#111827 !important;
    background:#ffffff !important;
  }
  .bg-configurator__mobile-control-input input::placeholder{
    color:#8E949E !important;
    opacity:1 !important;
  }
  .bg-configurator__mobile-control-input button{
    color:#111827 !important;
    background:#FAF7EF !important;
    border:1px solid #ECEBE7 !important;
  }
  .bg-configurator__quick-adjust,
  .bg-configurator__mobile-steps .bg-configurator__quick-adjust{
    border:1px solid #111827 !important;
    border-radius:18px !important;
  }
  .bg-configurator__quick-adjust .bg-configurator__metrics{
    color:#111827 !important;
    background:#ffffff !important;
    border:1px solid #ECEBE7 !important;
    box-shadow:none !important;
    font-family:'Manrope',sans-serif !important;
    font-weight:700 !important;
  }
  .bg-configurator__quick-adjust-btn,
  .bg-configurator.is-mobile-edit-locked .bg-configurator__quick-adjust-btn{
    color:#111827 !important;
    background:#ffffff !important;
    border:1px solid #ECEBE7 !important;
    box-shadow:none !important;
  }
  .bg-configurator__quick-adjust-btn:hover,
  .bg-configurator__quick-adjust-btn:focus-visible{
    border-color:#C8A96A !important;
    color:#7a6224 !important;
    outline:none !important;
  }
  .bg-configurator.is-mobile-edit-locked .bg-configurator__preview,
  .bg-configurator:not(.is-mobile-edit-unlocked) .bg-configurator__preview{
    border-color:transparent !important;
    box-shadow:0 12px 30px rgba(17,24,39,.07) !important;
  }
  .bg-configurator.is-mobile-edit-locked .bg-configurator__canvas,
  .bg-configurator:not(.is-mobile-edit-unlocked) .bg-configurator__canvas{
    border-color:transparent !important;
    box-shadow:none !important;
    outline:none !important;
  }
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__preview{
    border-color:transparent !important;
    box-shadow:0 12px 30px rgba(17,24,39,.07) !important;
  }
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__canvas{
    border-color:#C8A96A !important;
    box-shadow:0 0 0 1px rgba(200,169,106,.45) !important;
    outline:none !important;
  }
  .bg-configurator__mobile-edit-lock,
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__mobile-edit-lock{
    background:#111827 !important;
    color:#ffffff !important;
    border:1px solid #111827 !important;
    box-shadow:none !important;
  }
  .bg-configurator__mobile-edit-lock-icon,
  .bg-configurator__mobile-edit-lock-icon::before,
  .bg-configurator__mobile-edit-lock-icon::after{
    background:#ffffff !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }
  .bg-configurator__mobile-steps,
  .bg-configurator.is-mobile-edit-locked .bg-configurator__mobile-steps{
    opacity:1 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .bg-configurator__quick-adjust,
  .bg-configurator__mobile-steps .bg-configurator__quick-adjust{
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__quick-adjust,
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__mobile-steps .bg-configurator__quick-adjust{
    background:transparent !important;
    border-color:#C8A96A !important;
    box-shadow:0 0 0 1px rgba(200,169,106,.45) !important;
  }
  .bg-configurator__side-badge,
  .bg-configurator__side-badge.is-active,
  .bg-configurator__view[data-bg-config-view],
  .bg-configurator__view[data-bg-config-view].is-active,
  .bg-configurator__view--side,
  .bg-configurator__view--side.is-active,
  .bg-configurator__view--side[aria-pressed="true"]{
    background:#ffffff !important;
    background-image:none !important;
    border-color:#ECEBE7 !important;
    color:#111827 !important;
    box-shadow:0 8px 18px rgba(17,24,39,.08) !important;
  }
  .bg-configurator__view[data-bg-config-view]:active,
  .bg-configurator__view--side:active,
  .bg-configurator__side-badge:active{
    background:#ffffff !important;
    background-image:none !important;
    color:#111827 !important;
  }
  .bg-configurator__side-badge.is-active::before,
  .bg-configurator__view--side.is-active::before,
  .bg-configurator__view--side[aria-pressed="true"]::before{
    background:#C8A96A !important;
    box-shadow:0 0 0 3px rgba(200,169,106,.18) !important;
  }}

/* Verrou final : aucun reste Beaune/gravure sur les actions de vue secondaires. */
.bg-configurator .bg-configurator__view--icon,
.bg-configurator .bg-configurator__view--icon:hover,
.bg-configurator .bg-configurator__view--icon:focus-visible,
.bg-configurator .bg-configurator__view--icon:active,
.bg-configurator .bg-configurator__view--side,
.bg-configurator .bg-configurator__view--side:hover,
.bg-configurator .bg-configurator__view--side:focus-visible,
.bg-configurator .bg-configurator__view--side:active,
.bg-configurator .bg-configurator__view--side.is-active,
.bg-configurator .bg-configurator__view--side.is-active:hover,
.bg-configurator .bg-configurator__view--side[aria-pressed="true"],
.bg-configurator .bg-configurator__view--side[aria-pressed="true"]:hover,
.bg-configurator .bg-configurator__view--side[aria-pressed="true"]:focus-visible,
.bg-configurator .bg-configurator__view--select-lines,
.bg-configurator .bg-configurator__view--select-lines:hover,
.bg-configurator .bg-configurator__view--select-lines:focus-visible,
.bg-configurator .bg-configurator__view--select-lines:active,
.bg-configurator .bg-configurator__view--select-lines.is-active,
.bg-configurator .bg-configurator__view--select-lines.is-active:hover{
  background:#ffffff !important;
  background-image:none !important;
  border-color:#ECEBE7 !important;
  color:#111827 !important;
  box-shadow:0 8px 18px rgba(17,24,39,.08) !important;
}

.bg-configurator .bg-configurator__view--icon svg,
.bg-configurator .bg-configurator__view--icon:hover svg,
.bg-configurator .bg-configurator__view--icon:focus-visible svg,
.bg-configurator .bg-configurator__view--side svg,
.bg-configurator .bg-configurator__view--side:hover svg,
.bg-configurator .bg-configurator__view--side:focus-visible svg,
.bg-configurator .bg-configurator__view--select-lines svg,
.bg-configurator .bg-configurator__view--select-lines:hover svg,
.bg-configurator .bg-configurator__view--select-lines:focus-visible svg{
  color:#111827 !important;
  stroke:#111827 !important;
}

.bg-configurator .bg-configurator__view--side::before,
.bg-configurator .bg-configurator__view--side:hover::before,
.bg-configurator .bg-configurator__view--side:focus-visible::before,
.bg-configurator .bg-configurator__view--side.is-active::before,
.bg-configurator .bg-configurator__view--side.is-active:hover::before,
.bg-configurator .bg-configurator__view--side[aria-pressed="true"]::before,
.bg-configurator .bg-configurator__view--side[aria-pressed="true"]:hover::before{
  background:#111827 !important;
  box-shadow:none !important;
}

/* ---- 27b. Mobile : les bascules Recto/Verso et Lignes doivent montrer leur état ----
   Le verrou ci-dessus force le blanc y compris sur l'état actif : au tactile,
   impossible de savoir quelle face on grave. Actif = navy plein (comme les vues). */
@media (max-width:720px){
  .bg-configurator .bg-configurator__view--side.is-active,
  .bg-configurator .bg-configurator__view--side[aria-pressed="true"],
  .bg-configurator .bg-configurator__view--select-lines.is-active,
  .bg-configurator .bg-configurator__view--select-lines[aria-pressed="true"]{
    background:#111827 !important;
    background-image:none !important;
    border-color:#111827 !important;
    color:#ffffff !important;
    box-shadow:0 8px 18px rgba(17,24,39,.18) !important;
  }
  .bg-configurator .bg-configurator__view--side.is-active svg,
  .bg-configurator .bg-configurator__view--side[aria-pressed="true"] svg,
  .bg-configurator .bg-configurator__view--select-lines.is-active svg,
  .bg-configurator .bg-configurator__view--select-lines[aria-pressed="true"] svg{
    color:#ffffff !important;
    stroke:#ffffff !important;
  }
  .bg-configurator .bg-configurator__view--side.is-active::before,
  .bg-configurator .bg-configurator__view--side[aria-pressed="true"]::before{
    background:#C8A96A !important;
  }}

/* ---- 28. Desktop seulement : message de statut / validation BAT ---- */
.bg-configurator__status{
  margin:10px 0 0;
  font-size:13px;
  line-height:1.5;
  color:#5F6470;
}
.bg-configurator__status:empty{
  display:none;
}
@media (max-width:720px){
  .bg-configurator__status{
    display:none !important;
  }}

/* ---- 29. Desktop seulement : spinner du bouton "Ajouter au panier" ---- */
@media (min-width:721px){
  .bg-configurator__add-cart.is-loading{
    position:relative;
    pointer-events:none;
    opacity:.85;
  }
  .bg-configurator__add-cart.is-loading::after{
    content:"";
    display:inline-block;
    width:14px;
    height:14px;
    margin-left:10px;
    vertical-align:-2px;
    border-radius:50%;
    border:2px solid currentColor;
    border-top-color:transparent;
    animation:glassora-cart-spin .7s linear infinite;
  }}
@keyframes glassora-cart-spin{
  to{ transform:rotate(360deg); }
}

.bg-configurator__asset-upload{ display:none; }

/* ---- 30. Desktop : centrage et harmonisation des menus du canvas ---- */
@media (min-width:721px){
  .bg-configurator__toolbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    justify-items:center !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    margin:0 auto 14px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .bg-configurator__views,
  .bg-configurator__tools{
    justify-self:center !important;
    justify-content:center !important;
    align-items:center !important;
    width:max-content !important;
    max-width:100% !important;
    margin-inline:auto !important;
  }

  .bg-configurator__views{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    padding:5px !important;
    border:1px solid #ECEBE7 !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.88) !important;
    box-shadow:0 12px 28px rgba(17,24,39,.075) !important;
  }

  .bg-configurator__views .bg-configurator__view{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    height:34px !important;
    min-height:34px !important;
    min-width:56px !important;
    padding:0 14px !important;
    border:1px solid #ECEBE7 !important;
    border-radius:999px !important;
    background:#ffffff !important;
    color:#111827 !important;
    box-shadow:none !important;
    font-family:'Manrope',sans-serif !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:.035em !important;
    text-transform:uppercase !important;
  }

  .bg-configurator__views .bg-configurator__view svg{
    width:14px !important;
    height:14px !important;
    stroke-width:1.9 !important;
  }

  .bg-configurator__views .bg-configurator__view--icon{
    width:46px !important;
    min-width:46px !important;
    padding:0 !important;
  }

  .bg-configurator__views .bg-configurator__view:hover,
  .bg-configurator__views .bg-configurator__view:focus-visible{
    border-color:#C8A96A !important;
    background:#FAF7EF !important;
    color:#7a6224 !important;
    outline:0 !important;
  }

  .bg-configurator__views .bg-configurator__view.is-active,
  .bg-configurator__views .bg-configurator__view--bat{
    border-color:#111827 !important;
    background:#111827 !important;
    color:#ffffff !important;
  }

  .bg-configurator__tools{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .bg-configurator__tools .bg-configurator__tool{
    min-height:36px !important;
    border-radius:10px !important;
  }}

/* ---- 30. Mobile : occasions dans Logo / modele comme desktop ---- */
@media (max-width:720px){
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__panel--left{
    background:#FAFAF8 !important;
    border:1px solid #ECEBE7 !important;
    box-shadow:0 26px 80px rgba(17,24,39,.22),0 0 0 999px rgba(17,24,39,.22) !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__themes{
    display:grid !important;
    gap:18px !important;
    margin:0 !important;
    padding:0 !important;
    background:#FAFAF8 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__themes > h3{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    margin:0 !important;
    color:#111827 !important;
    font-family:'Cormorant Garamond',serif !important;
    font-size:1.42rem !important;
    font-weight:500 !important;
    line-height:1.05 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__themes > h3::before{
    content:"" !important;
    display:block !important;
    width:7px !important;
    height:7px !important;
    border-radius:999px !important;
    background:#E1BF78 !important;
    flex:0 0 auto !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__theme-list{
    display:grid !important;
    gap:12px !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__theme-card{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    align-items:center !important;
    gap:12px !important;
    min-height:86px !important;
    width:100% !important;
    padding:14px !important;
    border:1px solid #ECEBE7 !important;
    border-radius:16px !important;
    background:#ffffff !important;
    color:#111827 !important;
    box-shadow:0 8px 22px rgba(17,24,39,.045) !important;
    text-align:left !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__theme-card:hover,
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__theme-card:focus-visible{
    background:#ffffff !important;
    border-color:#E5D5AD !important;
    box-shadow:0 12px 28px rgba(17,24,39,.07) !important;
    transform:none !important;
    outline:none !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__theme-card.is-active{
    background:#ffffff !important;
    border-color:#E5D5AD !important;
    box-shadow:inset 0 0 0 1px rgba(200,169,106,.22),0 8px 22px rgba(17,24,39,.045) !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__theme-icon{
    display:grid !important;
    place-items:center !important;
    width:44px !important;
    height:44px !important;
    border:1px solid #E8D6A8 !important;
    border-radius:14px !important;
    background:#FFFDF7 !important;
    color:#9A7A2F !important;
    font-size:1.34rem !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__theme-icon i{
    display:block !important;
    color:inherit !important;
    font-size:1.34rem !important;
    line-height:1 !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__theme-copy{
    display:grid !important;
    gap:5px !important;
    min-width:0 !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__theme-copy strong{
    color:#111827 !important;
    font-family:'Manrope',sans-serif !important;
    font-size:.96rem !important;
    font-weight:800 !important;
    line-height:1.18 !important;
  }
  .bg-configurator[data-bg-mobile-mode="assets"] .bg-configurator__theme-copy span{
    display:block !important;
    overflow:visible !important;
    color:#5F6470 !important;
    font-family:'Inter',sans-serif !important;
    font-size:.78rem !important;
    font-weight:500 !important;
    line-height:1.42 !important;
    text-overflow:clip !important;
    white-space:normal !important;
  }}

/* ---- 30. Mobile final : panneau fixe, verre flottant, suppression du menu bas ---- */
@media (max-width:720px){
  .bg-configurator__mobile-glass-menu{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(82px,.38fr) !important;
    gap:8px !important;
    width:100% !important;
    margin:0 0 12px !important;
    padding:10px !important;
    border:1px solid #ECEBE7 !important;
    border-radius:16px !important;
    background:#FAFAF8 !important;
    box-shadow:0 10px 26px rgba(17,24,39,.06) !important;
  }
  .bg-configurator__mobile-glass-field{
    display:grid !important;
    gap:5px !important;
    min-width:0 !important;
  }
  .bg-configurator__mobile-glass-field label{
    color:#5F6470 !important;
    font-family:'Manrope',sans-serif !important;
    font-weight:800 !important;
    letter-spacing:.1em !important;
    line-height:1.1 !important;
    text-transform:uppercase !important;
  }
  .bg-configurator__mobile-glass-field select,
  .bg-configurator__mobile-glass-field input{
    width:100% !important;
    min-height:48px !important;
    border:1px solid #ECEBE7 !important;
    border-radius:12px !important;
    background-color:#ffffff !important;
    color:#111827 !important;
    box-shadow:none !important;
    font-family:'Inter',sans-serif !important;
    /* 16px minimum : en dessous, iOS Safari zoome la page au focus et ne dézoome pas. */
    font-size:16px !important;
    font-weight:700 !important;
  }
  .bg-configurator__mobile-glass-field select{
    appearance:none !important;
    -webkit-appearance:none !important;
    padding:0 34px 0 12px !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 12px center !important;
  }
  .bg-configurator__mobile-glass-field input{
    padding:0 10px !important;
    text-align:center !important;
  }
  .bg-configurator__panel.is-mobile-active{
    position:fixed !important;
    top:max(12px,env(safe-area-inset-top)) !important;
    right:10px !important;
    bottom:max(12px,env(safe-area-inset-bottom)) !important;
    left:10px !important;
    max-height:none !important;
    transform:none !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .bg-configurator[data-bg-mobile-mode="text"] .bg-configurator__panel--right{
    overscroll-behavior:contain !important;
  }
  .bg-configurator__panel--right .bg-configurator__glass-choice{
    display:none !important;
  }
  .bg-configurator__asset-upload{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    width:100% !important;
    min-height:46px !important;
    margin:12px 0 0 !important;
    border:1px solid #ECEBE7 !important;
    border-radius:14px !important;
    background:#ffffff !important;
    color:#111827 !important;
    box-shadow:0 10px 24px rgba(17,24,39,.06) !important;
    font-family:'Manrope',sans-serif !important;
    font-size:.78rem !important;
    font-weight:850 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }
  .bg-configurator__asset-upload:hover,
  .bg-configurator__asset-upload:focus-visible{
    border-color:#C8A96A !important;
    color:#7a6224 !important;
    outline:none !important;
  }
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__canvas,
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__quick-adjust,
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__mobile-steps .bg-configurator__quick-adjust{
    border-color:#C8A96A !important;
    box-shadow:0 0 0 1px rgba(200,169,106,.45) !important;
  }
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__mobile-edit-lock-icon,
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__mobile-edit-lock-icon::before,
  .bg-configurator.is-mobile-edit-unlocked .bg-configurator__mobile-edit-lock-icon::after{
    background:#C8A96A !important;
    border-color:#C8A96A !important;
    box-shadow:0 0 0 3px rgba(200,169,106,.18) !important;
  }}

/* ---- 31. Desktop seulement : hiérarchie des actions (colonne droite) ----
   Parcours voulu : vérifier (BAT · Visualiser) → acheter (panier) → devis.
   « Ajouter au panier » redevient le CTA principal (il rendait 20px de haut,
   sans padding) ; le BAT est démis de son rôle de bouton dominant. */
@media (min-width:721px){
  .bg-configurator__cta{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  /* 1. Outils de vérification, côte à côte, même famille visuelle */
  .bg-configurator__cta .bg-configurator__bat-button{ order:1 !important; }
  .bg-configurator__cta .bg-configurator__glass-preview-button{ order:2 !important; }
  .bg-configurator__cta .bg-configurator__bat-button,
  .bg-configurator__cta .bg-configurator__glass-preview-button{
    width:100% !important;
    min-height:44px !important;
    padding:10px 12px !important;
    background:transparent !important;
    color:#111827 !important;
    border:1px solid #d8d5cc !important;
    border-radius:12px !important;
    box-shadow:none !important;
    font-size:.76rem !important;
    font-weight:600 !important;
    letter-spacing:.01em !important;
    transition:background .25s cubic-bezier(.2,.6,.2,1),color .25s cubic-bezier(.2,.6,.2,1),border-color .25s cubic-bezier(.2,.6,.2,1) !important;
  }
  .bg-configurator__cta .bg-configurator__bat-button:hover,
  .bg-configurator__cta .bg-configurator__bat-button:focus-visible,
  .bg-configurator__cta .bg-configurator__glass-preview-button:hover,
  .bg-configurator__cta .bg-configurator__glass-preview-button:focus-visible{
    background:#111827 !important;
    color:#ffffff !important;
    border-color:#111827 !important;
    transform:none !important;
    box-shadow:none !important;
  }
  /* 2. Achat : primaire or, pleine largeur, taille de vrai CTA */
  .bg-configurator__cta .bg-configurator__add-cart{
    order:4 !important;
    grid-column:1 / -1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:52px !important;
    padding:14px 22px !important;
    font-size:.95rem !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;
    cursor:pointer !important;
    transition:transform .25s cubic-bezier(.2,.6,.2,1),box-shadow .25s cubic-bezier(.2,.6,.2,1) !important;
  }
  .bg-configurator__cta .bg-configurator__add-cart:hover{
    transform:translateY(-1px) !important;
    box-shadow:0 16px 34px rgba(200,169,106,.35) !important;
  }
  /* 3. Devis : voie parallèle (pros), plus discret que l'achat */
  .bg-configurator__cta .bg-configurator__devis{
    order:5 !important;
    grid-column:1 / -1 !important;
    margin-top:0 !important;
    min-height:46px !important;
    padding:12px 22px !important;
  }
  /* 4. Statut : note de service, pas un bloc décoratif */
  .bg-configurator__cta .bg-configurator__status{
    order:6 !important;
    grid-column:1 / -1 !important;
    margin:0 !important;
    padding:10px 12px !important;
    background:#FAFAF8 !important;
    border:1px solid #ECEBE7 !important;
    border-radius:12px !important;
    color:#5F6470 !important;
    font-size:.76rem !important;
    line-height:1.45 !important;
  }}

/* ---- 31b. Mobile : mêmes CTA dignes de ce nom ----
   « Ajouter au panier » rendait 20px de haut sans padding dans la feuille BAT ;
   la barre d'achat fixe (mobile-bat-bar) a besoin d'un « Vérifier avant » lisible
   sur fond blanc. Couleurs : or (§25) pour l'achat, outline navy pour le reste. */
@media (max-width:720px){
  .bg-configurator__add-cart{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:50px !important;
    padding:12px 18px !important;
    font-size:1rem !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;
    cursor:pointer !important;
  }
  .bg-configurator__cta .bg-configurator__add-cart{
    width:100% !important;
  }
  .bg-configurator__mobile-bat-check{
    padding:12px 16px !important;
    background:transparent !important;
    color:#111827 !important;
    border:1px solid #111827 !important;
    border-radius:14px !important;
    font-family:'Manrope',sans-serif !important;
    font-weight:600 !important;
    font-size:.9rem !important;
    text-transform:none !important;
    cursor:pointer !important;
  }
  .bg-configurator__mobile-bat-check:hover,
  .bg-configurator__mobile-bat-check:focus-visible{
    border-color:#C8A96A !important;
    color:#7a6224 !important;
    outline:none !important;
  }
  /* Rails et barre d'édition : le blur re-floute le canvas en mouvement à
     chaque frame pour un fond déjà opaque à 85 % — coût sans bénéfice.
     (Les règles « keep last » de glass-configurator.css le réimposaient.) */
  .bg-configurator__views,
  .bg-configurator__tools,
  .bg-configurator__mobile-edit-lock,
  .bg-configurator__mobile-steps{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  /* Libellés du rail : « Recto », « Lignes »/« Groupe » et « Règle » étaient
     coupés (overflow:hidden) — 32px de contenu utile pour un texte de 40 à
     42px. On élargit les boutons DANS les rails (marge intérieure 6 -> 2px,
     rails toujours 52px, canvas inchangé) et on retire l'interlettrage.
     Effet de bord bienvenu : cibles tactiles 40 -> 46px de large. */
  .bg-configurator__views,
  .bg-configurator__tools{
    padding-inline:2px !important;
  }
  .bg-configurator__views .bg-configurator__view,
  .bg-configurator__tools .bg-configurator__tool{
    width:46px !important;
    min-width:46px !important;
  }
  .bg-configurator__views .bg-configurator__view{
    padding-inline:2px !important;
    letter-spacing:0 !important;
    font-size:10px !important;
  }
  .bg-configurator__views .bg-configurator__view--ruler > span:last-child{
    font-size:9px !important;
  }
  /* Feuille = bottom sheet occupant 68% de l'écran, avec une hauteur EXPLICITE.
     Avec top+bottom seuls, elle prenait la hauteur de son contenu (972px pour
     812px d'écran) : plus de défilement, bouton de sortie hors écran.
     Les 32% laissés libres au-dessus servent à garder le verre visible : on
     voit le modèle ou le texte se poser pendant qu'on le règle. */
  .bg-configurator__panel.is-mobile-active{
    top:auto !important;
    left:0 !important;
    right:0 !important;
    /* --bg-kb : hauteur du clavier virtuel (0 sans clavier), posée en JS
       depuis visualViewport. La feuille se cale au-dessus du clavier et se
       dimensionne sur la hauteur VISIBLE, sinon son contenu et son bouton de
       sortie passent derrière le clavier. --bg-vv-top compense le décalage
       que iOS applique au viewport visuel (sans quoi le fixed sort du champ). */
    bottom:var(--bg-kb,0px) !important;
    height:calc((100dvh - var(--bg-kb,0px)) * var(--bg-sheet-ratio,.68)) !important;
    transform:translateY(var(--bg-vv-top,0px)) !important;
    max-height:none !important;
    border-radius:22px 22px 0 0 !important;
    padding-bottom:max(12px,env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    /* Le pied collant recouvre le bas du scrollport : sans cette réserve, un
       champ ramené au centre finissait derrière lui (feuille courte, clavier
       ouvert). scroll-padding exclut cette bande de la zone de visée. */
    scroll-padding-bottom:64px !important;
    scroll-padding-top:10px !important;
  }
  /* L'aperçu est épinglé dans la bande libre, au-dessus du voile (z 79) pour
     rester net. pointer-events:none : un tap sur le verre atteint le voile et
     referme la feuille, au lieu de déplacer la gravure à l'aveugle. */
  .bg-configurator.has-mobile-sheet-open .bg-configurator__preview{
    position:fixed !important;
    top:calc(max(8px,env(safe-area-inset-top)) + var(--bg-vv-top,0px)) !important;
    left:0 !important;
    right:0 !important;
    height:calc((100dvh - var(--bg-kb,0px)) * (1 - var(--bg-sheet-ratio,.68)) - 18px) !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    z-index:81 !important;
    background:transparent !important;
    pointer-events:none !important;
  }
  /* Plafond en valeur absolue : un max-height en % ne contraint pas le canvas
     (élément remplacé dans une grille). */
  .bg-configurator.has-mobile-sheet-open .bg-configurator__canvas{
    height:auto !important;
    max-height:calc((100dvh - var(--bg-kb,0px)) * (1 - var(--bg-sheet-ratio,.68)) - 26px) !important;
    max-width:86vw !important;
  }
  /* Pendant la feuille, la bande ne montre que le verre : ni rails, ni verrou,
     ni chrome du site (contexte modal). */
  .bg-configurator.has-mobile-sheet-open .bg-configurator__views,
  .bg-configurator.has-mobile-sheet-open .bg-configurator__tools,
  .bg-configurator.has-mobile-sheet-open .bg-configurator__mobile-edit-lock{
    opacity:0 !important;
    pointer-events:none !important;
  }
  body.bg-configurator-sheet-open .site-top-marquee,
  body.bg-configurator-sheet-open > header{
    opacity:0 !important;
    pointer-events:none !important;
  }
  /* touch-action:none sur html/body gelait le pan tactile DANS la feuille sur
     iOS (le verrou de scroll est déjà assuré par body{position:fixed} en JS). */
  html.bg-configurator-sheet-open,
  body.bg-configurator-sheet-open{
    touch-action:auto !important;
  }
  /* Le bouton de sortie reste collé en bas de la feuille, sur fond opaque. */
  .bg-configurator__panel.is-mobile-active .bg-configurator__sheet-validate{
    position:sticky !important;
    bottom:0 !important;
    z-index:3 !important;
    margin-top:6px !important;
    background:#ffffff !important;
    box-shadow:0 -12px 16px rgba(255,255,255,.95) !important;
  }
  /* Toast d'erreur/statut : les messages BAT étaient écrits dans une feuille
     fermée — invisibles. Affiché au-dessus de la barre d'achat fixe. */
  .bg-configurator__mobile-status{
    position:fixed;
    left:14px;
    right:14px;
    bottom:calc(max(10px, env(safe-area-inset-bottom)) + 146px);
    z-index:72;
    margin:0;
    padding:12px 14px;
    border-radius:12px;
    background:#111827;
    color:#ffffff;
    font-family:'Inter',sans-serif;
    font-size:.86rem;
    line-height:1.45;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .2s ease, transform .2s ease;
    pointer-events:none;
  }
  .bg-configurator__mobile-status.is-visible{
    opacity:1;
    transform:none;
  }
  /* Segmenté Recto/Verso : n'apparaît qu'en gravure deux faces ([hidden]
     posé par updateSideButtons). Seul moyen tactile d'éditer le verso. */
  .bg-configurator__side-switch{
    display:flex;
    gap:6px;
    margin:8px 0 0;
    padding:4px;
    background:#ffffff;
    border:1px solid #ECEBE7;
    border-radius:14px;
    box-shadow:0 10px 24px rgba(17,24,39,.06);
  }
  .bg-configurator__side-switch[hidden]{
    display:none !important;
  }
  .bg-configurator__side-switch button{
    flex:1 1 0;
    min-height:44px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#5F6470;
    font-family:'Manrope',sans-serif;
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
  }
  .bg-configurator__side-switch button.is-active{
    background:#111827;
    color:#ffffff;
  }
  .bg-configurator__side-switch button:disabled{
    opacity:.45;
  }
  /* Prix dans la barre d'achat fixe : quantité × unitaire à gauche, total
     à droite. Masqué ([hidden]) tant que le modèle n'a pas de prix Woo. */
  .bg-configurator__mobile-bat-price{
    flex:1 0 100%;
    order:-1;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin:0 0 2px;
    padding:0 4px;
    color:#5F6470;
    font-family:'Inter',sans-serif;
    font-size:.82rem;
  }
  .bg-configurator__mobile-bat-price[hidden]{
    display:none;
  }
  .bg-configurator__mobile-bat-price strong{
    color:#111827;
    font-family:'Manrope',sans-serif;
    font-size:1.05rem;
    font-weight:700;
  }
  /* L'estimation de la feuille BAT était réservée au desktop : un client
     mobile ne voyait aucun montant avant le panier. */
  .bg-configurator__cta .bg-configurator__price.is-ready{
    display:flex !important;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    margin:0 0 4px;
    padding:10px 12px;
    background:#FAFAF8;
    border:1px solid #ECEBE7;
    border-radius:12px;
  }
  .bg-configurator__cta .bg-configurator__price.is-ready .bg-configurator__price-total{
    color:#111827;
    font-family:'Manrope',sans-serif;
    font-size:1.1rem;
    font-weight:700;
    white-space:nowrap;
  }
  /* Contraste : l'or décoratif #C8A96A tient 2,3:1 sur clair — le token
     --gold-ink (base.css) existe précisément pour le texte or sur clair. */
  .bg-configurator__mobile-hero-title span{
    color:var(--gold-ink, #7A6224) !important;
    font-size:.72rem !important;
  }
  .bg-configurator input::placeholder,
  .bg-configurator textarea::placeholder{
    color:#6B7280 !important;
  }
  /* Planchers de lisibilité (7,7-10,6px relevés à l'audit). */
  .bg-configurator__view{
    font-size:.7rem !important;
  }
  .bg-configurator__view--ruler > span:last-child{
    font-size:.62rem !important;
  }
  .bg-configurator__tpl-name{
    font-size:.75rem !important;
    white-space:normal !important;
    line-height:1.25 !important;
  }
  .bg-configurator__mobile-glass-field label{
    font-size:.75rem !important;
  }
  /* Vrai scrim : au-dessus des rails (z 24/60), sous les feuilles (z 80).
     Remplace le box-shadow 999px non animable qui laissait les rails
     cliquables sous l'assombrissement. */
  .bg-configurator__scrim{
    position:fixed;
    inset:0;
    z-index:79;
    background:rgba(11,18,32,.48);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .bg-configurator.has-mobile-sheet-open .bg-configurator__scrim{
    opacity:1;
    pointer-events:auto;
  }
  .bg-configurator__panel.is-mobile-active{
    box-shadow:0 -18px 64px rgba(0,0,0,.35) !important;
  }
  /* Reset armé (1er tap) : signal visuel en attendant le 2e tap. */
  .bg-configurator__tool--reset.is-armed{
    border-color:#9c2131 !important;
    color:#9c2131 !important;
    box-shadow:0 0 0 2px rgba(156,33,49,.25) !important;
  }}

@media (min-width:721px){
  .bg-configurator__scrim{
    display:none !important;
  }}

/* Préférence système : réduire les animations du configurateur. */
@media (prefers-reduced-motion:reduce){
  .bg-configurator *,
  .bg-configurator *::before,
  .bg-configurator *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }}

/* Le segmenté Recto/Verso est un contrôle mobile : le desktop a déjà le badge
   et le clic direct sur chaque verre. */
@media (min-width:721px){
  .bg-configurator__side-switch{
    display:none !important;
  }}

/* Tap sur le verre verrouillé : le bouton « Activer la modification » pulse
   pour se signaler (déclenché par nudgeMobileEditLock en JS). */
@keyframes bg-edit-lock-nudge{
  0%,100%{ box-shadow:0 0 0 0 rgba(200,169,106,0); }
  40%{ box-shadow:0 0 0 7px rgba(200,169,106,.4); }
}
@media (max-width:720px){
  .bg-configurator__mobile-edit-lock.is-nudged{
    animation:bg-edit-lock-nudge .6s ease 2 !important;
  }}

/* Respect de prefers-reduced-motion sur tout le configurateur (aucune
   animation n'y est porteuse d'information). */
@media (prefers-reduced-motion: reduce){
  .bg-configurator *,
  .bg-configurator *::before,
  .bg-configurator *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }}

/* ---- 32. Desktop seulement : éditeur de lignes de texte ---- */
@media (min-width:721px){
  /* Rangées repliées : affordance claire (zone haute, indicateur or) */
  .bg-configurator__line-panel summary{
    min-height:44px !important;
    padding:0 14px !important;
    border-radius:14px !important;
    transition:background .2s ease,color .2s ease !important;
  }
  .bg-configurator__line-panel:not([open]) summary:hover{
    background:#FAF7EF !important;
  }
  .bg-configurator__line-panel summary::after{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:22px !important;
    height:22px !important;
    background:#ffffff !important;
    border:1px solid #ECEBE7 !important;
    border-radius:999px !important;
    color:#7a6224 !important;
    font-size:.9rem !important;
  }
  .bg-configurator__line-panel summary:hover::after{
    border-color:#C8A96A !important;
  }
  /* Ligne dépliée : filet or discret pour situer la zone active */
  .bg-configurator__line-panel[open]{
    border-color:rgba(200,169,106,.55) !important;
  }
  /* Aperçu du texte saisi dans l'en-tête de ligne : un peu plus de place */
  .bg-configurator__line-panel summary strong{
    max-width:170px !important;
  }
  /* Focus or homogène sur les champs de la colonne droite */
  .bg-configurator__panel--right input[type="text"]:focus-visible,
  .bg-configurator__panel--right input[type="number"]:focus-visible,
  .bg-configurator__panel--right .bg-configurator__font-picker-button:focus-visible{
    border-color:#C8A96A !important;
    box-shadow:0 0 0 3px rgba(200,169,106,.22) !important;
    outline:none !important;
  }
  /* Utilitaires (tout sélectionner / uniformiser) : présence apaisée,
     pour ne pas concurrencer les vrais CTA en bas de colonne */
  .bg-configurator__select-all,
  .bg-configurator__equal-size{
    border:1px solid #d8d5cc !important;
    background:#ffffff !important;
    color:#5F6470 !important;
    font-size:.74rem !important;
  }
  .bg-configurator__select-all:hover,
  .bg-configurator__select-all:focus-visible,
  .bg-configurator__equal-size:hover,
  .bg-configurator__equal-size:focus-visible{
    border-color:#C8A96A !important;
    color:#7a6224 !important;
    background:#ffffff !important;
  }}

/* ---- 33. Prix estimé en direct (colonne droite) ----
   Alimenté par le JS (prix TTC du produit WooCommerce lié × quantité).
   Masqué partout par défaut ; visible uniquement en desktop quand le
   calcul est prêt (.is-ready) — le mobile garde son récapitulatif natif. */
.bg-configurator__price{ display:none !important; }
@media (min-width:721px){
  .bg-configurator__price.is-ready{
    display:flex !important;
    align-items:baseline !important;
    justify-content:space-between !important;
    gap:12px !important;
    order:3 !important;
    grid-column:1 / -1 !important;
    margin:2px 0 0 !important;
    padding:12px 2px 4px !important;
    border-top:1px solid #ECEBE7 !important;
  }
  .bg-configurator__price-copy{
    display:grid !important;
    gap:3px !important;
    min-width:0 !important;
  }
  .bg-configurator__price-label{
    color:#111827 !important;
    font-family:'Manrope',sans-serif !important;
    font-size:.72rem !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }
  .bg-configurator__price-detail{
    color:#5F6470 !important;
    font-family:'Inter',sans-serif !important;
    font-size:.74rem !important;
    line-height:1.4 !important;
  }
  .bg-configurator__price-total{
    flex:0 0 auto !important;
    color:#111827 !important;
    font-family:'Manrope',sans-serif !important;
    font-size:1.3rem !important;
    font-weight:800 !important;
    letter-spacing:-.01em !important;
    font-variant-numeric:tabular-nums !important;
  }}

/* ---- 34. Desktop seulement : thème choisi dans un menu déroulant ----
   Inspiré des configurateurs pro : un select compact remplace la pile de
   cartes d'occasions. Les cartes restent dans le DOM pour la feuille mobile. */
.bg-configurator__theme-dropdown{ display:none !important; }
@media (min-width:721px){
  .bg-configurator__theme-dropdown{
    display:grid !important;
    gap:6px !important;
    margin:0 !important;
  }
  .bg-configurator__theme-dropdown > span{
    color:#5F6470 !important;
    font-family:'Manrope',sans-serif !important;
    font-size:.68rem !important;
    font-weight:800 !important;
    letter-spacing:.1em !important;
    text-transform:uppercase !important;
  }
  .bg-configurator__theme-dropdown select{
    width:100% !important;
    min-height:46px !important;
    padding:10px 38px 10px 14px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    background-color:#ffffff !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F6470' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 14px center !important;
    border:1px solid #ECEBE7 !important;
    border-radius:12px !important;
    color:#111827 !important;
    font-family:'Inter',sans-serif !important;
    font-size:.9rem !important;
    cursor:pointer !important;
  }
  .bg-configurator__theme-dropdown select:hover,
  .bg-configurator__theme-dropdown select:focus-visible{
    border-color:#C8A96A !important;
    outline:none !important;
  }
  /* Les cartes d'occasions laissent la place au menu déroulant */
  .bg-configurator__theme-list .bg-configurator__theme-card{ display:none !important; }
  .bg-configurator__theme-list{ gap:0 !important; }
  /* Panneau gauche allégé : le label « Occasion » suffit */
  .bg-configurator__themes > h3{ display:none !important; }
  .bg-configurator__panel--left .bg-configurator__technique{ display:none !important; }}

/* ---- 35. Grand desktop (≥1181px) : tout le configurateur d'un coup d'œil ----
   Le panneau droit est dissous dans la grille principale (display:contents) :
   la colonne de droite ne garde que le traitement de texte, et les blocs
   verre / ajustement / actions / validation descendent sous l'aperçu.
   Le DOM ne bouge pas : mobile (≤720) et tablette (721-1180) inchangés.

   Grille :  [ thèmes ] [ aperçu            ] [ gravure ]
             [ thèmes ] [ verre | ajustement] [ gravure ]
             [ thèmes ] [ actions | valid.  ] [ gravure ]              */
@media (min-width:1181px){
  .bg-configurator{
    grid-template-columns:minmax(248px,.62fr) minmax(0,1fr) minmax(0,1fr) minmax(296px,.76fr) !important;
    grid-template-rows:auto auto auto !important;
    align-items:start !important;
    row-gap:18px !important;
  }
  .bg-configurator__panel--left{
    grid-column:1 !important;
    grid-row:1 / span 3 !important;
  }
  .bg-configurator__stage{
    grid-column:2 / span 2 !important;
    grid-row:1 !important;
    position:static !important;
  }
  /* L'aperçu ne monopolise plus l'écran : plafonné pour que la rangée
     verre/ajustement reste visible sans scroll sur un 1080p. */
  .bg-configurator__preview{
    min-height:0 !important;
    max-height:56vh !important;
  }
  .bg-configurator__canvas{
    max-height:calc(56vh - 24px) !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 auto !important;
  }
  /* Dissolution du panneau droit dans la grille */
  .bg-configurator__panel--right{ display:contents !important; }
  .bg-configurator__glass-choice{ grid-column:2 !important; grid-row:2 !important; }
  .bg-configurator__adjust--desktop{ grid-column:3 !important; grid-row:2 !important; }
  .bg-configurator__cta{ grid-column:2 !important; grid-row:3 !important; }
  .bg-configurator__validation{ grid-column:3 !important; grid-row:3 !important; }
  .bg-configurator__text-flow{
    grid-column:4 !important;
    grid-row:1 / span 3 !important;
    position:sticky !important;
    top:96px !important;
  }
  /* Les blocs extraits deviennent des cartes autonomes alignées */
  .bg-configurator__glass-choice,
  .bg-configurator__adjust--desktop,
  .bg-configurator__cta,
  .bg-configurator__validation,
  .bg-configurator__text-flow{
    align-self:stretch !important;
    min-width:0 !important;
    margin:0 !important;
    padding:18px !important;
    background:#ffffff !important;
    border:1px solid #ECEBE7 !important;
    border-radius:18px !important;
    box-shadow:0 10px 26px rgba(17,24,39,.05) !important;
  }
  .bg-configurator__text-flow{ align-self:start !important; }
  /* Titres de cartes homogènes */
  .bg-configurator__glass-choice > h3,
  .bg-configurator__adjust-head h3,
  .bg-configurator__validation > h3,
  .bg-configurator__text-flow > h3{
    margin:0 0 12px !important;
    color:#111827 !important;
    font-family:'Cormorant Garamond',serif !important;
    font-size:1.34rem !important;
    font-weight:500 !important;
    line-height:1.08 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
  }}

/* ---- 36. Grand desktop : hero compact (l'espace sert au configurateur) ----
   Le bandeau thèmes défilant est retiré sur cette page (il répète le menu
   déroulant) : --top-marquee-h passe à 0 et le header remonte. Le skin ne
   charge que sur la page configurateur, les autres pages sont intactes.
   Le titre H1 reste (SEO + contexte), l'accroche disparaît. */
@media (min-width:1181px){
  :root{ --top-marquee-h:0px; }
  .site-top-marquee{ display:none !important; }
  /* Le thème anime le top du header : on force le recalage sans bandeau. */
  #hdr{ top:0 !important; }
  .bg-configurator-hero{
    padding:112px 0 6px !important;
  }
  .bg-configurator-hero__title{
    font-size:1.5rem !important;
    line-height:1.05 !important;
    margin:0 !important;
  }
  .bg-configurator-hero__lead,
  .bg-configurator-hero__eyebrow{
    display:none !important;
  }}

/* ---- 37. Desktop : barre d'outils épurée, zéro doublon ----
   Retirés (dès 721px, ils existent ailleurs à l'écran) :
   - œil (= bouton « Visualiser le verre » des actions)
   - « Lignes » (= « Sélectionner toutes les lignes » de la colonne texte)
   - « BAT » (= « Générer mon BAT de gravure » des actions — même action)
   En grand desktop : une seule rangée, trois groupes logiques
   [vues] [zoom] [historique + fichier]. */
@media (min-width:721px){
  /* Spécificité (0,2,0) : le skin §30 re-affiche les vues en (0,2,0),
     il faut le battre à armes égales + ordre de cascade. */
  .bg-configurator__views .bg-configurator__view--icon,
  .bg-configurator__views .bg-configurator__view--select-lines,
  .bg-configurator__views .bg-configurator__view--bat{ display:none !important; }}
@media (min-width:1181px){
  .bg-configurator__toolbar{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }
  .bg-configurator__views,
  .bg-configurator__tools{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:6px !important;
    margin:0 !important;
    padding:5px !important;
    background:rgba(255,255,255,.9) !important;
    border:1px solid #ECEBE7 !important;
    border-radius:999px !important;
    box-shadow:0 8px 20px rgba(17,24,39,.05) !important;
  }
  .bg-configurator__view,
  .bg-configurator__tool{
    min-height:36px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:.7rem !important;
    letter-spacing:.02em !important;
  }
  /* Les loupes se passent de libellé (icônes univoques, title en tooltip) :
     la rangée unique tient sans déborder. */
  .bg-configurator__tool--zoom .bg-configurator__tool-label{ display:none !important; }
  .bg-configurator__tool--zoom{ padding:0 10px !important; }}

/* ---- 38. Grand desktop : colonne gauche = une seule carte « Bibliothèque » ---- */
@media (min-width:1181px){
  .bg-configurator__panel--left{
    padding:18px !important;
    background:#ffffff !important;
    border:1px solid #ECEBE7 !important;
    border-radius:18px !important;
    box-shadow:0 10px 26px rgba(17,24,39,.05) !important;
  }
  .bg-configurator__panel--left .bg-configurator__intro{
    margin:0 0 14px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
  }
  .bg-configurator__panel--left .bg-configurator__eyebrow{ display:none !important; }
  .bg-configurator__panel--left .bg-configurator__intro h2{
    margin:0 !important;
    font-size:1.34rem !important;
    line-height:1.08 !important;
  }
  /* Les sous-groupes se fondent dans la carte unique */
  .bg-configurator__themes,
  .bg-configurator__templates{
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
  }
  .bg-configurator__templates{
    margin-top:16px !important;
    padding-top:14px !important;
    border-top:1px solid #ECEBE7 !important;
  }}

/* ---- 39. Résumé BAT : lignes clé-valeur propres ----
   Base neutre (mobile garde des lignes empilées sobres) + raffinement desktop. */
.bg-configurator__sum-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.bg-configurator__sum-label{
  color:#5F6470;
  font-size:.74rem;
}
.bg-configurator__sum-value{
  min-width:0;
  color:#111827;
  font-weight:600;
  text-align:right;
  overflow-wrap:anywhere;
}
@media (min-width:1181px){
  .bg-configurator__summary{
    display:grid !important;
    gap:0 !important;
    padding:4px 14px !important;
  }
  .bg-configurator__sum-row{
    padding:9px 0 !important;
    border-bottom:1px solid #F1F0EC !important;
  }
  .bg-configurator__sum-row:last-child{ border-bottom:0 !important; }
  .bg-configurator__sum-label{
    font-family:'Manrope',sans-serif !important;
    font-size:.7rem !important;
    font-weight:700 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
  }
  .bg-configurator__sum-value{
    font-family:'Inter',sans-serif !important;
    font-size:.82rem !important;
  }}

/* ---- 40. Grand desktop : le canvas vide guide l'utilisateur ---- */
.bg-configurator__stage-hint{ display:none; }
@media (min-width:1181px){
  .bg-configurator__stage-hint:not([hidden]){
    display:block !important;
    margin:10px auto 0 !important;
    text-align:center !important;
    color:#5F6470 !important;
    font-family:'Inter',sans-serif !important;
    font-size:.8rem !important;
    line-height:1.4 !important;
  }}

/* ---- 41. Grand desktop : finitions (ajustement, sélecteur, alignements) ---- */
@media (min-width:1181px){
  /* Carte Ajustement : contenu centré verticalement, respiration égale */
  .bg-configurator__adjust--desktop{
    display:grid !important;
    align-content:center !important;
    gap:12px !important;
  }
  .bg-configurator__adjust--desktop .bg-configurator__hint{
    margin:0 !important;
    color:#5F6470 !important;
    font-size:.74rem !important;
  }
  /* Le menu déroulant respire dans la carte consolidée */
  .bg-configurator__theme-dropdown select{ font-size:.85rem !important; }}

/* ---- 42. Taille du texte, champ par champ (+ / −) ----
   Composant NEUF : aucune de ces classes n'existait, ce bloc ne peut donc rien
   repeindre d'existant — c'est pourquoi il est posé hors media query, là où la
   règle habituelle du skin est de s'en garder. Il le faut : sans lui la tablette
   (721-1180) et le mobile « legacy » affichaient des boutons de 9 × 18 px.
   Le réglage vit sur la ligne du libellé du champ : prénom et date se dosent
   séparément. L'atelier desktop le raffine (configurator-desktop.css §11),
   l'atelier mobile v2 ne le voit pas — il a son propre écran (gm-line__size). */
.bg-configurator__tpl-field-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.bg-configurator__tpl-textsize{
  display:inline-flex;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
  padding:2px;
  background:#ffffff;
  border:1px solid #ECEBE7;
  border-radius:999px;
}
/* 44 px : la cible tactile minimale, respectée dès le mobile. */
.bg-configurator__tpl-textsize button{
  width:44px;
  height:44px;
  min-width:44px;
  display:grid;
  place-items:center;
  padding:0;
  background:transparent;
  border:0;
  border-radius:50%;
  color:#111827;
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
}
.bg-configurator__tpl-textsize button:hover:not([disabled]){
  background:rgba(17,24,39,.07);
}
.bg-configurator__tpl-textsize button[disabled]{
  opacity:.3;
  cursor:default;
}
.bg-configurator__tpl-textsize > span{
  min-width:52px;
  text-align:center;
  color:#111827;
  font-family:'Manrope',sans-serif;
  font-size:.78rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* ---- 43. Replier / déplier : un chevron, et un mot ----
   Ces deux bascules — la liste des modèles, et chacune des quatre lignes de
   texte — s'annonçaient par un « + » ou un « − » dans un cercle. Un plus dans
   un rond, c'est « ajouter » dans toutes les interfaces du monde : personne ne
   peut deviner qu'il déplie une liste. Et le « − » (U+2212) dépend en plus de
   la police installée.

   Un chevron dessiné À LA BORDURE : aucun glyphe, donc rien à charger et rien
   qui puisse manquer, quel que soit le poste. Il pointe vers le bas quand c'est
   replié (« ça s'ouvre par en bas »), vers le haut quand c'est ouvert. Le
   bouton des modèles, qui a la largeur pour lui, dit en plus le mot.

   L'atelier mobile v2 ne voit rien de tout ça : il masque `.bg-configurator`
   et a ses propres écrans. */

/* Le cercle du repli « Modèles » reste : il accueille le chevron en son centre. */
.bg-configurator__collapse-icon{
  display:inline-grid;
  place-items:center;
}

/* Les lignes de texte, elles, perdent leur cercle : ici le pseudo-élément EST
   le chevron, il ne peut pas être à la fois la pastille et le signe. La
   section 32 en faisait une pastille de 22 px, en important — d'où ce
   contre-ordre. */
.bg-configurator__line-panel summary::after{
  width:8px !important;
  height:8px !important;
  min-width:0 !important;
  background:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:0 !important;
}

/* Socle commun aux deux chevrons. */
.bg-configurator__collapse-icon::before,
.bg-configurator__line-panel summary::after{
  content:"" !important;
  /* Un pseudo-élément en display:inline IGNORE transform : sans ce bloc, le
     chevron du repli « Modèles » restait figé vers le bas. */
  display:block !important;
  width:7px !important;
  height:7px !important;
  box-sizing:border-box !important;
  border:0 !important;
  border-right:2px solid currentColor !important;
  border-bottom:2px solid currentColor !important;
  /* Rotation autour du centre optique du chevron, pas de sa boîte : sans le
     décalage il « saute » d'un état à l'autre. */
  transform:translateY(-2px) rotate(45deg) !important;
  transition:transform .2s ease;
}

/* Déplié : le chevron se retourne vers le haut.
   L'état est lu sur aria-expanded du bouton — parent DIRECT de l'icône, et
   déjà tenu à jour par setTemplatesCollapsed(). Une condition posée sur la
   classe de la section, un ancêtre plus lointain, ne prenait pas. */
.bg-configurator__collapse[aria-expanded="true"] .bg-configurator__collapse-icon::before,
.bg-configurator__line-panel[open] summary::after{
  content:"" !important;
  transform:translateY(2px) rotate(-135deg) !important;
}

/* Le mot, sur le seul bouton qui a la largeur pour l'accueillir. */
.bg-configurator__collapse::after{
  content:"Déplier";
  margin-left:auto;
  padding-right:8px;
  color:#5F6470;
  font-family:'Manrope',sans-serif;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.bg-configurator__collapse[aria-expanded="true"]::after{
  content:"Replier";
}

/* ---- 44. Texte trop long : l'avertissement sous le verre ----
   Visible À TOUTES LES LARGEURS, contrairement à .stage-hint qui n'apparaît
   qu'en grand desktop et que la coque mobile masque : un avertissement qui ne
   s'affiche pas sur téléphone ne sert à rien.
   Ton ambre et non rouge : ce n'est pas une panne, c'est une indication —
   le client doit raccourcir son texte, pas croire que le site est cassé. */
.bg-configurator__stage-alert[hidden]{ display:none !important; }

.bg-configurator__stage-alert:not([hidden]){
  display:block;
  max-width:520px;
  margin:12px auto 0;
  padding:10px 14px;
  border-radius:12px;
  background:#FBF1DD;
  border:1px solid #E7D2A2;
  color:#7A5B12;
  text-align:center;
  font-family:'Inter',sans-serif;
  font-size:.82rem;
  line-height:1.45;
}

/* Grand desktop : la scène est un conteneur positionné et l'invitation de
   départ y flotte. L'avertissement prend la même place, pour ne pas pousser
   le verre vers le haut en apparaissant. */
@media (min-width:1181px){
  .bg-configurator__stage-alert:not([hidden]){
    position:absolute;
    left:50%;
    bottom:76px;
    z-index:4;
    transform:translateX(-50%);
    width:min(440px, calc(100% - 40px));
    margin:0;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
  }}

/* ---- 40. Panier dans l'atelier : pastille permanente + confirmation ----
   Le client compose souvent plusieurs verres à la suite. L'ajout ne le sort
   plus de l'atelier : il lui faut donc (a) un repère permanent de ce qu'il a
   déjà mis de côté, (b) une confirmation qui se montre sur place.

   Ce bloc porte l'IDENTITÉ des deux composants (une seule fois, pour les trois
   habillages) ; le PLACEMENT propre à chaque couche est repris plus bas dans
   ce même bloc (mise en page classique) puis dans configurator-mobile.css
   (html.gm) et configurator-desktop.css (html.gd), chargés après.

   Jetons repris de base.css — aucune couleur inventée :
   --line/--ink/--muted (filets et encres), --gold + --champ (le dégradé or du
   compteur, déjà employé par les badges du dock mobile), --gold-ink (le SEUL
   or admis pour du texte sur fond clair : l'or décoratif #C8A96A ne tient que
   2,3:1), --shadow-soft, --r-card, --head, --ease. */

/* --- Pastille --------------------------------------------------- */

.gl-cart-pill{
  display:flex;             /* bloc de niveau : `margin-left:auto` peut aligner */
  width:max-content;
  max-width:100%;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 14px 0 11px;
  border:1px solid var(--line,#ECEBE7);
  /* Rayon plein : la pastille est une capsule, comme les groupes d'outils
     flottants de l'atelier — elle appartient à la même famille visuelle. */
  border-radius:999px;
  /* Voile translucide identique aux barres d'outils de l'atelier : la pastille
     se pose SUR la scène sans masquer le verre qu'elle recouvre. */
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--shadow-soft,0 10px 30px rgba(0,0,0,.06));
  color:var(--ink,#111827);
  font-family:var(--head,'Manrope',sans-serif);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .2s var(--ease,ease), box-shadow .2s var(--ease,ease), border-color .2s var(--ease,ease);
}

/* `hidden` doit gagner : sans cela, le `display:flex` ci-dessus écrase le
   `display:none` de l'agent utilisateur et la pastille s'affiche à vide. */
.gl-cart-pill[hidden]{ display:none !important; }

.gl-cart-pill:hover,
.gl-cart-pill:focus-visible{
  border-color:var(--gold,#C8A96A);
  box-shadow:0 12px 30px rgba(17,24,39,.12);
  transform:translateY(-1px);
}

.gl-cart-pill:focus-visible{
  outline:2px solid var(--gold-ink,#7A6224);
  outline-offset:2px;
}

.gl-cart-pill__icon{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  color:var(--muted,#5F6470);
}

.gl-cart-pill__icon svg{ display:block; }

/* Compteur : reprise EXACTE du badge du dock mobile (dégradé or sur pastille
   ronde, encre très sombre) — un composant qui existe déjà dans l'atelier. */
.gl-cart-pill__count{
  min-width:20px;
  height:20px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(120deg,var(--gold,#C8A96A),var(--champ,#E6D4A3));
  color:var(--lux,#0B1220);
  font-size:.72rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* Le total est le seul texte or de la pastille : sur fond clair, il passe
   obligatoirement par --gold-ink (5,4:1) et non par l'or décoratif. */
.gl-cart-pill__total{
  color:var(--gold-ink,#7A6224);
  font-variant-numeric:tabular-nums;
}

/* Total absent (panier vidé par le JS) : pas de blanc résiduel avant lui. */
.gl-cart-pill__total:empty{ display:none; }

/* --- Confirmation en place --------------------------------------- */

/* Carte posée SUR la scène, centrée en bas : le regard y est déjà au moment du
   clic, et rien n'est poussé dans la page (aucun saut de mise en page).
   `position:absolute` et non `fixed` : la scène porte un `backdrop-filter`
   dans la mise en page classique, ce qui en fait de toute façon le bloc
   conteneur des descendants fixés — autant l'assumer et rester déterministe
   dans les trois couches. */
.gl-cart-done{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:6;
  transform:translateX(-50%);
  width:min(420px,calc(100% - 32px));
  display:grid;
  /* UNE colonne. Les deux actions se partageaient une rangée ; il y en a
     trois désormais, et elles ne pèsent pas le même poids — les empiler est
     la seule façon de les classer. */
  grid-template-columns:1fr;
  gap:12px;
  padding:16px;
  border:1px solid var(--line,#ECEBE7);
  border-radius:var(--r-card,20px);
  background:#FFFFFF;
  box-shadow:0 18px 44px rgba(17,24,39,.16);
  font-family:var(--head,'Manrope',sans-serif);
  animation:gl-cart-done-in .24s var(--ease,ease) both;
}

.gl-cart-done[hidden]{ display:none !important; }

@keyframes gl-cart-done-in{
  from{ opacity:0; transform:translate(-50%,12px); }
  to{   opacity:1; transform:translate(-50%,0); }
}

.gl-cart-done__text{
  margin:0 !important;
  color:var(--ink,#111827) !important;
  font-family:var(--head,'Manrope',sans-serif) !important;
  font-size:.9rem !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  text-align:center;
}

/* LES TROIS SUITES, DANS L'ORDRE DE CE QU'ELLES ENGAGENT.
   Voir le panier (on avance vers la commande), composer une autre gravure
   (on repart d'une page blanche), modifier celle-ci (on ne bouge pas). Le
   troisième n'est plus un bouton : rester où l'on est ne mérite pas le même
   poids que les deux qui emmènent ailleurs. */
.gl-cart-done__actions{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

/* Ce que la reprise n'a pas pu rendre.
   Un AVERTISSEMENT, pas une erreur : la gravure est la, il manque un geste.
   L'ambre le dit sans affoler — le rouge est reserve a ce qui empeche. */
.gl-reprise{
  margin:0 0 12px;
  padding:11px 14px;
  border:1px solid rgba(180,120,20,.35);
  border-left:3px solid #b47814;
  border-radius:12px;
  background:rgba(255,244,224,.9);
  color:#6b4708;
  font-size:13px;
  line-height:1.5;
}
.gl-reprise[hidden]{display:none}
/* La coque mobile (html.gm) repeint TOUS les paragraphes en `--gm-ink`, avec
   une specificite de 0,2,0 que `.gl-reprise` seule ne peut pas atteindre : le
   bandeau changeait donc d'encre d'un format a l'autre. Il porte son propre
   fond, il doit porter sa propre encre — dans les deux coques. */
html.gm .gm p.gl-reprise{color:#6b4708}

/* « Garder ce modele » : la zone de nommage, repliee tant qu'on n'a pas
   demande a garder. Elle ne prend donc aucune place dans le cas courant. */
.gl-cart-save{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(200,169,106,.35);
}
.gl-cart-save[hidden]{display:none}
.gl-cart-save__label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  letter-spacing:.04em;
  opacity:.75;
}
.gl-cart-save__row{
  display:flex;
  gap:8px;
  align-items:stretch;
}
.gl-cart-save__input{
  flex:1 1 auto;
  min-width:0;
  padding:9px 12px;
  border:1px solid rgba(17,24,39,.18);
  border-radius:12px;
  font:inherit;
  font-size:14px;
  background:#fff;
}
.gl-cart-save__input:focus{
  outline:none;
  border-color:#C8A96A;
  box-shadow:0 0 0 3px rgba(200,169,106,.22);
}
.gl-cart-save__ok{
  flex:0 0 auto;
  padding:9px 16px;
  border:1px solid #C8A96A;
  border-radius:999px;
  background:#C8A96A;
  color:#0B1220;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
}
.gl-cart-save__ok:disabled{opacity:.55;cursor:default}
.gl-cart-save__note{
  margin:8px 0 0;
  font-size:12.5px;
  line-height:1.45;
  opacity:.8;
}
/* L'echec se dit en rouge ; la reussite garde le ton du reste. */
.gl-cart-save__note[data-erreur]{color:#9b2c2c;opacity:1}
/* Enregistre : le champ et le bouton n'ont plus rien a proposer. */
.gl-cart-save[data-fait] .gl-cart-save__row,
.gl-cart-save[data-fait] .gl-cart-save__label{display:none}

.gl-cart-done__view,
.gl-cart-done__new{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  /* Échelle de rayons du design system : 14 pour les boutons. */
  border-radius:var(--r-btn,14px);
  font-family:var(--head,'Manrope',sans-serif);
  font-size:.86rem;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s var(--ease,ease), background .18s var(--ease,ease);
}

/* Action principale : le même dégradé or que le bouton « Ajouter au panier »
   de l'atelier mobile — la confirmation prolonge le geste, elle ne le rejoue
   pas dans un autre langage. */
.gl-cart-done__view{
  border:0;
  background:linear-gradient(120deg,var(--gold,#C8A96A),var(--champ,#E6D4A3));
  color:var(--lux,#0B1220);
  box-shadow:0 8px 22px rgba(200,169,106,.32);
}

/* Action secondaire : repartir d'un atelier vierge. Contour discret, pas de
   couleur concurrente — c'est une alternative, pas un avertissement. */
.gl-cart-done__new{
  border:1px solid var(--line,#ECEBE7);
  background:#FFFFFF;
  color:var(--ink,#111827);
}

.gl-cart-done__new:hover{ background:var(--off,#FAFAF8); }

/* Ne rien faire d'autre que rester : un lien, pas un bouton. Il ferme la
   carte et rend l'atelier tel qu'on l'a laissé. */
.gl-cart-done__close{
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:none;
  padding:0;
  color:var(--muted,#5F6470);
  font-family:var(--head,'Manrope',sans-serif);
  font-size:.82rem;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

.gl-cart-done__close:hover{ color:var(--ink,#111827); }

.gl-cart-done__view:active,
.gl-cart-done__new:active{ transform:scale(.985); }

.gl-cart-done__view:focus-visible,
.gl-cart-done__new:focus-visible,
.gl-cart-done__close:focus-visible{
  outline:2px solid var(--gold-ink,#7A6224);
  outline-offset:2px;
}

/* La règle générale de §31 ne couvre que `.bg-configurator *` : sur mobile la
   scène (et donc ces deux composants) est déplacée hors de ce conteneur. */
@media (prefers-reduced-motion:reduce){
  .gl-cart-pill,
  .gl-cart-done,
  .gl-cart-done__view,
  .gl-cart-done__close{
    animation:none !important;
    transition:none !important;
  }
  .gl-cart-pill:hover,
  .gl-cart-pill:focus-visible{ transform:none; }
}

/* --- Placement — COUCHE CLASSIQUE (ni html.gm, ni html.gd) --------
   Ici la page défile normalement et la barre d'outils de la scène occupe déjà
   toute la largeur en haut du bloc d'aperçu : la pastille se pose EN AMONT de
   cette barre, dans le flux, calée à droite. Aucun recouvrement possible, et
   elle reste le premier élément lu de la scène. `order:-1` couvre le cas
   ≤720 px en repli (`?ui=legacy`), où la scène est une colonne flex ordonnée. */
.bg-configurator__stage > .gl-cart-pill{
  order:-1;
  margin:0 0 10px auto;
  align-self:flex-end;
}

/* ==================================================================
   45. La note d'édition
   ==================================================================
   C'ÉTAIT UN BOUTON PLEINE LARGEUR, EN PERMANENCE.
   « Personnaliser un autre verre », 44 px de haut plus ses marges, posé sous
   la grande touche dorée dès que l'atelier était rattaché à une ligne. Mesuré
   à 375 px : la barre d'action passait de 129 à 190 px, et ces 61 px étaient
   pris SUR LA SCÈNE — 553 px de verre tombaient à 492. Onze pour cent de
   l'objet que le client regarde, pour une action qu'il fera une fois au plus.

   La décision « un autre verre » ne se prend pas pendant la composition : elle
   est offerte au moment de l'ajout (§44, `.gl-cart-done`), et sur la page
   panier. Ne reste ici que le cas où l'atelier modifie vraiment une ligne —
   on y arrive par le lien « modifier la gravure » du panier. Une phrase qui
   dit l'état, un lien pour en sortir. */

/* UNE SEULE LIGNE, phrase et lien compris.
   Empilés, ils coûtaient 71 px mesurés — plus cher que le bouton qu'ils
   remplacent, ce qui aurait tout raté. Côte à côte, ils tiennent sur une
   ligne : la phrase dit l'état, le lien donne la sortie, et la scène ne perd
   qu'un interligne. */
.glassora-cart-edit-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 6px;
	margin: 4px 0 0;
	padding: 0;
	color: var( --muted, #5F6470 );
	font-family: var( --head, inherit );
	font-size: .72rem;
	line-height: 1.4;
	text-align: center;
}

.glassora-cart-edit-note[hidden] {
	display: none !important;
}

/* Un lien, pas un bouton : il ne rivalise pas avec la touche d'ajout, il
   propose une autre route. */
.glassora-cart-new-item {
	display: inline-block;
	margin: 0;
	padding: 5px 2px;
	background: none;
	border: 0;
	color: var( --gold-ink, #7A6224 );
	font-family: var( --head, inherit );
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color .18s var( --ease, ease );
}

.glassora-cart-new-item:hover {
	color: var( --ink, #111827 );
}

.glassora-cart-new-item:focus-visible {
	outline: 2px solid var( --gold-ink, #7A6224 );
	outline-offset: 2px;
}

.glassora-cart-new-item[hidden] {
	display: none !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.glassora-cart-new-item {
		transition: none;
	}
}

/* ==================================================================
   46. Apercu du panier dans l'atelier
   ==================================================================
   RIEN ICI, ET C'EST VOULU.

   Cette section reprenait, valeur pour valeur, les regles de la feuille du
   panier — a charge pour qui les modifiait de tenir les deux copies
   identiques. Elles avaient deja diverge : l'alerte du pied, le sceau et le
   bouton « Voir et valider » n'existaient que dans la feuille canonique.
   Et comme cette peau se charge APRES elle sur la page de l'atelier, la
   copie perimee gagnait : une refonte de la feuille s'appliquait partout
   SAUF la ou le client compose sa gravure.

   glassora-mini-cart.css est desormais la seule definition. Elle est
   chargee ici aussi (cf. Glassora_Cart::enqueue_mini_cart_assets). */


/* --- Fermeture de l'avertissement de zone -------------------------- */
/* Le bandeau flotte au-dessus du HAUT du verre — la ou le texte est grave.
   Il masque donc precisement ce que le client essaie de corriger, et il ne
   part que si la correction reussit : impasse. Il se ferme desormais, et ne
   revient qu'apres un retour a la normale. */

/* `:not([hidden])` pour egaler la specificite de la regle §44, qui impose
   `display: block` : sans cela la fermeture retombait a la ligne, en bas a
   gauche du bandeau. */
.bg-configurator__stage-alert:not( [hidden] ) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.bg-configurator__stage-alert[hidden] {
	display: none !important;
}

.bg-configurator__stage-alert-text {
	flex: 1 1 auto;
	min-width: 0;
}

.bg-configurator__stage-alert-close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin: -4px -4px 0 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: inherit;
	opacity: .65;
	cursor: pointer;
	transition: opacity .16s var( --ease, ease ), background .16s var( --ease, ease );
}

.bg-configurator__stage-alert-close:hover,
.bg-configurator__stage-alert-close:focus-visible {
	opacity: 1;
	background: rgba( 17, 24, 39, .07 );
}

.bg-configurator__stage-alert-close:focus-visible {
	outline: 2px solid var( --gold-ink, #7A6224 );
	outline-offset: 1px;
}

@media ( prefers-reduced-motion: reduce ) {
	.bg-configurator__stage-alert-close { transition: none; }
}

/* ==================================================================
   47. Nombre de verres : un pas-a-pas a cote du prix
   ==================================================================
   Il etait enterre dans un onglet. Or la quantite est une decision
   COMMERCIALE : sa place est avec l'argent, pas avec les outils de dessin —
   et le montant se recalcule alors sous les yeux, cause et consequence dans
   le meme regard. Le pas de 6 enseigne la regle de la boite sans un mot ;
   un champ libre inviterait a taper 7 et a se faire refuser. */

.gl-qty {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: var( --off, rgba( 17, 24, 39, .04 ) );
	border: 1px solid var( --line, rgba( 17, 24, 39, .1 ) );
	border-radius: 999px;
}

.gl-qty__btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var( --surface, #FFFFFF );
	border: 1px solid var( --line, rgba( 17, 24, 39, .1 ) );
	border-radius: 999px;
	color: var( --ink, #111827 );
	font-family: var( --head, inherit );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: border-color .16s var( --ease, ease ), background .16s var( --ease, ease );
}

.gl-qty__btn:hover:not( [disabled] ) {
	border-color: var( --gold-ink, #7A6224 );
}

.gl-qty__btn[disabled] {
	opacity: .38;
	cursor: default;
}

.gl-qty__btn:focus-visible {
	outline: 2px solid var( --gold-ink, #7A6224 );
	outline-offset: 1px;
}

.gl-qty__val {
	min-width: 84px;
	padding: 0 6px;
	color: var( --ink, #111827 );
	font-family: var( --head, inherit );
	font-size: .84rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	white-space: nowrap;
}

@media ( prefers-reduced-motion: reduce ) {
	.gl-qty__btn { transition: none; }
}

/* --- Feuille de quantite ------------------------------------------- */

.gl-qty-sheet__body {
	padding: 18px;
}

.gl-qty--large {
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding: 4px;
}

.gl-qty--large .gl-qty__btn {
	width: 48px;
	height: 48px;
	font-size: 1.15rem;
}

.gl-qty--large .gl-qty__val {
	font-size: 1rem;
}

.gl-qty-sheet__note {
	margin: 10px 0 0;
	color: var( --muted, #5F6470 );
	font-size: .8rem;
	text-align: center;
}

.gl-qty-sheet__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var( --line, rgba( 17, 24, 39, .1 ) );
	color: var( --muted, #5F6470 );
	font-size: .88rem;
}

.gl-qty-sheet__total strong {
	color: var( --gold-ink, #7A6224 );
	font-family: var( --head, inherit );
	font-size: 1.2rem;
	font-variant-numeric: tabular-nums;
}

/* ── Une face vide alors que le recto/verso est demandé ─────────────────────
   Même écriture que `.gl-cart-done` : la question se pose au même endroit et
   au même moment du parcours, elle doit s'y présenter pareil. Deux différences
   assumées — le filet or, parce qu'il s'agit d'une décision et non d'une
   confirmation ; et deux actions au lieu de trois, côte à côte, parce
   qu'elles s'opposent. */
.gl-face-vide{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:7;
  transform:translateX(-50%);
  width:min(420px,calc(100% - 32px));
  display:grid;
  gap:10px;
  padding:16px;
  border:1px solid var(--gold,#C8A96A);
  border-radius:var(--r-card,20px);
  background:#FFFFFF;
  box-shadow:0 18px 44px rgba(17,24,39,.16);
  font-family:var(--head,'Manrope',sans-serif);
  animation:gl-cart-done-in .24s var(--ease,ease) both;
}

.gl-face-vide[hidden]{ display:none !important; }

.gl-face-vide__titre{
  margin:0 !important;
  color:var(--ink,#111827) !important;
  font-family:var(--head,'Manrope',sans-serif) !important;
  font-size:.95rem !important;
  font-weight:700 !important;
  line-height:1.35 !important;
}

.gl-face-vide__texte{
  margin:0 !important;
  color:var(--muted,#5F6470) !important;
  font-family:var(--body,'Inter',sans-serif) !important;
  font-size:.84rem !important;
  line-height:1.55 !important;
}

.gl-face-vide__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}

.gl-face-vide__seule,
.gl-face-vide__garder{
  flex:1 1 150px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:var(--r-btn,14px);
  font-family:var(--head,'Manrope',sans-serif);
  font-size:.84rem;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  transition:background .25s var(--ease,ease),border-color .25s var(--ease,ease);
}

/* L'action recommandée porte le poids : c'est celle qui lève l'ambiguïté pour
   l'atelier, et elle ne perd rien au client. */
.gl-face-vide__seule{
  border:1px solid var(--navy,#111827);
  background:var(--navy,#111827);
  color:#FFFFFF;
}

.gl-face-vide__seule:hover{ background:var(--lux,#0B1220); }

.gl-face-vide__garder{
  border:1px solid var(--line,#ECEBE7);
  background:#FFFFFF;
  color:var(--ink,#111827);
}

.gl-face-vide__garder:hover{ background:var(--off,#FAFAF8); }

/* Le pas-a-pas de quantite se declare dans glassora-mini-cart.css, avec le
   reste de la feuille du panier (cf. section 46). */