/* ==================================================================
   VSM WORLD — feuille de style
   Palette : blanc / gris / noir, à la manière d'un site Apple, avec
   une unique touche de couleur (l'or de l'identité VSMF) réservée aux
   accents. Pensé pour un grand écran de stand, en plein jour.
   ================================================================== */

:root {
  --blanc:       #ffffff;
  --brume:       #f5f5f7;
  --brume-2:     #e8e8ec;
  --encre:       #1d1d1f;
  --encre-douce: #48484a;
  --gris:        #6e6e73;
  --gris-clair:  #a1a1a6;
  --trait:       rgba(29, 29, 31, 0.1);

  --accent:       #a9812f;
  --accent-clair: #c9a355;
  --accent-sourd: rgba(169, 129, 47, 0.35);
  --accent-voile: rgba(169, 129, 47, 0.08);

  --texte:        var(--encre);
  --texte-doux:   var(--gris);
  --texte-faible: rgba(110, 110, 115, 0.7);

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique proportionnelle à l'écran. Elle commande
     toute la taille des textes : augmentez-la si l'écran du stand est
     regardé de loin, diminuez-la s'il est vu de près. */
  --u: clamp(12px, 1.15vw, 26px);

  --marge: clamp(24px, 3.2vw, 72px);
  --transition: 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--brume);
  color: var(--texte);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body { cursor: default; }
body.sans-curseur { cursor: none; }

#scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--brume);
}

/* ---------- Globe ---------- */

#globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ---------- Voile ---------- */

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.05) 100%);
}

.voile {
  position: absolute;
  pointer-events: none;
}
.voile--gauche,
.voile--droite {
  top: 0;
  bottom: 0;
  width: 36%;
}
.voile--gauche {
  left: 0;
  background: linear-gradient(to right,
    rgba(245, 245, 247, 0.95) 0%,
    rgba(245, 245, 247, 0.72) 30%,
    rgba(245, 245, 247, 0.3) 65%,
    rgba(245, 245, 247, 0) 100%);
}
.voile--droite {
  right: 0;
  background: linear-gradient(to left,
    rgba(245, 245, 247, 0.95) 0%,
    rgba(245, 245, 247, 0.72) 30%,
    rgba(245, 245, 247, 0.3) 65%,
    rgba(245, 245, 247, 0) 100%);
}
.voile--bas {
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: linear-gradient(to top,
    rgba(245, 245, 247, 0.92) 0%,
    rgba(245, 245, 247, 0.4) 55%,
    rgba(245, 245, 247, 0) 100%);
}

/* ---------- Ornements d'angle ---------- */

.coin {
  position: absolute;
  width: clamp(48px, 5vw, 104px);
  height: clamp(48px, 5vw, 104px);
  color: var(--accent);
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 600ms ease;
}
.coin--tl { top: calc(var(--marge) * 0.45); left: calc(var(--marge) * 0.45); }
.coin--tr { top: calc(var(--marge) * 0.45); right: calc(var(--marge) * 0.45); transform: scaleX(-1); }
.coin--bl { bottom: calc(var(--marge) * 0.45); left: calc(var(--marge) * 0.45); transform: scaleY(-1); }
.coin--br { bottom: calc(var(--marge) * 0.45); right: calc(var(--marge) * 0.45); transform: scale(-1); }

/* ---------- En-tête ---------- */

.entete {
  position: absolute;
  top: var(--marge);
  left: var(--marge);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}

.entete__marque {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.9);
}

.entete__icone {
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.6);
  flex: none;
  color: var(--encre);
  opacity: 0.9;
  animation: rotation-lente 90s linear infinite;
}

@keyframes rotation-lente { to { transform: rotate(360deg); } }

.entete__titre {
  margin: 0;
  font-family: var(--serif);
  font-size: calc(var(--u) * 1.3);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  color: var(--texte);
}

/* ---------- Fiche du lieu ---------- */

.fiche {
  position: absolute;
  right: var(--marge);
  top: 50%;
  width: min(34ch, 34vw);
  transform: translate(calc(var(--u) * 2.2), -50%);
  opacity: 0;
  visibility: hidden;
  text-align: right;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear 900ms;
}

.fiche.est-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
  transition: opacity var(--transition), transform var(--transition), visibility 0s;
}

.fiche__filet {
  height: 1px;
  width: 100%;
  margin-bottom: calc(var(--u) * 1.3);
  background: linear-gradient(to left, var(--accent), rgba(169, 129, 47, 0));
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms;
}
.fiche.est-visible .fiche__filet { transform: scaleX(1); }

.fiche__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 0.55);
  margin: 0 0 calc(var(--u) * 1.1) auto;
  width: 100%;
}
.fiche__logo-drapeau {
  flex: none;
  width: calc(var(--u) * 2.3);
  height: calc(var(--u) * 1.72);
  border: 1px solid var(--trait);
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(29, 29, 31, 0.16);
}
#fiche-logo-img {
  display: none;
  max-width: 100%;
  max-height: calc(var(--u) * 4.6);
  object-fit: contain;
  object-position: right center;
  filter: grayscale(1) contrast(1.05);
}
.fiche__logo.a-un-logo #fiche-logo-img { display: block; }

.fiche__sigle {
  margin: 0 0 calc(var(--u) * 0.55);
  font-size: calc(var(--u) * 0.82);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
}

.fiche__nom {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--u) * 2.1);
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: var(--texte);
  text-wrap: balance;
}

.fiche__lieu {
  margin: calc(var(--u) * 0.85) 0 0;
  font-size: calc(var(--u) * 1.05);
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: var(--texte-doux);
}
.fiche__pays {
  margin: calc(var(--u) * 0.3) 0 0;
  font-size: calc(var(--u) * 0.8);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}

.fiche__texte {
  margin: calc(var(--u) * 1.1) 0 0;
  font-size: calc(var(--u) * 0.82);
  line-height: 1.55;
  color: var(--texte-doux);
}

.fiche__doute {
  display: none;
  margin: calc(var(--u) * 0.9) 0 0;
  font-size: calc(var(--u) * 0.7);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-clair);
}
.fiche.est-doute .fiche__doute { display: block; }

/* ---------- Galerie du lieu (photos / vidéos) ---------- */

.galerie {
  position: absolute;
  left: var(--marge);
  top: 50%;
  width: min(46ch, 40vw);
  transform: translate(calc(var(--u) * -2.2), -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear 900ms;
}
.galerie.est-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
  transition: opacity var(--transition), transform var(--transition), visibility 0s;
}

.galerie__titre {
  margin: 0 0 calc(var(--u) * 0.9);
  font-size: calc(var(--u) * 0.85);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
}

.galerie__pistes {
  display: flex;
  gap: calc(var(--u) * 0.75);
}

.galerie__tuile {
  flex: 1;
  aspect-ratio: 4 / 3;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1.1) rgba(29, 29, 31, 0.1);
}
.galerie__tuile img,
.galerie__tuile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.galerie__tuile--vide {
  flex-direction: column;
  gap: calc(var(--u) * 0.5);
  border-style: dashed;
  border-color: var(--trait);
  color: var(--gris-clair);
  box-shadow: none;
}
.galerie__icone {
  width: calc(var(--u) * 2.3);
  height: calc(var(--u) * 2.3);
}
.galerie__etiquette {
  font-size: calc(var(--u) * 0.58);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 0.4em;
}

/* ---------- Diaporama grand format (photos / vidéos d'un lieu) ----------
   Grand format, sous l'en-tête à gauche, pendant que la fiche (logo,
   nom, ville, texte) reste affichée à droite : rien ne doit rester
   vide à l'écran. Le globe se décale légèrement vers la droite pendant
   cette phase (voir Tour.avancer / Globe.definirVue) pour que son
   repère reste visible entre les deux, sans chevaucher ni la fiche ni
   le logo de l'en-tête. */

.diaporama {
  position: absolute;
  left: var(--marge);
  top: 50%;
  width: min(40vw, 760px);
  transform: translate(calc(var(--u) * -1.6), -50%);
  opacity: 0;
  visibility: hidden;
  text-align: left;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear 900ms;
}
.diaporama.est-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
  transition: opacity var(--transition), transform var(--transition), visibility 0s;
}

.diaporama__cadre {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--brume-2);
  border: 1px solid var(--trait);
  box-shadow: 0 calc(var(--u) * 0.9) calc(var(--u) * 2) rgba(29, 29, 31, 0.18);
}
.diaporama__media {
  position: absolute;
  inset: 0;
}
.diaporama__media img,
.diaporama__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.diaporama__jalons {
  margin-top: calc(var(--u) * 0.8);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--u) * 0.4);
}
.diaporama__jalon {
  width: calc(var(--u) * 0.42);
  height: calc(var(--u) * 0.42);
  border-radius: 50%;
  background: var(--trait);
  transition: background 300ms ease, transform 300ms ease;
}
.diaporama__jalon.est-actif {
  background: var(--accent);
  transform: scale(1.25);
}

/* ---------- Bandeau de bilan (vue monde) ---------- */

.bilan {
  position: absolute;
  left: 50%;
  bottom: calc(var(--marge) * 1.9);
  transform: translate(-50%, calc(var(--u) * 1.2));
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear 900ms;
}
.bilan.est-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--transition), transform var(--transition), visibility 0s;
}

.bilan__item { text-align: center; }

.bilan__nombre {
  display: block;
  font-family: var(--serif);
  font-size: calc(var(--u) * 2.5);
  line-height: 1;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}

.bilan__label {
  display: block;
  margin-top: calc(var(--u) * 0.45);
  font-size: calc(var(--u) * 0.72);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.bilan__trait {
  width: 1px;
  height: calc(var(--u) * 2.6);
  background: linear-gradient(to bottom, transparent, var(--trait), transparent);
}

/* ---------- Parcours ---------- */

.parcours {
  position: absolute;
  left: 50%;
  bottom: calc(var(--marge) * 0.85);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.55);
  max-width: 78vw;
  flex-wrap: wrap;
  justify-content: center;
  transition: opacity var(--transition);
}

.jalon {
  position: relative;
  width: calc(var(--u) * 1.5);
  height: 3px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: rgba(29, 29, 31, 0.14);
  cursor: pointer;
  transition: background 400ms ease, width 600ms cubic-bezier(0.22,0.61,0.36,1);
}
.jalon:hover { background: var(--accent-sourd); }
.jalon.est-passe { background: var(--accent-sourd); }
.jalon.est-actif {
  width: calc(var(--u) * 3.4);
  background: var(--accent);
}
.jalon--monde { width: calc(var(--u) * 0.5); border-radius: 50%; height: calc(var(--u) * 0.5); }
.jalon--monde.est-actif { width: calc(var(--u) * 0.75); height: calc(var(--u) * 0.75); }

/* ---------- Aide clavier ---------- */

.aide {
  position: absolute;
  right: var(--marge);
  bottom: calc(var(--marge) * 0.9);
  display: flex;
  gap: calc(var(--u) * 1.1);
  font-size: calc(var(--u) * 0.68);
  letter-spacing: 0.12em;
  color: var(--texte-faible);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.aide.est-visible { opacity: 1; }

kbd {
  display: inline-block;
  padding: 0.15em 0.45em;
  margin-right: 0.25em;
  border: 1px solid var(--trait);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 0.95em;
  color: var(--texte-doux);
}

/* ---------- Indicateur de pause ---------- */

.etat-pause {
  position: absolute;
  top: var(--marge);
  right: var(--marge);
  padding: 0.45em 1.1em;
  border: 1px solid var(--accent-sourd);
  border-radius: 999px;
  font-size: calc(var(--u) * 0.72);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
}
.etat-pause.est-visible { opacity: 1; transform: translateY(0); }

/* ---------- Mode « interface masquée » (touche H) ---------- */

#scene.interface-masquee .entete,
#scene.interface-masquee .fiche,
#scene.interface-masquee .galerie,
#scene.interface-masquee .diaporama,
#scene.interface-masquee .bilan,
#scene.interface-masquee .parcours,
#scene.interface-masquee .aide,
#scene.interface-masquee .coin {
  opacity: 0 !important;
  pointer-events: none;
}

/* ---------- Écrans étroits (test sur téléphone / tablette) ---------- */

@media (max-aspect-ratio: 1/1) {
  .fiche {
    right: var(--marge);
    left: var(--marge);
    top: auto;
    bottom: calc(var(--marge) * 3.4);
    width: auto;
    transform: translateY(calc(var(--u) * 1.6));
  }
  .fiche.est-visible { transform: translateY(0); }
  .aide { display: none; }
  .galerie { display: none; }
  .diaporama { display: none; }
  .entete { max-width: none; right: var(--marge); }
}

@media (prefers-reduced-motion: reduce) {
  .entete__icone { animation: none; }
}