/* ============================================================
   PES-TOGO — Catalogue Solaire
   models3d.css : page « Rendus 3D » (espace dédié aux modèles .glb)
   et visionneuse 3D plein écran.
   Reprend les variables de couleurs définies dans index.html (:root).
   ============================================================ */

/* ---------- Page « Rendus 3D » ---------- */
.m3d-back{display:block;}
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  /* Sur téléphone / tablette, la barre du bas remplace le bouton de retour */
  .m3d-back{display:none;}
}
.section-head .m3d-add{margin-left:auto;padding:9px 16px;font-size:14px;}
.m3d-admin-actions{display:none;}
body.admin-mode .m3d-admin-actions{display:flex;}
.m3d-card:focus-visible{outline:3px solid var(--primary);outline-offset:2px;}
.m3d-intro{margin:0 0 4px;color:var(--muted);font-size:14.5px;line-height:1.5;max-width:640px;}
@media (max-width:700px){
  /* Téléphone : 2 rendus par ligne */
  .m3d-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .m3d-card .prod-body{padding:10px 12px 12px;}
  .m3d-card .prod-body h3{font-size:15px;}
  .m3d-play{width:34px;height:34px;right:8px;bottom:8px;}
  .m3d-play .ico{width:18px;height:18px;}
}

/* Les cartes reprennent le style des fiches produit (.prod-card) */
.m3d-card{
  font:inherit;color:inherit;text-align:left;padding:0;width:100%;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.m3d-card:hover{transform:translateY(-3px);border-color:var(--primary);}
.m3d-card:active{transform:translateY(-1px);}
.m3d-shot{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%, #FFFFFF 0%, #EEF1F7 70%, #E2E8F2 100%);
}
.m3d-card .prod-thumb .m3d-shot img{width:100%;height:100%;object-fit:contain;background:transparent;}
.m3d-ph{width:46px;height:46px;opacity:.55;}
.m3d-shot:not(.ready) .m3d-ph{animation:m3dPulse 1.4s ease-in-out infinite;}
@keyframes m3dPulse{0%,100%{opacity:.25;}50%{opacity:.6;}}
/* Visionneuse hors écran servant à générer les aperçus */
.m3d-shooter{
  position:fixed;left:-9999px;top:0;width:480px !important;height:360px !important;
  aspect-ratio:auto !important;pointer-events:none;background:transparent;--poster-color:transparent;
}
.m3d-play{
  position:absolute;right:10px;bottom:10px;
  width:42px;height:42px;border-radius:50%;
  background:var(--dark);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -4px rgba(2,36,91,.55);
}
.m3d-play .ico{width:22px;height:22px;}
.m3d-card:hover .m3d-play{background:var(--primary);}

.m3d-empty .m3d-admin-hint{display:none;margin-top:10px;font-size:13.5px;}
body.admin-mode .m3d-empty .m3d-admin-hint{display:block;}
.m3d-empty .m3d-empty-ico{width:44px;height:44px;color:var(--primary);margin:0 auto 10px;display:block;}

/* ---------- Visionneuse 3D plein écran ---------- */
body.m3d-open{overflow:hidden;}
.m3d-viewer{
  position:fixed;inset:0;z-index:130;display:none;flex-direction:column;
  background:radial-gradient(ellipse at 50% 38%, #FFFFFF 0%, #EEF1F7 62%, #DFE5F0 100%);
}
.m3d-viewer.active{display:flex;}

.m3d-vbar{
  display:flex;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line);
}
.m3d-vbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;
  height:44px;min-width:44px;padding:0 14px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  font-weight:700;font-size:14.5px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.m3d-vbtn .ico{width:20px;height:20px;}
.m3d-vbtn:hover{border-color:var(--primary);color:var(--primary);}
.m3d-vbtn[disabled]{opacity:.4;cursor:default;}
.m3d-vtitle{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.15;}
.m3d-vtitle small{
  font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.m3d-vtitle strong{
  font-family:'Barlow Condensed','Barlow',sans-serif;font-size:21px;color:var(--dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.m3d-stage{position:relative;flex:1;min-height:0;}
.m3d-stage model-viewer{
  position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  border-radius:0;background:transparent;--poster-color:transparent;
}
.m3d-hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  background:rgba(2,36,91,.82);color:#fff;font-size:12.5px;font-weight:600;
  padding:8px 14px;border-radius:999px;pointer-events:none;white-space:nowrap;
  animation:m3dHint 5.5s ease forwards;
}
@keyframes m3dHint{0%,80%{opacity:1;}100%{opacity:0;}}
.m3d-error{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;
  color:var(--muted);font-size:15px;
}
.m3d-error strong{color:var(--dark);font-size:17px;}
.m3d-stage.has-error .m3d-error{display:flex;}
.m3d-stage.has-error model-viewer,.m3d-stage.has-error .m3d-hint{display:none;}

.m3d-vfoot{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);
  border-top:1px solid var(--line);
}
.m3d-nav{display:flex;align-items:center;gap:10px;}
.m3d-count{font-weight:700;font-size:14px;color:var(--muted);min-width:56px;text-align:center;}

@media (max-width:520px){
  .m3d-vbtn .lbl{display:none;}
  .m3d-vbtn{padding:0;width:44px;}
  .m3d-vfoot{justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  .m3d-card,.m3d-hint,.m3d-shot .m3d-ph{transition:none;animation:none;}
}