/* =========================
   CONFIGURATEUR DOUCHE - CSS DEDIE (nettoyé)
   ========================= */

/* bloc intro */
.vm-config-intro { margin: 0 0 18px 0; }
.vm-config-intro .texte { margin: 8px 0 0 0; }

/* bloc info */
.vm-blocinfo{
  border:1px solid #e6e6e6;
  background:#fafafa;
  padding:12px 14px;
  margin:14px 0;
}

/* step */
.vm-step-title{ margin-top:18px; }
.vm-step-sub{ margin-top:6px; }
.vm-step{ scroll-margin-top:120px; } /* ajuste selon header */

#top{ scroll-margin-top:120px; }
#step2{ scroll-margin-top:120px; }

/* =========================
   GRILLES & CARTES (base)
   ========================= */

/* grid (par défaut 4 colonnes) */
.vm-config-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  overflow:visible;
}

/* responsive grid */
@media (max-width: 980px){
  .vm-config-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .vm-config-grid{ grid-template-columns:1fr; }
}

/* carte (base) */
.vm-config-card{
  position:relative;
  display:block;
  width:auto;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.10);
  border-radius:10px;
  background:#fff;
  padding:10px;
  min-height:260px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* image base */
.vm-config-card img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #f0f0f0;
  background:#fff;
  transform-origin:center;
  transition:transform .18s ease;
}

/* titre/desc base */
.vm-config-title{
  display:block;
  font-weight:700;
  margin-top:8px;
  color:#222;
}
.vm-config-desc{
  display:block;
  margin-top:4px;
  color:#555;
  font-size:12px;
  line-height:1.35em;
}

/* radio caché (access ok) */
.vm-config-card input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* hover base (sans zoom image ici !) */
.vm-config-card:hover{
  border-color:#4da6a4;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  transform:translateY(-2px);
}

/* selected */
.vm-config-card.is-selected{
  border-color:#4da6a4;
  box-shadow:0 0 0 3px rgba(77,166,164,0.16);
}

/* =========================
   ETAPE 1 : UX survol + zoom image
   -> IMPORTANT : ne doit pas s'appliquer au Step3
   ========================= */

/* Si possible, ajoute class="vm-step1-grid" sur la grille Step1.
   Sinon, remplace .vm-step1-grid par l'id/parent réel de ta grille Step1. */
.vm-step1-grid .vm-config-card:hover img{
  transform:scale(1.5);
}

/* fallback si tu n'ajoutes pas vm-step1-grid :
   tu peux décommenter une règle basée sur ton DOM réel (ex: #vmStep1 .vm-config-card:hover img) */
/*
#vmStep1 .vm-config-card:hover img{
  transform:scale(1.5);
}
*/

/* =========================
   CTA / actions
   ========================= */
.vm-config-actions{ margin-top:14px; }

.vm-btn-next{
  display:inline-block;
  padding:10px 14px;
  border:0;
  background:#4da6a4;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.vm-btn-next:disabled{ opacity:.5; cursor:not-allowed; }

.vm-btn-link{
  display:inline-block;
  margin-left:10px;
  color:#333;
  text-decoration:underline;
}

@media (max-width: 980px){
  .vm-btn-next{ width:100%; }
  .vm-btn-link{ display:block; margin:10px 0 0 0; }
}

/* =========================
   STEP 2 : dynamique (champs)
   ========================= */
.vm-step2-wrap{ margin-top:12px; }

.vm-mode-chooser{
  margin:10px 0 12px 0;
  padding:10px;
  border:1px solid #e6e6e6;
  background:#fff;
}
.vm-mode-chooser .texte{ margin:0 0 6px 0; }
.vm-mode-chooser label{ display:block; margin:6px 0; cursor:pointer; }

.vm-fields{
  border:1px solid #e6e6e6;
  background:#fff;
  padding:10px;
}
.vm-field-row{
  display:flex;
  gap:10px;
  align-items:center;
  padding:6px 0;
  border-bottom:1px dotted #efefef;
}
/* Champs clés : hauteur + largeur du verre */
#vmH_verre,
#vmL_verre{
  background:#fff6f0;
  border:2px solid rgba(241,90,36,0.45);
  font-weight:900;
}
/* Labels des cotes clés */
#vmH_verre,
#vmL_verre{
  box-shadow:0 0 0 2px rgba(241,90,36,0.12);
}
/* Cotes secondaires : mur/mur + passage */
#vmL_mur,
#vmL_passage{
  background:#f6f6f6;
  color:#777;
  border-color:#ddd;
}
/* Labels atténués pour cotes secondaires */
#vmL_mur,
#vmL_passage{
  font-weight:600;
}
/* Ligne complète des cotes secondaires légèrement atténuée */
.vm-field-row:has(#vmL_mur),
.vm-field-row:has(#vmL_passage){
  opacity:0.75;
}

.vm-field-row:last-child{ border-bottom:0; }

.vm-field-label{
  width:260px;
  max-width:45%;
  font-weight:700;
}
.vm-field-input{ flex:1; }

.vm-field-tip{
  margin-left:260px;
  max-width:600px;
  color:#666;
  font-size:12px;
  line-height:1.35em;
  padding:0 0 8px 0;
}

@media (max-width: 760px){
  .vm-field-row{ display:block; }
  .vm-field-label{ width:auto; max-width:none; margin-bottom:6px; }
  .vm-field-tip{ margin-left:0; }
}

.vm-input{ width:140px; padding:6px; }
.vm-input-wide{ width:220px; }

.vm-invalid{
  border:1px solid #d33 !important;
  box-shadow:0 0 0 2px rgba(221,51,51,0.10);
}

/* résumé modèle sélectionné */
.vm-modele-selected{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 16px;
  border:1px solid #e2e2e2;
  background:#fafafa;
  margin-bottom:18px;
}
.vm-modele-selected-text{ flex:1; }
.vm-modele-title{ font-size:17px; font-weight:600; }
#vmModeleLabel{ color:#f15a24; font-weight:800; }
.vm-modele-sub{ margin-top:4px; font-size:13px; color:#666; }
.vm-modele-selected-img img{
  max-width:160px;
  height:auto;
  border:1px solid #ddd;
  background:#fff;
  padding:6px;
}
@media (max-width: 700px){
  .vm-modele-selected{ flex-direction:column; align-items:flex-start; }
  .vm-modele-selected-img img{ max-width:220px; }
}

/* =========================
   Step2 : Quincaillerie
   ========================= */
.vm-hw{
  margin:32px 0 16px 0;
  border:1px solid #e6e6e6;
  background:#fff;
  padding:12px;
}

.vm-hw-title{ font-weight:700; margin-bottom:10px; }

.vm-hw-row{
  display:flex;
  gap:12px;
  align-items:center;        /* ✅ au lieu de flex-start */
  flex-wrap:wrap;            /* ✅ permet à la note de passer dessous proprement */
  padding:8px 0;
  border-top:1px dotted #efefef;
}
.vm-hw-row:first-of-type{ border-top:0; }

.vm-hw-label{
  width:260px;
  max-width:45%;
  font-weight:700;
}

.vm-hw-options{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;        /* ✅ */
}

/* boutons */
.vm-opt{
  border:1px solid #e6e6e6;
  background:#fafafa;
  padding:8px 12px;
  cursor:pointer;
  user-select:none;
  font-weight:600;

  display:inline-flex;       /* ✅ meilleure tenue */
  align-items:center;
  justify-content:center;
  min-height:38px;           /* ✅ boutons de hauteur constante */
  line-height:1.1;
}
.vm-opt small{
  display:block;
  margin-top:2px;
  font-weight:400;
  color:#666;
  font-size:12px;
}
.vm-opt.is-selected{
  border-color:#4da6a4;
  box-shadow:0 0 0 3px rgba(77,166,164,0.14);
  background:#fff;
}
.vm-opt.is-disabled{
  opacity:0.35;
  cursor:not-allowed;
  filter:grayscale(1);
}

/* ✅ la note doit prendre toute la ligne sous les options 
.vm-hw-note{
  flex:1 1 100%;
  margin-left:260px;
  margin-top:8px;
  padding:8px 10px;
  background:#fff7ee;
  border:1px solid #ffd7b6;
  color:#8a4b16;
  font-size:12px;
  line-height:1.35em;
}*/
.vm-hw-note{
    background:#fff7ee;
  border:1px solid #ffd7b6;
  color:#8a4b16;
  display:block;
  width:100%;
  max-width:100%;
  margin-top:10px;
  padding:10px 14px;
  font-size:14px;
  line-height:1.4;
}


@media (max-width: 760px){
  .vm-hw-row{ display:block; }
  .vm-hw-label{ width:auto; max-width:none; margin-bottom:6px; }
  .vm-hw-note{ margin-left:0; }
}

/* =========================
   Actions (save)
   ========================= */
.vm-config-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.vm-actions-left,
.vm-actions-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.vm-btn-save{
  background:#e6f2ff;
  border:1px solid #b9d7ff;
  color:#2b5f9e;
  padding:10px 14px;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
}
.vm-btn-save:hover{ background:#d7ebff; }
.vm-btn-save:disabled{ opacity:.45; cursor:not-allowed; }

.vm-save-link{
  display:inline-block;
  margin-left:10px;
  padding:6px 10px;
  border:1px solid #ddd;
  border-radius:6px;
  background:#fafafa;
}

/* =========================
   STEP 3 : VERRE (plein largeur / 4 colonnes)
   - pas de zoom image
   - description tooltip au hover
   - pas de prix
   ========================= */
#vmGlassGrid{
  /* force 4 colonnes même si responsive base modifie */
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}

@media (max-width: 1100px){
  #vmGlassGrid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 800px){
  #vmGlassGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  #vmGlassGrid{ grid-template-columns:1fr; }
}

/* Step3 : jamais de zoom image */
#vmGlassGrid .vm-config-card:hover img{
  transform:none !important;
}

/* Step3 : description tooltip */
#vmGlassGrid .vm-config-desc{
  display:none;
  position:absolute;
  left:10px; right:10px; bottom:10px;
  background:rgba(0,0,0,.78);
  color:#fff;
  padding:10px;
  border-radius:8px;
  font-size:13px;
  line-height:1.25;
  z-index:5;
}
#vmGlassGrid .vm-config-card:hover .vm-config-desc{
  display:block;
}

/* Step3 : cacher prix/promo (même si le JS en injecte encore) */
#vmGlassGrid .vm-glass-price,
#vmGlassGrid .vm-badge-promo{
  display:none !important;
}
/* Dimensions + visuel à droite */
.vm-dimbox{ padding:12px; }
.vm-dimbox-grid{
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.vm-dimbox-fields{ flex: 1; min-width: 320px; }
.vm-dimbox-img{
  width: 220px;
  max-width: 35%;
  border:1px solid #eee;
  background:#fff;
  border-radius:8px;
  padding:10px;
}
.vm-dimbox-img img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}

@media (max-width: 900px){
  .vm-dimbox-grid{ display:block; }
  .vm-dimbox-img{ width:auto; max-width:none; margin-top:10px; }
}
/* Récap accessoires */
#vmR_items { list-style:none; padding:0; margin:0; }

#vmR_items .vm-r-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 10px;
  border-bottom:1px solid #e6e6e6;
}

#vmR_items .vm-r-img{
  width:86px;
  height:86px;
  object-fit:contain;
  flex:0 0 86px;
  background:#fff;
  border:1px solid #eee;
  border-radius:8px;
}

#vmR_items .vm-r-txt{
  flex:1 1 auto;
  min-width:0;
}

#vmR_items .vm-r-title{
  font-weight:600;
  line-height:1.25;
  margin-bottom:6px;
}

#vmR_items .vm-r-price{
  font-weight:800;
  font-size:16px;
  color:#1e73be; /* bleu (mets #f15a24 si tu préfères orange) */
}

#vmR_items .vm-r-change{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.15);
  background:rgba(255,255,255,0.60); /* effet "verre" */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight:700;
  cursor:pointer;
}

#vmR_items .vm-r-change:hover{
  background:rgba(255,255,255,0.80);
}
/* =========================
   RÉCAP PROJET (STEP 3) - UX
   ========================= */

.vm-recapbox{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:18px;
}

.vm-recap-h3{
  margin:0 0 14px 0;
  font-size:18px;
}

.vm-recapline{
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid #ededed;
}

.vm-recapline:last-of-type{
  border-bottom:0;
}

.vm-recap-img{
  width:74px;
  height:74px;
  flex:0 0 74px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #eee;
  border-radius:10px;
  background:#fafafa;
  overflow:hidden;
}

.vm-recap-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.vm-recap-img--icon{
  font-size:22px;
  color:#666;
}

.vm-recap-mid{
  flex:1 1 auto;
  min-width:0;
}

.vm-recap-title{
  font-weight:700;
  margin-bottom:4px;
  color:#222;
}

.vm-recap-desc{
  color:#666;
  font-size:14px;
  line-height:1.35;
}

.vm-recap-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

/* Bouton unique "Changer" (effet verre) */
.vm-btn-change{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.18);
  background:rgba(255,255,255,0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight:700;
  color:#222;
  text-decoration:none;
  cursor:pointer;
}

.vm-btn-change:hover{
  background:rgba(255,255,255,0.85);
  border-color:#1a73e8;
  color:#1a73e8;
}

/* Prix : bleu partout */
.vm-price{
  color:#1a73e8;
  font-weight:800;
}

/* Total */
.vm-recaptotal{
  display:flex;
  justify-content:flex-end;
  gap:14px;
  align-items:baseline;
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed #e6e6e6;
}

.vm-recaptotal-label{
  font-weight:700;
  color:#333;
}

.vm-recaptotal-val{
  font-size:20px;
}

/* Accessoires : tu peux garder ton style existant, mais on harmonise le bouton */
#vmR_items{ list-style:none; padding:0; margin:0; }

#vmR_items .vm-r-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid #eee;
}

#vmR_items .vm-r-item:last-child{ border-bottom:0; }

#vmR_items .vm-r-img{
  width:74px;
  height:74px;
  object-fit:contain;
  flex:0 0 74px;
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
}

#vmR_items .vm-r-txt{
  flex:1 1 auto;
  min-width:0;
}

#vmR_items .vm-r-title{
  font-weight:700;
  line-height:1.25;
  margin-bottom:6px;
}

#vmR_items .vm-r-price{
  font-weight:800;
  font-size:16px;
  color:#1a73e8;
}

/* si ton JS injecte un bouton par accessoire, mets-lui class="vm-btn-change" */
#vmR_items .vm-r-change{
  /* backward compat si tu gardes l’ancienne classe */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.18);
  background:rgba(255,255,255,0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight:700;
  cursor:pointer;
}

/* Responsive */
@media (max-width: 760px){
  .vm-recapline{
    align-items:flex-start;
  }
  .vm-recap-right{
    margin-left:auto;
  }
}
/* Row finition: options à gauche + palette à droite */
.vm-finish-row{
  align-items:flex-start;
  gap:14px;
}
.vm-finish-main{ flex:1; min-width:0; }
.vm-finish-palette{
  width:260px;           /* ajuste */
  flex:0 0 260px;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:12px;
  background:#fff;
  padding:10px;
}
.vm-finish-palette img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}

/* Boutons finition en pavés image */
#vmFinishOptions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#vmFinishOptions .vm-opt{
  width:118px;           /* ajuste */
  height:54px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.12);
  background:#f7f7f7;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
}

/* image “pavé” (injectée en inline style par JS) */
#vmFinishOptions .vm-opt::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--finish-img);
  background-size:cover;
  background-position:center;
  filter:saturate(1.05);
}

/* bandeau label */
#vmFinishOptions .vm-opt span{
  position:relative;
  z-index:1;
  width:100%;
  text-align:center;
  font-weight:700;
  font-size:12px;
  padding:6px 8px;
  background:linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.65));
}

/* sélection */
#vmFinishOptions .vm-opt.is-selected{
  border-color:#4da6a4;
  box-shadow:0 6px 20px rgba(0,0,0,0.10);
}
/* CTA principal Step2 */
#vmStep2 .vm-step-actions{
  margin:22px 0 10px;
  display:flex;
  justify-content:center;  /* au lieu de flex-end */
}

#vmStep2 #vmGoStep3.vm-btn-cta{
  width:min(560px, 100%);
  padding:18px 22px;
  font-size:18px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}

#vmStep2 #vmGoStep3.vm-btn-cta:hover{
  transform:translateY(-1px);
}
/* Step3 - bandeau section (Votre projet) */
.vm-recap-h3{
  background:rgba(77,166,164,0.10);
  border:1px solid rgba(77,166,164,0.20);
  padding:10px 12px;
  border-radius:12px;
  font-size:18px;
  font-weight:900;
}

/* Titres de lignes (Modèle / Verre / Volume / Accessoires) plus hiérarchisés */
.vm-recap-title{
  font-weight:900;
  font-size:15px;
  letter-spacing:.2px;
}
.vm-recap-desc{
  font-size:14px;
}
/* Prix volumes : même présence que prix accessoires */
.vm-price-blue{
  color:#1e73be;
  font-weight:900;
  font-size:16px;
}

/* Volume : augmente contraste et interlignage */
#vmR_vol1, #vmR_vol2{
  line-height:1.45;
}
/* Cotes nettes = info clé */
.vm-dims-net{
  font-weight:900;
  background:rgba(241,90,36,0.08);
  border:1px solid rgba(241,90,36,0.18);
  padding:2px 6px;
  border-radius:8px;
  white-space:nowrap;
}
.vm-dim-alerts{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(220,0,0,.25);
  background:rgba(255,0,0,.04);
  border-radius:10px;
  font-size:14px;
}
.vm-dim-alerts-title{
  font-weight:700;
  margin-bottom:6px;
}
.vm-dim-alerts ul{ margin:0; padding-left:18px; }
.vm-dim-alerts li{ margin:6px 0; }
./* Prix / m² en overlay au-dessus de l’image */
.vm-glass-card{
  position: relative; /* indispensable */
}

.vm-glass-pm2{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 5;

  font-size: 13px;
  font-weight: 700;
  color: #1a73e8;

  background: rgba(255,255,255,0.88);
  padding: 4px 6px;
  border-radius: 6px;

  text-align: center;
  visibility: hidden;
}

/* visible uniquement si sélectionné */
.vm-glass-card.is-selected .vm-glass-pm2{
  visibility: visible;
}
.vm-config-card img{
  position: relative;
  z-index: 1;
}
/* prix m² : caché par défaut */
.vm-glass-pm2{ visibility:hidden; }

/* visible sur hover (même non sélectionné) */
.vm-glass-card:hover .vm-glass-pm2{ visibility:visible; }

/* visible si sélectionné (si tu veux aussi) */
.vm-glass-card.is-selected .vm-glass-pm2{ visibility:visible; }
/* carte verre = stacking context */
.vm-glass-card{ position:relative; }

/* image sous le texte même avec transform/zoom */
.vm-glass-card .vm-glass-img,
.vm-glass-card .vm-glass-img img{ position:relative; z-index:1; }

/* prix en overlay */
.vm-glass-pm2{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:5;

  text-align:center;
  font-size:13px;
  font-weight:700;

  background:rgba(255,255,255,.88);
  padding:6px 8px;
  border-radius:8px;

  visibility:hidden;
}

/* visible si sélectionné ou hover */
.vm-glass-card.is-selected .vm-glass-pm2,
.vm-glass-card:hover .vm-glass-pm2{
  visibility:visible;
}
#vmGlassBox {
  margin-top: 32px;
}