/* Bannière d'entrée, troisième version : le chantier filmé.
   Chargée après theme-noir.css et fx.css ; ne touche qu'à .entree et à ses enfants. */

.entree { height: 520vh; }
.entree__scene { background: #0a0a0a; }
.entree__affiche, .entree__boucle, .entree__canvas, .entree__voile { position: absolute; inset: 0; width: 100%; height: 100%; }
.entree__affiche, .entree__boucle { object-fit: cover; }
.entree__affiche { transition: opacity .6s var(--sortie); }
.entree.est-prete .entree__affiche { opacity: 0; }

/* La boucle : au repos, le sableur travaille derrière le plastique. Elle s'efface dès que le film démarre. */
.entree__boucle { z-index: 1; opacity: 0; transition: opacity .7s var(--sortie); pointer-events: none; }
.entree.est-prete .entree__boucle { opacity: 1; }
.entree.est-partie .entree__boucle { opacity: 0; transition-duration: .35s; }
.entree__canvas { z-index: 0; }

/* Le voile : juste ce qu'il faut pour lire le texte, jamais un filtre sur toute l'image */
.entree__voile { z-index: 2; pointer-events: none; opacity: 1;
  background:
    linear-gradient(to top, rgba(8, 8, 8, .86) 0%, rgba(8, 8, 8, .5) 22%, rgba(8, 8, 8, 0) 52%),
    linear-gradient(to bottom, rgba(8, 8, 8, .55) 0%, rgba(8, 8, 8, 0) 22%);
  transition: opacity .8s var(--sortie); }
.entree.est-dedans .entree__voile { opacity: .78; }
.entree.est-finie .entree__voile { opacity: 1; }

.entree__texte, .entree__acces, .entree__repere, .entree__actes, .entree__points { z-index: 3; }

/* Le titre : grand, calme, ivoire sur la pénombre du couloir */
.entree__texte--avant { bottom: clamp(56px, 9vh, 104px); }
.entree__titre { max-width: 12.5ch; font-size: clamp(50px, 7.6vw, 124px); line-height: .94; letter-spacing: -.024em; text-shadow: 0 2px 40px rgba(0, 0, 0, .35); }
.entree__titre em, .entree__ligne em { font-style: italic; color: var(--red-hi); }
.entree__actions { margin-top: 30px; align-items: center; }
.entree__indice { margin-top: 0; margin-left: 10px; }

/* Sur le chantier : une légende, et des annotations posées sur l'image comme sur un plan d'architecte */
.entree__texte--note { bottom: clamp(48px, 8vh, 92px); opacity: 0; pointer-events: none; }
.entree__ligne { margin-top: 16px; max-width: 16ch; font: 400 clamp(38px, 5.2vw, 84px)/.98 var(--serif); letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 34px rgba(0, 0, 0, .5); }
.entree__precision { margin-top: 18px; max-width: 44ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 18px rgba(0, 0, 0, .6); }

.entree__points { position: absolute; inset: 0; pointer-events: none; }
.point { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; opacity: 0; will-change: transform, opacity; white-space: nowrap; }
.point i { position: relative; flex: none; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.point i::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); animation: point-onde 2.6s cubic-bezier(.23, 1, .32, 1) infinite; }
.point s { flex: none; width: clamp(28px, 4vw, 56px); height: 1px; margin-top: -4.5px; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .55)); text-decoration: none; }
.point span { margin-top: -4.5px; padding: 9px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: #fff; background: rgba(12, 10, 8, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.point--gauche { flex-direction: row-reverse; translate: -100% 0; }
.point--gauche i { margin: -4.5px -4.5px 0 0; }
.point--gauche s { background: linear-gradient(270deg, #fff, rgba(255, 255, 255, .55)); }
@keyframes point-onde { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

/* La pièce finie */
.entree__texte--apres { top: auto; bottom: clamp(150px, 24vh, 250px); text-shadow: 0 2px 34px rgba(0, 0, 0, .5); }
.entree__titre--grand { max-width: 11ch; font-size: clamp(52px, 8vw, 132px); }
.entree__sous { margin-top: 18px; }

/* Les trois temps de la visite */
.entree__actes { position: absolute; top: 50%; right: max(24px, calc((100vw - 1200px) / 2 + 24px)); display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; transform: translateY(-50%); transition: opacity .6s var(--sortie); }
.entree__actes li { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .5); transition: color .5s var(--sortie); }
.entree__actes li::after { content: ''; width: 18px; height: 1px; background: currentColor; transition: width .6s var(--sortie); }
.entree__actes li.est-actif { color: #fff; }
.entree__actes li.est-actif::after { width: 44px; }
.entree.est-finie .entree__actes { opacity: 0; }
.entree__repere { display: none; }

/* L'accès rapide, au pied de la pièce finie */
.entree__acces { bottom: clamp(18px, 3.4vh, 36px); }

@media (max-width: 1080px) {
  .entree__texte--apres { bottom: clamp(190px, 30vh, 280px); }
}
@media (max-width: 767px) {
  .entree { height: 440vh; }
  .entree__texte--avant { bottom: 34px; }
  .entree__titre { font-size: clamp(44px, 13.4vw, 72px); }
  .entree__indice { display: none; }
  .entree__actes { display: none; }
  .entree__texte--note { bottom: 34px; }
  .entree__ligne { font-size: clamp(38px, 11.5vw, 60px); }
  .entree__texte--apres { top: 92px; bottom: auto; }
  .entree__titre--grand { font-size: clamp(46px, 14vw, 78px); }
  .point span { font-size: 11.5px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .entree { height: auto; }
  .entree__scene { position: relative; min-height: 100svh; background: #0a0a0a url(hero/img/fini.webp) center / cover no-repeat; }
  .entree__affiche, .entree__boucle, .entree__canvas, .entree__texte--avant, .entree__texte--note, .entree__points, .entree__actes { display: none; }
  .entree__texte--apres, .entree__acces { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}

/* Retouches après essai à l'écran */
.entree__actes li { text-shadow: 0 1px 14px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .5); }
.entree__actes li::after { box-shadow: 0 0 10px rgba(0, 0, 0, .6); }
.entree__texte--note .eyebrow, .entree__texte--apres .eyebrow { text-shadow: 0 1px 14px rgba(0, 0, 0, .8); }
/* la pièce finie : on assombrit seulement le coin du texte, le plancher reste dans la lumière */
.entree__scene::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(90% 70% at 0% 62%, rgba(8, 8, 8, .62) 0%, rgba(8, 8, 8, .28) 45%, rgba(8, 8, 8, 0) 72%); transition: opacity .9s var(--sortie); }
.entree.est-dedans .entree__scene::after { opacity: .75; }
.entree.est-finie .entree__scene::after { opacity: 1; }
.entree.est-finie .entree__voile { opacity: .8; }
@media (max-width: 767px) {
  /* sur téléphone, le texte final se pose sur le plancher, pas sur les fenêtres */
  .entree__texte--apres { top: auto; bottom: 150px; }
  .entree__sous { font-size: 15px; max-width: 32ch; }
}