:root{
  --nuit:#0F0D1E; --nuit2:#161228; --nuit3:#1E1834;
  --or:#D4A84B; --orclair:#E9C168; --orpale:#F1DFAE; --ormat:#C9A227; --brun:#B99C55;
  --creme:#F7F1E3; --blanc:#FFFDF8;
  --display:'Cinzel','Times New Roman',serif;
  --texte:'Cormorant Garamond',Georgia,serif;
  --trait:rgba(212,168,75,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--nuit); color:var(--creme);
  font-family:var(--texte); font-size:20px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--orclair)}
:focus-visible{outline:2px solid var(--orclair); outline-offset:3px}

/* ---------- ossature ---------- */
.enveloppe{max-width:900px; margin:0 auto; padding:0 22px}
.acte{padding:62px 0; border-top:1px solid var(--trait)}
.acte:first-of-type{border-top:0}
h1,h2,h3,.eyebrow{font-family:var(--display); letter-spacing:.06em}
h1{font-size:clamp(2.1rem,7vw,3.4rem); line-height:1.1; margin:.2em 0 .3em; color:var(--blanc)}
h2{font-size:clamp(1.35rem,4.2vw,1.9rem); margin:0 0 .5em; color:var(--orpale)}
h3{font-size:1.08rem; margin:0 0 .4em; color:var(--blanc); letter-spacing:.13em; text-transform:uppercase}
p{margin:0 0 1em}
.chapeau{font-size:1.2rem; color:var(--creme)}
.eyebrow{
  display:inline-block; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--or); border:1px solid var(--trait); border-radius:999px; padding:6px 16px; margin-bottom:14px;
}

/* ---------- barre ---------- */
.barre{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:18px 0; border-bottom:1px solid var(--trait);
}
.marque{font-family:var(--display); letter-spacing:.22em; font-size:.86rem; color:var(--orpale); text-decoration:none}
.barre nav{display:flex; gap:20px; font-size:.95rem}
.barre nav a{color:var(--creme); text-decoration:none; border-bottom:1px solid transparent}
.barre nav a:hover{border-bottom-color:var(--or)}

/* ---------- boutons ---------- */
.btn{
  font-family:var(--display); font-size:.86rem; letter-spacing:.16em; text-transform:uppercase;
  padding:14px 26px; border-radius:3px; border:1px solid var(--or); cursor:pointer;
  background:transparent; color:var(--orpale); text-decoration:none; display:inline-block;
  transition:background .18s ease, color .18s ease;
}
.btn:hover{background:var(--or); color:var(--nuit)}
.btn-or{background:var(--or); color:var(--nuit); font-weight:700}
.btn-or:hover{background:var(--orclair); color:var(--nuit)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.rangee{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* ---------- coffret ---------- */
.coffret{
  background:linear-gradient(160deg,var(--nuit2),var(--nuit3));
  border:1px solid var(--trait); border-radius:6px; padding:26px 24px; margin:22px 0;
}
.coffret.clair{background:var(--nuit2)}

/* ---------- la carte du tour ---------- */
.scene{text-align:center}
.carte-jeu{
  display:inline-block; background:var(--blanc); color:#241E31;
  border-radius:8px; padding:18px 16px; box-shadow:0 14px 40px rgba(0,0,0,.55);
  min-width:min(330px,92vw);
}
.carte-jeu .entete{
  font-family:var(--display); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:#8C6A1A; border-bottom:1px solid rgba(140,106,26,.35); padding-bottom:8px; margin-bottom:12px;
}
.grille{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.grille span{
  font-family:var(--texte); font-size:1.24rem; font-weight:600; padding:5px 0;
  color:#241E31; letter-spacing:.02em;
}
.compteur{font-family:var(--display); font-size:.78rem; letter-spacing:.24em; color:var(--or); margin:18px 0 10px}

/* ---------- révélation ---------- */
.revelation{font-family:var(--display); font-size:clamp(3rem,16vw,6rem); color:var(--orclair); line-height:1; margin:10px 0}
.masque{display:none}
.visible{display:block}

/* ---------- secret ---------- */
.cles{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:16px 0 6px}
.cle{
  font-family:var(--display); font-size:1.3rem; color:var(--nuit); background:var(--or);
  width:52px; height:52px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-weight:700;
}
.calcul{font-family:var(--display); font-size:1.25rem; color:var(--blanc); letter-spacing:.08em; margin:14px 0}

/* ---------- entraînement ---------- */
.rendues{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin:16px 0 4px}
.mini{background:var(--blanc); color:#241E31; border-radius:5px; padding:9px 7px; width:128px; box-shadow:0 8px 22px rgba(0,0,0,.45)}
.mini .entete{font-family:var(--display); font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:#8C6A1A; text-align:center; border-bottom:1px solid rgba(140,106,26,.3); padding-bottom:5px; margin-bottom:6px}
.mini .g{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; text-align:center}
.mini .g span{font-family:var(--texte); font-size:.8rem; font-weight:600; color:#241E31}
.champ{
  font-family:var(--texte); font-size:1.15rem; color:var(--blanc); background:rgba(255,253,248,.06);
  border:1px solid var(--trait); border-radius:3px; padding:13px 15px; width:100%;
}
.champ::placeholder{color:rgba(247,241,227,.55)}
.champ:focus{border-color:var(--or); background:rgba(255,253,248,.1)}
.verdict{font-size:1.1rem; margin-top:14px; min-height:1.6em; color:var(--blanc)}
.verdict.juste{color:var(--orclair)}
.score{font-family:var(--display); font-size:.78rem; letter-spacing:.2em; color:var(--or)}

/* ---------- liste ---------- */
.etapes{list-style:none; padding:0; margin:0; counter-reset:e}
.etapes li{
  counter-increment:e; position:relative; padding-left:44px; margin-bottom:16px; color:var(--creme);
}
.etapes li::before{
  content:counter(e); position:absolute; left:0; top:1px;
  font-family:var(--display); font-size:.82rem; color:var(--or);
  border:1px solid var(--trait); border-radius:50%; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- formulaire ---------- */
.formulaire{display:grid; gap:14px}
.pot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.mention{font-size:.97rem; color:var(--creme)}
.reponse{font-size:1.06rem; color:var(--orclair); min-height:1.5em}
.reponse.rate{color:#E9A08B}

/* ---------- prochains ---------- */
.futurs{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.futur{border:1px solid var(--trait); border-radius:5px; padding:18px; background:var(--nuit2)}
.futur .quand{font-family:var(--display); font-size:.7rem; letter-spacing:.26em; color:var(--or); text-transform:uppercase}
.futur p{margin:8px 0 0; color:var(--creme); font-size:1.02rem}

/* ---------- pied ---------- */
.pied{border-top:1px solid var(--trait); padding:34px 0 46px; text-align:center; color:var(--creme)}
.pied a{color:var(--orpale); text-decoration:none}
.source{font-size:.97rem; color:var(--creme); border-left:2px solid var(--or); padding-left:16px; margin-top:22px}

/* ---------- la feuille à imprimer ---------- */
#feuille{display:none}
@media print{
  @page{margin:12mm}
  body{background:#fff; color:#000; font-size:12pt}
  #ecran{display:none !important}
  #feuille{display:block !important; color:#000; font-family:'Cormorant Garamond',Georgia,serif}
  #feuille .titre-feuille{font-family:'Cinzel',serif; font-size:18pt; color:#000; margin:0 0 2mm; letter-spacing:.04em}
  #feuille h2{font-size:13pt; color:#000; margin:6mm 0 2mm; letter-spacing:.08em}
  #feuille .sous{font-size:10pt; margin:0 0 5mm}
  .planche{display:grid; grid-template-columns:1fr 1fr; gap:5mm}
  .decoupe{border:1px dashed #555; border-radius:2mm; padding:3mm}
  .decoupe .titre{font-family:'Cinzel',serif; font-size:8pt; letter-spacing:.18em; text-align:center; margin-bottom:2mm; text-transform:uppercase}
  .decoupe .g{display:grid; grid-template-columns:repeat(4,1fr); gap:1mm; text-align:center}
  .decoupe .g span{font-size:11pt; font-weight:600}
  .saut{page-break-before:always}
  #feuille ol,#feuille ul{padding-left:5mm; margin:0 0 4mm}
  #feuille li{margin-bottom:2mm}
  #feuille .pied-feuille{margin-top:8mm; border-top:1px solid #999; padding-top:3mm; font-size:9pt}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
@media (max-width:520px){
  body{font-size:19px}
  .acte{padding:46px 0}
  .barre nav{gap:14px; font-size:.88rem}
}

/* ================= LE HALL DE LA BIBLIOTHÈQUE ================= */
.fil{font-size:.92rem; color:var(--creme); margin:18px 0 0}
.fil a{color:var(--orpale); text-decoration:none; border-bottom:1px solid var(--trait)}
.fil span{color:var(--brun)}

.vedette{
  display:block; text-decoration:none; color:inherit;
  background:linear-gradient(160deg,var(--nuit2),var(--nuit3));
  border:1px solid var(--or); border-radius:6px; padding:30px 26px; margin:22px 0;
  transition:border-color .2s ease, transform .2s ease;
}
.vedette:hover{border-color:var(--orclair); transform:translateY(-2px)}
.vedette .pictogramme{font-size:2.4rem; line-height:1; margin-bottom:12px}
.vedette h3{font-size:1.5rem; text-transform:none; letter-spacing:.04em; color:var(--blanc); margin-bottom:8px; font-family:var(--display)}
.vedette p{color:var(--creme); margin-bottom:14px}
.vedette .flechir{font-family:var(--display); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--orclair)}

.etagere{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); margin-top:20px}
.livre{
  display:block; text-decoration:none; color:inherit; background:var(--nuit2);
  border:1px solid var(--trait); border-radius:5px; padding:20px;
  transition:border-color .2s ease, transform .2s ease;
}
.livre:hover{border-color:var(--or); transform:translateY(-2px)}
.livre .rang{font-family:var(--display); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--or)}
.livre .pictogramme{font-size:1.7rem; line-height:1; margin:10px 0 6px}
.livre h3{font-size:1.02rem; text-transform:none; letter-spacing:.04em; color:var(--blanc); margin-bottom:6px; font-family:var(--display)}
.livre p{font-size:.98rem; color:var(--creme); margin:0}
.livre .marqueur{display:inline-block; margin-top:12px; font-size:.9rem; color:var(--orclair)}

.rayon-vide{
  border:1px dashed var(--trait); border-radius:5px; padding:20px; text-align:center;
  color:var(--creme); background:rgba(255,253,248,.02);
}
.rayon-vide .quand{font-family:var(--display); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--or); display:block; margin-bottom:8px}

/* ================= TOUR 2 — LA PRÉDICTION SCELLÉE ================= */
.pli{
  position:relative; width:min(300px,86vw); height:176px; margin:8px auto 0; overflow:hidden;
  background:linear-gradient(160deg,#F7F1E3,#E4DAC0); border-radius:5px;
  box-shadow:0 16px 44px rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
}
.pli .rabat{
  position:absolute; top:0; left:0; right:0; height:104px; z-index:1;
  background:linear-gradient(180deg,#EFE6CF,#DBCEAE);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform .5s ease;
}
.pli.ouverte .rabat{transform:translateY(-105%)}
.pli .sceau{
  position:absolute; top:82px; left:50%; margin-left:-19px; z-index:2;
  width:38px; height:38px; border-radius:50%; background:var(--or); color:var(--nuit);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  transition:opacity .3s ease;
}
.pli.ouverte .sceau{opacity:0}
.pli .dedans{
  font-family:var(--display); font-size:3.1rem; color:#241E31; opacity:0; letter-spacing:.04em;
  transition:opacity .45s ease .3s;
}
.pli.ouverte .dedans{opacity:1}

.calculs{list-style:none; padding:0; margin:22px auto 0; max-width:430px; text-align:left}
.calculs li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  border-bottom:1px solid var(--trait); padding:11px 2px;
}
.calculs .quoi{color:var(--creme); font-size:1rem}
.calculs .combien{font-family:var(--display); color:var(--orclair); font-size:1.1rem; white-space:nowrap}

.cle.large{width:auto; min-width:68px; padding:0 12px; font-size:1.04rem}

.paires{display:grid; gap:8px; max-width:350px; margin:14px auto 20px}
.paire{
  font-family:var(--display); color:var(--creme); text-align:center; letter-spacing:.06em;
  border:1px solid var(--trait); border-radius:4px; padding:10px; font-size:1rem;
}
.paire span{color:var(--or); margin:0 4px}
.paire strong{color:var(--orclair)}

@media print{
  .billets{display:grid; grid-template-columns:1fr 1fr; gap:4mm; margin-top:4mm}
  .billet{border:1px dashed #555; border-radius:2mm; padding:5mm 3mm; text-align:center}
  .billet .gros{font-family:'Cinzel',serif; font-size:22pt; letter-spacing:.06em; margin:2mm 0}
  .billet .petit{font-size:7pt; letter-spacing:.14em; text-transform:uppercase; color:#555}
}