/* XP Card 3D viewer: canvas fills the whole #carte section */

.xp-card-canvas-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
  touch-action: none;
  pointer-events: auto;
}

#xp-card-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

#xp-card-viewer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  touch-action: none !important;
}

/* Reserve space in the grid for the card column; canvas sits behind it full-section. */
.xp-stage-spacer {
  width: 100%;
  min-height: clamp(480px, 52vh, 620px);
  pointer-events: none;
}

.xp-card-file-notice {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(29, 24, 21, 0.12);
  border-radius: 22px;
  font-family: var(--ui, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink, #1d1815);
}

.xp-card-file-notice p {
  margin: 0;
}

.xp-card-file-notice strong {
  font-weight: 600;
}

.xp-card-file-notice code {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(29, 24, 21, 0.06);
}

.xp-card-file-notice a {
  color: var(--rouge, #f92424);
  font-weight: 600;
}

.xp3d-texture-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: transparent;
}

.xp3d-texture-loading.is-visible {
  display: flex;
}

.xp3d-texture-loading__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  opacity: 0;
  transform: scale(0.2);
}

.xp3d-texture-loading.is-visible .xp3d-texture-loading__mark {
  animation: xp3d-texture-loader-in 1s ease-out forwards;
}

@keyframes xp3d-texture-loader-in {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 1200px) {
  .xp-stage-spacer {
    min-height: clamp(420px, 48vh, 540px);
  }
}

@media (max-width: 768px) {
  .xp-stage-spacer {
    min-height: clamp(400px, 46vh, 500px);
  }

  /* On désactive la capture de gestes côté canvas pour pouvoir faire défiler la page.
     La rotation manuelle est remplacée par un tap pour retourner la carte. */
  .xp-card-canvas-layer {
    touch-action: pan-y;
  }

  #xp-card-viewer canvas {
    touch-action: pan-y !important;
  }
}

@media (max-width: 900px) {
  .xp-stage-spacer {
    min-height: clamp(380px, 44vh, 460px);
  }
}