@font-face {
  font-family: 'EB Garamond';
  src: url(fonts/eb-garamond.woff2) format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url(fonts/eb-garamond-italic.woff2) format('woff2');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --encre: #ece5d6;
  --fond: #0a0908;
  --vermillon: #e5482e;
  font-size: clamp(14px, 0.5vw + 11.5px, 18px);
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--fond);
  color: var(--encre);
}

body {
  font-family: 'EB Garamond', Garamond, 'Iowan Old Style', Palatino, Georgia, serif;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

#spirale, #scene, #etiquettes {
  position: fixed;
  inset: 0;
}
#scene {
  touch-action: none;
  cursor: grab;
}
#scene:active { cursor: grabbing; }
#etiquettes {
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s;
}
.pret #etiquettes { opacity: 1; }

/* ---- The words laid on the spiral ---- */

.moment, .repere, .maintenant, .fin {
  position: absolute;
  left: 0;
  top: 0;
  text-shadow: 0 0 3px var(--fond), 0 0 9px var(--fond), 0 0 16px var(--fond);
}
.moment { width: max-content; }
.moment .dit {
  display: block;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.2;
}
.moment .quand {
  display: block;
  margin-top: 0.18em;
  font-size: 0.86rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  opacity: 0.6;
}
.visiteur .quand { color: var(--vermillon); opacity: 0.95; }

.repere {
  white-space: nowrap;
  font-size: 0.8rem;
  color: rgba(236, 229, 214, 0.58);
}
.repere .il-y-a { font-style: italic; margin-right: 0.55em; }
sup {
  font-size: 0.68em;
  line-height: 0;
  vertical-align: 0.55em;
  margin-left: 0.04em;
}

.maintenant {
  font-style: italic;
  font-size: 0.86rem;
  white-space: nowrap;
}

.fin { width: max-content; }
.fin .devise {
  display: block;
  font-style: italic;
  font-size: 1.5rem;
}
.fin .traduction {
  display: block;
  margin-top: 0.2em;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.07em;
  opacity: 0.6;
}

/* ---- What stays on the screen ---- */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  pointer-events: none;
}
header nav { display: flex; gap: 0.6em; }
button {
  pointer-events: auto;
  padding: 8px 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.02rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.09em;
  opacity: 0.72;
  cursor: pointer;
}
button:hover, button:focus-visible { opacity: 1; }
button:focus-visible { outline: 1px solid rgba(236, 229, 214, 0.5); outline-offset: 2px; }
#titre { letter-spacing: 0.18em; font-size: 1.1rem; }
#ecouter[aria-pressed='true'] { color: var(--vermillon); opacity: 0.95; }

#invite, #pause {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0 22px;
  text-align: center;
  pointer-events: none;
}
#invite {
  bottom: max(26px, env(safe-area-inset-bottom));
  max-width: 34em;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.35;
  opacity: 0;
  text-shadow: 0 0 6px var(--fond), 0 0 14px var(--fond);
}
.en-pause #invite { visibility: hidden; }
#pause {
  bottom: max(18px, env(safe-area-inset-bottom));
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  opacity: 0.6;
}

/* ---- The text ---- */

#texte {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background: var(--fond);
  user-select: text;
  -webkit-user-select: text;
  outline: none;
}
#texte[hidden] { display: none; }
#texte .page {
  max-width: 33em;
  margin: 0 auto;
  padding: max(64px, env(safe-area-inset-top)) 24px 72px;
  font-size: 1.14rem;
  line-height: 1.5;
}
#texte h1 {
  margin: 0 0 1.2em;
  font-weight: 400;
  font-size: 1.5rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.18em;
}
#texte p { margin: 0 0 1em; }
#texte .signature { margin-top: 2em; font-style: italic; opacity: 0.8; }
#texte .gestes { margin-top: 2.4em; font-size: 0.92rem; opacity: 0.6; }
#fermer { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }

noscript p { max-width: 33em; margin: 4em auto; padding: 0 24px; line-height: 1.5; }