/* Le prologue de Chrona (26 sept. 2026) — piloté par public/prologue.js ; tout est cantonné à .prologue-scene (le Livre des cartes
   a appris ce que coûtent des classes génériques). Au-dessus du Livre de Chrona (z 100), qui s'ouvre dessous à la fin. */
.prologue-scene { position: fixed; inset: 0; z-index: 110; overflow: hidden; background: #0c0a0d; color: #efe4cc; font-family: 'EB Garamond', Georgia, serif;
  -webkit-tap-highlight-color: transparent; user-select: none; transition: opacity 1.3s ease; }
.prologue-scene.part { opacity: 0; pointer-events: none; }
.prologue-scene.tremble { animation: prologue-tremble .6s linear; }
@keyframes prologue-tremble { 10%, 50%, 90% { transform: translate(-6px, 3px); } 30%, 70% { transform: translate(6px, -3px); } }
.prologue-scene .prologue-tableau { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 2s ease; }
.prologue-scene .prologue-tableau.la { opacity: 1; z-index: 1; }
.prologue-scene .prologue-tableau.part { opacity: 0; z-index: 0; }   /* s'efface en gardant son mouvement (pas de saut) */
.prologue-scene .prologue-tableau img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.prologue-scene .prologue-tableau.la .zoom-avant, .prologue-scene .prologue-tableau.part .zoom-avant { animation: prologue-zoom-avant 14s ease-out forwards; }
.prologue-scene .prologue-tableau.la .zoom-arriere, .prologue-scene .prologue-tableau.part .zoom-arriere { animation: prologue-zoom-arriere 14s ease-out forwards; }
.prologue-scene .prologue-tableau.la .monte, .prologue-scene .prologue-tableau.part .monte { animation: prologue-monte 14s ease-in-out forwards; }
.prologue-scene .prologue-tableau.la .glisse, .prologue-scene .prologue-tableau.part .glisse { animation: prologue-glisse 14s ease-in-out forwards; }
@keyframes prologue-zoom-avant { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes prologue-zoom-arriere { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes prologue-monte { from { transform: translateY(5%) scale(1.06); } to { transform: translateY(-5%) scale(1.06); } }
@keyframes prologue-glisse { from { transform: translateX(-4%) scale(1.08); } to { transform: translateX(4%) scale(1.08); } }
.prologue-scene .prologue-eclair { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 42%, #fff 0%, #ffe3a6 30%, rgba(255,210,140,0) 70%); }
.prologue-scene .prologue-eclair.on { animation: prologue-eclair 1.1s ease-out; }
@keyframes prologue-eclair { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
.prologue-scene .prologue-poussiere { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.prologue-scene .prologue-poussiere i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #ffd68a; box-shadow: 0 0 6px #ffc55a; opacity: 0;
  animation: prologue-flotte var(--d) linear infinite; animation-delay: var(--r); }
@keyframes prologue-flotte { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(var(--x), -105vh); opacity: 0; } }
.prologue-scene .prologue-voile { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 3; pointer-events: none; background: linear-gradient(transparent, rgba(12,10,13,.78) 38%, rgba(12,10,13,.95)); }
.prologue-scene .prologue-recit { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 30px); z-index: 5; padding: 0 26px; text-align: center; }
.prologue-scene .prologue-chrona { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: #e6c14a; }
.prologue-scene .prologue-chrona img { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(243,179,92,.8)); animation: prologue-respire 2.4s ease-in-out infinite alternate; }
@keyframes prologue-respire { to { filter: drop-shadow(0 0 16px rgba(243,179,92,1)); transform: scale(1.06); } }
.prologue-scene .prologue-lignes { transition: opacity .38s ease; }
.prologue-scene .prologue-lignes.efface { opacity: 0; }
.prologue-scene .prologue-lignes p { margin: 0 0 8px; font-size: 1.22rem; line-height: 1.4; font-style: italic; text-shadow: 0 2px 6px #000; min-height: 1.4em; }
.prologue-scene .prologue-lignes p.premiere { font-style: normal; font-size: 1.45rem; font-weight: 600; letter-spacing: .02em; color: #fff3da; }
.prologue-scene .prologue-suite { margin-top: 6px; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: #d9bd7a; opacity: 0; transition: opacity .6s; }
.prologue-scene .prologue-suite.on { opacity: .75; animation: prologue-clignote 1.6s ease-in-out infinite alternate; }
@keyframes prologue-clignote { to { opacity: .35; } }
.prologue-scene .prologue-haut { position: absolute; top: calc(env(safe-area-inset-top) + 12px); left: 14px; right: 14px; z-index: 6; display: flex; align-items: center; justify-content: space-between; }
.prologue-scene .prologue-points { display: flex; gap: 6px; }
.prologue-scene .prologue-points i { width: 7px; height: 7px; border-radius: 50%; background: rgba(239,228,204,.3); transition: background .4s, transform .4s; }
.prologue-scene .prologue-points i.fait { background: #d9bd7a; }
.prologue-scene .prologue-points i.la { background: #f3b35c; transform: scale(1.35); }
.prologue-scene .prologue-boutons { display: flex; gap: 8px; }
.prologue-scene .prologue-passer[hidden] { display: none; }
.prologue-scene .prologue-passer { padding: 6px 14px; border-radius: 16px; border: 1px solid rgba(214,190,130,.6); background: rgba(20,16,26,.55); color: #efe4cc; font: inherit; font-size: .85rem; letter-spacing: .08em; }
.prologue-scene .prologue-son { opacity: .85; }
/* le téléchargement des images de la première heure : un petit cartouche sous les boutons du haut, un libellé, le
 * pourcentage et une barre d'ambre qu'on voit avancer ; « Images prêtes », puis il s'efface */
.prologue-scene .prologue-telechargement { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top, 0px) + 54px); left: 50%; transform: translateX(-50%); width: min(78vw, 300px);
  padding: 7px 12px 9px; border-radius: 12px; background: rgba(20,16,26,.72); border: 1px solid rgba(214,190,130,.45); box-shadow: 0 4px 14px rgba(0,0,0,.5);
  pointer-events: none; transition: opacity .7s; -moz-text-size-adjust: none; text-size-adjust: none; }
.prologue-scene .prologue-telechargement .ligne { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; color: #efe4cc; }
.prologue-scene .prologue-telechargement small { font-size: .78rem; letter-spacing: .04em; }
.prologue-scene .prologue-telechargement b { font-size: .8rem; font-weight: 600; color: #f3b35c; font-variant-numeric: tabular-nums; }
.prologue-scene .prologue-telechargement .piste { display: block; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(239,228,204,.18); }
.prologue-scene .prologue-telechargement i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #c8701f, #f3b35c); transform: scaleX(.02); transform-origin: left; transition: transform .35s ease-out; box-shadow: 0 0 8px rgba(243,179,92,.8); }
.prologue-scene .prologue-telechargement.fini { opacity: 0; }