/* VOYX v2 — the site is a map. Tokens and fonts come from ../commun/voyx.css. */

/* ─── The words (and, without JavaScript, the whole page: top to bottom) ─── */
.sol, .scene, .hud { display: none; }
.monde { display: grid; gap: 18vh; padding: 14vh var(--gutter) 12vh; justify-items: center; }
.noeud { width: min(100%, 980px); display: grid; justify-items: center; gap: 34px 28px; }
.pancarte { grid-column: 1 / -1; text-align: center; display: grid; justify-items: center; }
.pancarte > * { margin: 0; }
.etiquette { color: var(--ton-80); }
.titre { font-size: clamp(42px, 5vw, 74px); margin-top: 10px; max-width: 13em; text-wrap: balance; }
h1.titre { font-size: clamp(46px, 5.8vw, 86px); }
/* What is promised, right under what is announced. */
.promesse { margin-top: 18px; max-width: 24ch; font: 600 clamp(20px, 1.9vw, 26px)/1.25 var(--sans); letter-spacing: -.015em; text-wrap: balance; }
/* What the planet's torus says: Jacques' recording, written out. */
.dit { margin-top: 16px; max-width: 46ch; font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.45; font-weight: 450; color: var(--ton-80); text-wrap: pretty; }
.dit::before { content: '“'; } .dit::after { content: '”'; }
.actes { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; }
/* The official App Store badge, white, at the height of the buttons beside it. */
.badge { display: inline-block; line-height: 0; border-radius: 12px; overflow: hidden; transition: transform .5s var(--ressort); }
.badge img { height: 60px; width: auto; }
.badge:hover { transform: scale(1.04); }
.badge:active { transform: scale(.97); }
.badge:focus-visible { outline: 2px solid var(--lumiere); outline-offset: 4px; }
.lien { font: 500 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid; padding-bottom: 3px; }
button.lien { display: inline-block; margin: 12px 0 0; padding: 0 0 3px; border: 0; border-bottom: 1.5px solid; background: none; color: var(--encre); cursor: pointer; }
.gestes { display: flex; justify-content: center; gap: 18px; white-space: nowrap; margin: 0; }
.etat { display: block; margin-top: 8px; min-height: 1.3em; font-size: 11px; }

/* ─── The app's metrics (MetricsView): five cells on the right, label over value ─── */
.mesures { position: fixed; z-index: 7; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 20px; text-align: right; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
body.ecoute .mesures, body.metriques .mesures { opacity: 1; }
.mesure { transition: opacity .5s ease; }
.mesure.repos { opacity: .3; }   /* a measure apart: the others rest, pale */
.mesure b { display: block; margin-bottom: 4px; font: 400 12px var(--display); letter-spacing: .16em; color: var(--ton-80); opacity: .8; }
.mesure .val { display: inline-flex; align-items: baseline; gap: 3px; }
.mesure .n { display: inline-flex; font: 400 clamp(24px, 2.1vw, 32px)/1 var(--display); color: var(--c, var(--encre)); opacity: .85; transition: color 1s ease-in-out; }
.mesure small { font: 600 13px var(--display); color: var(--ton-46); }
.roue { display: inline-block; height: 1em; overflow: hidden; }
.roue > span { display: flex; flex-direction: column; transition: transform var(--glisse, 1s) ease-in-out; }
.roue > span > i { font-style: normal; height: 1em; line-height: 1; text-align: center; }
.roue.pale { opacity: .3; }

/* A measure in big, on its planet: its name, its value on rollers, its unit. */
.grand { display: grid; justify-items: center; gap: 2px; margin-bottom: 14px; }
.grand b { font: 400 14px var(--display); letter-spacing: .22em; color: var(--ton-80); }
.grand .val { display: inline-flex; align-items: baseline; gap: 8px; }
.grand .n { display: inline-flex; font: 400 clamp(64px, 7vw, 112px)/1 var(--display); color: var(--c, var(--encre)); transition: color .3s ease; }
#note { min-width: 2.2em; justify-content: center; }
.grand small { font: 600 clamp(16px, 1.4vw, 22px) var(--display); color: var(--ton-46); }
.texte { margin-top: 14px; max-width: 34ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.42; font-weight: 450; color: var(--ton-80); text-wrap: pretty; }
/* The way back: the place this one stands around. */
.carte .retour { left: var(--gutter); top: calc(64px + env(safe-area-inset-top)); height: 36px; align-items: center; padding: 0; border: 0; background: none; color: var(--encre); font-size: 12px; }
.carte .retour[hidden] { display: none; }
@media (max-width: 760px) {
  /* a phone: the five in a row under the name (MetricsView `enLigne`) */
  .mesures { left: 14px; right: 14px; top: calc(96px + env(safe-area-inset-top)); transform: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; text-align: left; }
  .mesure b { font-size: 10px; letter-spacing: .1em; } .mesure .n { font-size: 20px; } .mesure small { font-size: 10px; }
  .grand .n { font-size: 60px; }
  .texte { font-size: 16px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .roue > span { transition: none; } }
.note { margin-top: 14px; font-size: 13px; color: var(--ton-46); }
/* The door: the one place gold appears. */
.porte {
  display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 36px;
  border-radius: 999px; background: var(--lumiere); color: var(--nuit); text-decoration: none;
  font: 400 25px var(--display); letter-spacing: .01em;
  -webkit-mask-image: var(--semis); mask-image: var(--semis); -webkit-mask-size: 192px; mask-size: 192px;
  transition: transform .5s var(--ressort);
}
.porte span { font: 17px var(--sans); }
.feel { height: 60px; font-size: 25px; }
.porte:hover { transform: scale(1.04); }
.porte:active { transform: scale(.97); }
:is(.porte, .lien, .hud button):focus-visible { outline: 2px solid var(--lumiere); outline-offset: 4px; }
.pied { margin-top: 30px; display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; font-size: 12px; letter-spacing: .08em; color: var(--ton-46); }
.pied a { text-decoration: none; }

/* ─── The map: a ground seen from above and behind, the words standing on it ─── */
html.carte, .carte body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.carte body { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab; }
.carte body.tire { cursor: grabbing; }
.carte .sol { display: block; position: fixed; inset: -256px; z-index: 0; will-change: transform; background-image: var(--sable); background-size: 256px 256px; }
.carte .scene { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.carte .pancarte {
  position: fixed; left: 0; top: 0; z-index: 2; transform-origin: 50% 0; will-change: transform, opacity;
  opacity: 0; visibility: hidden; cursor: pointer; transition: opacity .5s ease, visibility 0s .5s;
}
.carte .pancarte.vu { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.carte .pancarte { width: min(92vw, 660px); }
/* Semantic zoom: from far, a name; closer, what it says. */
.carte .monde, .carte .noeud { display: contents; }
/* From its parent's view a place is its name and, in a line or two, what it is (.loin, or its own title and text);
   in its own view, everything it says. The two trade places softly: the far words lift away out of focus,
   the lines come up into focus one after the other. */
.carte .pancarte { pointer-events: none; }
.carte .pancarte > * { opacity: 0; filter: blur(9px); transform: translateY(16px); pointer-events: none; transition: opacity .4s ease, filter .4s ease, transform .4s ease; }
.carte .pancarte.detail > :not(.loin), .carte .pancarte:not(.detail) > .loin, .carte .pancarte:not(.a-nom) > :is(.titre, .texte) {
  opacity: 1; filter: none; transform: none; pointer-events: auto;
  transition: opacity .8s ease, filter .8s ease, transform 1s var(--ressort); transition-delay: calc(var(--i, 0) * 80ms);
}
.carte .pancarte.detail > :nth-child(2) { --i: 1; } .carte .pancarte.detail > :nth-child(3) { --i: 2; } .carte .pancarte.detail > :nth-child(4) { --i: 3; }
.carte .pancarte.detail > :nth-child(5) { --i: 4; } .carte .pancarte.detail > :nth-child(n + 6) { --i: 5; }
.nom { font-size: clamp(42px, 5vw, 74px); margin: 0; }
.carte .loin { position: absolute; left: 0; right: 0; top: 0; display: grid; justify-items: center; }
.carte .pancarte.detail > .loin { transform: translateY(-16px); }
/* The text of a small place is read from its parent's view (14.5 px there) and grows with the zoom; a place that holds others says its own at reading size. */
.carte .texte { font-size: 46px; max-width: 27ch; margin-top: .45em; }
.carte .loin .texte { font-size: 42px; max-width: 21ch; }
.carte .branche > .texte { font-size: 24px; max-width: 34ch; }
.carte .pancarte:not(.branche) > .titre { font-size: 74px; }
.carte .loin .texte { transition: opacity .5s ease; }
.carte .pancarte:not(.resume):not(.detail) .texte { opacity: 0; }
.carte .pancarte:not(.detail) :is(a, button) { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .carte .pancarte > * { filter: none !important; transform: none !important; transition: opacity .3s ease !important; } }
.carte :is(a, button) { cursor: pointer; }

/* ─── The instruments ─── */
.carte .hud { display: flex; position: fixed; z-index: 5; }
.haut {
  top: 0; left: 0; right: 0; align-items: center; justify-content: space-between; pointer-events: none;
  padding: calc(16px + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 0 var(--gutter);
}
.haut > * { pointer-events: auto; }
.logo { border: 0; padding: 0; background: none; color: var(--encre); font: 400 26px var(--display); letter-spacing: .04em; }
.droite { display: flex; align-items: center; gap: 14px; }
.portee { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.son { height: 36px; padding: 0 16px; border: 0; border-radius: 99px; font-size: 11px; color: var(--encre); background: color-mix(in srgb, var(--fond) 70%, white); box-shadow: inset 0 0 0 1.5px var(--encre); }
.marque { width: 42px; height: auto; color: var(--encre); }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo .marque { width: 36px; }
.son[aria-pressed="true"] { background: var(--encre); color: var(--fond); }
/* Until Jacques' recordings are in voix/, there is nothing to switch on. */
body:not(.sonore) :is(.son, .portee) { display: none; }
/* The legend: VOYX and its stages, a column of dots on the left (the top is for the arc); their names when you point at it. */
.carte .rail { left: calc(var(--gutter) - 6px); top: 50%; transform: translateY(-50%); flex-direction: column; gap: 2px; z-index: 6; }
.rail button { display: flex; align-items: center; gap: 10px; height: 22px; white-space: nowrap; border: 0; padding: 0; background: none; color: var(--ton-46); font: 400 12px var(--display); letter-spacing: .16em; text-transform: uppercase; transition: color .3s; }
.rail button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; transition: transform .6s var(--ressort); }
@media (min-width: 761px) { .rail:not(:hover) button { font-size: 0; } }
.rail button:hover { color: var(--ton-80); }
.rail button[aria-current="true"] { color: var(--encre); }
.rail button[aria-current="true"]::before { transform: scale(1.6); }
.carte .zoom {
  right: max(var(--gutter), env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); flex-direction: column;
  border-radius: 99px; background: color-mix(in srgb, var(--fond) 70%, white); box-shadow: inset 0 0 0 1.5px var(--encre);
}
.zoom button { width: 44px; height: 44px; border: 0; padding: 0; background: none; color: var(--encre); font: 400 24px/1 var(--display); }
.zoom button:active { opacity: .5; }
.carte .avance {
  left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  align-items: center; gap: 10px; height: 50px; padding: 0 28px; border: 0; border-radius: 99px;
  background: color-mix(in srgb, var(--fond) 70%, white); box-shadow: inset 0 0 0 1.5px var(--encre);
  color: var(--encre); font: 400 20px var(--display); letter-spacing: .01em; white-space: nowrap;
  transition: transform .5s var(--ressort);
}
.avance span { font: 16px var(--sans); }
.avance:active { transform: translateX(-50%) scale(.96); }
.carte .avance[hidden] { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  .titre { font-size: clamp(36px, 10.5vw, 46px); }
  h1.titre { font-size: clamp(40px, 12vw, 52px); }
  .promesse { font-size: 19px; margin-top: 12px; }
  .dit { margin-top: 12px; }
  .actes { margin-top: 16px; }
  .feel, .porte { height: 54px; font-size: 22px; padding: 0 30px; }
  .badge img { height: 54px; }
  .logo { font-size: 22px; gap: 8px; }
  .logo .marque { width: 30px; }
  .carte .rail { left: 6px; }
  .rail button { font-size: 0; gap: 0; width: 20px; height: 20px; justify-content: center; }
  .carte .zoom { display: none; }   /* a phone pinches */
}