/* ============================================
   Visionneuse de photo, partagée par l'explorateur et l'atelier
   ============================================ */
.viewport-card { padding: 0; overflow: hidden; }

.toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--card-border);
  background: rgba(255,255,255,0.03);
}
.toolbar .sep { flex: 1; }
.toolbar .btn.small { min-height: 38px; min-width: 38px; justify-content: center; }
.toolbar .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
/* Libellé court, montré seulement sur téléphone (le lecteur d'écran lit le libellé complet) */
.toolbar .btn-label-short { display: none; }
/* Les vues d'une scène 3D : un groupe qu'on fait défiler sur téléphone */
.toolbar-views { display: contents; }

/* Téléphone : la photo d'abord, les outils dessous, à portée du pouce. Une rangée pour la vue,
   une pour l'activité ; les libellés longs s'effacent derrière leur icône ou un mot court */
@media (max-width: 600px) {
  .viewport-card { display: flex; flex-direction: column; }
  .viewport-card .toolbar { order: 1; border-bottom: 0; border-top: 1px solid var(--card-border); }
  .viewport-card .credit, .viewport-card .sim-help { order: 2; }
  .toolbar { gap: 6px; padding: 10px; }
  .toolbar .sep { flex: 0 0 100%; height: 0; }
  .toolbar .btn.small { min-height: 44px; min-width: 44px; }
  .toolbar .btn-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .toolbar .btn-label-short { display: inline; }
  .toolbar-views {
    display: flex; gap: 6px;
    flex: 0 0 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .toolbar-views .btn { flex: 0 0 auto; }
}

.stage { position: relative; background: var(--bg-2); }

#viewport {
  display: block;
  width: 100%;
  height: min(72vh, 680px, 105vw);
  min-height: 300px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
#viewport.dragging { cursor: grabbing; }

/* Plein écran : la photo et son panneau occupent tout l'écran */
.explorer:fullscreen, .workbench:fullscreen {
  background: var(--bg);
  padding: 14px;
  overflow: auto;
}
:fullscreen #viewport { height: calc(100vh - 140px); }
:fullscreen .info-panel, :fullscreen .side { position: static; max-height: calc(100vh - 28px); }

/* Zones cliquables */
.zone {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  cursor: pointer;
  outline: none;
  transition: fill 0.15s, stroke 0.15s;
}
.zone:hover { fill: rgba(var(--accent-rgb),0.2); stroke: var(--accent); }
.zone:focus-visible { fill: rgba(var(--accent-rgb),0.2); stroke: #fff; stroke-width: 4; }
.zone.wide:hover, .zone.wide:focus-visible { fill: rgba(var(--accent-rgb),0.05); }
/* Zones affichées en acier : le cuivre (survol) et l'ambre (sélection) restent lisibles par-dessus */
.zones-visible .zone { fill: rgba(var(--steel-rgb),0.1); stroke: rgba(var(--steel-rgb),0.95); }
.zones-visible .zone.wide { fill: transparent; stroke-dasharray: 8 6; }
.zone.selected, .zones-visible .zone.selected { fill: rgba(var(--accent-2-rgb),0.24); stroke: var(--accent-2); stroke-width: 3.5; }
.zone.wide.selected, .zones-visible .zone.wide.selected { fill: rgba(var(--accent-2-rgb),0.07); }
.zone.good { fill: rgba(var(--success-rgb),0.3); stroke: var(--success); stroke-width: 3.5; }
.zone.bad { fill: rgba(var(--danger-rgb),0.3); stroke: var(--danger); stroke-width: 3.5; }
.zone.installed { fill: rgba(var(--success-rgb),0.16); stroke: var(--success); }

.zone-label {
  display: none;
  font-weight: 700;
  fill: var(--text);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-linejoin: round;
  pointer-events: none;
}
.zones-visible .zone-label, .zone-label.selected, .zone-label.installed { display: block; }
.zone-label.selected { fill: var(--accent-2-soft); }
.zone-label.installed { fill: var(--success-soft); }

/* États de chargement et d'erreur */
.viewer-state {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px;
  text-align: center;
  color: var(--text-dim);
  background: var(--bg-2);
}
.viewer-state.show { display: flex; }
.viewer-state .spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--accent);
  animation: viewer-spin 0.8s linear infinite;
}
@keyframes viewer-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .viewer-state .spinner { animation: none; } }

.credit {
  padding: 8px 14px;
  border-top: 1px solid var(--card-border);
  font-size: 0.76rem;
  color: var(--text-dim);
}
.credit a { color: var(--text-dim); }
.credit a:hover { color: var(--accent); }