/* Le Portail de Cosmoz — feuille de style

   Le fichier se lit de haut en bas, par couches : chaque section précise la précédente.
   L'ordre compte (à spécificité égale, la règle la plus basse l'emporte) : pour modifier
   un élément, cherche d'abord la dernière règle qui le concerne.

   1. Base : éléments communs, boutons, champs, scènes.
   2. Mise en page sans défilement (une vue = un écran).
   3. Alaric et la clé.
   4. Passage entre les scènes.
   5. Explorer Cosmoz : premières bases des galeries.
   6. Formulaire de naissance.
   7. Identité du Portail, roulettes de date et d'heure.
   8. Présentation des épreuves et lumière de la clé.
   9. Seuil en plein écran et titre orné.
   10. Apparition douce des textes.
   11. Écran de chargement étoilé et cadre du dialogue d'Alaric.
   12. Les épreuves : décor du portail étoilé.
   13. L'Oculus stellaire et son formulaire.
   14. Ouverture de l'Oculus, aiguilles et félicitations.
   15. Bienvenue dans Cosmoz.
   16. Le médaillon en 3D.
   17. Explorer Cosmoz.
   18. Les Douze Maisons.
   19. L'Univers : carte, villes et quartiers.
   20. Les personnages et leurs fiches.
   21. Mes résultats (téléphone, ordinateur et image partagée).
   22. Ordinateur : textes et blocs agrandis.
   23. Retouches validées par l'autrice. */

/* 1. Base */
* {
  box-sizing: border-box;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid #d9bfff;
  outline-offset: 4px;
}
h1,
h2 {
  font-family: Cinzel, Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
}
small,
.pending {
  font-size: 15px;
  line-height: 1.4;
}
.pending {
  color: #c9b7da;
  font-style: italic;
}
.brand {
  border: 0;
  background: none;
  text-align: center;
  pointer-events: auto;
  text-shadow: 0 2px 10px #090e2e;
}
.brand span {
  display: block;
  font:
    400 clamp(34px, 7vw, 64px) / 1.1 Cinzel,
    Georgia,
    serif;
}
.brand small {
  font:
    400 12px Cinzel,
    Georgia,
    serif;
}
.scene {
  min-height: 100svh;
  padding: 150px 24px 90px;
}
.scene:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(#0b102a66, #090e2bce),
    url("images/scene/seuil.webp") center/cover no-repeat;
}
.scene:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(transparent 35%, #0c102b77 65%, #0c102bcc);
  pointer-events: none;
}
.threshold {
  padding: 0;
  width: min(100%, calc(100svh * 9 / 16));
  min-height: 0;
  aspect-ratio: 9/16;
  margin: auto;
  container-type: inline-size;
}
.threshold:after {
  background: linear-gradient(transparent 58%, #0c102b44 70%, #0c102b66 85%, transparent);
}
/* Fond noir partout : Safari colore sa barre d'état et sa barre du bas d'après ce fond, elles restent
   donc noires sur tous les écrans (les décors couvrent toute la page). */
html,
body,
body[data-step="0"] {
  background: #000;
}
body[data-step="0"] #menu-toggle {
  top: 14px;
  right: 10px;
  background: none;
}
.threshold-copy {
  position: absolute;
}
.threshold h1 {
  font-family: "EB Garamond", Georgia, serif;
  line-height: 1.03;
  margin: 0;
  text-shadow: 0 2px 5px #080d29;
}
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 27px;
  color: #e4d0a8;
  margin: 10px auto;
  width: 60%;
  line-height: 1;
}
.ornament:before,
.ornament:after {
  content: "";
  height: 1px;
  background: #dfcca999;
  flex: 1;
}
.input-wrap {
  backdrop-filter: blur(5px);
}
.input-wrap span {
  font-size: 26px;
}
input::placeholder {
  color: #d7c8e6;
}
.input-wrap input {
  background: none;
  border: 0;
  font-size: 22px;
}
.threshold input {
  font-size: 4.5cqw;
  min-height: 0;
}
.primary {
  border: 1px solid #e3c9ff;
  max-width: 480px;
}
.primary {
  background: linear-gradient(#9964d6c9, #643aa7db);
  box-shadow:
    0 0 15px #b78aef55,
    inset 0 1px 8px #edd4ff66;
  text-shadow: 0 1px 4px #241844;
  transition: box-shadow 0.2s;
}
.primary:hover {
  box-shadow: 0 0 24px #b78aef99;
}
.error {
  color: #ffdeb0;
  font-size: 16px;
  min-height: 0;
}
.threshold .error {
  margin: 0;
  line-height: 1;
}
.page-intro {
  max-width: 700px;
}
.panel {
  max-width: 540px;
}
.alaric:before {
  background:
    linear-gradient(#0c123a11, #0c123a44),
    url("images/scene/decor-alaric.webp") center/cover;
}
.key img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.key.activated {
  filter: drop-shadow(0 0 30px #e3c1ff);
  animation: glow 1.5s infinite;
}
progress {
  width: 100%;
  height: 8px;
  border: 1px solid #d3b9ef;
  border-radius: 20px;
  overflow: hidden;
  accent-color: #bfa0f2;
}
progress::-webkit-progress-bar {
  background: #171c3d;
}
progress::-webkit-progress-value {
  background: #b999f0;
}
.trial-landscape {
  max-width: 760px;
}
.trial-copy {
  max-width: 580px;
}
.choice:hover,
.choice.chosen {
  background: #593881aa;
  box-shadow: 0 0 15px #b9a1e53b;
}
dl {
  text-align: left;
  font-size: 17px;
}
dl > div {
  padding: 10px 0;
  border-bottom: 1px solid #dbc7ef22;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
dt {
  color: #c6b4db;
}
dd {
  margin: 0;
  text-align: right;
  max-width: 65%;
}
.character-layout {
  max-width: 950px;
}
.portrait {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 60% 60% 8px 8px;
  display: block;
}
.missing-portrait {
  background: radial-gradient(ellipse, #8470b13b, transparent 65%),
    linear-gradient(#151d3b88, #10152e);
  border: 1px solid #c7b1e344;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #b7a2d3;
}
.excerpt {
  padding: 15px;
  border-block: 1px solid #d6bcf133;
}
.affinity .portrait {
  border-color: #dcc5ff;
  box-shadow: 0 0 25px #b89de966;
}
.opposite .portrait {
  border-color: #d1b18b88;
}
.signature {
  font-style: italic;
  font-size: 24px;
  color: #e3d3e9;
}
dialog::backdrop {
  background: #070b258c;
  backdrop-filter: blur(5px);
}
dialog .close {
  float: right;
  border: 0;
  background: none;
  font-size: 30px;
  width: 44px;
  height: 44px;
}
nav button[aria-current] {
  color: #dbbaff;
}
nav small {
  color: #b09bc5;
}
#detail h2 {
  clear: both;
}
.skip,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.skip:focus {
  clip-path: none;
  width: auto;
  height: auto;
  padding: 12px;
  z-index: 20;
  background: #141936;
}
[hidden] {
  display: none !important;
}
body[data-element="Feu"] {
  --accent: #e7b479;
}
body[data-element="Terre"] {
  --accent: #9fbc91;
}
body[data-element="Air"] {
  --accent: #b2d5ef;
}
body[data-element="Eau"] {
  --accent: #a1b9e5;
}
@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes float {
  50% {
    transform: translateY(-7px);
  }
}
@keyframes glow {
  50% {
    filter: drop-shadow(0 0 45px #e6cbff);
  }
}
@keyframes needle-spin {
  from {
    transform: rotate(calc(var(--spin) * -1));
  }
  to {
    transform: rotate(var(--angle));
  }
}
@keyframes portal {
  to {
    opacity: 0;
    filter: brightness(1.6);
  }
}
@media (min-width: 760px) {
  .scene:not(.threshold) {
    padding-top: 170px;
  }
  .character-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 45px;
    align-items: center;
    text-align: left;
  }
  .trial-copy h1 {
    font-size: 34px;
  }
}
@media (max-height: 700px) {
  .scene {
    padding-top: 125px;
  }
  .alaric .dialogue {
    padding: 8px;
  }
  .dialogue h1 {
    font-size: 23px;
  }
  .key-actions {
    bottom: 5%;
  }
  .formula {
    font-size: 19px;
  }
  .alaric-figure {
    height: 57%;
  }
  .key {
    top: 43%;
    height: 28%;
  }
  .threshold-copy {
    top: 64%;
  }
}
.reduce-motion *,
.reduce-motion *:before,
.reduce-motion *:after {
  animation: none !important;
  transition: none !important;
}

/* 2. Mise en page sans défilement : une vue tient dans l'écran ; les collections et les textes sont paginés. */
html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  margin: 0;
  background: #000;
  color: var(--pearl);
  font-family: "EB Garamond", Georgia, serif;
  line-height: 1.4;
  height: var(--screen-height);
  font-size: 18px;
}
main {
  height: calc(var(--screen-height) - var(--footer-height));
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#menu-toggle {
  position: absolute;
  pointer-events: auto;
  border: 0;
  background: #11133144;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 24px;
  top: 10px;
  right: 10px;
}
.scene,
.scene:not(.threshold) {
  width: 100%;
  height: 100%;
  padding: var(--header-height) 20px 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.scene > * {
  flex-shrink: 0;
  max-width: 100%;
}
h1 {
  font-size: clamp(22px, 3.6vw, 32px);
  margin: 4px 0 8px;
}
h2 {
  font-size: 24px;
  margin: 8px 0;
}
p {
  margin: 5px 0;
}
.eyebrow {
  color: #e4d3bc;
  letter-spacing: 0.04em;
  font-size: 15px;
}
.pending {
  font-size: 13px;
  line-height: 1.25;
}
.primary {
  display: block;
  border-radius: 40px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  min-height: 44px;
  font-size: 18px;
  padding: 9px 15px;
  margin: 4px auto 0;
  line-height: 1.15;
}
.text-button {
  border: 0;
  background: none;
  color: #e4d2ef;
  font-size: 15px;
  padding: 6px;
  min-height: 40px;
}
.page-intro {
  margin: 0;
  flex-shrink: 0;
}
.page-intro p {
  font-size: 16px;
}
.threshold,
.scene.threshold {
  padding: 0;
  display: block;
  flex-shrink: 0;
}
body[data-step="0"] .site-header {
  padding-top: 12px;
}
.threshold .primary {
  min-height: 0;
  padding: 0;
  line-height: 1;
  margin: 0;
}
.alaric,
.scene.alaric {
  justify-content: flex-start;
}
.formula {
  max-width: 520px;
  margin: auto;
  text-shadow: 0 2px 5px #080b23;
  background: #101329b8;
  border-radius: 12px;
  font-size: 19px;
  padding: 8px;
}
.key-actions .primary {
  margin-top: 8px;
}
.oculus {
  perspective: 700px;
  width: clamp(95px, 19dvh, 210px);
  margin: 0 auto;
}
.panel {
  background: linear-gradient(#10132cbf, #10132cf2);
  border-top: 1px solid #c6a8e34d;
  border-bottom: 1px solid #c6a8e34d;
  text-align: left;
  backdrop-filter: blur(8px);
  width: min(520px, 100%);
  padding: 10px 12px;
  margin: 0 auto;
}
.panel p {
  margin: 5px 0;
}
.panel .primary {
  font-size: 16px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  margin: 0 0 3px;
}
input {
  width: 100%;
  border: 1px solid var(--line);
  background: #171936c9;
  border-radius: 8px;
  font-size: 16px;
  min-height: 40px;
  height: 40px;
  padding: 7px 9px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  margin-top: 6px;
  gap: 8px;
}
.form-row small {
  display: inline;
  font-size: 12px;
}
.form-row label {
  min-height: 20px;
}
.error:not(:empty) {
  margin: 4px 0;
  font-size: 13px;
}
.trial-landscape {
  width: 100%;
  margin: 0;
}
.trial-copy {
  width: min(580px, 100%);
  margin: 0;
}
.trial-copy h1 {
  text-align: left;
  font-family: "EB Garamond", Georgia, serif;
}
.progress-label {
  text-align: left;
  margin: 5px 0;
}
.choice {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid #dbc9ee99;
  border-radius: 18px;
  text-align: left;
  background: #111633c9;
}
.trial-copy .eyebrow {
  margin: 0;
}
.trial-copy .text-button {
  margin: 0;
}
.character-layout {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.character-layout > .portrait {
  margin: auto;
  height: clamp(80px, 23dvh, 230px);
  width: auto;
  aspect-ratio: 3/4;
  max-width: 360px;
}
.character-copy {
  max-width: 540px;
  margin: auto;
  text-align: center;
}
.character-copy h1 {
  margin: 4px 0;
  font-size: 26px;
}
.character-copy .eyebrow {
  font-size: 14px;
}
.character-copy .excerpt {
  padding: 5px;
}
.missing-portrait span {
  font-size: 42px;
}
.missing-portrait small {
  padding: 10px;
  font-size: 11px;
}
.encounter .primary {
  font-size: 17px;
}
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 44px;
}
.pager button {
  width: 44px;
  height: 44px;
  border: 1px solid #d6c0ee55;
  border-radius: 50%;
  background: #121735a8;
  font-size: 26px;
}
.pager span {
  font-size: 15px;
}
dialog {
  max-width: min(650px, 92vw);
  background: #11152ef5;
  color: var(--pearl);
  border: 1px solid #c5acde55;
  border-radius: 16px;
  box-shadow: 0 20px 80px #0009;
  max-height: calc(var(--screen-height) - 24px);
  overflow: hidden;
  padding: 20px;
  width: min(600px, 94vw);
}
#detail .portrait {
  max-width: 180px;
  margin: auto;
  height: clamp(80px, 25dvh, 200px);
  width: auto;
  aspect-ratio: 3/4;
}
#detail-content {
  clear: both;
  text-align: center;
}
.reader-text {
  font-size: 18px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
nav {
  display: flex;
  flex-direction: column;
  margin: 8px 0;
}
nav button {
  display: flex;
  gap: 20px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #ddc5ef22;
  background: none;
  min-height: 40px;
  padding: 7px 0;
  font-size: 17px;
}
#navigation .signature {
  font-size: 18px;
  margin-top: 8px;
}
@media (max-height: 650px) {
  .scene,
  .scene:not(.threshold) {
    gap: 5px;
    padding-bottom: 6px;
    padding-inline: 16px;
  }
  .celestial .oculus {
    width: 13dvh;
  }
  .character-layout > .portrait {
    height: 19dvh;
  }
  .key-actions .formula {
    font-size: 17px;
  }
}
@media (min-width: 900px) and (min-height: 650px) {
  .character-layout {
    flex-direction: row;
    gap: 30px;
  }
  .character-layout > .portrait {
    height: 38dvh;
  }
  .scene,
  .scene:not(.threshold) {
    gap: 12px;
  }
  .oculus {
    width: 22dvh;
  }
}

/* 3. Alaric : dialogue validé et activation par maintien. */
:root {
  color-scheme: only dark;
  --pearl: #fcf5e9;
  --accent: #be9be9;
  --night: #101332;
  --line: #dbc7f566;
  --screen-height: 100dvh;
  --footer-height: 0px;
}
.scene,
.scene:not(.threshold) {
  min-height: 0;
  flex-direction: column;
  align-items: center;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.dialogue h1 {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 24px;
  font:
    400 18px Cinzel,
    Georgia,
    serif;
  margin: 0 0 7px;
  color: #eadac0;
}
.alaric-figure {
  position: absolute;
  z-index: -1;
  object-fit: contain;
  object-position: bottom;
  height: 57%;
  bottom: 0;
  left: -9%;
  max-width: 72%;
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
}
.key {
  position: absolute;
  border: 0;
  background: none;
  filter: drop-shadow(0 0 10px #bc9ef788);
  animation: float 6s ease-in-out infinite;
  right: 0;
  top: 48%;
  width: 43%;
  height: 29%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  --hold-progress: 0;
}
.key.holding {
  animation: none;
  filter: drop-shadow(0 0 22px #d6baff);
}
.hold-aura {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--hold-progress);
  background: radial-gradient(ellipse, #ddc7ff44, transparent 70%);
  box-shadow: 0 0 calc(35px * var(--hold-progress)) #c59bff;
  transform: scale(calc(0.8 + var(--hold-progress) * 0.3));
}
.key-actions {
  position: absolute;
  z-index: 3;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 6%;
  width: 88%;
  pointer-events: none;
}
.magic-word {
  opacity: 0;
  filter: blur(7px);
  transition:
    opacity 0.55s,
    filter 0.55s;
  text-shadow:
    0 0 8px #e6c2ff,
    0 0 18px #b491e8;
  display: inline-block;
  white-space: pre;
}
.magic-word.revealed {
  opacity: 1;
  filter: blur(0);
  animation: word-shimmer 1.8s ease-in-out infinite alternate;
}
@keyframes word-shimmer {
  from {
    text-shadow:
      0 0 5px #f2d5ff,
      0 0 12px #b894ef;
  }
  to {
    text-shadow:
      0 0 10px #ffedcf,
      0 0 23px #d6b3ff;
  }
}
@media (max-height: 650px) {
  .alaric-figure {
    height: 52%;
  }
  .key {
    top: 52%;
    height: 26%;
    width: 42%;
  }
  .magic-formula {
    min-height: 65px;
    padding: 8px;
  }
}
.magic-formula:has(.revealed) {
  opacity: 1;
}

/* Dialogue céleste : le texte et le portrait occupent des zones distinctes. */
.dialogue:before,
.dialogue:after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d6c7a788, #e4dbf5aa, #d6c7a788, transparent);
}
.dialogue:before {
  top: 0;
}
.dialogue:after {
  bottom: 0;
}
.dialogue-speaker:before,
.dialogue-speaker:after {
  content: "";
  height: 1px;
  background: #c6b49355;
}
.dialogue-speaker > span {
  font-size: 12px;
}
.alaric-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: min(850px, 100%);
  margin: auto;
  isolation: isolate;
}
.alaric-stage .alaric-figure {
  left: -10%;
  bottom: 0;
  height: 100%;
  max-width: 72%;
  z-index: 0;
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
}
.alaric-stage .key {
  right: -2%;
  top: 13%;
  width: 46%;
  height: 65%;
  z-index: 1;
}
.alaric-stage .key-actions {
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#hold-hint {
  text-align: center;
  text-shadow: 0 2px 5px #080b22;
  display: table;
  font-size: 15px;
  padding: 3px 8px;
  background: #0f153380;
  border-radius: 4px;
  margin: 0;
  order: 2;
}
.magic-formula {
  line-height: 1.3;
  text-align: center;
  color: #fff5dc;
  opacity: 0;
  transition: opacity 0.4s;
  position: absolute;
  bottom: 34px;
  left: 5%;
  width: 90%;
  min-height: 0;
  padding: 9px;
  font-size: 19px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #10132900, #101329e8 12%, #101329e8 88%, #10132900);
}
@media (max-height: 650px) {
  .dialogue-speaker {
    margin-bottom: 5px;
  }
  .alaric-stage .key {
    top: 12%;
    height: 67%;
  }
}
@media (min-width: 760px) {
  .alaric {
    max-width: 850px;
    margin: auto;
  }
  .alaric-figure {
    left: 0;
    max-width: 60%;
    height: 64%;
  }
  .key {
    right: 10%;
    top: 43%;
    height: 34%;
    width: 35%;
  }
  .alaric-stage .alaric-figure {
    left: 0;
    max-width: 60%;
  }
  .alaric-stage .key {
    right: 5%;
    width: 40%;
    height: 73%;
    top: 8%;
  }
}

/* 4. Un passage céleste partagé par toutes les scènes. */
.scene {
  position: relative;
  isolation: isolate;
  text-align: center;
  overflow: hidden;
  animation: none;
}
.travelling .passage-veil {
  opacity: 1;
  pointer-events: auto;
}
.travelling .passage-veil span {
  transform: translateX(3%);
}
.alaric .key.holding {
  animation: none;
}
.alaric .key.activated {
  animation: glow 1.5s infinite;
}
@keyframes guide-arrival {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes key-arrival {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: drop-shadow(0 0 2px #c9b2ec55);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: drop-shadow(0 0 12px #c9b2ec88);
  }
}
.dialogue.dialogue-waiting {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .alaric .alaric-figure,
  .alaric .key {
    animation: none;
  }
  .dialogue {
    transition: none;
  }
}
.reduce-motion .passage-veil {
  display: none;
}
.reduce-motion .alaric-figure,
.reduce-motion .key {
  animation: none;
}
.reduce-motion .dialogue {
  transition: none;
}
.travelling .passage-veil:before {
  opacity: 0.6;
}

/* 5. Explorer Cosmoz : nos décors conservés, galeries paginées et ornements nets. */
.celestial-dust i:nth-child(3n) {
  width: 3px;
  height: 3px;
  background: #f8eadc88;
  box-shadow: 0 0 5px #e4d2ff;
}
.celestial-dust i:nth-child(1) {
  --x: 8%;
  --y: 90%;
  animation-delay: -3s;
}
.celestial-dust i:nth-child(2) {
  --x: 23%;
  --y: 70%;
  animation-delay: -13s;
}
.celestial-dust i:nth-child(3) {
  --x: 42%;
  --y: 60%;
  animation-delay: -5s;
}
.celestial-dust i:nth-child(4) {
  --x: 63%;
  --y: 80%;
  animation-delay: -7s;
}
.celestial-dust i:nth-child(5) {
  --x: 88%;
  --y: 75%;
  animation-delay: -11s;
}
.celestial-dust i:nth-child(6) {
  --x: 14%;
  --y: 42%;
  animation-delay: -15s;
}
.celestial-dust i:nth-child(7) {
  --x: 77%;
  --y: 35%;
  animation-delay: -4s;
}
.celestial-dust i:nth-child(8) {
  --x: 52%;
  --y: 95%;
  animation-delay: -10s;
}
.celestial-dust i:nth-child(9) {
  --x: 94%;
  --y: 55%;
  animation-delay: -6s;
}
.celestial-dust i:nth-child(10) {
  --x: 33%;
  --y: 33%;
  animation-delay: -2s;
}
.celestial-dust i:nth-child(11) {
  --x: 65%;
  --y: 90%;
  animation-delay: -17s;
}
.celestial-dust i:nth-child(12) {
  --x: 5%;
  --y: 20%;
  animation-delay: -14s;
}
@keyframes dust-drift {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  20%,
  70% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translate3d(14px, -125px, 0);
  }
}
body[data-step="0"] .celestial-dust {
  opacity: 0.18;
}
body[data-step="1"] .celestial-dust {
  opacity: 0.23;
}
/* La formule est une lumière dans l'air, directement sous le dialogue. */
.scene.alaric {
  display: flex;
  flex-direction: column;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  gap: 8px;
}
@keyframes formula-shimmer {
  from {
    text-shadow:
      0 0 4px #ecddff99,
      0 0 9px #b598df55;
  }
  to {
    text-shadow:
      0 0 6px #f0e3ffaa,
      0 0 13px #b7a0e977;
  }
}
/* 6. Formulaire de naissance. Champs Safari : chaque contrôle reste strictement dans sa colonne. */
.celestial .panel {
  flex: 0 0 auto;
}
.celestial #birth-form {
  display: grid;
  min-width: 0;
}
.celestial .form-row > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.celestial label {
  display: block;
  min-width: 0;
  text-align: left;
  line-height: 1.2;
  margin: 0;
}
.celestial input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 42px;
  min-height: 42px;
  font-size: 16px;
  padding: 6px 9px;
  overflow: hidden;
}
.celestial input[type="date"],
.celestial input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  max-inline-size: 100%;
  min-inline-size: 0;
}
.celestial input::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
}
.celestial .form-row small {
  font-size: 11px;
}
.celestial #birth-form > .primary {
  width: 100%;
  margin: 0;
}
.celestial .error:empty {
  display: none;
}
.celestial .error:not(:empty) {
  font-size: 12px;
  line-height: 1.2;
  margin: 0;
}
.celestial .page-intro h1 {
  font-size: clamp(23px, 5vw, 32px);
}
/* L'Oculus de référence devient un objet séparé, avec miroir et aiguilles codés. */
.celestial .oculus {
  width: auto;
  flex: 0 1 auto;
  min-height: 95px;
}
#navigation {
  margin: 0 0 0 auto;
  border-radius: 0;
  width: min(390px, 92vw);
  height: var(--screen-height);
  max-height: var(--screen-height);
  padding: 16px 22px;
  overflow-y: auto;
}
body[data-step="9"] {
  --accent: #c0a3e0;
}
@media (max-height: 650px) {
  .celestial .oculus {
    height: 16dvh;
    min-height: 85px;
  }
}
@media (min-width: 900px) {
  .celestial .oculus {
    height: 25dvh;
    max-height: 250px;
  }
}
.house-sheet h2 {
  font-size: 23px;
}
.house-sheet dl {
  margin: 0;
  font-size: 15px;
}
.house-sheet dl > div {
  padding: 7px 0;
}
.house-chosen {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid #d1bfa166;
  background: #10172ab0;
  border-radius: 12px;
  text-align: left;
  font-size: 19px;
}
.house-chosen > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.house-chosen > span:last-child {
  margin-left: auto;
}
.house-chosen small {
  font-size: 12px;
  color: #c6b7d2;
}
#detail .house-chosen .portrait {
  height: 70px;
  width: 52px;
  flex: none;
}
.house-sheet .pending {
  margin-top: 9px;
  font-size: 12px;
}

/* 7. Portail : identité simplifiée, mouvement léger et passage plus rapide. */
.brand span {
  letter-spacing: 0.045em;
  line-height: 1.1;
}
.brand small {
  display: block;
  letter-spacing: 0.1em;
  margin-top: 3px;
}
.site-header {
  position: absolute;
  z-index: 5;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  height: var(--header-height);
  padding: 12px 18px;
  padding-top: calc(12px + env(safe-area-inset-top));
  contain: layout style;
}
.passage-veil {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 55% 52%, #9981c52b, transparent 62%),
    linear-gradient(110deg, #11183166, #38285b44, #0d173b66);
  transition: opacity 0.25s ease;
}
.passage-veil span {
  position: absolute;
  inset: -15%;
  background: radial-gradient(ellipse at 30% 60%, #c1acdf20, transparent 40%),
    radial-gradient(ellipse at 70% 35%, #96b6dc1c, transparent 42%);
  transform: translateX(-3%);
  transition: transform 0.7s ease;
}
.passage-veil:before {
  content: "";
  position: absolute;
  left: 22%;
  top: 42%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f3e5ff;
  box-shadow:
    29vw -18vh 5px #e3d0fa,
    -8vw 26vh 4px #c8dbf4,
    48vw 14vh 6px #d8c8ed,
    12vw 32vh 4px #e5d2b5,
    38vw -30vh 5px #c9d8f1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.alaric .alaric-figure {
  animation: guide-arrival 0.7s 0.03s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.alaric .key {
  animation:
    key-arrival 0.7s 0.08s cubic-bezier(0.22, 0.61, 0.36, 1) both,
    float 6s 0.8s ease-in-out infinite;
}
.formula-space {
  position: relative;
  flex: 0 0 auto;
  width: min(580px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  height: 64px;
}
.formula-space .magic-formula {
  position: static;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: none;
  box-shadow: none;
  font-weight: 500;
  max-width: 530px;
}
.formula-space .magic-word {
  filter: none;
  transition:
    opacity 0.3s,
    transform 0.3s;
  transform: translateY(3px);
}
.formula-space .magic-word.revealed {
  filter: none;
  transform: none;
}
.key img {
  transform: rotate(-32deg);
  pointer-events: none;
  filter: none;
}
.key.activated,
.key.holding {
  animation: none;
  filter: drop-shadow(0 0 15px #e6d1ff);
}
.celestial-dust i {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #eee3ff88, transparent 70%);
  animation: dust-drift 18s linear infinite;
  opacity: 0;
  left: var(--x, 20%);
  top: var(--y, 70%);
  will-change: transform, opacity;
}
.celestial-dust {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.4;
  contain: strict;
}
.panel,
.input-wrap {
  backdrop-filter: none;
}
.encounter .character-layout {
  flex: 1;
  min-height: 0;
  justify-content: center;
}
.encounter .character-layout > .portrait {
  height: clamp(110px, 31dvh, 350px);
}
.celestial #birth-panel small {
  font-size: 11px;
  color: #c5b9d4;
}

/* Le contour de focus suit tout le champ, icône comprise. */
.input-wrap {
  border: 1px solid #d9c5f2;
  border-radius: 40px;
  background: #17153eb0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.input-wrap:focus-within {
  border-color: #e0caff;
  box-shadow:
    0 0 0 2px #b894e633,
    0 0 14px #b894e633;
}
.input-wrap input:focus,
.input-wrap input:focus-visible {
  outline: none;
  box-shadow: none;
}
.dialogue {
  z-index: 2;
  position: relative;
  flex: 0 0 auto;
  margin: 0 auto;
  border: 0;
  border-radius: 4px;
  text-align: center;
  min-height: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.dialogue p {
  margin: 0;
}
.dialogue-speaker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #d3c2a5;
}
.dialogue .dialogue-speaker h1 {
  margin: 0;
  letter-spacing: 0.16em;
}

.birth-picker-button {
  width: 100%;
  height: 42px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: #171936c9;
  text-align: left;
  font-size: 16px;
}
.celestial .form-row {
  display: grid;
  gap: 12px;
  margin: 0;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
}
.celestial .city-control {
  position: relative;
}
.city-status {
  font-size: 12px;
  line-height: 1.2;
  color: #d8cde4;
  margin: 0;
  text-align: left;
  min-height: 15px;
}
#city-options {
  position: absolute;
  bottom: calc(100% - 22px);
  left: 0;
  right: 0;
  z-index: 8;
  background: #141b38;
  border: 1px solid #c0a6e38c;
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 8px 24px #05091899;
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.city-option {
  display: block;
  width: 100%;
  min-height: 40px;
  background: none;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  padding: 7px 9px;
}
.city-option:hover,
.city-option:focus-visible {
  background: #63508266;
}
.wheel-dialog {
  width: min(440px, calc(100% - 24px));
  padding: 18px 16px;
  border: 1px solid #c4aedb80;
  border-radius: 24px;
  background: linear-gradient(145deg, #242345, #101932);
  box-shadow: 0 20px 70px #040817aa;
  overflow: hidden;
  max-height: calc(100dvh - 24px);
}
.wheel-dialog::backdrop {
  background: #060d24ad;
  backdrop-filter: blur(4px);
}
.picker-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}
.picker-heading h2 {
  font-size: 19px;
  margin: 0;
  text-align: left;
  line-height: 1.3;
}
.picker-close {
  flex: 0 0 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #dbbeff12;
  font-size: 24px;
}
.picker-hint {
  font-size: 14px;
  color: #c7bad7;
  text-align: center;
  margin: 6px 0 12px;
}
.wheel-columns {
  display: flex;
  gap: 8px;
  position: relative;
}
.wheel-columns:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 104px;
  height: 40px;
  background: #b995e922;
  border-top: 1px solid #d9c6ec66;
  border-bottom: 1px solid #d9c6ec66;
  border-radius: 8px;
  pointer-events: none;
}
.wheel-column {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.wheel-column > span {
  display: block;
  font-size: 14px;
  color: #ddcce9;
  height: 24px;
}
.wheel {
  height: 200px;
  padding-block: 80px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  position: relative;
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  touch-action: pan-y;
}
.wheel::-webkit-scrollbar {
  display: none;
}
.wheel > div {
  height: 40px;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  white-space: nowrap;
  font-size: 19px;
  color: #b2a7c6;
  cursor: pointer;
}
.wheel > div[hidden] {
  display: none;
}
.wheel > div[aria-selected="true"] {
  color: #fff2db;
  text-shadow: 0 0 10px #d9bbfc44;
}
.wheel:focus-visible {
  outline: 1px solid #d6bffb;
  outline-offset: -2px;
  border-radius: 10px;
  mask-image: none;
}
.wheel-dialog .picker-error {
  font-size: 13px;
  line-height: 1.2;
  color: #ffdeb0;
  margin: 6px 0 0;
  text-align: center;
}
.picker-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.picker-actions .primary {
  font-size: 18px;
  min-height: 44px;
  margin: 0;
  padding: 8px 18px;
  flex: 1;
}
.picker-actions .text-button {
  font-size: 14px;
  max-width: 120px;
  padding: 6px;
}
.oculus-light {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse at 50% 45%,
    #faf0ffcc,
    #d5b4ee66 32%,
    #9c97d822 67%,
    transparent
  );
  transition: opacity 0.85s ease;
}
.oculus-complete .oculus-light {
  opacity: 0.8;
}
.oculus-complete .oculus {
  filter: drop-shadow(0 0 24px #dcc8faaa);
}
.celestial:has(.open) .oculus {
  height: clamp(180px, 42dvh, 420px);
  max-height: 52dvh;
  min-height: 150px;
  transition: height 0.7s ease;
}

/* 8. Une scène de présentation avant les questions, avec le décor déjà validé. */
.scene.trials-introduction {
  justify-content: flex-start;
  gap: 0;
  padding-inline: 22px;
}
.trials-intro-window {
  flex: 1 1 auto;
  min-height: 60px;
  width: 100%;
}
.trials-intro-card {
  position: relative;
  width: min(540px, 100%);
  flex: 0 0 auto;
  text-wrap: balance;
  animation: trials-card-arrival 0.65s 0.18s ease both;
}
.trials-intro-card .ornament {
  width: 46%;
  margin: 0 auto 12px;
  color: #d9c9ad;
}
.trials-intro-card h1 {
  letter-spacing: 0.055em;
  margin: 0 0 13px;
}
.trials-intro-tagline {
  font-style: italic;
  margin: 0 0 17px;
}
.trials-intro-description {
  line-height: 1.25;
  margin: 0 0 11px;
}
.trials-intro-card .primary {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.trials-intro-card .primary span {
  line-height: 1;
}
@keyframes trials-card-arrival {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-height: 650px) {
  .page-intro h1 {
    font-size: 22px;
  }
  .page-intro .eyebrow {
    font-size: 13px;
  }
  .page-intro p {
    font-size: 15px;
  }
  .celestial .page-intro .eyebrow {
    margin: 0;
  }
  .trial-landscape {
    height: 10dvh;
  }
  .dialogue h1 {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .key-actions {
    bottom: 10px;
  }
  #hold-hint {
    font-size: 13px;
  }
  .magic-formula {
    font-size: 16px;
    bottom: 29px;
  }
  .celestial .panel {
    padding: 8px 10px;
  }
  .celestial #birth-form {
    gap: 5px;
  }
  .celestial input {
    height: 40px;
    min-height: 40px;
  }
  .celestial .page-intro p {
    font-size: 15px;
    margin: 3px 0;
  }
  .celestial .page-intro h1 {
    font-size: 23px;
    margin: 3px 0;
  }
  .formula-space {
    height: 54px;
  }
  .formula-space .magic-formula {
    font-size: 18px;
  }
  .encounter .character-layout > .portrait {
    height: 26dvh;
  }
  .dialogue {
    padding: 8px 12px 9px;
  }
  .dialogue p {
    line-height: 1.23;
  }
  .dialogue .dialogue-speaker h1 {
    font-size: 11px;
  }
  .scene.alaric {
    gap: 8px;
  }
  .celestial .birth-picker-button {
    height: 40px;
    min-height: 40px;
  }
  .celestial:has(.open) .oculus {
    height: 37dvh;
  }
  .wheel-dialog {
    padding: 12px;
  }
  .picker-heading h2 {
    font-size: 17px;
  }
  .picker-hint {
    margin: 3px 0 7px;
  }
  .scene.trials-introduction {
    padding-inline: 18px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .trials-intro-card {
    padding: 14px 16px 17px;
    border-radius: 20px;
  }
  .trials-intro-card .ornament {
    font-size: 16px;
    margin-bottom: 9px;
  }
  .trials-intro-card h1 {
    margin-bottom: 9px;
  }
  .trials-intro-tagline {
    margin-bottom: 12px;
  }
  .trials-intro-description {
    margin-bottom: 9px;
  }
}

/* Halo doré autour de la clé : les bords restent sombres pendant le passage. */
.key-passage-light {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: radial-gradient(ellipse at var(--light-x, 50%) var(--light-y, 50%), #f3c77baa 0%, #b68ddd55 28%, #121028dd 60%, #08091ff2 100%);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.key-passage-light > span {
  position: absolute;
  left: var(--light-x, 50%);
  top: var(--light-y, 50%);
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe4b8 8%, #f4d092aa 24%, #ba8ed455 42%, transparent 65%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
}
body.key-passage .key-passage-light {
  pointer-events: auto;
}
body.key-passage .passage-veil {
  opacity: 0;
  transition: none;
}
.reduce-motion .key-passage-light {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .passage-veil {
    display: none;
  }
  .celestial-dust i {
    animation: none;
    opacity: 0.35;
    will-change: auto;
  }
  .oculus-light {
    transition: none;
  }
  .celestial:has(.open) .oculus {
    transition: none;
  }
  .wheel {
    scroll-behavior: auto;
  }
  .key-passage-light {
    display: none;
  }
}

/* 9. Seuil en plein écran et titre orné. */

/* Le titre, plus grand, avec son ornement (ligne, étoile, ligne) sur toutes les pages. */
:root {
  --header-height: calc(118px + env(safe-area-inset-top));
}
.brand span {
  font-size: clamp(28px, 9.4vw, 40px);
}
.brand small {
  font-size: clamp(21px, 7.2vw, 30px);
}
.brand-ornament {
  display: block;
  width: clamp(130px, 40vw, 170px);
  height: auto;
  margin: 6px auto 0;
  color: #e4d3a0;
  opacity: 0.85;
  filter: drop-shadow(0 1px 4px #090e2e);
}
@media (max-height: 650px) {
  :root {
    --header-height: calc(94px + env(safe-area-inset-top));
  }
  .brand span {
    font-size: 28px;
  }
  .brand small {
    font-size: 21px;
  }
  .brand-ornament {
    width: 130px;
    margin-top: 4px;
  }
}

/* Le Seuil remplit toujours tout l'écran : l'image est recadrée si besoin, jamais encadrée de noir.
   Les tailles du texte suivent une image 9:16 qui tiendrait dans l'écran (le plus petit de cqw et cqh),
   pour rester posées sur le sol lumineux quelle que soit la forme de l'écran. */
.threshold,
.scene.threshold {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  container-type: size;
}
.threshold:before {
  background:
    linear-gradient(#0a0e2a99, transparent 24%),
    url("images/scene/seuil.webp") center 62% / cover no-repeat;
}
body[data-step="0"] .site-header {
  left: 0;
  transform: none;
  width: 100%;
}
body[data-step="0"] .brand span {
  font-size: clamp(28px, min(9.4vw, 5.4dvh), 40px);
}
body[data-step="0"] .brand small {
  font-size: clamp(21px, min(7.2vw, 4.1dvh), 30px);
}
.threshold-copy {
  top: auto;
  bottom: min(7cqh, 12.4cqw);
  left: 50%;
  transform: translateX(-50%);
}
.threshold h1 {
  font-size: min(8.15cqw, 4.58cqh);
}
.threshold .ornament {
  font-size: min(4cqw, 2.25cqh);
  margin: min(2cqw, 1.125cqh) auto;
}
.threshold input {
  padding: min(2cqw, 1.125cqh);
}
.threshold .error {
  height: min(2.6cqw, 1.46cqh);
  font-size: min(2.6cqw, 1.46cqh);
}

/* 10. Apparition douce des textes : chaque élément monte légèrement en se dévoilant, l'un après l'autre
   (le délai de chacun est donné par app.js). Seul le point de départ est animé : à la fin,
   l'élément retrouve exactement son apparence normale. */
.reveal {
  animation: reveal-gently 0.5s var(--reveal-delay, 0s) cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
@keyframes reveal-gently {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
  }
}

/* Réplique d'Alaric : une phrase par ligne ; une phrase trop longue se coupe en deux moitiés égales,
   sans laisser un mot seul sur sa ligne. */
.dialogue-line {
  display: block;
  text-wrap: balance;
}

/* 11. Écran de chargement : le ciel étoilé couvre tout, puis s'efface en douceur. */
#chargement {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: radial-gradient(ellipse 120% 60% at 50% 0%, #241743 0%, #120e2c 45%, #0b1026 80%);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#chargement canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#chargement.cache {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s 0.8s;
}

/* Le dialogue d'Alaric reste discret : un texte plus petit, un cadre ajusté au texte et plus léger,
   pour laisser la place à Alaric et à la clé. */
.dialogue {
  width: fit-content;
  max-width: min(360px, 100%);
  padding: 6px 18px 8px;
  background: linear-gradient(105deg, #0d1431c2, #1b2346a8 55%, #101934c2);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 6px 22px #080d2540;
}
.dialogue p {
  font-size: clamp(13.5px, 3.6vw, 15.5px);
  line-height: 1.25;
  text-shadow: 0 1px 6px #080d25;
}
.dialogue-speaker {
  margin-bottom: 2px;
}
.dialogue .dialogue-speaker h1 {
  font-size: 10px;
}
.dialogue-speaker:before,
.dialogue-speaker:after {
  width: 26px;
}
@media (max-height: 650px) {
  .dialogue p {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #chargement {
    transition: none;
  }
}

/* Le message d'Alaric, centré entre le titre et Alaric. Pendant le maintien de la clé, il s'efface
   doucement et la formule, blanche et lumineuse, s'allume mot après mot à la même place. */
.alaric-message {
  display: grid;
  place-items: center;
  width: 100%;
  margin-block: clamp(10px, 5dvh, 56px) clamp(4px, 2dvh, 20px);
}
.alaric-message > * {
  grid-area: 1 / 1;
}
.scene.alaric .dialogue {
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scene.alaric.incantation .dialogue {
  opacity: 0;
}
.formula-space .magic-formula {
  color: #fffdf7;
  font-size: clamp(17px, 4.6vw, 21px);
  line-height: 1.3;
  text-wrap: nowrap;
}
.formula-space .magic-word {
  text-shadow:
    0 0 4px #ffffff,
    0 0 12px #f1e6ff,
    0 0 24px #c6a6ff,
    0 1px 2px #080c25;
}
.formula-space .magic-word.revealed {
  animation: formule-scintille 2.4s ease-in-out infinite alternate;
}
@keyframes formule-scintille {
  from {
    text-shadow:
      0 0 4px #ffffff,
      0 0 12px #f1e6ff,
      0 0 24px #c6a6ff,
      0 1px 2px #080c25;
  }
  to {
    text-shadow:
      0 0 6px #ffffff,
      0 0 18px #ffffff,
      0 0 34px #d6bcff,
      0 1px 2px #080c25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .formula-space .magic-word.revealed {
    animation: none;
  }
}
.alaric-message .formula-space {
  width: 100%;
}
.alaric-message .magic-formula {
  text-align: center;
}
/* Pendant le maintien, la lueur de la clé suffit : pas de cadre de focus autour. */
.key.holding:focus-visible,
.key.activated:focus-visible {
  outline: none;
}

/* 12. Les épreuves : le portail étoilé en arrière-plan (présentation et questions), textes plus légers. */
.trials-introduction:before {
  background:
    linear-gradient(#0b143214, #10143410),
    url("images/scene/epreuves.webp") center 30% / cover no-repeat;
}
.trials-intro-card .ornament {
  font-size: 16px;
  margin-bottom: 9px;
}
.trials-intro-card h1 {
  font-size: clamp(21px, 4.6vw, 28px);
  margin-bottom: 9px;
}
.trials-intro-description {
  font-size: 17px;
}
.trials-intro-card .primary {
  font-size: 17px;
  min-height: 44px;
}
.trials-intro-card .primary span {
  font-size: 22px;
}
.progress-label {
  font-size: 14px;
}
@media (max-height: 650px) {
  .trials-intro-card h1 {
    font-size: 20px;
  }
  .trials-intro-tagline {
    font-size: 14px;
  }
  .trials-intro-description {
    font-size: 15.5px;
  }
  .trials-intro-card .primary {
    font-size: 16px;
    min-height: 42px;
  }
}

/* Présentation des épreuves sans cadre : le texte flotte sur le sol qui reflète le portail,
   lisible grâce à une ombre douce et à un léger assombrissement du bas de l'écran. */
.trials-introduction:after {
  background: linear-gradient(transparent 52%, #080d2499 72%, #070b20dd 100%);
}
.trials-intro-card {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0 6px;
  text-shadow:
    0 2px 6px #060a20,
    0 0 18px #060a20cc;
}
.trials-intro-tagline {
  color: #e6d9f2;
}
.trials-intro-card .primary {
  max-width: 340px;
}

/* Le titre « Les Épreuves » : grandes capitales dorées et lumineuses
   (présentation des épreuves et écran des questions). */
.trials-intro-tagline {
  font-size: 16px;
  margin-bottom: 14px;
}
.trials-intro-description {
  margin-bottom: 18px;
}
/* Le bloc des épreuves remonte un peu : il se pose juste sous l'escalier du portail. */

/* L'écran des questions : la terrasse étoilée en arrière-plan, le titre doré centré au-dessus de la question. */
.trials:before {
  background:
    linear-gradient(#0c133814, #0c1338b8 70%, #0a1030d8),
    url("images/scene/questions.webp") center 40% / cover no-repeat;
}
.trial-copy .progress-label,
.trial-copy h1,
.choice {
  text-shadow: 0 1px 4px #060a20;
}

/* Questions des épreuves : sans titre, avec un compteur bien lisible et des textes plus grands.
   La poussière d'étoiles reste présente, très discrète. */
.trial-copy .progress-label {
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(17px, 4.6vw, 21px);
  letter-spacing: 0.06em;
  color: #f3e6c4;
  margin: 0 0 6px;
}
.trial-copy h1 {
  line-height: 1.22;
  margin: 12px 0 10px;
}
.choice {
  min-height: 48px;
  padding: 11px 16px;
}
.trial-copy .text-button {
  font-size: 17px;
  margin-top: 6px;
}
body[data-step="3"] .celestial-dust {
  opacity: 0.25;
}
@media (max-height: 650px) {
  .trial-copy .progress-label {
    font-size: 16px;
  }
  .trial-copy h1 {
    font-size: 20px;
    margin: 8px 0 6px;
  }
  .choice {
    font-size: 16px;
    min-height: 42px;
    padding: 8px 14px;
    margin: 6px 0;
  }
  .trial-copy .text-button {
    font-size: 15px;
  }
}

/* Présentation des épreuves sans titre : l'accroche et la phrase, plus grandes,
   se posent juste sous l'escalier du portail. */
.trials-intro-card h1.trials-intro-tagline {
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(23px, 6.4vw, 30px);
  letter-spacing: 0;
  line-height: 1.2;
  color: #f1e6f8;
  margin: 0 0 12px;
}
.trials-intro-card .trials-intro-description {
  font-size: clamp(19px, 5.2vw, 23px);
  line-height: 1.3;
  margin: 0 0 22px;
}
.scene.trials-introduction {
  padding-bottom: max(24px, 13dvh, env(safe-area-inset-bottom));
}
@media (max-height: 650px) {
  .trials-intro-card h1.trials-intro-tagline {
    font-size: 22px;
  }
  .trials-intro-card .trials-intro-description {
    font-size: 18px;
    margin-bottom: 16px;
  }
}

/* Chaque épreuve : la situation, puis la question sur sa propre ligne. Le trait au-dessus du compteur est retiré,
   et l'espace au-dessus est réduit pour que les quatre réponses tiennent dans l'écran. */
.trial-landscape {
  border-bottom: 0;
  height: clamp(16px, 7dvh, 80px);
}
.choice {
  margin: 6px 0;
}
.trial-copy h1 .trial-situation,
.trial-copy h1 .trial-question {
  display: block;
}
.trial-copy h1 .trial-question {
  margin-top: 0.45em;
  color: #fff6e3;
}
@media (max-height: 700px) {
  .trial-landscape {
    height: 4dvh;
  }
  .trial-copy h1 {
    margin: 6px 0 4px;
  }
  .choice {
    min-height: 38px;
    padding: 6px 12px;
    margin: 5px 0;
  }
}

/* Épreuves : le bloc des questions descend dans l'espace libre du bas de l'écran,
   et la réponse choisie s'illumine de violet avant le passage à la suite. */
.scene.trials .trial-landscape {
  flex: 1 1 auto;
  height: auto;
  min-height: 16px;
}
.scene.trials {
  padding-bottom: max(18px, 4dvh, env(safe-area-inset-bottom));
}
.trial-copy h1 {
  font-size: clamp(23px, 3.4dvh, 31px);
}
.choice {
  font-size: 19px;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.choice:hover {
  border-color: #dcccffb3;
}
.choice.chosen,
.choice:active {
  border-color: #d8ccff;
  background: linear-gradient(135deg, #5a3fb0a8, #3c2a7ac4);
  box-shadow:
    0 0 22px #8a6fd199,
    0 0 6px #d8ccff66,
    inset 0 0 14px #b49cff33;
}
@media (max-height: 700px) {
  .trial-copy h1 {
    font-size: 20px;
  }
  .choice {
    font-size: 16px;
  }
}

/* 13. L'Oculus stellaire : la terrasse au piédestal en arrière-plan, l'Oculus fermé qui scintille,
   puis qui s'ouvre doucement dans un éclat de lumière quand le ciel est calculé. */
.celestial .oculus {
  position: relative;
  aspect-ratio: 1;
  filter: none;
  display: grid;
  place-items: center;
}
/* L'Oculus est fait de calques superposés : le couvercle fermé (dessus), l'intérieur du couvercle
   (miroir) et le fond (cadran), tous deux découpés dans l'image ouverte. Le couvercle bascule autour
   de la charnière, située à 46,5 % de la hauteur de l'image ouverte. */
.celestial .oculus {
  perspective: 1100px;
}
.oculus > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Sur le socle, le couvercle fermé se place exactement au-dessus du cadran. */
/* Halo qui pulse derrière l'Oculus. */
.oculus-halo {
  grid-area: 1 / 1;
  width: 130%;
  height: 130%;
  border-radius: 50%;
  background: radial-gradient(circle, #e9dcff55 0%, #a586f040 35%, transparent 68%);
  animation: oculus-halo 4.5s ease-in-out infinite;
  pointer-events: none;
}
/* Petites étincelles qui tournent lentement autour. */
.oculus-sparkles {
  grid-area: 1 / 1;
  width: 118%;
  height: 118%;
  pointer-events: none;
  animation: oculus-tourne 24s linear infinite;
}
.oculus-sparkles i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px #e3d4ff;
  animation: oculus-etincelle 3s ease-in-out infinite;
}
.oculus-sparkles i:nth-child(1) {
  top: 4%;
  left: 48%;
}
.oculus-sparkles i:nth-child(2) {
  top: 24%;
  left: 94%;
  animation-delay: 0.5s;
}
.oculus-sparkles i:nth-child(3) {
  top: 74%;
  left: 92%;
  animation-delay: 1s;
}
.oculus-sparkles i:nth-child(4) {
  top: 95%;
  left: 46%;
  animation-delay: 1.5s;
}
.oculus-sparkles i:nth-child(5) {
  top: 72%;
  left: 3%;
  animation-delay: 2s;
}
.oculus-sparkles i:nth-child(6) {
  top: 22%;
  left: 5%;
  animation-delay: 2.5s;
}
@keyframes oculus-respire {
  50% {
    filter: drop-shadow(0 0 24px #d9c6ffbb) drop-shadow(0 0 6px #ffffff88);
  }
}
@keyframes oculus-halo {
  50% {
    transform: scale(1.08);
    opacity: 0.75;
  }
}
@keyframes oculus-tourne {
  to {
    transform: rotate(360deg);
  }
}
@keyframes oculus-etincelle {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
/* Ouverture : le couvercle bascule vers le haut autour de la charnière, laissant voir le cadran ;
   l'intérieur du couvercle (le miroir) se redresse au-dessus. */
.oculus.open .oculus-halo {
  animation: oculus-eclat 2.4s ease-out forwards;
}
@keyframes oculus-eclat {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  30% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.15);
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .oculus-halo,
  .oculus-sparkles,
  .oculus-sparkles i {
    animation: none;
  }
}

/* Formulaire de naissance sans encadré : il se pose sur le bas de l'écran, assombri sur toute la largeur. */
.celestial .panel {
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 4px 0 0;
}
.celestial #oculus-prompt:empty {
  display: none;
}

/* Formulaire de l'Oculus plus compact et posé plus bas : on voit davantage le socle et la terrasse. */
.celestial:before {
  background:
    linear-gradient(#0b102a33 0%, #0b102a10 45%, #090e2b88 64%, #080c26e8 76%, #070a20f7 100%),
    url("images/scene/oculus-fond.webp") center 45% / cover no-repeat;
}
.celestial .birth-picker-button,
.celestial input {
  height: 42px;
  min-height: 42px;
  font-size: 16px;
}
.celestial label {
  font-size: 15px;
}
.celestial #birth-form {
  gap: 4px;
}
.celestial #birth-form > .primary {
  min-height: 46px;
  font-size: 17px;
  margin-top: 6px;
}
.celestial #birth-panel {
  width: min(460px, 100%);
}

/* Oculus : un Oculus plus grand au centre, le titre au-dessus et le formulaire en dessous,
   répartis harmonieusement sur la hauteur de l'écran. */
.scene.celestial {
  justify-content: space-evenly;
}
.celestial .oculus {
  height: clamp(150px, 33dvh, 330px);
  max-height: none;
}
.celestial #birth-panel {
  margin-top: 0;
}
@media (max-height: 700px) {
  .celestial .oculus {
    height: clamp(120px, 26dvh, 200px);
  }
}

/* 14. Ouverture de l'Oculus : textes et formulaire s'effacent, l'Oculus rejoint le socle,
   s'ouvre lentement, puis les aiguilles lumineuses tournent et se posent sur le thème astral. */
.celestial .page-intro,
.celestial #birth-panel {
  transition: opacity 0.8s ease;
}
/* « visibility » en plus de l'opacité : Safari redessine ainsi vraiment la zone, sans garder
   une image figée du formulaire autour de l'Oculus en 3D. */
.celestial.oculus-running .page-intro,
.celestial.oculus-running #birth-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.8s ease,
    visibility 0s 0.8s;
}
.needle path {
  fill: #eee6ff;
}
.needle .needle-tip {
  fill: #ffffff;
}
.needle-strong path {
  fill: #fff4d6;
}
.needle-strong .needle-tip {
  fill: #ffe7a8;
}
.needle-uncertain {
  opacity: 0.45;
}
@keyframes aiguilles-brillent {
  to {
    filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 14px #d9c6ff);
  }
}
/* Les félicitations et le bouton qui mène à la révélation, une fois les aiguilles posées. */
.celestial .oculus-finale {
  position: fixed;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: max(26px, 6dvh, env(safe-area-inset-bottom));
  margin-inline: auto;
  width: min(380px, calc(100% - 48px));
  text-align: center;
  text-shadow: 0 2px 8px #060a20;
}
.oculus-finale > * {
  animation: reveal-gently 1s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.oculus-finale .oculus-bravo {
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(22px, 6vw, 28px);
  color: #f6e7bd;
  margin: 0 0 4px;
}
.oculus-finale .oculus-bravo-detail {
  font-size: clamp(17px, 4.6vw, 20px);
  margin: 0 0 16px;
  animation-delay: 0.35s;
}
.oculus-finale .reveal-house {
  width: 100%;
  margin: 0;
  animation-delay: 0.7s;
}
@media (prefers-reduced-motion: reduce) {
  .oculus-finale > * {
    animation: none;
  }
}

/* À la fin de l'ouverture, une lumière douce sans éblouir : les aiguilles restent bien visibles. */
.celestial.oculus-running.oculus-complete .oculus-light {
  opacity: 0.3;
}
.celestial.oculus-running .oculus {
  filter: none;
}

/* Seuil : champ du prénom et bouton plus larges et plus hauts, et sans le fond jaune
   que certains navigateurs ajoutent quand ils remplissent le prénom automatiquement. */
.threshold-copy {
  width: min(88cqw, 52cqh, 400px);
}
.threshold .input-wrap {
  height: clamp(44px, 6.8cqh, 58px);
  padding: 0 18px;
  gap: 10px;
}
.threshold .input-wrap input {
  font-size: clamp(17px, 2.4cqh, 21px);
  /* Prénom centré dans l'encadré : la marge droite compense l'icône à gauche. */
  text-align: center;
  padding-right: 26px;
}
.threshold .primary {
  height: clamp(44px, 6.8cqh, 58px);
  font-size: clamp(19px, 2.8cqh, 24px);
  margin-top: 10px;
}
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:hover,
.input-wrap input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fcf5e9;
  caret-color: #fcf5e9;
  transition: background-color 100000s 0s;
}
.input-wrap input:autofill {
  background: transparent;
}
/* « Regarde-toi dans le miroir… », sous l'Oculus pendant que les aiguilles tournent. */
.celestial .oculus-consigne {
  position: fixed;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: max(60px, 14dvh, env(safe-area-inset-bottom));
  margin: 0 auto;
  width: min(380px, calc(100% - 48px));
  text-align: center;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(19px, 5.2vw, 24px);
  color: #f3e8ff;
  text-shadow:
    0 0 12px #c9b0ff,
    0 2px 8px #060a20;
  animation:
    reveal-gently 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) backwards,
    consigne-pulse 2.8s ease-in-out 1.2s infinite alternate;
}
@keyframes consigne-pulse {
  to {
    text-shadow:
      0 0 20px #e2d2ff,
      0 2px 8px #060a20;
  }
}
@media (prefers-reduced-motion: reduce) {
  .celestial .oculus-consigne {
    animation: none;
  }
}

/* 15. Bienvenue, d'après la maquette « Tes affinités astrales » de l'autrice : encadrés violets
   lumineux, titres de section entre deux traits, carte du personnage principal (portrait à gauche,
   texte à droite). Le château reste en fond, assombri. */
.scene.welcome {
  padding: calc(var(--header-height) + 10px) 18px max(16px, env(safe-area-inset-bottom));
  align-items: center;
}
.welcome:before {
  background:
    linear-gradient(#0a0c26aa, #0a0c26cc),
    url("images/scene/bienvenue.webp") center/cover no-repeat;
}
.welcome:after {
  background: radial-gradient(ellipse 90% 70% at 50% 60%, #0b0a2acc, #0b0a2a66 75%, transparent);
}
.welcome-layout {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(7px, 1.5dvh, 14px);
  text-align: center;
}
.welcome-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.welcome-heading h1 {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-weight: 400;
  font-size: clamp(19px, 6.1vw, 34px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff6e2 10%, #ecd3a0 55%, #c99f5f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px #e8c98a55) drop-shadow(0 2px 6px #080c22);
}
.star-ornament {
  flex-shrink: 0;
  width: 120px;
  height: 12px;
  color: #e3c891;
  filter: drop-shadow(0 0 4px #e8c98a88);
}
/* Titre de section entre deux traits fins terminés par un point. */
.welcome-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 -2px;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(19px, 5.2vw, 23px);
  color: #f6eefc;
  white-space: nowrap;
}
.welcome-title:before,
.welcome-title:after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d9c3f2aa);
}
.welcome-title:after {
  background: linear-gradient(90deg, #d9c3f2aa, transparent);
}
/* Les encadrés : comme les cartes d'Explorer Cosmoz (bordure dorée fine, lueur violette douce). */
.welcome-box {
  border: 1px solid #d9bd8f99;
  border-radius: 14px;
  background: linear-gradient(180deg, #1c1550b3, #100d33e6 60%);
  box-shadow:
    0 0 10px #9b6cff55,
    0 0 24px #7b4dff2e,
    inset 0 0 12px #a77bff26;
  color: #fff3e6;
}
.welcome-houses,
.welcome-characters {
  display: grid;
  grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr));
  gap: 10px;
}
.welcome[data-dominants="2"] .welcome-houses,
.welcome[data-dominants="2"] .welcome-characters {
  --count: 2;
  width: 67%;
  align-self: center;
}
.welcome-house {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 7px;
  line-height: 1.1;
}
.welcome-symbol {
  font-family: Georgia, serif;
  font-size: clamp(24px, 7vw, 30px);
  line-height: 1.1;
  color: #f1dcb4;
  text-shadow: 0 0 10px #c9a2ffcc;
}
.welcome-house-name {
  font-size: clamp(15px, 4.2vw, 17px);
}
.welcome-house-name small {
  display: block;
  font-size: 12px;
  color: #d4c1ec;
}
.welcome-character {
  position: relative;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 22dvh;
  width: 100%;
  justify-self: center;
}
.welcome-character .portrait,
.welcome-principal .portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center 22%;
  filter: none;
}
.welcome-character > span {
  position: absolute;
  inset: auto 0 0;
  padding: 18px 4px 6px;
  background: linear-gradient(transparent, #0d0b2ee6 60%);
  font-size: clamp(13px, 3.8vw, 16px);
  line-height: 1.1;
}
.welcome-principal {
  position: relative;
  display: flex;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  text-align: center;
}
.welcome-principal .portrait {
  inset: 0 auto 0 0;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
}
.welcome-principal-copy {
  position: relative;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.welcome-principal-label {
  font-size: clamp(17px, 4.8vw, 21px);
  line-height: 1.1;
}
.welcome-principal strong {
  font-family: Cinzel, Georgia, serif;
  font-weight: 400;
  font-size: clamp(17px, 4.7vw, 20px);
  line-height: 1.1;
  color: #fff6e6;
}
.welcome-principal small {
  font-size: 12px;
  color: #d4c1ec;
}
.welcome-principal em {
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.2;
  color: #ece2f6;
}
.welcome-layout > .primary {
  align-self: center;
  width: min(100%, 340px);
  min-height: 44px;
  margin: 4px 0 0;
  padding: 8px 22px;
  font-size: 17px;
}
@media (max-height: 820px) {
  .welcome-layout {
    gap: 8px;
  }
  .welcome-character {
    max-height: 17dvh;
  }
  .welcome-principal {
    min-height: 104px;
  }
}
@media (max-height: 700px) {
  .welcome-layout {
    gap: 6px;
  }
  .welcome-title {
    font-size: 17px;
  }
  .welcome-house {
    padding: 4px 3px;
  }
  .welcome-symbol {
    font-size: 21px;
  }
  .welcome-principal em {
    display: none;
  }
}

/* Rencontre : la phrase du personnage (Bible) et les personnages des autres Maisons. */
.encounter .character-copy > .primary {
  width: auto;
  min-height: 42px;
  margin-top: 10px;
  padding: 8px 30px;
}

/* 16. Le médaillon en 3D. La scène fait 600 × 600 px (mise à l'échelle par --k) ; le disque fait
   520 px, la charnière est sur son bord haut (y = 40 px). À l'ouverture, le médaillon s'incline
   de 39° (comme sur l'image de l'Oculus ouvert) et le couvercle pivote de 155° (le miroir reste presque droit, légèrement penché en arrière) autour de la charnière. */
.celestial .oculus {
  overflow: visible;
}
.medaillon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  zoom: var(--k, 0.4);
  perspective: 2400px;
  pointer-events: none;
}
.med-corps,
.med-couvercle,
.med-tranches {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.med-corps {
  transition: transform 2.3s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.oculus.open .med-corps {
  transform: rotateX(39deg);
}
.med-couvercle {
  transform-origin: 50% 40px;
  transition: transform 2.3s cubic-bezier(0.45, 0.05, 0.25, 1) 0.1s;
}
.oculus.open .med-couvercle {
  transform: rotateX(155deg);
}
.med-base,
.med-face-dessus,
.med-face-miroir,
.med-aiguilles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.med-face-dessus {
  transform: translateZ(12px);
}
.med-face-miroir {
  transform: translateZ(0.5px) rotateX(180deg);
}
.med-face-miroir img {
  width: 100%;
  height: 100%;
}
/* Épaisseur du métal : anneaux argentés empilés sous la base et dans le couvercle. */
.med-tranches i {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 8px solid #8c90a9;
  box-shadow: inset 0 0 0 2px #5b5f7c;
}
.med-tranches-couvercle i {
  border-color: #a7abc2;
}
/* Aiguilles posées sur le cadran, dans le plan de la base. */
.med-aiguilles {
  transform: translateZ(1px);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.oculus.needles-lit .med-aiguilles {
  opacity: 1;
  filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 7px #c9b0ff);
}
@media (prefers-reduced-motion: reduce) {
  .med-corps,
  .med-couvercle {
    transition: none;
  }
}
/* La face miroir couvre tout le disque du couvercle, jusqu'à la charnière : dans l'image d'origine,
   son bas était caché par la base. Étirée de 8 % vers la charnière, sa barre vient se poser contre
   le haut de la base, sans vide entre le miroir et le cadran, et l'épaisseur du couvercle reste alignée. */
.med-face-miroir img,
.oculus-mist {
  transform-origin: 50% 40px;
  scale: 1 1.0833;
}

/* La lumière du miroir : un cœur blanc nacré qui couvre la glace (on ne voit plus le reflet),
   des rayons qui tournent lentement et quelques étincelles. Allégée pour les téléphones :
   pas de flou ni de mélange de couleurs, et seules l'opacité et la rotation sont animées. */
.oculus-mist {
  position: absolute;
  z-index: 2;
  left: 20.5%;
  top: 24%;
  width: 59%;
  height: 60%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1.2s ease 1.2s;
  background: radial-gradient(ellipse at 50% 46%, #ffffff 0%, #fffaf0 14%, #f1e8ff 34%, #d6c4f6 60%, #b49ce6 84%, #9b82d6 100%);
  box-shadow:
    0 0 18px 4px #fff8ecaa,
    0 0 50px 14px #d9c6ff66,
    inset 0 0 26px 6px #c9b2f066;
}
.oculus.open .oculus-mist {
  opacity: 1;
}
/* Halo qui respire, par l'opacité seulement. */
.oculus-mist:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 26px 8px #fff8ecdd,
    0 0 74px 22px #d9c6ff99;
  opacity: 0;
}
.oculus.open .oculus-mist:after {
  animation: miroir-eclat 2.2s ease-in-out 2.4s infinite alternate;
}
/* Les rayons et les étincelles restent dans la glace : découpe ovale (clip-path), fiable en 3D. */
.mist-verre {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  clip-path: ellipse(50% 50% at 50% 50%);
}
.mist-rayons,
.mist-etincelles {
  position: absolute;
}
.mist-rayons {
  inset: -30%;
  opacity: 0.45;
  background: repeating-conic-gradient(from 0deg at 50% 46%, #ffffff00 0deg, #fffbf2 5deg, #ffffff00 12deg, #ffffff00 24deg);
  animation: brume-tourne 26s linear infinite reverse;
}
.mist-etincelles {
  inset: 0;
  background:
    radial-gradient(circle at 26% 40%, #ffffff 0 1.6px, transparent 3.2px),
    radial-gradient(circle at 66% 28%, #fff6dd 0 1.8px, transparent 3.6px),
    radial-gradient(circle at 60% 72%, #ffffff 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 34% 68%, #f3e8ff 0 1.6px, transparent 3.2px),
    radial-gradient(circle at 80% 50%, #ffffff 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 18% 56%, #fff3e0 0 1.2px, transparent 2.4px);
  animation: miroir-etincelles 2.6s ease-in-out infinite alternate;
}
@keyframes brume-tourne {
  to {
    transform: rotate(360deg);
  }
}
@keyframes miroir-eclat {
  to {
    opacity: 1;
  }
}
@keyframes miroir-etincelles {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mist-rayons,
  .mist-etincelles,
  .oculus.open .oculus-mist:after {
    animation: none;
  }
}

/* 17. Explorer Cosmoz, d'après la maquette de l'autrice : le portail ouvert sur Cosmoz en fond,
   assombri au milieu là où se posent les textes ; trois cartes en arche côte à côte. */
.scene.explorer-hub,
.scene.maisons,
.scene.univers {
  justify-content: center;
  gap: clamp(10px, 2dvh, 20px);
  padding: calc(var(--header-height) + 8px) 12px max(14px, env(safe-area-inset-bottom));
}
.explorer-hub:before,
.maisons:before,
.univers:before {
  background: url("images/scene/explorer.webp") center 30% / cover no-repeat;
}
.explorer-hub:after,
.maisons:after,
.univers:after {
  background: linear-gradient(
    #0a0b2600 0%,
    #0a0b2600 14%,
    #0b0a2a99 30%,
    #0b0a2ae0 44%,
    #0b0a2ae6 80%,
    #0b0a2ab3 100%
  );
}
.explorer-intro {
  text-align: center;
}
.explorer-intro h1 {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 7vw, 36px);
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #fff6e2 10%, #ecd3a0 60%, #c99f5f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px #e8c98a55) drop-shadow(0 2px 6px #080c22);
}
.explorer-intro p {
  margin: 4px auto 0;
  font-style: italic;
  max-width: 300px;
  text-wrap: balance;
  font-size: clamp(17px, 4.6vw, 20px);
  line-height: 1.25;
  color: #f1e8f6;
  text-shadow: 0 2px 8px #080c22;
}
.explorer-cards {
  width: min(100%, 720px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 2.2vw, 18px);
}
/* Une carte en arche : bordure dorée fine, lueur violette, image en haut, bouton en bas. */
.explorer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 4px 4px 9px;
  border: 1.5px solid #d9bd8fb3;
  border-radius: 50% 50% 14px 14px / 64px 64px 14px 14px;
  background: linear-gradient(180deg, #1c1550cc, #100d33f2 55%);
  box-shadow:
    0 0 10px #9b6cff88,
    0 0 26px #7b4dff44,
    inset 0 0 14px #a77bff33;
  color: #fff3e6;
  text-align: center;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.explorer-card:hover,
.explorer-card:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 0 14px #b48dffbb,
    0 0 34px #7b4dff66,
    inset 0 0 16px #a77bff44;
}
.explorer-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 471 / 560;
  max-height: 30dvh;
  overflow: hidden;
  border-radius: 50% 50% 4px 4px / 60px 60px 4px 4px;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
}
.explorer-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.explorer-card-title {
  margin: 2px 0 4px;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(13px, 3.7vw, 19px);
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: #fff6e6;
  text-wrap: balance;
}
.explorer-card-text {
  flex: 1;
  padding: 0 3px;
  font-size: clamp(13px, 3.4vw, 16px);
  line-height: 1.2;
  color: #e3d6f2;
}
.explorer-card-cta {
  margin-top: 8px;
  padding: 4px 12px;
  border: 1px solid #d9bd8fcc;
  border-radius: 999px;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(10px, 2.8vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff3e0;
  box-shadow: 0 0 10px #9b6cff66;
}
.explorer-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.explorer-footer .wattpad {
  margin: 0;
  font-size: clamp(18px, 4.8vw, 21px);
  color: #efe4fa;
  text-shadow: 0 2px 8px #080c22;
}
@media (max-height: 700px) {
  .scene.explorer-hub {
    gap: 8px;
  }
  .explorer-card-image {
    max-height: 22dvh;
  }
  .explorer-card-text {
    font-size: 12px;
  }
  .explorer-card-cta {
    margin-top: 5px;
  }
}

/* 18. Les Douze Maisons, d'après la maquette de l'autrice : le décor d'Explorer Cosmoz et douze cartes
   en arche, quatre par ligne, toutes sur le même écran. */
.maisons-grid {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1.8vw, 12px);
}
.maison-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 3px 3px 4px;
  border: 1px solid #d9bd8f99;
  border-radius: 50% 50% 10px 10px / 40px 40px 10px 10px;
  background: linear-gradient(180deg, #1c1550cc, #100d33f2 60%);
  box-shadow:
    0 0 8px #9b6cff55,
    0 0 20px #7b4dff2e,
    inset 0 0 10px #a77bff26;
  color: #fff3e6;
  line-height: 1.1;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.maison-card:hover,
.maison-card:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 0 12px #b48dffaa,
    0 0 28px #7b4dff55,
    inset 0 0 12px #a77bff40;
}
/* La Maison du visiteur. */
.maison-card.affinity {
  border-color: #f0d49c;
  box-shadow:
    0 0 10px #f0d49c88,
    0 0 24px #e8c98a44,
    inset 0 0 12px #f0d49c33;
}
.maison-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-height: 13dvh;
  overflow: hidden;
  border-radius: 50% 50% 4px 4px / 36px 36px 4px 4px;
  -webkit-mask-image: linear-gradient(#000 75%, transparent);
  mask-image: linear-gradient(#000 75%, transparent);
}
.maison-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.maison-card-number {
  margin-top: -6px;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(13px, 3.6vw, 16px);
  color: #f1dcb4;
}
.maison-card-sign {
  max-width: 100%;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(9.5px, 2.75vw, 13px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.maison-card-arrow {
  font-size: 15px;
  line-height: 1;
  color: #e3c891;
}
.maisons .explorer-footer {
  gap: 4px;
}
.explorer-moon {
  width: 120px;
  height: 14px;
  color: #e3c891;
  filter: drop-shadow(0 0 4px #e8c98a88);
}
.maisons-signature {
  margin: 0;
  font-style: italic;
  font-size: clamp(17px, 4.6vw, 20px);
  color: #f3eaf8;
  text-shadow: 0 2px 8px #080c22;
}
.maisons .explorer-footer .text-button {
  margin: 0;
  font-size: 16px;
  color: #d9c8ee;
}
@media (max-height: 820px) {
  .scene.maisons {
    gap: 8px;
    padding-top: calc(var(--header-height) + 14px);
  }
  .maison-card-image {
    max-height: 11dvh;
  }
}
@media (max-height: 700px) {
  .scene.maisons {
    gap: 6px;
  }
  .maison-card-image {
    max-height: 10dvh;
  }
  .maisons .explorer-moon {
    display: none;
  }
}

/* 19. L'Univers, d'après la maquette de l'autrice : sa carte avec les légendes posées dessus, les quatre
   quartiers, la ville choisie (vignette à gauche, texte à droite) et ses quartiers. Tout tient sur un écran.
   Les tailles de la carte sont en unités de l'image (900 px de large), mises à l'échelle avec elle. */
.scene.univers {
  padding-left: 10px;
  padding-right: 10px;
}
.univers-about {
  margin: 0;
  font-style: italic;
  font-size: clamp(16px, 4.4vw, 19px);
  color: #f1e8f6;
}
.univers-about span {
  color: #e3c891;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cosmoz-map {
  margin: 0;
}
.cosmoz-map svg {
  display: block;
  width: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 14px #9b6cff44);
}
.map-city,
.map-landmark,
.map-palace {
  cursor: pointer;
  outline: none;
}
.map-city .city-halo {
  transition: opacity 0.3s ease;
}
.map-city.selected .city-halo,
.map-city:focus-visible .city-halo {
  opacity: 0.95;
}
.city-plaque,
.palace-plaque {
  fill: #110d2ee6;
  stroke: #e3c891;
  stroke-width: 2;
}
.palace-plaque {
  fill: #110d2ecc;
  stroke-opacity: 0.6;
}
.map-city.selected .city-plaque {
  stroke: #fff0c8;
}
.city-name,
.palace-name {
  font-family: Cinzel, Georgia, serif;
  font-size: 25px;
  letter-spacing: 0.06em;
  fill: #fff3e0;
}
.palace-name {
  letter-spacing: 0.02em;
}
.map-landmark text {
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: 27px;
  fill: #fff0d0;
  paint-order: stroke;
  stroke: #110d2e;
  stroke-width: 6px;
  stroke-linejoin: round;
}
.map-landmark:hover text,
.map-landmark:focus-visible text {
  fill: #ffe7b0;
}
.map-compass text {
  font-family: Cinzel, Georgia, serif;
  font-size: 22px;
  fill: #e3c891;
}
/* Emblèmes des quartiers : un cercle fin, la couleur de l'emblème. */
.univers-legend {
  width: min(100%, 520px);
}
.univers-legend ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.univers-legend li,
.city-quarter > span:not(.element-icon) {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  text-align: left;
  font-size: clamp(11px, 3vw, 14px);
  line-height: 1.1;
  color: #fff3e6;
}
.univers-legend li > span,
.city-quarter > span:not(.element-icon):not(.city-quarter-arrow) {
  display: block;
}
.univers-legend small,
.city-quarter small {
  display: block;
  font-size: 0.85em;
  color: #cdb9e4;
}
.city-description {
  width: min(100%, 520px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.city-card {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: 14px;
}
.city-image {
  position: relative;
  flex: 0 0 36%;
  -webkit-mask-image: linear-gradient(90deg, #000 65%, transparent);
  mask-image: linear-gradient(90deg, #000 65%, transparent);
}
.city-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.city-copy {
  flex: 1;
  text-align: left;
}
.city-copy h2 {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-weight: 400;
  color: #fff3df;
}
.city-rank {
  margin: 0 0 3px;
  color: #e3c891;
}
.city-text {
  margin: 0;
  color: #ece2f6;
}
.city-quarters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.city-quarter {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 3px 5px 4px;
  text-align: left;
  border: 1px solid #d9bd8f80;
  border-radius: 10px;
  background: #13103399;
  color: #fff3e6;
}
.city-quarter > span:not(.element-icon) {
  font-size: clamp(10px, 2.8vw, 13px);
}
.city-quarter-arrow {
  margin-left: auto;
  font-size: 13px;
  color: #e3c891;
}
.univers-back {
  margin: 0;
  font-size: 16px;
  color: #d9c8ee;
}
/* Fiches de l'Univers (quartier, lieu mythique, Palais). */
.univers-sheet {
  text-align: center;
}
.univers-sheet h2 {
  margin: 2px 0 0;
}
.univers-sheet-french {
  margin: 0 0 8px;
  font-style: italic;
  color: #e3c891;
}
.univers-sheet p {
  font-size: 17px;
  line-height: 1.35;
}
.univers-sheet dl {
  margin: 8px 0;
}
.univers-sheet-note {
  font-style: italic;
  color: #e4d8f2;
}
@media (max-height: 900px) {
  .cosmoz-map svg {
    max-height: 37dvh;
  }
  .univers .welcome-title {
    font-size: 17px;
  }
  .city-text {
    font-size: 13px;
  }
}
@media (max-height: 700px) {
  .cosmoz-map svg {
    max-height: 34dvh;
  }
  .univers-legend {
    display: none;
  }
  .city-text {
    line-height: 1.2;
  }
  .univers-about {
    font-size: 15px;
  }
  .city-text {
    font-size: 12.5px;
  }
}
@media (max-width: 480px) {
  .city-quarter small {
    display: none;
  }
}

/* 20. Les personnages, sur le modèle des Douze Maisons : portrait en arche, symbole du signe posé
   sur le bas du portrait, nom et signe. Les douze tiennent sur un écran. */
.scene.personnages {
  padding-left: 8px;
  padding-right: 8px;
}
.perso-card {
  padding: 3px 2px 5px;
  container-type: inline-size;
}
/* Le décor de la Maison reprend le cadrage des cartes des Maisons ; le personnage détouré se pose
   dessus, aligné en bas. */
.perso-card-image {
  position: relative;
}
.perso-card-image .perso-cutout {
  position: absolute;
  inset: auto 0 0;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.perso-card-symbol {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -13px;
  position: relative;
  border: 1px solid #e3c891;
  border-radius: 50%;
  background: #120e33;
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1;
  color: #f1dcb4;
  box-shadow: 0 0 8px #9b6cff88;
}
/* Le nom tient toujours sur une ligne : sa taille suit la largeur de la carte (cqi). */
.perso-card-name {
  margin-top: 3px;
  max-width: 100%;
  font-family: Cinzel, Georgia, serif;
  font-size: min(13px, 11.3cqi);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.perso-card-sign {
  font-size: clamp(11px, 3vw, 14px);
  color: #d4c1ec;
}
@media (max-height: 700px) {
  .perso-card-symbol {
    width: 20px;
    height: 20px;
    margin-top: -11px;
    font-size: 11px;
  }
}

/* Le groupe validé reste lisible jusqu’aux visages du premier plan. */
.explorer-card-personnages .explorer-card-image {
  -webkit-mask-image: linear-gradient(#000 90%, transparent);
  mask-image: linear-gradient(#000 90%, transparent);
}
.explorer-card-personnages .explorer-card-image img { object-position: center 15%; }

/* Portraits fantasy validés : les douze arches utilisent la hauteur libérée sous le titre. */
.scene.personnages {
  justify-content: flex-start;
  gap: clamp(7px, 1.2dvh, 12px);
  padding: calc(var(--header-height) + 6px) 6px max(10px, env(safe-area-inset-bottom));
}
.personnages .explorer-intro { flex: 0 0 auto; }
.personnages .explorer-intro h1 { font-size: clamp(23px, 5.6vw, 34px); }
.personnages .explorer-intro p { font-size: clamp(16px, 4.2vw, 20px); }
.personnages .maisons-grid {
  width: min(100%, 760px);
  flex: 1 1 0;
  min-height: 0;
  max-height: 650px;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(5px, 1.1vw, 10px);
}
.personnages .perso-card { min-height: 0; padding: 3px 2px 6px; }
.personnages .perso-card-image {
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: auto;
  max-height: none;
  -webkit-mask-image: linear-gradient(#000 88%, transparent);
  mask-image: linear-gradient(#000 88%, transparent);
}
.personnages .perso-card-image .perso-cutout {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
@media (max-width: 600px) and (min-height: 650px) {
  .personnages .perso-card-image .perso-cutout {
    object-fit: cover;
    object-position: center top;
  }
}
.personnages .perso-card-name { font-size: min(14px, 11.3cqi); }
.personnages .explorer-footer { flex: 0 0 auto; gap: 3px; }
.personnages .maisons-signature { font-size: clamp(14px, 3.7vw, 19px); }
.personnages .explorer-footer .text-button { margin: 0; }
@media (max-height: 650px) {
  .scene.personnages { gap: 5px; padding-top: calc(var(--header-height) + 2px); }
  .personnages .explorer-intro h1 { font-size: 22px; }
  .personnages .explorer-intro p { font-size: 15px; }
  .personnages .perso-card-sign { font-size: 10px; }
  .personnages .explorer-footer .maisons-signature { font-size: 13px; }
}

@media (min-width: 601px) {
  .personnages .maisons-grid { width: min(100%, 520px); }
}

/* Le même portrait validé et le décor de sa Maison sur tous les écrans. */
.portrait-fantasy { position: relative; overflow: hidden; isolation: isolate; }
.portrait-fantasy > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.portrait-fantasy .portrait-decor { object-fit: cover; object-position: center; }
.portrait-fantasy .portrait-personnage { object-fit: cover; object-position: center top; }

/* Pages dédiées : chaque Maison conserve son décor et son élu validé. */
.scene.welcome { justify-content: flex-start; padding-top: calc(var(--header-height) + 22px); }
.welcome-layout { width: min(100%, 500px); }
.welcome-principal { min-height: clamp(150px, 23dvh, 210px); }
.welcome-principal .portrait-personnage { object-fit: contain; object-position: center bottom; }
.welcome-principal .portrait { width: 45%; mask-image: none; }
.welcome-principal-copy { width: 55%; padding: 12px; }
.scene.detail-page { padding: calc(var(--header-height) + 8px) 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.detail-page:before { background: linear-gradient(#08091f22, #08091f44), var(--detail-background) center/cover no-repeat; }
.detail-page:after { background: linear-gradient(transparent 38%, #090b23bb 72%, #090b23ee); }
.detail-back { align-self: flex-start; position: relative; z-index: 1; margin: 0; font-size: 17px; }
.detail-character { display: block; width: 100%; height: clamp(210px, 40dvh, 480px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 6px 18px #09092355); }
.detail-page .character-copy { width: 100%; text-align: center; padding: 8px 0 0; }
.detail-page h1 { margin: 3px 0 8px; font: 400 clamp(25px, 6vw, 36px)/1.2 Cinzel, Georgia, serif; }
.detail-page .eyebrow { margin: 0; }
.detail-page .excerpt { margin: 6px 0; padding: 5px 0; }
.house-landscape { flex: 1; min-height: 20dvh; }
.house-page .house-sheet { margin: 0 auto; }
.house-page .house-sheet h1 { text-align: center; }
.house-page .house-chosen .portrait { flex: none; }
@media (max-height: 700px) {
  .scene.welcome { padding-top: calc(var(--header-height) + 8px); }
  .welcome-principal { min-height: 125px; }
  .detail-character { height: 33dvh; min-height: 150px; }
  .house-landscape { min-height: 12dvh; }
}

/* Portrait dans son arche, informations dans un cartouche céleste. Les décors HD
   sont indépendants des miniatures de la galerie. */
.encounter.detail-page { gap: 3px; }
.encounter.detail-page:before { background: linear-gradient(#08092022, #08092022), var(--detail-background) center top/cover no-repeat; }
.encounter.detail-page:after { background: linear-gradient(transparent 55%, #090a2344); }
.encounter.detail-page .detail-back { font-size: 15px; padding: 0 4px; }
.encounter.detail-page .character-layout { width: min(100%, 440px); margin: 0 auto; }
.character-arch { position: relative; overflow: hidden; }
.character-arch .detail-character { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding-top: 18px; filter: none; }
.encounter.detail-page .character-copy { position: relative; z-index: 1; flex-shrink: 0; border: 1px solid #d9ba79; border-radius: 26px 26px 15px 15px; }
.encounter.detail-page .character-copy:before { content: "✦"; position: absolute; top: -22px; left: calc(50% - 20px); width: 40px; height: 40px; border: 1px solid #e7c987; border-radius: 50%; color: #ffe2a3; font-size: 30px; line-height: 38px; box-shadow: 0 0 12px #e6b66a44; }
.encounter.detail-page h1 { color: #fff0d3; }
.character-identity { display: grid; grid-template-columns: repeat(3,1fr); align-items: center; margin: 0 0 10px; border-bottom: 1px solid #d6b57c66; color: #f0e4d1; }
.character-identity > span + span { border-left: 1px solid #d6b57c66; }
.character-identity b { display: block; margin: 0 auto 5px; border: 1px solid #d6b57c; border-radius: 50%; font-weight: 400; color: #eacc93; }
@media (max-height: 650px) {
 .encounter.detail-page h1 { margin-bottom: 4px; }
 .character-identity b { margin-bottom: 3px; }
}

/* Retour discret, portrait complet et cadre ouvragé. */
.detail-page .detail-back { position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 12px; z-index: 15; display: grid; place-items: center; width: 40px; height: 40px; padding: 8px; color: #f7e9cb; border-radius: 50%; }
.detail-back svg { width: 24px; height: 24px; }
.encounter.detail-page { padding: calc(var(--header-height) + 2px) 12px 14px; }
.encounter.detail-page .character-layout { max-width: 470px; }
.character-arch { flex-shrink: 0; margin: 0 auto -8px; border: 0; box-shadow: none; border-radius: 50% 50% 0 0 / 43% 43% 0 0; background: transparent; }
.golden-arch { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 2px #160c10) drop-shadow(0 0 5px #ffe4a344); }
.encounter.detail-page .character-copy { display: flex; flex-direction: column; }
.encounter.detail-page h1 { font-size: clamp(22px,5.6vw,29px); margin: 2px 0 5px; }
.character-identity { font-size: 14px; padding: 3px 0 8px; margin-bottom: 8px; }
.character-identity b { width: 26px; height: 26px; font-size: 18px; line-height: 24px; margin-bottom: 3px; }
.character-intro { margin: 0 0 10px; font-size: 16px; line-height: 1.35; }
.character-traits { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 0; margin: 3px 0 12px; list-style: none; }
.character-traits li { padding: 3px 10px; border: 1px solid #d5b47699; border-radius: 20px; font-size: 13px; }
.encounter.detail-page { overflow-y: auto; justify-content: flex-start; }
.encounter.detail-page .character-layout { flex-shrink: 0; }
@media (max-height: 650px) {
 .character-arch { height: 32dvh; }
 .encounter.detail-page .character-copy { padding: 14px 11px 10px; }
 .encounter.detail-page h1 { font-size: 22px; }
 .character-identity { font-size: 13px; padding-bottom: 6px; margin-bottom: 6px; }
 .character-identity b { width: 23px; height: 23px; font-size: 17px; line-height: 21px; }
 .character-intro { font-size: 15px; }
}
.detail-page .detail-back { background: #0b0d25bb; border: 1px solid #e2c58b55; }

/* L'arche suit le format de chaque portrait ; ses montants recouvrent les
   limites latérales du vêtement et le cartouche masque la base de l'image. */
.character-arch { --portrait-height: 31dvh; height: var(--portrait-height); min-height: 0; width: calc((var(--portrait-height) - 14px) * var(--portrait-ratio) + 14px); max-width: 82%; margin-bottom: -8px; }
.character-arch .detail-character { padding: 14px 7px 0; object-fit: contain; object-position: center bottom; }
.encounter.detail-page .character-copy { margin: 0 auto; }
@media (max-height: 650px) {
 .character-arch { --portrait-height: 29dvh; min-height: 0; }
 .encounter.detail-page .character-copy { min-height: 43dvh; }
}

/* Carte plus présente, fiche de ville compacte et logos officiels des quartiers. */
.scene.univers { gap: 6px; }
.univers-legend { display: none; }
.cosmoz-map { flex: 1; min-height: 0; width: min(100%,600px); }
.cosmoz-map svg { height: 100%; max-height: 46dvh; }
.city-card { min-height: 90px; }
.city-image { flex-basis: 30%; }
.city-copy { padding: 6px 9px 6px 2px; }
.city-copy h2 { font-size: 18px; }
.city-rank { font-size: 12px; margin-bottom: 2px; }
.city-text { font-size: 12px; line-height: 1.2; }
.quarter-logo { display: inline-block; flex: none; width: 32px; height: 32px; position: relative; overflow: hidden; }
.quarter-logo img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: screen; }
.logo-shimmer-cove img { transform: scale(1.4); }
.logo-stone-valley img { transform: scale(1.25); }
.city-quarter > span:not(.quarter-logo) { font-size: clamp(10px,2.7vw,13px); }
.univers-sheet > .quarter-logo { display: block; width: 105px; height: 105px; margin: 0 auto 8px; }
.univers-sheet > .logo-cloud-haven { width: 160px; height: 90px; }
@media (max-height: 650px) {
 .scene.univers { gap: 4px; }
 .univers .explorer-intro h1 { margin-bottom: 0; font-size: 25px; }
 .univers-about { min-height: 28px; padding: 2px; }
 .city-text { font-size: 11px; }
 .city-copy h2 { font-size: 16px; }
 .city-rank { font-size: 11px; }
 .quarter-logo { width: 25px; height: 25px; }
 .univers-back { min-height: 30px; padding: 3px; }
}

/* Exploration de la carte : légendes distinctes et navigation au toucher. */
.univers .explorer-intro h1 { margin-bottom: 0; }
.univers .univers-about { min-height: 24px; padding: 0 4px; font-size: 14px; line-height: 1.2; }
.univers .explorer-intro { flex: none; }
.cosmoz-map { position: relative; overflow: visible; }
/* Inclinaison 3D au doigt : la carte bouge sans faire défiler l'écran, et revient à plat en douceur. */
.cosmoz-map .map-canvas { overflow: visible; max-height: 48dvh; touch-action: none; cursor: grab; transform-origin: 50% 50%; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
/* Carte agrandie : elle passe au-dessus du reste de la page, sans cadre qui la coupe. */
.cosmoz-map.map-zoomed { z-index: 5; }
.cosmoz-map .map-canvas.map-tilting { cursor: grabbing; transition: transform 0.08s linear; }
.map-terrain { filter: drop-shadow(0 14px 7px #040214bb) drop-shadow(0 0 5px #d3ad7755); }
.map-plaque-inset { stroke: #d5b576; stroke-width: 1; fill: none; opacity: .6; pointer-events: none; }
.map-label-leader { stroke: var(--city-tint,#e3c891); stroke-width: 2; fill: none; pointer-events: none; }
.map-city .city-halo { fill: var(--city-tint); opacity: .75; }
.map-city .city-plaque { fill: #0d0928f5; stroke: var(--city-tint,#e3c891); stroke-width: 2.5; }
.map-city.selected .city-plaque { stroke-width: 4; }
.city-name { font-size: 28px; letter-spacing: .025em; }
.palace-name { font-size: 21px; }
.map-compass { filter: drop-shadow(0 0 9px #e5b47755); pointer-events: none; }

/* Quartiers : texte complet et lisible, sans association à une ville. */
#detail:has(.quarter-sheet) { padding: 12px 18px 16px; overflow-y: auto; overscroll-behavior: contain; }
.quarter-sheet > .quarter-logo { width: 76px; height: 76px; margin: 0 auto 6px; }
.quarter-sheet > .logo-cloud-haven { width: 130px; height: 62px; }
.quarter-sheet .eyebrow { margin: 4px 0 2px; font-size: 14px; }
.quarter-sheet h2 { font-size: clamp(23px,6vw,29px); line-height: 1.2; }
.quarter-sheet p { font-size: 15px; line-height: 1.3; margin: 8px 0; }
.quarter-sheet .univers-sheet-french { margin: 2px 0 10px; font-size: 16px; }
.quarter-sheet dl { font-size: 14px; line-height: 1.3; margin: 8px 0; }
.quarter-sheet dl > div { padding: 7px 0; gap: 12px; }
.quarter-sheet .univers-sheet-note { margin-bottom: 0; font-size: 14px; }
@media (max-height:650px) {
 .quarter-sheet p { font-size: 14px; }
 .quarter-sheet > .quarter-logo { width:62px; height:62px; }
 .quarter-sheet > .logo-cloud-haven { width:115px; height:54px; }
 .quarter-sheet dl { font-size:13px; }
 .quarter-sheet .univers-sheet-note { font-size:13px; }
}

/* Les fiches de découverte : dons, personnalité et relations entre Maisons. */
.character-powers h2 { font: 400 14px Georgia,serif; color:#d9bb7e; }
.character-powers ul { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 10px; padding:0; }
.character-powers li { border-radius:8px; background:#b59de512; border:1px solid #b59de533; }
.character-powers li span { color:#e2c68b; margin-right:5px; }
.house-page { overflow-y:auto; justify-content:flex-start; }
.house-page .house-sheet { flex-shrink:0; }
.house-page .house-landscape { flex-shrink:0; }
.house-sheet h2 { font:400 16px Cinzel,Georgia,serif; margin:0 0 8px; color:#eddbaf; }
.house-color { display:flex; gap:7px; align-items:center; justify-content:center; font-size:13px; margin:0 0 16px; }
.house-color i { width:10px; height:10px; border-radius:50%; background:var(--house-color); box-shadow:0 0 9px var(--house-color); }
.house-interior p { line-height:1.4; }
.house-nature { display:grid; grid-template-columns:1fr 1fr; margin-bottom:18px; text-align:left; }
.house-nature span { font-size:12px; }
.house-nature p { font-size:14px; line-height:1.3; margin:5px 0 0; }
/* Les relations sont du texte informatif, sans apparence de bouton. */
.house-relation { display:inline-flex; gap:6px; align-items:center; padding:0; margin:0; color:#f0e6f5; text-shadow:0 2px 5px #080414; }
.house-relation b { font-size:19px; font-weight:400; color:var(--relation-color); flex:none; }
.house-relation span { font-size:15px; line-height:1.25; }
.house-relation small { display:block; font-size:12px; color:#e4d2df; margin-top:2px; }
.relation-group h3 { text-align:left; font:400 12px Georgia,serif; }
.relation-group > div { display:flex; flex-wrap:wrap; }
.house-connections { margin-bottom:16px; }

@media (max-width:350px) { .house-relation { gap:5px; } }

/* Les Maisons se lisent directement sur leur décor, sans grand panneau opaque. */
.house-page .house-sheet { width:min(100%,580px); padding:0 4px; border:0; border-radius:0; background:none; backdrop-filter:none; box-shadow:none; text-shadow:0 2px 5px #070313,0 0 10px #070313; }
.house-page:before { background:linear-gradient(#09051522,#09051544),var(--detail-background) center/cover no-repeat; }
.house-page:after { background:linear-gradient(transparent 12%,#0d051540 38%,#0d051575 68%,#0d051588); }
.house-page .house-landscape { display:block; flex:0 0 auto; min-height:0; }
.house-color { margin-bottom:20px; }
.house-interior { padding:8px 5px; margin:0 0 10px; background:linear-gradient(90deg,transparent,#0b061955 20%,#0b061955 80%,transparent); }
.house-interior p { margin:0; font-size:15px; }
.house-nature { gap:0; margin:0 0 16px; }
.house-nature > div { border:0; border-radius:0; padding:9px 12px; }
.house-nature > div+div { border-left:1px solid #dfc58c66; }
.house-nature span { color:#f0d8a5; }
.house-opposition { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:12px; padding:12px 0; border-block:1px solid #dfc58c66; margin-bottom:16px; }
.house-opposition h2 { margin:0; font:400 14px Georgia,serif; }
.house-opposition p { margin:0; font:400 18px Cinzel,Georgia,serif; color:#fff0d3; }
.house-connections h2 { text-align:center; }
.relation-group { display:grid; grid-template-columns:85px 1fr; align-items:start; column-gap:8px; margin:12px 0; }
.relation-group h3 { margin:2px 0 0; color:#efd7b3; font-size:13px; }
.relation-group > div { gap:12px 18px; }
.house-page .house-chosen { margin:22px auto 0; width:min(100%,330px); border:0; border-top:1px solid #dfc58c66; border-radius:0; background:none; color:#fff0e3; text-shadow:0 2px 5px #070313; }
@media(max-width:350px) { .house-page .house-sheet { padding:0; } .relation-group { grid-template-columns:75px 1fr; } .house-relation { padding:0; } .house-relation span { font-size:14px; } }

/* Fiches visibles en une seule vue : aucun défilement du décor ou du contenu. */
.scene.encounter.detail-page, .scene.house-page { overflow:hidden; overscroll-behavior:none; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
.encounter.detail-page .character-layout { grid-template-rows:minmax(0,1fr) auto; min-height:0; }
.encounter.detail-page .character-arch { min-height:0; aspect-ratio:var(--portrait-ratio); max-width:82%; justify-self:center; }
.encounter.detail-page .character-copy { min-height:0; width:94%; padding:13px 13px 10px; }
.encounter.detail-page .character-intro { font-size:15px; line-height:1.3; margin:6px 0 8px; }
.encounter.detail-page .character-traits { margin:3px 0 8px; }
.encounter.detail-page .character-powers ul { margin-bottom:0; }
.character-powers h2 { margin:2px 0 6px; }
.character-powers li { padding:5px 8px; font-size:13px; }
.house-page .house-landscape { height:3dvh; }
.house-page .house-sheet { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.house-page .house-sheet h1 { font-size:clamp(22px,5.6vw,29px); margin:2px 0 5px; }
.house-page .house-color { margin:0 0 10px; }
.house-page .house-interior { padding:6px 4px; margin:0 0 8px; }
.house-page .house-interior p { font-size:14px; line-height:1.3; }
.house-page .house-nature { margin:0 0 8px; }
.house-page .house-nature > div { padding:6px 9px; }
.house-page .house-opposition { padding:8px 0; margin-bottom:10px; }
.house-page .house-connections { margin-bottom:6px; }
.house-page .relation-group { margin:8px 0; }
.house-page .house-chosen { margin-top:10px; min-height:0; padding:8px 0 0; font-size:16px; }
.house-page .house-chosen .portrait { width:36px; height:48px; }
@media(max-height:650px) {
 .encounter.detail-page .character-copy { padding:11px 9px 9px; }
 .encounter.detail-page h1 { font-size:21px; margin:0 0 3px; }
 .encounter.detail-page .character-identity { font-size:12px; margin-bottom:4px; padding:1px 0 5px; }
 .encounter.detail-page .character-identity b { width:20px; height:20px; font-size:15px; line-height:18px; margin-bottom:2px; }
 .encounter.detail-page .character-intro { font-size:13.5px; line-height:1.25; margin:3px 0 6px; }
 .character-traits { gap:4px; }
 .character-traits li { padding:2px 7px; font-size:12px; }
 .character-powers h2 { font-size:13px; margin-bottom:4px; }
 .character-powers ul { gap:4px; }
 .character-powers li { font-size:12px; padding:4px 6px; }
 .house-page .house-landscape { height:0; }
 .house-page .house-sheet h1 { font-size:21px; }
 .house-page .house-sheet h2 { font-size:14px; margin-bottom:4px; }
 .house-page .house-color { font-size:12px; margin-bottom:5px; }
 .house-page .house-interior p { font-size:13px; line-height:1.2; }
 .house-page .house-nature p { font-size:12px; line-height:1.2; }
 .house-page .house-nature > div { padding:4px 7px; }
 .house-page .house-opposition { padding:6px 0; }
 .house-page .house-opposition h2 { margin:0; font-size:12px; }
 .house-page .house-opposition p { font-size:16px; }
 .house-page .relation-group { margin:5px 0; }
 .house-page .house-relation span { font-size:13px; }
 .house-page .house-relation small { font-size:11px; }
 .house-page .house-chosen { padding-top:6px; }
 .house-page .house-chosen .portrait { width:28px; height:37px; }
}

@media(max-height:650px) {
 .house-page .house-interior { margin-bottom:5px; padding:4px; }
 .house-page .house-nature { margin-bottom:5px; }
 .house-page .house-opposition { margin-bottom:4px; }
 .house-page .house-chosen { margin-top:4px; }
}

/* Portrait et fiche centrés ensemble sous le titre, avec anniversaire sans année. */
.encounter.detail-page .character-layout { display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; flex:1 1 auto; gap:0; }
.encounter.detail-page .character-arch { height:31dvh; flex:0 1 31dvh; width:calc(31dvh * var(--portrait-ratio)); max-height:31dvh; margin:0 0 -8px; }
.character-birthday { color:#e8d5ac; font-size:13px; line-height:1.2; margin:0 0 7px; }
@media(max-height:650px) {
 .encounter.detail-page .character-arch { height:29dvh; flex-basis:29dvh; width:calc(29dvh * var(--portrait-ratio)); max-height:29dvh; }
 .character-birthday { font-size:12px; margin-bottom:4px; }
}

/* Fiches des élus : verre sombre neutre, décor visible, sans poussière animée. */
.encounter.detail-page .character-copy {
 background:rgba(8,7,6,.72);
 box-shadow:inset 0 0 0 4px #08070655,inset 0 0 0 5px #d6b57c55,0 8px 26px #0005;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
.encounter.detail-page .character-copy:before { background:rgba(12,10,8,.92); }
.encounter.detail-page .character-powers li { background:rgba(0,0,0,.18); border-color:#d6b57c44; }
body[data-step="5"] .celestial-dust { display:none; }
body[data-step="5"] .celestial-dust i { animation:none; }

/* Partage discret sous le personnage principal ; flèche vectorielle du roman. */
.share-result { align-self:center; display:inline-flex; gap:8px; align-items:center; justify-content:center; color:#ead9b6; min-height:36px; margin:0; padding:4px 12px; font-size:16px; }
.share-result svg { width:18px; height:18px; }
.story-arrow { width:19px; height:19px; margin-left:5px; vertical-align:-2px; color:#e4c88b; }
@media(max-height:650px) {
 .welcome-layout { gap:4px; }
 .welcome-principal { min-height:100px; }
 .welcome-heading h1 { font-size:22px; }
 .share-result { font-size:14px; min-height:32px; }
}

.story-link-label { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

/* Le contour de sélection des champs du formulaire de naissance reste à l'intérieur du champ,
   pour ne pas chevaucher les libellés « Heure » et « Ville ». */
.celestial .birth-picker-button:focus-visible,
.celestial #birth-city:focus-visible {
  outline-offset: -3px;
}
/* Lien « Explorer » en bas de chaque fiche de personnage. */
.detail-page .detail-explorer {
  margin: 10px auto 0;
  flex-shrink: 0;
  font-size: 17px;
  color: #efe4fa;
  text-shadow: 0 2px 8px #080c22;
}

/* 21. Mes résultats.
   Sur téléphone, tout est posé sur le dessin de l'arche (image de 941 × 1672) ; --k est la taille
   d'un pixel de l'image à l'écran, comme avec « cover ». De haut en bas :
   - le titre dans la courbe de l'arche (sous --haut) ;
   - l'encadré entre les piliers, de taille fixe : son texte grandit s'il est court et rapetisse s'il
     est long (fitTexts), avec toujours un peu d'air autour ;
   - sur le sol (--sol), sans cadre : « Ta force », « Ta part d'ombre » et le conseil, une ligne chacun ;
   - les deux boutons au centre du sol (--boutons), jamais hors de l'écran. Sur l'image partagée,
     le prénom et la date prennent exactement leur place.
   Sur ordinateur : un seul décor plein écran et une colonne centrée plus large (fin de la section). */
.scene.results {
  --k: max(calc(100vw / 941), calc(100dvh / 1672));
  --haut: max(calc(var(--header-height) + 4px), calc(285 * var(--k)));
  --cadre-haut: calc(470 * var(--k));
  --boutons: min(calc(1440 * var(--k)), calc(100dvh - 62px - env(safe-area-inset-bottom)));
  --sol: min(calc(1265 * var(--k)), calc(var(--boutons) - 112px));
  --bas: calc(var(--sol) - 56px);
  justify-content: flex-start;
  gap: 8px;
  padding: var(--haut) 16px max(10px, env(safe-area-inset-bottom));
}
.results:before {
  background:
    linear-gradient(transparent 55%, #0a0c26aa 75%, #0a0c26dd),
    url("images/scene/resultats.webp") center top / cover no-repeat;
}
/* Écran plus large que haut : l'arche garde sa taille d'après la hauteur ; un seul décor remplit l'écran. */
@media (min-aspect-ratio: 1/1) {
  .scene.results {
    --k: calc(100dvh / 1672);
  }
  .results:before {
    background:
      linear-gradient(transparent 55%, #0a0c26aa 75%, #0a0c26dd),
      url("images/scene/resultats.webp") center 55% / cover no-repeat;
  }
}
.results-arche {
  flex-shrink: 0;
  width: min(calc(470 * var(--k)), 440px);
  height: calc(var(--bas) - var(--haut));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.results-heading {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: max(36px, calc(var(--cadre-haut) - var(--haut) - 6px));
  margin-bottom: 6px;
}
/* Le titre, comme « Bienvenue dans Cosmoz » ; un halo sombre le détache du ciel clair de l'arche. */
.results-heading::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, #0b0a2acc, #0b0a2a66 55%, transparent 75%);
}
.results-heading h1 {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-weight: 400;
  font-size: clamp(19px, 6.1vw, 34px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff6e2 10%, #ecd3a0 55%, #c99f5f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px #e8c98a55) drop-shadow(0 2px 6px #080c22);
}
/* L'encadré : bleu nuit translucide, fine bordure dorée, lueur violette discrète. */
.results-text {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 14px 16px;
  box-sizing: border-box;
  border: 1px solid #d9bd8f80;
  border-radius: 16px;
  background: linear-gradient(180deg, #1a155aa6, #100c3ac2);
  box-shadow:
    0 0 14px #9b6cff4d,
    inset 0 0 18px #a77bff22;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-size: 16px;
}
.results-text p {
  margin: 0;
  font-size: 1em;
  line-height: 1.3;
  color: #f8f2fb;
  text-wrap: pretty;
}
/* Sur le sol, sans cadre. */
.results-sol {
  position: absolute;
  left: 50%;
  top: var(--sol);
  transform: translate(-50%, -50%);
  width: min(calc(100vw - 24px), 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  text-shadow: 0 0 8px #0a0a2a, 0 1px 12px #0a0a2a;
}
.results-ligne {
  width: 100%;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.3;
  color: #fbf6ff;
}
.results-ligne span {
  margin-right: 0.35em;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.75em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e3c891;
}
.results-conseil {
  width: 100%;
  margin: 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  font-style: italic;
  font-size: 16px;
  line-height: 1.3;
  color: #f1dcb4;
}
/* Les boutons, et sur l'image partagée la signature : centrés sur le sol de l'image. */
.results-actions,
.share-signature {
  position: absolute;
  left: 50%;
  top: var(--boutons);
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100vw - 32px);
}
.results-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.results-actions > * {
  white-space: nowrap;
}
.results-actions .primary {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 8px 22px;
  font-size: 17px;
}
.results-actions .share-result {
  min-height: 44px;
  padding: 6px 26px;
  border: 1px solid #c9a8ffaa;
  border-radius: 999px;
  background: #2a1a5299;
  box-shadow: 0 0 12px #9b6cff44;
  color: #f4ecff;
}
/* Signature de l'image de partage : le prénom en grand, la date de naissance dessous. */
.share-signature {
  text-align: center;
  text-shadow: 0 0 10px #0a0a2a, 0 2px 14px #0a0a2a;
}
.share-signature-name {
  margin: 0;
  font-family: Cinzel, Georgia, serif;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: #f3dca8;
}
.share-signature-date {
  margin: 4px 0 0;
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #efe4fa;
}
/* Ordinateur : une colonne centrée et plus large, sans dépendre du dessin de l'arche. Titre agrandi
   sans halo ; l'encadré épouse son texte, en plus grand ; force, part d'ombre, conseil et boutons
   suivent juste dessous. */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .scene.results {
    justify-content: center;
    gap: 0;
    padding: calc(var(--header-height) + 8px) 24px 24px;
  }
  .results-arche {
    width: min(680px, 60vw);
    height: auto;
  }
  .results-heading {
    height: auto;
    margin-bottom: clamp(14px, 2.4dvh, 26px);
  }
  .results-heading::before {
    display: none;
  }
  .results-heading h1 {
    font-size: clamp(34px, 3.2vw, 52px);
  }
  .results-text {
    --fit-max: 27px;
    flex: none;
    max-height: calc(100dvh - var(--header-height) - 330px);
    padding: clamp(20px, 3dvh, 32px) clamp(28px, 4vw, 48px);
  }
  .results-text p {
    line-height: 1.4;
  }
  .results-sol {
    --fit-line-max: 22px;
    position: static;
    transform: none;
    width: min(680px, 90vw);
    margin-top: clamp(14px, 2.4dvh, 26px);
    gap: 6px;
  }
  .results-actions,
  .share-signature {
    position: static;
    transform: none;
    margin-top: clamp(16px, 3dvh, 30px);
  }
}

/* Image des résultats à enregistrer, quand le partage direct n'est pas possible. */
.share-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.share-sheet h2 {
  margin: 0;
}
.share-sheet img {
  width: auto;
  max-width: 100%;
  max-height: 58dvh;
  border: 1px solid #d9bd8f80;
  border-radius: 12px;
  -webkit-touch-callout: default;
  user-select: auto;
}
.share-sheet p {
  margin: 0;
  font-size: 16px;
  color: #e6dcf4;
}
.share-sheet .primary {
  text-decoration: none;
  width: auto;
  padding: 8px 24px;
}

/* Ordinateur : l'écran d'Alaric garde sa colonne de 850 px pour Alaric, la clé et le dialogue, mais son
   décor remplit toute la largeur de l'écran (fond de la page) au lieu de laisser des bandes noires. */
@media (min-width: 760px) {
  body[data-step="1"] {
    background:
      linear-gradient(transparent 35%, #0c102b77 65%, #0c102bcc),
      linear-gradient(#0c123a11, #0c123a44),
      url("images/scene/decor-alaric.webp") center / cover no-repeat #000;
  }
  .scene.alaric:before,
  .scene.alaric:after {
    background: none;
  }
}

/* Passage du miroir (Oculus → Mes résultats), voir portalIn() dans app.js. */
.portal-passage {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at var(--px) var(--py), #1b1450cc, #07061acc 70%);
}
.portal-passage > span,
.portal-passage > i {
  position: absolute;
  left: var(--px);
  top: var(--py);
  border-radius: 50%;
  opacity: 0;
}
.pp-glow {
  width: 70vmax;
  height: 70vmax;
  background: radial-gradient(circle, #f4ecffcc 0 5%, #d9c8f7b3 16%, #b39ae699 34%, #7d64c466 52%, #4a3a8c33 64%, transparent 74%);
}
.pp-ring {
  width: 42vmax;
  height: 42vmax;
  border: 2px solid #f6e9ffcc;
  box-shadow: 0 0 24px #d9c2ff, inset 0 0 24px #d9c2ff88;
}
.pp-ring-2 {
  border-color: #f3dcaacc;
  box-shadow: 0 0 20px #f0d49c99, inset 0 0 18px #f0d49c66;
}
.portal-passage > i {
  width: 7px;
  height: 7px;
  background: #fff;
  box-shadow: 0 0 8px 2px #fff, 0 0 18px 6px #cdb3ffaa;
}
.portal-passage > i:nth-child(3n) {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 6px 2px #fff5d8, 0 0 14px 4px #f0d49c99;
}

/* 22. Ordinateur (écran d'au moins 1024 × 640 px) : textes et blocs à l'échelle de l'écran.
   Les téléphones ne sont jamais concernés. Les blocs sont agrandis d'un seul tenant (zoom), pour
   garder exactement le même dessin qu'en version téléphone, en plus grand. */
@media (min-width: 1024px) and (min-height: 640px) {
  /* Le titre du site sur une seule ligne, plus grand. */
  :root {
    --header-height: 112px;
  }
  .brand span,
  .brand small,
  body[data-step="0"] .brand span,
  body[data-step="0"] .brand small {
    display: inline;
    font-size: clamp(40px, 3.6vw, 56px);
    line-height: 1.15;
  }
  .brand small {
    margin-left: 0.28em;
  }
  .brand-ornament {
    width: 230px;
    margin-top: 8px;
  }

  /* Alaric : le dialogue et la formule. */
  .scene.alaric .dialogue,
  .alaric .formula-space {
    zoom: 1.5;
  }

  /* Épreuves. */
  .trials-intro-card {
    zoom: 1.2;
  }
  .choice {
    font-size: 22px;
  }
  .trial-copy .text-button {
    font-size: 19px;
  }

  /* Oculus : le formulaire et les félicitations. */
  .celestial #birth-panel,
  .oculus-finale {
    zoom: 1.2;
  }
  /* L'Oculus ouvert s'arrête au-dessus des félicitations agrandies. */
  .celestial {
    --reserve-finale: 262px;
  }

  /* Pages personnage et Maison. */
  .encounter.detail-page .character-copy,
  .house-page .house-sheet {
    zoom: 1.2;
  }
  .detail-page .detail-explorer {
    zoom: 1.2;
  }

  /* Explorer, Maisons, personnages, Univers. */
  .explorer-intro {
    zoom: 1.2;
  }
  .explorer-cards {
    zoom: 1.25;
  }
  .univers-back {
    zoom: 1.2;
  }
  .city-description {
    zoom: 1.3;
  }
  .univers-about {
    zoom: 1.2;
  }
  /* Grilles des Maisons et des personnages plus larges : les noms grandissent avec les cartes. */
  .maisons-grid {
    width: min(100%, 640px);
  }
  .personnages .maisons-grid {
    width: min(100%, 700px);
  }
  .personnages .perso-card-sign {
    font-size: 16px;
  }
}
/* Ordinateur assez haut : ces blocs ont la place de grandir aussi. */
@media (min-width: 1024px) and (min-height: 820px) {
  .maisons-grid {
    width: min(100%, 780px);
  }
  .maison-card-sign {
    font-size: 15px;
  }
  .maison-card-number {
    font-size: 19px;
  }
  /* Pas Mes résultats : le zoom décalerait aussi leur position sur le sol. */
  .explorer-footer {
    zoom: 1.2;
  }
}
@media (min-width: 1024px) and (min-height: 1000px) {
  .welcome-layout {
    zoom: 1.15;
  }
}

/* 23. Retouches validées par l'autrice, page par page (liens Explorer, cartes de ville, menu,
   fiches, vignettes). */

/* Lien « Explorer › » en bas des pages : plus grand, comme un vrai bouton discret. */
#content .text-button.explorer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  margin: 6px auto 0;
  padding: 6px 26px;
  border: 1px solid #d9bd8f99;
  border-radius: 999px;
  background: #13103388;
  box-shadow: 0 0 12px #9b6cff44;
  font-family: Cinzel, Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #fff3e0;
  text-decoration: none;
}
#content .text-button.explorer-link span {
  color: #e3c891;
}

/* Toutes les cartes de ville ont la même taille, quelle que soit la longueur du texte : celle qui
   convient au texte le plus long (Glacisca). */
.city-description .city-card {
  flex: none;
  height: 128px;
  min-height: 0;
}
.city-description .city-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Menu : les pages d'Explorer rangées sous « Explorer », en retrait, reliées par un fil doré. */
.menu-sub {
  display: flex;
  flex-direction: column;
  margin: 0 0 4px 38px;
  padding-left: 14px;
  border-left: 1px solid #e3c89166;
}
nav .menu-sub-item {
  min-height: 36px;
  padding: 5px 0;
  gap: 8px;
  font-size: 16px;
  color: #efe4fa;
}
nav .menu-sub-item::before {
  content: "✦";
  font-size: 10px;
  line-height: 1.6;
  color: #e3c891;
}

/* Fiche personnage : le nom passe sous l'étoile du haut, sans la toucher. */
#content .encounter.detail-page .character-copy h1 {
  margin-top: 12px;
}

/* Univers sur téléphone : la carte prend plus de place, la carte de la ville et les quartiers moins. */
@media (max-width: 600px) {
  #content .univers .cosmoz-map .map-canvas,
  #content .univers .cosmoz-map svg {
    max-height: 55dvh;
  }
  #content .univers .city-description .city-card {
    height: 112px;
  }
  #content .univers .city-image {
    flex-basis: 30%;
  }
  #content .univers .city-copy {
    padding: 6px 10px 6px 2px;
  }
  #content .univers .city-copy h2 {
    font-size: 16px;
  }
  #content .univers .city-rank {
    font-size: 11.5px;
    margin: 0 0 1px;
  }
  #content .univers .city-text {
    font-size: 12px;
    line-height: 1.22;
  }
  #content .univers .city-quarter {
    padding: 3px 3px 3px 4px;
  }
  #content .univers .city-quarter .quarter-logo {
    width: 24px;
    height: 24px;
  }
  #content .univers .explorer-link {
    min-height: 38px;
    margin-top: 2px;
    font-size: 16px;
  }
}

/* Actions du menu regroupées comme dans la disposition d'origine. */
#navigation .menu-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 18px;
}
#navigation .menu-actions .text-button {
  font-size: clamp(13px, 3.8vw, 16px);
  padding: 6px 0;
  white-space: nowrap;
}
#navigation .signature { margin-top: 16px; }

/* Garder le buste entier des douze élus dans les vignettes de bienvenue. */
.welcome-character .portrait-personnage {
  object-fit: contain;
  object-position: center bottom;
}

/* La zone d'appui de Commencer reste stable dès son apparition. */
[data-start-trials] { touch-action: manipulation; }