/* ===== Intro cinématographique — accueil uniquement ===== */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--noir);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.splash-logo-wrap {
  width: 78%;
  max-width: 520px;
  text-align: center;
  opacity: 0;
  transform: scale(0.95);
  animation: splash-fondu 5.5s cubic-bezier(.2,.7,.2,1) forwards;
}

.splash-logo-wrap img { width: 100%; height: auto; }

@keyframes splash-fondu {
  0%   { opacity: 0; transform: scale(0.95); }
  15%  { opacity: 1; transform: scale(1); }
  82%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.03); }
}

.splash-passer {
  position: absolute;
  bottom: 2.6rem;
  right: 2.6rem;
  border-radius: 999px;
  border: 1px solid var(--touche-n-contour, rgba(255,255,255,0.18));
  background: var(--touche-n-fond, #1d1d1f);
  color: #f4efe9;
  padding: 0.75rem 1.7rem;
  font-family: var(--texte);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 4px 0 #000, 0 9px 16px -8px rgba(0,0,0,0.85);
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
  .splash-passer:hover {
    background: var(--touche-n-fond-survol, #27272a);
    border-color: var(--touche-n-contour-survol, rgba(255,255,255,0.34));
    color: #fff;
  }
}
.splash-passer:active {
  transform: translateY(4px);
  background: var(--touche-appui-fond, linear-gradient(180deg, #a3243a 0%, #6d1222 100%));
  border-color: var(--touche-appui-contour, rgba(229,108,128,0.9));
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.7) inset, 0 0 16px rgba(213,84,104,0.4);
}

body.splash-active { overflow: hidden; }

/* Affiche le logo dès le tout début du chargement de la page (voir le script en
   haut de <body> dans index.html/en/index.html) — sélecteur par id pour l'emporter
   sur .u-hidden (posé par défaut sur cet élément) quel que soit l'ordre des feuilles
   de style. */
html.intro-a-venir #logo-splash { display: flex; }

@media (max-width: 700px) {
  .splash-passer { bottom: 1.8rem; right: 1.8rem; padding: 0.65rem 1.3rem; font-size: 0.6rem; }
}

/* Intro animée « faisceau de lumière » (js/intro-faisceau.js, 04/10/2026) : le canvas
   occupe tout l'écran et remplace le logo fixe, qui reste en secours si l'animation ne
   peut pas démarrer (moins d'animations demandé, image introuvable…). */
.splash-canvas { position: absolute; inset: 0; display: block; }
.splash.intro-anime { background: #050304; }
.splash.intro-anime .splash-logo-wrap { display: none; }
.splash-passer { z-index: 1; }