/* ─────────────────────────────────────────────────────────────
   Visionneuse 3D — fiche produit
   Reprise de la maquette mockup_3d_prosynergie, aux couleurs du site.
   Toutes les classes sont préfixées « p3d- » pour ne pas entrer en
   conflit avec Bootstrap (.modal, .btn…).
   ───────────────────────────────────────────────────────────── */
.p3d-root{
  --p3d-surface:#ffffff;
  --p3d-surface-sunk:#e9efef;
  --p3d-stage-1:#f7f9f9;
  --p3d-stage-2:#cfdad9;
  --p3d-ink:#1d2b2c;
  --p3d-ink-2:#3a666a;
  --p3d-ink-3:#6b8285;
  --p3d-rule:#dde5e5;
  --p3d-rule-strong:#b9c8c8;
  --p3d-accent:#3a666a;
  --p3d-accent-2:#8bb300;
  --p3d-steel:#3a666a;
  --p3d-radius:3px;
  --p3d-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --p3d-shadow-sm:0 1px 2px rgba(21,24,26,.06),0 2px 8px rgba(21,24,26,.05);
  --p3d-shadow-lg:0 8px 20px rgba(21,24,26,.14),0 40px 80px rgba(21,24,26,.22);
}

/* ── bouton dans le bloc « En savoir plus » (même style que les liens documents) ── */
.detail-description-content-3d{margin:0 0 15px}
.p3d-open{
  display:flex; align-items:stretch; width:100%; padding:0; cursor:pointer;
  background:#fff; color:#3a666a; text-align:left;
  border:1px solid #eee; border-bottom:2px solid #8bb300; border-radius:0;
  font:inherit; font-weight:900;
  transition:background-color .18s ease;
}
.p3d-open:hover,.p3d-open:focus-visible{background:#e9efef}
.p3d-open__icon{
  display:flex; align-items:center; padding:10px 9px;
  background:#e9efef; border-right:1px solid #eee;
}
.p3d-open__icon svg{width:20px; height:20px}
.p3d-open__label{padding:10px 9px; align-self:center}

/* ── vignette « 3D » dans la galerie desktop (Partials/_viewer3dThumb.html.twig) ── */
.p3d-thumb{
  position:relative; display:block; padding-top:100%; overflow:hidden;
  background:#fff; border:1px solid #e4e4e4; transition:border-color .4s;
}
.p3d-thumb:hover,.p3d-thumb:focus-visible{border-color:#3a666a; outline:0}
.p3d-thumb img{
  position:absolute; inset:0; margin:auto; max-width:100%; max-height:100%; opacity:.4;
}
.p3d-thumb__badge{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  color:#3a666a; font:900 13px/1 Lato,sans-serif; letter-spacing:.04em;
}
.p3d-thumb__badge svg{width:30px; height:30px}
.p3d-thumb:hover .p3d-thumb__badge{color:#8bb300}

/* ── bouton « Voir en 3D » posé sur le carrousel mobile (Partials/_gallery.html.twig) ── */
.p3d-mobile-open{
  position:absolute; z-index:5; left:10px; bottom:10px;
  display:inline-flex; align-items:center; gap:6px; padding:7px 11px;
  background:#fff; color:#3a666a; border:1px solid #e4e4e4; border-bottom:2px solid #8bb300; border-radius:0;
  font:900 14px/1 Lato,sans-serif; box-shadow:0 1px 4px rgba(0,0,0,.12); cursor:pointer;
}
.p3d-mobile-open svg{width:18px; height:18px}

/* ── popup ── */
.p3d-modal{
  position:fixed; inset:0; z-index:10050; display:grid; place-items:center;
  padding:clamp(8px,2vw,28px); font-variant-numeric:tabular-nums;
  /* tailles en px : le site fixe html{font-size:14px}, les rem du mockup (base 16px) sortaient 12,5 % trop petits */
  font-size:15px; line-height:1.6;
}
.p3d-modal[hidden]{display:none}
.p3d-modal *,.p3d-modal *::before,.p3d-modal *::after{box-sizing:border-box}
.p3d-scrim{position:absolute; inset:0; background:rgba(12,18,18,.62); backdrop-filter:blur(3px); animation:p3d-fade .22s ease}
.p3d-panel{
  position:relative; width:min(1140px,100%); max-height:calc(100dvh - 32px);
  background:var(--p3d-surface); color:var(--p3d-ink);
  border:1px solid var(--p3d-rule-strong); border-radius:var(--p3d-radius);
  box-shadow:var(--p3d-shadow-lg); overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) 372px;
  animation:p3d-rise .26s cubic-bezier(.2,.75,.3,1);
}
@keyframes p3d-fade{from{opacity:0}to{opacity:1}}
@keyframes p3d-rise{from{opacity:0; transform:translateY(12px) scale(.99)}to{opacity:1; transform:none}}
@media (max-width:980px){
  .p3d-panel{grid-template-columns:1fr; grid-template-rows:auto auto; overflow-y:auto}
}
@media (prefers-reduced-motion:reduce){
  .p3d-modal *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* — scène — */
.p3d-stage{
  position:relative; min-height:min(66dvh,560px);
  background:radial-gradient(ellipse 72% 66% at 50% 44%,var(--p3d-stage-1),var(--p3d-stage-2));
  border-right:1px solid var(--p3d-rule);
}
@media (max-width:980px){.p3d-stage{border-right:0; border-bottom:1px solid var(--p3d-rule); min-height:56dvh}}
.p3d-stage::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--p3d-rule-strong) 1px,transparent 1px),linear-gradient(90deg,var(--p3d-rule-strong) 1px,transparent 1px);
  background-size:40px 40px; opacity:.28;
  -webkit-mask-image:radial-gradient(ellipse 66% 62% at 50% 48%,#000,transparent 76%);
          mask-image:radial-gradient(ellipse 66% 62% at 50% 48%,#000,transparent 76%);
}
.p3d-crop{position:absolute; width:14px; height:14px; border:1px solid var(--p3d-rule-strong); opacity:.85; pointer-events:none; z-index:2}
.p3d-crop--tl{top:12px; left:12px; border-right:0; border-bottom:0}
.p3d-crop--tr{top:12px; right:12px; border-left:0; border-bottom:0}
.p3d-crop--bl{bottom:12px; left:12px; border-right:0; border-top:0}
.p3d-crop--br{bottom:12px; right:12px; border-left:0; border-top:0}

.p3d-modal model-viewer{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; background:transparent;
  --progress-bar-height:0px;
}
/* tant que la bibliothèque n'est pas chargée, les repères ne doivent pas s'afficher en boutons bruts */
.p3d-modal model-viewer:not(:defined) > *{display:none}

.p3d-loader{
  position:absolute; inset:0; z-index:5; display:grid; place-content:center;
  gap:11px; justify-items:center; pointer-events:none; transition:opacity .3s ease;
}
.p3d-loader[data-done]{opacity:0}
.p3d-loader__track{display:block; width:180px; height:2px; background:var(--p3d-rule-strong); overflow:hidden}
.p3d-loader__bar{display:block; height:100%; width:0%; background:var(--p3d-accent-2); transition:width .15s linear}
.p3d-loader__txt{font-family:var(--p3d-mono); font-size:12.5px; color:var(--p3d-ink-2); letter-spacing:.06em}

.p3d-close{
  position:absolute; top:14.5px; right:14.5px; z-index:6;
  width:34px; height:34px; display:grid; place-items:center; padding:0;
  background:var(--p3d-surface); color:var(--p3d-ink);
  border:1px solid var(--p3d-rule-strong); border-radius:var(--p3d-radius);
  cursor:pointer; box-shadow:var(--p3d-shadow-sm);
}
.p3d-close svg{width:15px; height:15px}
.p3d-close:hover{background:var(--p3d-accent); border-color:var(--p3d-accent); color:#fff}
.p3d-full{
  position:absolute; top:14.5px; right:56px; z-index:6;
  width:34px; height:34px; display:grid; place-items:center; padding:0;
  background:var(--p3d-surface); color:var(--p3d-ink);
  border:1px solid var(--p3d-rule-strong); border-radius:var(--p3d-radius);
  cursor:pointer; box-shadow:var(--p3d-shadow-sm);
}
.p3d-full svg{width:15px; height:15px}
.p3d-full:hover{background:var(--p3d-accent); border-color:var(--p3d-accent); color:#fff}
.p3d-full__off,.p3d-modal--full .p3d-full__on{display:none}
.p3d-modal--full .p3d-full__off{display:block}

/* — plein écran : la scène occupe tout l'écran, la colonne d'infos est masquée — */
.p3d-modal--full{padding:0; background:var(--p3d-stage-2)}
.p3d-modal--full .p3d-scrim{display:none}
.p3d-modal--full .p3d-panel{
  width:100%; height:100%; max-height:none; border:0; border-radius:0; box-shadow:none;
  grid-template-columns:1fr; grid-template-rows:1fr; overflow:hidden; animation:none;
}
.p3d-modal--full .p3d-rail{display:none}
.p3d-modal--full .p3d-stage{min-height:0; height:100%; border:0}

.p3d-toolbar{
  position:absolute; z-index:4; bottom:17px; left:17.5px; right:17.5px;
  display:flex; gap:7px; flex-wrap:wrap; align-items:center;
}
.p3d-toolbar__spacer{flex:1 1 auto}
@media (max-width:700px){
  .p3d-toolbar{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:3px; left:11px; right:11px; bottom:11px}
  .p3d-toolbar::-webkit-scrollbar{display:none}
  .p3d-toolbar__spacer{flex:0 0 8px}
  .p3d-tool,.p3d-views button{flex:none; white-space:nowrap}
}
.p3d-tool{
  display:inline-flex; align-items:center; gap:6.5px;
  background:var(--p3d-surface); border:1px solid var(--p3d-rule); border-radius:var(--p3d-radius);
  padding:6.5px 10.5px; cursor:pointer; box-shadow:var(--p3d-shadow-sm);
  font-family:var(--p3d-mono); font-size:11.5px; font-weight:500; line-height:1.4;
  letter-spacing:.05em; text-transform:uppercase; color:var(--p3d-ink-2);
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.p3d-tool svg{width:13px; height:13px}
.p3d-tool:hover{border-color:var(--p3d-ink-3); color:var(--p3d-ink)}
.p3d-tool[aria-pressed="true"]{background:var(--p3d-accent); border-color:var(--p3d-accent); color:#fff}
.p3d-views{
  display:flex; background:var(--p3d-surface); border:1px solid var(--p3d-rule);
  border-radius:var(--p3d-radius); box-shadow:var(--p3d-shadow-sm); overflow:hidden;
}
.p3d-views button{
  background:transparent; border:0; border-left:1px solid var(--p3d-rule);
  padding:6.5px 9.5px; cursor:pointer; line-height:1.4;
  font-family:var(--p3d-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; color:var(--p3d-ink-2);
}
.p3d-views button:first-child{border-left:0}
.p3d-views button:hover{background:var(--p3d-surface-sunk); color:var(--p3d-ink)}
.p3d-views button[aria-pressed="true"]{background:var(--p3d-ink-2); color:#fff}

.p3d-hint{
  position:absolute; z-index:3; bottom:57.5px; left:20px; margin:0;
  font-family:var(--p3d-mono); font-size:11px; color:var(--p3d-ink-3); letter-spacing:.04em;
  pointer-events:none; transition:opacity .4s ease;
}
.p3d-hint[data-off]{opacity:0}
@media (max-width:620px){.p3d-hint{display:none}}

.p3d-ar{
  position:absolute; bottom:54.5px; right:17.5px;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--p3d-accent-2); color:#fff; border:0; border-radius:var(--p3d-radius);
  padding:9px 14.5px; font-weight:700; cursor:pointer;
}
.p3d-ar svg{width:16px; height:16px}

/* — cotes — */
.p3d-dimsvg{width:100%; height:100%; pointer-events:none; display:block}
.p3d-dimline{stroke:var(--p3d-steel); stroke-width:1.5; stroke-dasharray:3 3}
.p3d-dimline.is-hidden{display:none}
.p3d-dimdot{
  width:6px; height:6px; border-radius:50%; background:var(--p3d-steel);
  border:1px solid var(--p3d-surface); padding:0;
}
.p3d-dimlabel{
  background:var(--p3d-surface); color:var(--p3d-ink); border:1px solid var(--p3d-steel);
  border-radius:2px; padding:2.5px 6.5px; box-shadow:var(--p3d-shadow-sm);
  font-family:var(--p3d-mono); font-size:11px; font-weight:500; white-space:nowrap;
  transition:opacity .2s ease;
}
.p3d-dimlabel:not([data-visible]){opacity:0}
.p3d-dims-off .p3d-dimdot,.p3d-dims-off .p3d-dimlabel{display:none}
.p3d-dims-off .p3d-dimsvg{visibility:hidden}

/* — colonne d'informations — */
.p3d-rail{display:flex; flex-direction:column; min-height:0; background:var(--p3d-surface); overflow-y:auto}
.p3d-rail__head{padding:24px 24px 17.5px; border-bottom:1px solid var(--p3d-rule)}
.p3d-eyebrow{
  margin:0; font-family:var(--p3d-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--p3d-ink-3);
}
.p3d-rail__head h2{font-size:30px; line-height:1.08; font-weight:900; margin:6.5px 0; color:var(--p3d-ink-2)}
/* noms de produit très longs (fréquents dans le catalogue) : taille du mockup ramenée à --step-2 */
.p3d-rail__head--long h2{font-size:22px; line-height:1.2}
.p3d-rail__ref{margin:0; font-family:var(--p3d-mono); font-size:12.5px; color:var(--p3d-ink-3); letter-spacing:.05em}
.p3d-rail__body{padding:20px 24px; display:grid; gap:20px; align-content:start; flex:1}
.p3d-dl{display:grid; grid-template-columns:auto 1fr; gap:1px 16px; margin:0}
.p3d-dl dt{
  font-family:var(--p3d-mono); font-size:12.5px; font-weight:400; color:var(--p3d-ink-3);
  letter-spacing:.04em; padding-block:5px; border-bottom:1px solid var(--p3d-rule);
}
.p3d-dl dd{
  margin:0; text-align:right; font-family:var(--p3d-mono); font-size:12.5px; font-weight:500;
  padding-block:5px; border-bottom:1px solid var(--p3d-rule);
}
.p3d-disclaimer{margin:0; font-size:11.5px; color:var(--p3d-ink-3); line-height:1.45}