/* SECTION VISITE 3D — la scène Gaussian Splatting dans la page
 * ═══════════════════════════════════════════════════════════════════════════
 * Rien ici ne dépend d'un fichier servi par un tiers : ni police, ni image.
 *
 * ⚠️ LA HAUTEUR EST EN `svh`, PAS EN `vh`. Sur téléphone, `100vh` compte la
 * barre d'adresse comme si elle n'existait pas : la scène déborde sous l'écran
 * et le bouton d'en dessous devient inatteignable au pouce. `svh` prend la
 * PLUS PETITE hauteur visible — celle qu'on a vraiment quand la barre est là.
 */

.visite3d {
  position: relative;
}

.visite3d .wrap {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}

/* ── LE CADRE DE LA SCÈNE ───────────────────────────────────────────────────
   `aspect-ratio` sur grand écran, hauteur bornée sur téléphone : une scène 3D
   qui prend tout l'écran d'un téléphone donne l'impression d'une application
   dont on ne peut plus sortir. On laisse toujours voir qu'il y a une page
   dessous et dessus. */
.visite3d-cadre {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78svh;
  min-height: 320px;
  overflow: hidden;
  border-radius: 18px;
  background: #0a0d12;
  /* Le liseré froid rappelle le reste de la page sans imiter une carte. */
  box-shadow:
    0 0 0 1px rgba(120, 190, 255, 0.16),
    0 26px 70px -30px rgba(0, 0, 0, 0.9);
}

@media (max-width: 760px) {
  .visite3d-cadre {
    aspect-ratio: 4 / 5;   /* portrait : un bâtiment se regarde en hauteur */
    max-height: 68svh;
  }
}

.visite3d-cadre canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* ⛔ NE JAMAIS METTRE `touch-action: none` ICI.
     Le canvas avalerait le geste vertical et LA PAGE NE SCROLLERAIT PLUS AU
     DOIGT — le visiteur se retrouve prisonnier de la section. Le module JS
     pose `pan-y` : l'horizontale tourne la scène, la verticale reste à la
     page. C'est le même défaut qui a rendu un menu inutilisable sur TOUS les
     téléphones sans qu'un test le voie. */
  touch-action: pan-y;
  cursor: grab;
}
.visite3d-cadre canvas:active { cursor: grabbing; }

/* ── L'ÉTAT D'ATTENTE ───────────────────────────────────────────────────────
   40 Mo n'arrivent pas instantanément sur une 4G tessinoise. Tant que la
   scène n'est pas dessinée, on montre un fond calme et un mot — jamais un
   rectangle noir muet, qui se lit comme une page cassée. */
.visite3d-attente {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.9rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(60, 120, 190, 0.22), transparent 70%),
    #0a0d12;
  color: #cfe3f7;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: opacity 0.5s ease;
}

/* La scène est prête → le voile s'efface. `pointer-events: none` sinon il
   continue d'intercepter le geste alors qu'il est invisible. */
.visite3d-cadre[data-splat-etat="pret"] .visite3d-attente {
  opacity: 0;
  pointer-events: none;
}

.visite3d-attente-rond {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(150, 205, 255, 0.25);
  border-top-color: rgba(150, 205, 255, 0.9);
  animation: visite3dTourne 0.9s linear infinite;
}

@keyframes visite3dTourne { to { transform: rotate(360deg); } }

/* Le visiteur qui a demandé moins d'animations ne reçoit pas un rond qui
   tourne à l'infini : le projet a déjà un test-mouvement-reduit.mjs, cette
   section doit le passer comme les autres. */
@media (prefers-reduced-motion: reduce) {
  .visite3d-attente-rond { animation: none; opacity: 0.5; }
}

/* ── LE SECOURS ─────────────────────────────────────────────────────────────
   WebGL2 absent, fichier introuvable, mémoire insuffisante : un site vendu ne
   montre pas un carré noir. Le module pose data-splat-etat="secours". */
.visite3d-cadre[data-splat-etat="secours"] .visite3d-attente::after {
  content: "Votre appareil n'affiche pas la visite 3D. Le reste de la page fonctionne normalement.";
  display: block;
  max-width: 34ch;
  opacity: 0.75;
  font-size: 0.85rem;
}
.visite3d-cadre[data-splat-etat="secours"] .visite3d-attente-rond { display: none; }

/* ── LE MODE D'EMPLOI ───────────────────────────────────────────────────────
   Personne ne devine qu'une image se fait tourner au doigt. Une ligne suffit,
   et elle disparaît dès qu'on a compris (le JS retire l'attribut au 1er geste). */
.visite3d-aide {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(6, 10, 16, 0.66);
  color: #d8e9fb;
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.visite3d-cadre[data-splat-touche] .visite3d-aide { opacity: 0; }

/* ── LE CRÉDIT — OBLIGATOIRE, PAS DÉCORATIF ─────────────────────────────────
   La scène de démonstration est sous licence CC BY 4.0 : l'attribution
   (auteur + licence + lien) est une CONDITION de l'autorisation, y compris
   commerciale. La retirer rendrait l'usage illicite. Elle disparaîtra
   naturellement le jour où la scène sera une capture de Matt. */
.visite3d-credit {
  font-size: 0.78rem;
  opacity: 0.62;
  line-height: 1.5;
}
.visite3d-credit a { color: inherit; text-decoration: underline; }