/* ===========================================================
   LE TAROT DU SOIR — ciel étoilé, tapis de velours, cartes dorées
   =========================================================== */
body.tarot {
  --theme: #7b4dd6;
  --theme-2: #e8c26a;
  --or: #e8c26a;
  --panneau: rgba(18, 14, 46, 0.86);
  --carte-l: min(26vw, 13dvh, 120px);
  background: radial-gradient(900px 700px at 50% 30%, #2a1c5c, #0c0a1f 70%), #08061a;
}
.tarot .marque h1 { font-family: 'Cinzel', var(--serif); font-size: clamp(2.2rem, 10vw, 3.2rem); letter-spacing: 0.04em; }
.tarot .marque h1 em { color: var(--or); text-shadow: 0 0 24px rgba(232, 194, 106, 0.6); }

/* ---------- Ciel ---------- */
.ciel { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.etoiles { position: absolute; inset: -50%; background-repeat: repeat; }
.etoiles.e1 { background-image: radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #fff, transparent), radial-gradient(1.4px 1.4px at 200px 160px, #ffe9b0, transparent), radial-gradient(1px 1px at 60px 200px, #fff, transparent); background-size: 240px 240px; animation: derive 120s linear infinite, scintille 4s ease-in-out infinite alternate; opacity: 0.8; }
.etoiles.e2 { background-image: radial-gradient(1px 1px at 50px 90px, #c9b8ff, transparent), radial-gradient(1.6px 1.6px at 170px 30px, #fff, transparent), radial-gradient(1px 1px at 90px 140px, #fff, transparent); background-size: 190px 190px; animation: derive 200s linear infinite reverse, scintille 6s ease-in-out -2s infinite alternate; opacity: 0.6; }
@keyframes derive { to { transform: translate(120px, 80px); } }
@keyframes scintille { to { opacity: 0.35; } }
.lune { position: absolute; top: 6%; right: 8%; width: 80px; height: 80px; border-radius: 50%; box-shadow: -16px 6px 0 0 #f6e6b8; filter: drop-shadow(0 0 20px rgba(246, 230, 184, 0.5)); opacity: 0.7; }
.oeil { width: 110px; margin: 0 auto 4px; color: var(--or); filter: drop-shadow(0 0 14px rgba(232, 194, 106, 0.6)); animation: flotte 4s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-6px); } }

/* ---------- Cartes : dos et face ---------- */
.carte {
  position: relative;
  width: var(--carte-l);
  aspect-ratio: 5 / 8;
  perspective: 900px;
  flex: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.carte .face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(.3, 1.2, .4, 1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}
.carte .dos {
  background:
    radial-gradient(circle at 50% 50%, rgba(232, 194, 106, 0.9) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(232, 194, 106, 0.7) 19% 20%, transparent 21%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(232, 194, 106, 0.18) 0 6deg, transparent 6deg 18deg),
    linear-gradient(145deg, #3a2470, #1a1040);
  border: 2px solid var(--or);
  outline: 1px solid rgba(232, 194, 106, 0.5);
  outline-offset: -6px;
}
.carte .recto {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8% 6%;
  text-align: center;
  color: #2a1a3a;
  background: radial-gradient(circle at 50% 40%, #fffaf0, #f0e1c0 80%);
  border: 2px solid var(--or);
  outline: 1px solid rgba(160, 110, 30, 0.6);
  outline-offset: -5px;
}
.carte.retournee .dos { transform: rotateY(-180deg); }
.carte.retournee .recto { transform: rotateY(0); }
.recto .num { font-family: 'Cinzel', serif; font-size: calc(var(--carte-l) * 0.1); font-weight: 700; color: #9a6b1e; }
.recto .icone { width: 55%; color: var(--teinte, #7b4dd6); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)); }
.recto .nom-carte { font-family: 'Cinzel', serif; font-size: calc(var(--carte-l) * 0.085); font-weight: 700; letter-spacing: 0.04em; line-height: 1.15; text-transform: uppercase; }
.carte.arcane .recto { background: radial-gradient(circle at 50% 40%, #fff3d0, #e8c26a 90%); }
.carte.brille .face { box-shadow: 0 0 0 2px #fff6d6, 0 0 30px rgba(232, 194, 106, 0.9), 0 10px 24px rgba(0, 0, 0, 0.55); }

/* ---------- Tirage ---------- */
.tirage { gap: 10px; }
.emplacements { display: flex; justify-content: center; gap: 10px; flex: none; }
.emplacement {
  position: relative;
  width: var(--carte-l);
  aspect-ratio: 5 / 8;
  border-radius: 10px;
  border: 1px dashed rgba(232, 194, 106, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(232, 194, 106, 0.04);
}
.emplacement > span { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-family: 'Cinzel', serif; font-size: 0.62rem; color: var(--or); white-space: nowrap; letter-spacing: 0.04em; }
.emplacement .carte { position: absolute; inset: 0; width: 100%; }
.tapis {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 22px;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 30%, rgba(123, 77, 214, 0.35), transparent 70%), repeating-radial-gradient(circle at 50% 120%, rgba(232, 194, 106, 0.06) 0 2px, transparent 2px 22px), #140e33;
  border: 1px solid rgba(232, 194, 106, 0.3);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.tapis .carte { position: absolute; left: 50%; top: 50%; width: calc(var(--carte-l) * 0.95); transition: transform 0.6s cubic-bezier(.3, 1, .4, 1), opacity 0.3s; }
.tapis .carte:hover .dos { box-shadow: 0 0 0 2px #fff6d6, 0 0 24px rgba(232, 194, 106, 0.7); }
.tapis .carte.choisie { opacity: 0; pointer-events: none; }
#lire { flex: none; }

/* ---------- Lecture ---------- */
.lecture { gap: 10px; }
.lecture .rond.vide { visibility: hidden; }
.lectures { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.lecture-carte {
  --teinte: #7b4dd6;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 18px;
  background: rgba(18, 14, 46, 0.85);
  border: 1px solid rgba(232, 194, 106, 0.35);
  animation: apparait 0.6s cubic-bezier(.2, 1.2, .4, 1) both;
}
.lecture-carte .carte { --carte-l: 64px; cursor: default; }
.lecture-carte .txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lecture-carte small { font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--or); text-transform: uppercase; }
.lecture-carte b { font-family: 'Cinzel', serif; font-size: 1rem; color: #fff; }
.lecture-carte p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: #e3dcf7; }
.lecture-carte.arcane { border-color: var(--or); box-shadow: 0 0 30px -10px var(--or); }
@keyframes apparait { from { opacity: 0; transform: translateY(18px) scale(0.97); } }

@media (prefers-reduced-motion: reduce) {
  .etoiles, .oeil { animation: none; }
}
.lune { opacity: 0.45; }