/* Temple nocturne — home astrologiechinoise.fr (DESIGN.md v2) */

:root {
  --nuit: #0c0e14;
  --laque: #141722;
  --laque-2: #191d2b;
  --soie: #ede5d3;
  --cendre: #a89e8a;
  --or: #d2a24b;
  --or-sombre: #8a6b32;
  --cinabre: #d03a24;
  --cinabre-sombre: #7e1f12;
  --el-bois: #5aa878;
  --el-feu: #e0562f;
  --el-terre: #c99a4b;
  --el-metal: #c3cad4;
  --el-eau: #5486b4;
  --element: var(--or); /* remplacé en JS après révélation */
  --display: "Marcellus", "Spectral", serif;
  --lecture: "Spectral", Georgia, serif;
  --zh: "Noto Serif SC", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--soie);
  font-family: var(--lecture);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

[lang="zh"] { font-family: var(--zh); }

a { color: var(--soie); text-decoration-color: var(--or-sombre); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--or); }

:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--cinabre); color: var(--soie); padding: 0.5rem 1rem; z-index: 10;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- header ---------- */

header.cloth {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(210, 162, 75, 0.22);
  position: relative; z-index: 3;
}

.wordmark {
  font-family: var(--display);
  letter-spacing: 0.04em;
  text-decoration: none;
  font-size: 1.05rem;
}
.wordmark .mark {
  color: var(--cinabre);
  border: 1px solid var(--cinabre-sombre);
  padding: 0.1rem 0.3rem;
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

header nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.15rem; }
header nav a {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cendre);
  padding: 0.2rem 0;
}
header nav a:hover, header nav a[aria-current] { color: var(--soie); }
header nav a.act { color: var(--cinabre); }

/* ---------- hero / temple ---------- */

.temple {
  position: relative;
  min-height: calc(100svh - 4.5rem);
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vh, 4rem) 1rem 3rem;
  overflow: hidden;
  isolation: isolate;
}

/* œuvre révélée : boucle Ken Burns derrière la roue */
.oeuvre {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.oeuvre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s ease;
}
.oeuvre.est-visible img {
  opacity: 0.62;
  animation: derive-oeuvre 18s ease-in-out infinite alternate;
}
.oeuvre.est-ambiante img { opacity: 0.3; }
@keyframes derive-oeuvre {
  from { transform: scale(1.06) translate3d(-2.4%, 0.8%, 0); }
  to { transform: scale(1.2) translate3d(2.4%, -2.2%, 0); }
}
.oeuvre::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 62% at 50% 46%, rgba(12, 14, 20, 0.38), rgba(12, 14, 20, 0.85) 82%),
    linear-gradient(to bottom, rgba(12, 14, 20, 0.6), transparent 22%, transparent 72%, var(--nuit));
}

/* halo d'encens : seule animation continue de la page */
.temple::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(42% 34% at 50% 42%, color-mix(in srgb, var(--element) 16%, transparent), transparent 70%),
    radial-gradient(28% 24% at 62% 30%, rgba(210, 162, 75, 0.07), transparent 70%);
  z-index: -1;
  animation: encens 26s ease-in-out infinite alternate;
  transition: background 1.6s ease;
}
@keyframes encens {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to { transform: translate3d(2%, -3%, 0) scale(1.06); }
}

.temple-inner { text-align: center; max-width: 46rem; width: 100%; }

.temple .kicker {
  font-family: var(--display);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--or);
  margin: 0 0 1rem;
}
.temple .kicker [lang="zh"] { letter-spacing: 0.2em; margin-right: 0.4em; }

.temple h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.12;
  margin: 0 0 0.9rem;
}

.temple .lede {
  color: var(--cendre);
  max-width: 34rem;
  margin: 0 auto 2.2rem;
}
.temple .lede strong { color: var(--soie); font-weight: 500; }

/* ---------- roue des douze branches ---------- */

.roue-scene {
  position: relative;
  width: min(78vw, 27rem);
  aspect-ratio: 1;
  margin: 0 auto 1.6rem;
}

.roue { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.roue .anneau { fill: none; stroke: rgba(210, 162, 75, 0.28); stroke-width: 1; }
.roue .anneau-int { fill: none; stroke: rgba(210, 162, 75, 0.14); stroke-width: 1; }

.roue .branche {
  font-family: var(--zh);
  font-size: 26px;
  fill: var(--cendre);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 0.3s ease, opacity 0.3s ease;
}
.roue .branche.est-flamme { fill: var(--cinabre); }
.roue .branche.est-elu { fill: var(--element); }
.roue.est-fixee .branche:not(.est-elu) { opacity: 0.28; }

.roue .halo {
  fill: none;
  stroke: var(--cinabre);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.roue .halo.est-visible { opacity: 1; }
.roue .halo.est-or { stroke: var(--element); }

/* centre de la roue : le formulaire, puis le cachet */
.roue-centre {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 22%;
}

.instrument { display: grid; gap: 0.7rem; width: 100%; max-width: 15rem; }
.instrument[hidden] { display: none; }
.instrument label {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
}
.instrument input[type="date"] {
  font: inherit;
  color: var(--soie);
  background: var(--laque);
  border: 1px solid rgba(210, 162, 75, 0.35);
  padding: 0.65rem 0.8rem;
  text-align: center;
  border-radius: 2px;
  width: 100%;
  color-scheme: dark;
}
.instrument button {
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soie);
  background: var(--cinabre);
  border: 1px solid var(--cinabre-sombre);
  padding: 0.7rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.instrument button:hover { background: #e2482f; transform: translateY(-1px); }
.instrument .erreur { color: var(--el-feu); font-size: 0.85rem; margin: 0; min-height: 1.2em; }

/* cachet jiazi */
.cachet {
  display: none;
  place-items: center;
  gap: 0.4rem;
  text-align: center;
}
.cachet.est-visible { display: grid; }
.cachet .sceau {
  font-family: var(--zh);
  font-size: clamp(3.2rem, 12vw, 5rem);
  line-height: 1.05;
  color: var(--cinabre);
  border: 3px solid var(--cinabre);
  border-radius: 6px;
  padding: 0.35em 0.3em;
  writing-mode: vertical-rl;
  box-shadow: 0 0 40px rgba(208, 58, 36, 0.25);
}
.cachet .sceau-nom {
  display: none;
  font-family: var(--display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--or);
}
@keyframes tampon {
  0% { transform: scale(2.4) rotate(-6deg); opacity: 0; filter: blur(6px); }
  60% { transform: scale(0.94) rotate(1deg); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(0); }
}
/* pas de fill : si l'animation ne joue pas, l'état de base reste visible */
.cachet.est-tamponne .sceau { animation: tampon 0.55s cubic-bezier(0.22, 1, 0.36, 1); }

.passer {
  position: absolute; right: 0; bottom: -0.5rem;
  background: none; border: 0; color: var(--cendre);
  font: inherit; font-size: 0.8rem; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--or-sombre);
  display: none;
}
.passer.est-visible { display: block; }

/* ---------- panneau de révélation ---------- */

.revelation {
  max-width: 40rem;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.revelation.est-visible { opacity: 1; transform: none; }
.revelation[hidden] { display: none; }

.revelation .titre-signe {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  margin: 0 0 0.4rem;
  color: var(--element);
}
.revelation .trait { color: var(--soie); margin: 0 0 1rem; font-style: italic; }
.revelation .detail {
  color: var(--cendre);
  font-size: 0.95rem;
  margin: 0 0 0.6rem;
}
.revelation .detail strong { color: var(--soie); font-weight: 500; }
.revelation .twist {
  border-left: 2px solid var(--or);
  padding: 0.35rem 0 0.35rem 0.9rem;
  margin: 1.1rem auto;
  max-width: 30rem;
  text-align: left;
  color: var(--soie);
  font-size: 0.95rem;
}

.revelation .suites {
  display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center;
  margin-top: 1.4rem;
}
.suites a {
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.65rem 1.1rem;
  border-radius: 2px;
  border: 1px solid rgba(210, 162, 75, 0.4);
  color: var(--soie);
}
.suites a.acte { background: var(--cinabre); border-color: var(--cinabre-sombre); }
.suites a.acte:hover { background: #e2482f; }
.suites a:not(.acte):hover { border-color: var(--or); }

.recommencer {
  background: none; border: 0; color: var(--cendre);
  font: inherit; font-size: 0.85rem; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--or-sombre);
  margin-top: 1.2rem;
}

/* ---------- bandes de contenu ---------- */

.bande {
  padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1rem, 4vw, 3rem);
  border-top: 1px solid rgba(210, 162, 75, 0.16);
  max-width: 72rem;
  margin: 0 auto;
}

.bande > .bande-kicker {
  font-family: var(--display);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--or);
  margin: 0 0 0.5rem;
}
.bande > .bande-kicker [lang="zh"] { letter-spacing: 0.15em; margin-right: 0.4em; }

.bande h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  margin: 0 0 0.6rem;
}
.bande .bande-lede { color: var(--cendre); max-width: 42rem; margin: 0 0 1.8rem; }

/* année en cours */
.annee {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center;
}
.annee .glyphe {
  font-family: var(--zh);
  font-size: 3.2rem;
  color: var(--cinabre);
  border: 2px solid var(--cinabre-sombre);
  border-radius: 4px;
  padding: 0.2em 0.25em;
  line-height: 1.1;
}
.annee p { margin: 0; max-width: 38rem; color: var(--cendre); }
.annee p strong { color: var(--soie); font-weight: 500; }

/* les douze signes */
.signes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.7rem;
  padding: 0; margin: 0; list-style: none;
}
.signes-grille a {
  display: grid; gap: 0.15rem;
  background: var(--laque);
  border: 1px solid rgba(210, 162, 75, 0.18);
  border-radius: 3px;
  padding: 0.9rem 1rem;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.signes-grille a:hover { border-color: var(--or); transform: translateY(-2px); }
.signes-grille .zh { font-family: var(--zh); color: var(--or); font-size: 1.3rem; }
.signes-grille .nom { font-family: var(--display); letter-spacing: 0.06em; }
.signes-grille .annees { color: var(--cendre); font-size: 0.78rem; }

/* les cinq éléments */
.elements-ruban { display: flex; flex-wrap: wrap; gap: 0.7rem; padding: 0; margin: 0; list-style: none; }
.elements-ruban a {
  display: flex; align-items: baseline; gap: 0.55rem;
  border: 1px solid rgba(210, 162, 75, 0.18);
  background: var(--laque);
  border-radius: 3px;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.elements-ruban a:hover { border-color: var(--teinte, var(--or)); }
.elements-ruban .zh { font-family: var(--zh); color: var(--teinte, var(--or)); font-size: 1.2rem; }
.elements-ruban .nom { font-family: var(--display); letter-spacing: 0.08em; }

/* bibliothèque / trois portes */
.portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem; padding: 0; margin: 0; list-style: none; }
.portes a {
  display: flex; flex-direction: column; gap: 0.3rem;
  height: 100%;
  background: var(--laque);
  border: 1px solid rgba(210, 162, 75, 0.18);
  border-radius: 3px;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
/* la description se cale au pied : hauts et bas alignés d'une carte à l'autre */
.portes a > span:last-child { margin-top: auto; }
.portes a:hover { border-color: var(--or); transform: translateY(-2px); }
.portes em { font-family: var(--zh); font-style: normal; color: var(--or); font-size: 1.4rem; }
.portes strong { font-family: var(--display); font-weight: 400; letter-spacing: 0.05em; font-size: 1.05rem; }
.portes span { color: var(--cendre); font-size: 0.9rem; }

/* soixante noms (repli) */
details.soixante { border: 1px solid rgba(210, 162, 75, 0.18); border-radius: 3px; background: var(--laque); }
details.soixante summary {
  cursor: pointer;
  padding: 0.9rem 1.2rem;
  font-family: var(--display);
  letter-spacing: 0.08em;
  color: var(--soie);
}
details.soixante summary::marker { color: var(--or); }
.grid60 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: 4px;
  padding: 0.6rem 1rem 1rem;
}
.cell {
  font: inherit;
  display: grid; gap: 0;
  justify-items: center;
  background: var(--laque-2);
  color: var(--cendre);
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0.45rem 0.2rem;
  cursor: pointer;
}
.cell [lang="zh"] { font-size: 1.05rem; color: var(--soie); }
.cell .fr { font-size: 0.68rem; color: var(--cendre); line-height: 1.2; }
.cell.is-on .fr { color: var(--soie); }
.cell .n { font-size: 0.6rem; letter-spacing: 0.05em; color: var(--or-sombre); }
.jiazi-legende {
  margin: 0;
  padding: 0.9rem 1.2rem 1.1rem;
  border-top: 1px solid rgba(210, 162, 75, 0.18);
  color: var(--cendre);
  font-size: 0.95rem;
}
.jiazi-legende strong { color: var(--soie); font-weight: 500; }
.jiazi-legende [lang="zh"] { color: var(--or); }
.jiazi-legende a { color: var(--soie); }
.cell:hover { border-color: var(--or-sombre); }
.cell.is-on { background: var(--cinabre-sombre); border-color: var(--cinabre); }
.cell.is-on [lang="zh"] { color: var(--soie); }

/* actualités */
.actus { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.8rem; padding: 0; margin: 0; list-style: none; }
.actus a {
  display: flex; flex-direction: column; gap: 0.3rem; height: 100%;
  background: var(--laque);
  border: 1px solid rgba(210, 162, 75, 0.18);
  border-radius: 3px;
  padding: 1rem 1.2rem;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.actus a:hover { border-color: var(--or); }
.actus time { color: var(--or); font-size: 0.78rem; font-family: var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.actus strong { font-weight: 500; margin-top: auto; }

/* inscription */
.inscription { text-align: center; }
.inscription form {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
  margin-top: 1.2rem;
}
.inscription input[type="email"] {
  font: inherit;
  color: var(--soie);
  background: var(--laque);
  border: 1px solid rgba(210, 162, 75, 0.35);
  border-radius: 2px;
  padding: 0.65rem 0.9rem;
  min-width: min(18rem, 70vw);
}
.inscription button {
  font-family: var(--display);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soie);
  background: var(--cinabre);
  border: 1px solid var(--cinabre-sombre);
  border-radius: 2px;
  padding: 0.65rem 1.2rem;
  cursor: pointer;
}
.inscription button:hover { background: #e2482f; }
.inscription .statut { min-height: 1.3em; margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--cendre); }
.inscription .statut.est-succes { color: var(--el-bois); }
.inscription .statut.est-erreur { color: var(--el-feu); }

/* footer */
footer {
  border-top: 1px solid rgba(210, 162, 75, 0.16);
  padding: 2rem clamp(1rem, 4vw, 3rem) 3rem;
  color: var(--cendre);
  font-size: 0.92rem;
  text-align: center;
}
footer a { color: var(--cendre); }
footer a:hover { color: var(--soie); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .temple::before { animation: none; }
  .oeuvre.est-visible img { animation: none; transform: none; transition: none; }
  .cachet.est-tamponne .sceau { animation: none; }
  .revelation { transition: none; }
  .signes-grille a, .portes a, .instrument button { transition: none; }
}

/* ---------- mobile ---------- */

@media (max-width: 40rem) {
  header.cloth { justify-content: center; text-align: center; }
  .roue .branche { font-size: 30px; }
  .roue-centre { padding: 24%; }
  .instrument { max-width: 12rem; }
  .annee { justify-content: center; text-align: center; }
}