style/default/style.css

/* ═══════════════════════════════════════════════════════════
   VIEWER A — Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Widget container ── */
.ply-widget-container {
  position: relative;
  width: 100%;
  height: 0;
  background-color: white;
  transition: all 0.3s ease;
  box-sizing: border-box;
  overflow: hidden;
}
.ply-widget-container.fake-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  padding-bottom: 0 !important;
  z-index: 9999 !important;
  background-color: black;
  border-radius: 0 !important;
  margin: 0 !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  box-sizing: border-box;
  overflow: hidden;
}
.ply-widget-container:fullscreen,
.ply-widget-container:-webkit-full-screen,
.ply-widget-container:-moz-full-screen,
.ply-widget-container:-ms-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  padding-bottom: 0 !important;
  border-radius: 0 !important;
  background-color: black;
}

/* ── Viewer container ── */
.viewer-container {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  background: black;
  border: 1px solid #474558;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  transition: all 0.3s ease;
  min-height: 100%;
  object-fit: contain;
}
.fake-fullscreen .viewer-container,
:fullscreen .viewer-container,
:-webkit-full-screen .viewer-container,
:-moz-full-screen .viewer-container,
:-ms-fullscreen .viewer-container {
  border-radius: 0;
  border: none;
  width: 100%;
  height: 100%;
}

/* ── Canvas ── */
.ply-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background-color: transparent;
  z-index: 1;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
.fake-fullscreen .ply-canvas,
:fullscreen .ply-canvas,
:-webkit-full-screen .ply-canvas,
:-moz-full-screen .ply-canvas,
:-ms-fullscreen .ply-canvas {
  width: 100vw;
  height: 100vh;
}

/* ── Barre de progression ── */
.progress-dialog {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  background: rgba(0,0,0,0.7);
  padding: 20px;
  border-radius: 5px;
  z-index: 1000;
  display: none;
  color: white;
}
progress {
  width: 250px;
  height: 15px;
  appearance: none;
  border: none;
  border-radius: 10px;
  overflow: hidden;
}
progress::-webkit-progress-bar   { background-color: #333;    border-radius: 10px; }
progress::-webkit-progress-value { background-color: #4682B4; border-radius: 10px; }
progress::-moz-progress-bar      { background-color: #4682B4; }

/* ── Panneau d'aide ── */
.menu-content {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(242,240,239,0.7);
  color: #545454;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 28px 24px;
  font-size: 15px;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  z-index: 1010;
  max-width: 90vw;
  max-height: 90%;
  overflow: scroll !important;
  scrollbar-gutter: stable both-edges;
  box-sizing: border-box;
}
.menu-content::-webkit-scrollbar       { width: 12px; }
.menu-content::-webkit-scrollbar-thumb { background: #bbbbbb; border-radius: 8px; }
.menu-content::-webkit-scrollbar-track { background: #e7e7e7; border-radius: 8px; }

.menu-content .help-close {
  position: absolute;
  top: 5px; right: 5px;
  width: 32px; height: 32px;
  background: #F2F0EF;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 17px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.18s;
  box-sizing: border-box;
  padding: 0;
}
.menu-content .help-close:hover,
.menu-content .help-close:focus { background: #e0e0e0; outline: none; }

/* ── Boutons widget ── */
.widget-button {
  position: absolute;
  width: 32px; height: 32px;
  background-color: #F2F0EF;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  color: #545454;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  z-index: 1000;
  opacity: 1 !important;
  visibility: visible !important;
  margin-right: 8px;

  /* ── Correctifs iOS Safari ── */
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
  flex-shrink: 0;
}
.widget-button:hover { background-color: rgba(242,240,239,0.7); }

/* ── Positionnement — côté DROIT (défaut) ── */
.fullscreen-toggle  { top: 12px; right: 12px;  left: auto; }
.help-toggle        { top: 12px; right: 52px;  left: auto; font-size: 18px; }
.reset-camera-btn   { top: 12px; right: 92px;  left: auto; font-size: 18px; line-height: normal; padding: 0; }
.tooltips-toggle    { top: 12px; right: 132px; left: auto; font-size: 18px; }

/* ── Positionnement — côté GAUCHE (classe btn-left sur .viewer-container) ── */
.btn-left .fullscreen-toggle  { right: auto; left: 12px;  }
.btn-left .help-toggle        { right: auto; left: 52px;  }
.btn-left .reset-camera-btn   { right: auto; left: 92px;  }
.btn-left .tooltips-toggle    { right: auto; left: 132px; }

.fake-fullscreen .widget-button,
:fullscreen .widget-button,
:-webkit-full-screen .widget-button,
:-moz-full-screen .widget-button,
:-ms-fullscreen .widget-button { z-index: 10000; }

.help-close {
  position: absolute;
  top: 8px; right: 8px;
  background-color: #B0B0B0;
  color: #333;
  border: none;
  border-radius: 4px;
  width: 24px; height: 24px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ── Mobile : boutons — côté droit (défaut) ── */
.ply-widget-container.mobile .widget-button { width: 24px; height: 24px; font-size: 12px; }
.ply-widget-container.mobile .help-toggle   { font-size: 14px; }
.ply-widget-container.mobile .fullscreen-toggle { top: 8px; right: 8px;   left: auto; }
.ply-widget-container.mobile .help-toggle       { top: 8px; right: 40px;  left: auto; }
.ply-widget-container.mobile .reset-camera-btn  { top: 8px; right: 72px;  left: auto; }
.ply-widget-container.mobile .tooltips-toggle   { top: 8px; right: 104px; left: auto; }

/* ── btn-left SANS fullscreen → boutons décalés vers la gauche ── */
.btn-left.no-fullscreen .help-toggle      { right: auto; left: 12px; }
.btn-left.no-fullscreen .reset-camera-btn { right: auto; left: 52px; }
.btn-left.no-fullscreen .tooltips-toggle  { right: auto; left: 92px; }

/* ── Mobile : btn-left SANS fullscreen ── */
.ply-widget-container.mobile .btn-left.no-fullscreen .help-toggle      { right: auto; left: 8px;  }
.ply-widget-container.mobile .btn-left.no-fullscreen .reset-camera-btn { right: auto; left: 40px; }
.ply-widget-container.mobile .btn-left.no-fullscreen .tooltips-toggle  { right: auto; left: 72px; }

#application-canvas { width: 100%; height: 100%; display: block; }
html, body { margin: 0; padding: 0; height: 100%; }
.progress-dialog p { margin: 0; padding: 5px; }

@media (max-width: 600px) {
  .menu-content {
    width: 85vw;
    max-height: 90%;
    overflow: scroll !important;
    scrollbar-gutter: stable both-edges;
    padding: 40px 18px 14px;
    font-size: 14px;
  }
  .menu-content .help-close { top: 6px; right: 6px; }
}


/* ═══════════════════════════════════════════════════════════
   ANNOTATIONS — Dark theme
   Position absolute dans widgetContainer → fullscreen natif OK
   ═══════════════════════════════════════════════════════════ */

/* ── Overlay (fond semi-transparent, ferme l'annotation au clic) ── */
.ann-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}
.ann-overlay.ann-open {
  display: flex;
}

/* ── Modal tooltip ── */
.ann-tooltip {
  position: relative;
  background: rgba(18, 18, 18, 0.96);
  color: #f0f0f0;
  border-radius: 14px;
  overflow: hidden;
  width: min(400px, 90vw);
  max-height: min(560px, 85vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Bouton fermer (base commune annotation + lightbox) ── */
.ann-close-btn-base {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  background-color: #2E2E2E;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  line-height: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.1s;
  /* ── Correctifs iOS Safari ── */
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  flex-shrink: 0;
}
.ann-close-btn-base:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* ── Image (pleine largeur, rognée si trop haute, zoom-in au survol) ── */
.ann-img-wrap {
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  max-height: 220px;
  background: #000;
  cursor: zoom-in;
}
.ann-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Zone de défilement ── */
.ann-scroll {
  padding: 16px 0 12px;
  overflow-y: auto;
  flex: 1;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.ann-scroll::-webkit-scrollbar       { width: 5px; }
.ann-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

.ann-title,
.ann-body {
  width: 90%;
  margin: 0 auto;
}
.ann-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
}
.ann-body {
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  opacity: 0.88;
  /* ── Hauteur limitée à 5 lignes, scroll ensuite ── */
  max-height: calc(13px * 1.7 * 4);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.ann-body::-webkit-scrollbar       { width: 5px; }
.ann-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

/* ── Pied de page avec bouton lien ── */
.ann-footer {
  display: none; /* caché par défaut, affiché via JS si linkUrl présent */
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.ann-link-btn {
  flex: 1;
  padding: 10px 16px;
  background: #4a90e2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-align: center;
  letter-spacing: 0.01em;
  /* ── Correctifs iOS Safari ── */
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.ann-link-btn:hover  { background: #357abd; }
.ann-link-btn:active { transform: scale(0.98); background: #2a6096; }

/* ── Lightbox (image agrandie) ── */
.ann-lightbox {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.90);
  align-items: center;
  justify-content: center;
}
.ann-lightbox.ann-lb-open {
  display: flex;
}

.ann-lb-content-wrap {
  position: relative;
  display: grid;
}
.ann-lightbox img {
  display: block;
  object-fit: contain;
  max-height: 90vh;
  max-width: 90vw;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  grid-area: 1 / 1;
}
.ann-lb-close {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: end;
  margin: 10px;
  position: static !important;
  top: unset !important;
  right: unset !important;
}

/* ── Responsive — portrait mobile ── */
@media (orientation: portrait) and (max-width: 768px) {
  .ann-tooltip   { width: min(400px, 93vw); max-height: min(560px, 83vh); }
  .ann-img-wrap  { max-height: 180px; }
}

/* ── Responsive — paysage mobile ── */
@media (orientation: landscape) and (max-height: 520px) {
  .ann-tooltip   { width: min(400px, 82vw); max-height: 90vh; }
  .ann-img-wrap  { max-height: 130px; }
}