/* ══════════════════════════════════════════════════════════════════════════
   RÉVÉLATION — la feuille de style du calque « objet trouvé ».

   Elle va avec `revelation.js` et ne dépend de RIEN : aucune variable d'un
   autre fichier, aucune police à charger, aucune remise à zéro préalable. Le
   dossier `animation/` se copie d'un projet à l'autre tel quel.

   Les couleurs de l'animation elle-même (rayons, halo, paillettes) vivent dans
   le JS, parce qu'elles sont dessinées sur une toile. Ce qui est ici, c'est
   l'HABILLAGE : le texte, le bouton, et le tressaut de la cible.

   Pour l'accorder à votre projet, une seule chose à changer — les trois
   variables ci-dessous. Elles sont déclarées sur `.revelation` et non sur
   `:root` : un composant réutilisable ne s'octroie pas le document entier.
   ══════════════════════════════════════════════════════════════════════════ */

.revelation {
  --rev-vif:   #E8B84A;   /* la couleur d'accent : surtitre, bouton, lueurs */
  --rev-clair: #FFE7A8;   /* le haut du dégradé du bouton */
  --rev-fonce: #D3A031;   /* le bas du dégradé du bouton */
  --rev-encre: #3A2A05;   /* le texte SUR le bouton */

  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  /* Le texte et le bouton vivent dans le tiers bas ; l'image occupe le haut,
     dessinée par la toile. Un padding en `vh` plutôt qu'en pixels : sur un
     écran court, le bouton doit remonter avec le reste. */
  padding: 0 22px calc(9vh + env(safe-area-inset-bottom, 0px));
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.revelation[hidden] { display: none }
.revelation__toile { position: absolute; inset: 0; width: 100%; height: 100% }

.revelation__texte {
  position: relative; text-align: center;
  opacity: 0; transform: translateY(14px);
}
.revelation--titre .revelation__texte {
  opacity: 1; transform: none;
  transition: opacity .42s ease, transform .52s cubic-bezier(.16, 1, .3, 1);
}
.revelation__sus {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--rev-vif);
}
.revelation__nom {
  margin: 0; font-size: 27px; line-height: 1.15; font-weight: 700; color: #fff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .5);
}
.revelation__lieu { margin: 7px 0 0; font-size: 13px; color: rgba(255, 255, 255, .62) }
.revelation__sus[hidden],
.revelation__nom[hidden],
.revelation__lieu[hidden] { display: none }

/* Le bouton n'apparaît qu'APRÈS l'animation. Le montrer plus tôt donnerait une
   raison d'appuyer avant d'avoir regardé — et tout cet écran existe pour qu'on
   regarde. */
.revelation__prendre {
  position: relative; margin-top: 26px;
  padding: 15px 34px; border: 0; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 680; letter-spacing: .01em;
  color: var(--rev-encre); cursor: pointer;
  background: linear-gradient(180deg, var(--rev-clair), var(--rev-vif) 62%, var(--rev-fonce));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .75);
  opacity: 0; transform: translateY(10px) scale(.94); pointer-events: none;
}
.revelation--pret .revelation__prendre {
  opacity: 1; transform: none; pointer-events: auto;
  /* Le ressort du bouton (1.5 en second point de contrôle) est plus marqué que
     celui du texte : le texte s'installe, le bouton se PROPOSE. */
  transition: opacity .3s ease, transform .5s cubic-bezier(.2, 1.5, .4, 1);
}
.revelation__prendre:active { transform: scale(.96); transition: transform .08s }
.revelation__prendre:focus-visible { outline: 3px solid #fff; outline-offset: 3px }

.revelation--part .revelation__texte,
.revelation--part .revelation__prendre {
  opacity: 0; transform: translateY(8px); transition: all .16s ease;
}

/* ── LA CIBLE ACCUSE RÉCEPTION ────────────────────────────────────────────
   La seule règle de ce fichier qui s'applique HORS du calque. Elle est courte
   et elle se retire toute seule : c'est un accusé de réception, pas un état.
   Un appel durable — « il vous reste des choses à voir » — est autre chose, et
   c'est au projet appelant de le porter, avec sa propre pastille. Confondre les
   deux ferait battre la cible pour toujours. */
@keyframes revelation-recoit {
  0%   { transform: scale(1) }
  38%  { transform: scale(1.32) }
  62%  { transform: scale(.94) }
  100% { transform: scale(1) }
}
.revelation-recoit { animation: revelation-recoit .68s cubic-bezier(.3, 1.4, .5, 1) }

@media (prefers-reduced-motion: reduce) {
  .revelation__texte,
  .revelation__prendre { transition: none !important }
  .revelation-recoit { animation: none }
}

/* ── LE JETON DANS LE TEXTE ────────────────────────────────────────────────
   Inséré à la place du repère `{jeton}` par l'option du même nom. `1em` : il
   suit la taille de la ligne où il tombe, quelle qu'elle soit — c'est ce qui
   permet de l'employer aussi bien dans le grand titre que dans la ligne fine
   du dessous sans avoir à le régler deux fois. */
.revelation__jeton {
  width: 1em; height: 1em; display: inline-block;
  object-fit: contain; vertical-align: -0.12em;
  margin: 0 0.24em 0 0.18em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE TITRE PORTÉ, DANS LA FENÊTRE RICHESSE

   Louis : « on lui met une vraie position au-dessus du bouton Fermer et
   au-dessus du sous-titre qui dit combien d'EIKO avant le titre suivant. On
   devrait d'ailleurs lui rajouter une petite ombre ou un contour qui permet
   d'ouvrir le sélecteur de titre. »

   Le contour dit « ceci s'ouvre » sans le crier : sur un fond de révélation
   doré, un bouton plein aurait la même présence que « Fermer », et deux boutons
   de même poids dans une fenêtre qui n'a qu'une action principale font hésiter.
   ═══════════════════════════════════════════════════════════════════════════ */
.revelation__rang { margin: 10px 0 0 }
.revelation__rang[hidden] { display: none }
.revelation__porte {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  color: #fff; font: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: .01em; cursor: pointer;
}
.revelation__porte:disabled { cursor: default; box-shadow: none }
.revelation__porte:not(:disabled):active { transform: scale(.97) }
.revelation__chevron { font-size: 12px; opacity: .7; transition: transform .18s }
.revelation__porte[aria-expanded="true"] .revelation__chevron { transform: rotate(180deg) }

.revelation__rangs {
  max-height: 34dvh; overflow: auto; margin: 9px auto 0; max-width: 300px;
  border-radius: 12px; background: rgba(0, 0, 0, .26); padding: 4px;
  text-align: left;
}
.revelation__rangs[hidden] { display: none }
.revelation__ligne {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: 0; background: none; border-radius: 8px;
  color: rgba(255, 255, 255, .90); font: inherit; font-size: 13.5px;
  text-align: left;
}
button.revelation__ligne { cursor: pointer }
button.revelation__ligne:active { background: rgba(255, 255, 255, .10) }
.revelation__ligne--porte { background: rgba(255, 255, 255, .13); font-weight: 800 }
.revelation__ligne i {
  flex: none; width: 24px; font-style: normal; font-size: 11px; text-align: right;
  color: rgba(255, 255, 255, .42); font-variant-numeric: tabular-nums;
}
/* ── L'INCONNU RESTE LISIBLE COMME INCONNU ────────────────────────────────
   Les « ???? » sont plus pâles que les noms, mais leur NUMÉRO garde la même
   intensité que les autres : c'est lui qui porte l'information — « il y en a
   encore, et voici où ils tombent ». */
.revelation__ligne--secret span { color: rgba(255, 255, 255, .34); letter-spacing: .12em }
.revelation__ligne--coffre span { color: #f0cf76 }
.revelation__ligne--coffre.revelation__ligne--secret span { color: rgba(240, 207, 118, .55) }
.revelation__ligne em { margin-left: auto; font-style: normal; color: #e0b23a }
.revelation__reste {
  margin: 4px 0 2px; padding: 0 10px; font-size: 11.5px;
  color: rgba(255, 255, 255, .40); text-align: center;
}