/* ==========================================================
   Ekhos — écran d'ouverture (logo écrit à la main + onde)
   ========================================================== */
#ekhos-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EFE8DC;
  cursor: pointer;
  /* filet de sécurité : si le script ne tourne pas, l'écran s'efface seul */
  animation: ekhos-intro-secours 0.4s ease 9s forwards;
}
html.intro-vue #ekhos-intro { display: none; }
html.intro-en-cours,
html.intro-en-cours body { overflow: hidden; }
html.intro-en-cours .navbar .brand-logo { opacity: 0; }

@keyframes ekhos-intro-secours { to { opacity: 0; visibility: hidden; } }

.intro-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vw, 18px);
  width: min(78vw, 640px);
}
.intro-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: transform;
}
.intro-plume {
  fill: none;
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.intro-onde {
  display: block;
  width: 74%;
  height: auto;
  overflow: visible;
}
.intro-passer {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  background: none;
  padding: 12px 18px;
  font: 600 11px/1 'Plus Jakarta Sans', -apple-system, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6f685c;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.intro-passer.visible { opacity: 1; }
.intro-passer:focus-visible { outline: 2px solid #111111; outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  #ekhos-intro { display: none; }
}