/* ===== Intro Oreka — écran d'accueil animé =====
   À inclure AVANT style.css. Ne touche à rien d'autre sur la page. */

#oreka-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;               /* thème sombre par défaut */
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: default;
  transition: opacity .9s cubic-bezier(.4, 0, .2, 1);
}
#oreka-intro.is-leaving { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
#oreka-intro.is-choosing { pointer-events: none; }
#oreka-intro.is-choosing .intro-lang, #oreka-intro.is-choosing .intro-tagline { opacity: 0 !important; transition: opacity .35s ease; }
#oreka-intro canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#oreka-intro .intro-centre { position: relative; display: flex; flex-direction: column; align-items: center; }
#oreka-intro .intro-logo {
  position: relative;
  width: min(46vw, 320px);
  opacity: 0;
  transform: scale(.96);
  transition: opacity 1.1s cubic-bezier(.2, .6, .2, 1), transform 1.4s cubic-bezier(.2, .6, .2, 1);
  will-change: opacity, transform;
}
#oreka-intro .intro-logo svg { width: 100%; height: auto; display: block; overflow: visible; }
#oreka-intro .intro-centre, #oreka-intro .intro-logo { overflow: visible; }
#oreka-intro .intro-logo svg path { fill: #fff; }
#oreka-intro.theme-clair { background: #fff; }
#oreka-intro.theme-clair .intro-logo svg path { fill: #000; }
#oreka-intro.theme-clair .intro-tagline, #oreka-intro.theme-clair .intro-lang button { color: #000; }
#oreka-intro.theme-clair .intro-lang .sep { background: #000; }
#oreka-intro.show-logo .intro-logo { opacity: 1; transform: scale(1); }

#oreka-intro .intro-tagline {
  position: relative;
  margin: clamp(12px, 2.2vh, 22px) auto 0;
  max-width: min(56vw, 330px);
  text-align: center;
  text-wrap: balance;
  color: #fff;
  font: 500 11px/1.5 "Switzer", "Inter", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1s ease, transform 1s ease;
}
#oreka-intro.show-tagline .intro-tagline { opacity: .72; transform: none; }

/* Choix de langue, sous le logo */
#oreka-intro .intro-lang {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: clamp(22px, 4vh, 40px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1s ease .1s, transform 1s ease .1s;
}
#oreka-intro.show-lang .intro-lang { opacity: 1; transform: none; }
#oreka-intro .intro-lang button {
  color: #fff;
  background: none; border: 0; cursor: pointer;
  font: 500 13px/1 "Switzer", "Inter", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 12px 18px;
  opacity: .6;
  transition: opacity .3s ease;
  position: relative;
}
#oreka-intro .intro-lang button::after {
  content: "";
  position: absolute; left: 18px; right: 18px; bottom: 6px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .6, .2, 1);
}
#oreka-intro .intro-lang button:hover, #oreka-intro .intro-lang button:focus-visible { opacity: 1; outline: none; }
#oreka-intro .intro-lang button:hover::after, #oreka-intro .intro-lang button:focus-visible::after { transform: scaleX(1); }
#oreka-intro .intro-lang .sep { width: 1px; height: 14px; background: #fff; opacity: .35; }

/* Empêche le défilement de la page tant que l'intro est affichée */
html.intro-active, html.intro-active body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  #oreka-intro canvas { display: none; }
  #oreka-intro .intro-logo, #oreka-intro .intro-tagline, #oreka-intro .intro-lang { transition-duration: .4s; }
}