/* ══════════════════════════════════════════════════════════════
   Compléments au thème showroom — blocs absents du design d'origine :
   visualiseur 3D/AR, prix, demande de devis, WhatsApp, arabe.
   Fichier séparé volontairement : showroom.css reste le design intact.
══════════════════════════════════════════════════════════════ */

/* ── Arabe : sans cette pile, l'arabe tombe dans la police système ── */
html[dir="rtl"] body,
html[dir="rtl"] .font-display{
  font-family:'Noto Sans Arabic','Nunito Sans',sans-serif;
}

/* ── Visualiseur 3D par-dessus la photo principale ── */
#detail-mv{
  position:absolute;inset:0;width:100%;height:100%;
  display:none;background:var(--accent-light);
  --poster-color:transparent;
}
.mv-on #detail-mv{display:block;}
.mv-on #detail-main-img{visibility:hidden;}
.mv-on .fs-hint{display:none;}

.media-switch{
  position:absolute;top:14px;left:14px;z-index:4;
  display:flex;gap:4px;padding:4px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-radius:100px;box-shadow:0 2px 12px rgba(36,29,22,.14);
}
html[dir="rtl"] .media-switch{left:auto;right:14px;}
.media-switch button{
  border:none;background:transparent;cursor:pointer;
  padding:7px 15px;border-radius:100px;
  font-family:'Nunito Sans',sans-serif;font-size:12px;font-weight:600;
  color:var(--ink-soft);transition:background .2s,color .2s;
}
.media-switch button.on{background:var(--ink);color:#fff;}

/* Bouton « Voir dans mon salon » injecté dans le slot AR de model-viewer */
button[slot="ar-button"]{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  padding:12px 22px;border:none;border-radius:100px;
  background:var(--accent-warm);color:var(--ink);
  font-family:'Nunito Sans',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.3px;cursor:pointer;
  box-shadow:0 6px 22px rgba(36,29,22,.24);
}

/* ── Repère « 3D » sur la carte ── */
.card-3d{
  position:absolute;bottom:12px;right:12px;
  display:flex;align-items:center;gap:5px;
  padding:5px 10px 5px 8px;border-radius:100px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(36,29,22,.16);
  font-size:10px;font-weight:700;letter-spacing:1px;color:var(--ink);
}
html[dir="rtl"] .card-3d{right:auto;left:12px;}
.card-3d svg{width:14px;height:14px;color:var(--accent);}

/* ── Prix ── */
.d-price{
  font-family:'Playfair Display',serif;
  font-size:27px;color:var(--ink);margin-top:6px;
}
.d-price small{font-size:13px;color:var(--ink-soft);font-family:'Nunito Sans',sans-serif;}
.d-price .from{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-soft);display:block;}
.card-price{font-weight:600;color:var(--ink);}

/* ── Actions commerciales ── */
.cta-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px;}
.btn-quote,.btn-wa{
  flex:1 1 150px;min-height:50px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  border:none;border-radius:var(--radius-btn);cursor:pointer;
  font-family:'Nunito Sans',sans-serif;font-size:13.5px;font-weight:600;
  transition:transform .18s,box-shadow .18s,background .18s;
}
.btn-quote{background:var(--ink);color:#fff;}
.btn-quote:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(36,29,22,.24);}
.btn-wa{background:#25d366;color:#0b3a1d;}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.34);}
.btn-quote svg,.btn-wa svg{width:18px;height:18px;}

/* ── Modale de devis ── */
#quote-modal{
  position:fixed;inset:0;z-index:400;
  background:rgba(36,29,22,.62);backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;padding:24px;
}
#quote-modal.open{display:flex;}
.quote-card{
  background:var(--bg-card);border-radius:26px;
  padding:30px 28px;width:100%;max-width:430px;
  display:flex;flex-direction:column;gap:13px;
  box-shadow:0 30px 80px rgba(36,29,22,.34);
  max-height:90vh;overflow-y:auto;
}
.quote-title{font-family:'Playfair Display',serif;font-size:23px;}
.quote-sub{font-size:12.5px;color:var(--ink-soft);line-height:1.5;}
.quote-card input,.quote-card textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--border);
  border-radius:13px;background:var(--white);
  font-family:'Nunito Sans',sans-serif;font-size:14px;color:var(--ink);
  outline:none;transition:border-color .2s;
}
.quote-card input:focus,.quote-card textarea:focus{border-color:var(--accent);}
.quote-card textarea{resize:vertical;min-height:76px;}
.quote-card .req{color:var(--danger);}
.quote-send{
  padding:14px;border:none;border-radius:14px;cursor:pointer;
  background:var(--ink);color:#fff;
  font-family:'Nunito Sans',sans-serif;font-size:14px;font-weight:600;
}
.quote-cancel{
  padding:11px;border:none;background:none;cursor:pointer;
  color:var(--ink-soft);font-family:'Nunito Sans',sans-serif;font-size:13px;
}
/* Piège à robots : jamais visible, jamais atteignable au clavier */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* ── Catalogue vide ── */
.empty-state{
  grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--ink-muted);
}
.empty-state svg{width:56px;height:56px;margin-bottom:14px;opacity:.5;}