@font-face { font-family: "EB Garamond"; src: url("polices/EBGaramond.ttf") format("truetype"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("polices/EBGaramond-Italic.ttf") format("truetype"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("polices/Cinzel.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }

:root {
  --fond: #0b0806;
  --texte: #f6e7d2;
  --doux: rgba(246, 231, 210, 0.68);
  --or: #e3b77a;
  --or-pale: rgba(227, 183, 122, 0.35);
  --bandeau: #2a1a10;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: var(--fond); }
body {
  font-family: "EB Garamond", Georgia, serif;
  color: var(--texte);
  font-size: 19px;
  line-height: 1.45;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--or); }

/* ---------- Écrans ---------- */
.ecran {
  display: none;
  min-height: 100dvh;
  padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.ecran.actif { display: flex; flex-direction: column; animation: apparition 0.7s ease both; }
@keyframes apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

h1, h2 { font-family: Cinzel, serif; font-weight: 500; letter-spacing: 0.02em; }
h1 { font-size: 40px; line-height: 1.15; text-align: center; }
h2 { font-size: 27px; line-height: 1.2; }
h3 { font-family: Arial, sans-serif; font-weight: normal; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--or); margin: 22px 0 8px; }
.noeud { width: 110px; color: var(--or); display: block; margin: 0 auto 26px; }

.bouton {
  display: block; width: 100%;
  padding: 16px 22px;
  border-radius: 40px;
  background: var(--or); color: #1d130b;
  font-family: Arial, sans-serif; font-size: 16px; letter-spacing: 0.04em;
  text-align: center; text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
}
.bouton:active { transform: scale(0.98); }
.bouton.secondaire { background: transparent; color: var(--or); box-shadow: inset 0 0 0 1.5px var(--or); }
.lien { display: block; margin: 18px auto 0; color: var(--doux); font-family: Arial, sans-serif; font-size: 14px; letter-spacing: 0.05em; text-decoration: underline; text-underline-offset: 4px; }
.retour { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; color: var(--or); background: rgba(11, 8, 6, 0.55); }
.consigne { text-align: center; font-style: italic; color: var(--doux); }
.note { font-family: Arial, sans-serif; font-size: 13px; color: var(--doux); margin-top: 20px; }

/* ---------- Accueil ---------- */
.accueil { justify-content: center; text-align: center; }
.sous-titre { font-style: italic; color: var(--or); font-size: 20px; margin-top: 12px; }
.intro { margin: 42px 0 44px; font-size: 21px; }
.accueil .actions { display: grid; gap: 14px; }

/* ---------- Tirage ---------- */
.tirage { justify-content: center; gap: 46px; }
.eventail { position: relative; height: 330px; }
.dos {
  position: absolute; left: 50%; top: 0;
  width: 190px; aspect-ratio: 95 / 140; margin-left: -95px;
  border-radius: 14px;
  background: url("images/dos.jpg") center / cover;
  box-shadow: 0 0 0 1px var(--or-pale), 0 18px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1), opacity 0.5s;
}
.tirage.melange .dos { animation: melange 1.2s ease-in-out; }
@keyframes melange { 50% { transform: translateX(0) rotate(0); } }
.dos:nth-child(1) { transform: translateX(-62px) rotate(-9deg); }
.dos:nth-child(2) { transform: translateY(-10px); }
.dos:nth-child(3) { transform: translateX(62px) rotate(9deg); }
.dos.choisie { transform: translateY(-20px) scale(1.08); z-index: 2; box-shadow: 0 0 0 1px var(--or), 0 0 60px rgba(232, 150, 60, 0.35); }
.dos.ecartee { opacity: 0; }

/* ---------- Choisir ---------- */
.choisir h2 { text-align: center; margin-top: 30px; }
.choisir .consigne { margin: 10px 0 22px; }
.phrases { list-style: none; display: grid; gap: 8px; }
.phrases li button {
  display: flex; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(227, 183, 122, 0.08); box-shadow: inset 0 0 0 1px var(--or-pale);
}
.phrases li .num { color: var(--or); font-family: Cinzel, serif; min-width: 24px; }
.phrases li.ferme button { opacity: 0.38; background: transparent; box-shadow: none; cursor: default; }

/* ---------- Carte ---------- */
.carte { padding: 0; }
.visuel { position: relative; height: 40dvh; overflow: hidden; }
.visuel .image { position: absolute; inset: 0; background-size: cover; background-position: center 30%; animation: respire 14s ease-in-out infinite alternate; }
@keyframes respire { to { transform: scale(1.06); } }
.visuel .fondu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, var(--bandeau) 100%); }
.carte .contenu {
  flex: 1; display: flex; flex-direction: column;
  background: var(--bandeau);
  padding: 0 24px max(24px, env(safe-area-inset-bottom));
  margin-top: -1px;
}
.numero { font-family: Cinzel, serif; color: var(--or); font-size: 15px; width: 34px; height: 34px; margin: -17px auto 0; border-radius: 50%; background: var(--bandeau); box-shadow: inset 0 0 0 1px var(--or); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.carte .titre { text-align: center; margin-top: 6px; }
.mots { text-align: center; font-style: italic; color: var(--or); margin-top: 4px; }
.etape { flex: 1; padding: 22px 0 10px; }
.etape.entre { animation: apparition 0.6s ease both; }
.etape .label { font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--or); text-align: center; margin-bottom: 12px; }
.etape .grand { font-size: 25px; line-height: 1.35; text-align: center; font-style: italic; }
.etape .texte { text-align: center; }
.etape ol { list-style: none; counter-reset: g; display: grid; gap: 12px; }
.etape ol li { counter-increment: g; display: flex; gap: 12px; }
.etape ol li::before { content: counter(g); flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--or); color: var(--or); font-family: Arial, sans-serif; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.etape .corps { margin-top: 26px; padding: 16px 18px; border-left: 3px solid var(--or); background: rgba(227, 183, 122, 0.07); font-size: 17px; }
.etape .corps em { display: block; margin-top: 8px; font-size: 14px; color: var(--doux); }
.etape .corps small { display: block; font-family: Arial, sans-serif; font-size: 11px; letter-spacing: 0.12em; color: var(--or); text-transform: uppercase; margin-bottom: 6px; }
.etape .bouton.secondaire { margin-top: 22px; }
.pied { display: flex; align-items: center; gap: 18px; }
.points { display: flex; gap: 8px; }
.points i { width: 8px; height: 8px; border-radius: 50%; background: var(--or-pale); transition: background 0.3s; }
.points i.fait { background: var(--or); }
.pied .bouton { flex: 1; }
.lacher .grand { transition: opacity 2.4s ease, transform 2.4s ease, filter 2.4s ease; }
.lacher.envole .grand { opacity: 0; transform: translateY(-40px); filter: blur(6px); }

/* ---------- Minute guidée ---------- */
.minute {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(11, 8, 6, 0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
}
.minute[hidden] { display: none; }
.souffle {
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,183,122,0.45), rgba(227,183,122,0.08) 70%);
  box-shadow: 0 0 0 1px var(--or-pale);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.75);
}
.souffle.inspire { transition: transform 4s ease-in-out; transform: scale(1.25); }
.souffle.expire { transition: transform 6s ease-in-out; transform: scale(0.75); }
.souffle .mot { font-style: italic; font-size: 20px; }
.reste { font-family: Arial, sans-serif; color: var(--doux); font-size: 14px; letter-spacing: 0.1em; }

/* ---------- Fin ---------- */
.fin { text-align: center; padding-top: 40px; }
.fin h2 { margin-bottom: 24px; }
.carte-entiere { width: 74%; max-width: 300px; margin: 0 auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--or-pale), 0 20px 50px rgba(0, 0, 0, 0.6); }
.fin .consulter { text-align: left; margin-top: 24px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; color: var(--doux); }
.fin .consulter h3 { margin-top: 0; }
.encart { margin: 26px 0 8px; padding: 22px 18px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--or-pale); }
.encart p { margin-bottom: 16px; }
.fin .actions { margin-top: 14px; }

/* ---------- À propos ---------- */
.apropos h2 { text-align: center; margin: 30px 0 14px; }
.apropos p { margin-bottom: 12px; font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01s !important; }
}