/* ─────────────────────────────────────────
   JN STUDIO — L'Oracle des Lunes
   Expérience contemplative : choisir un mois de naissance,
   une carte remonte, se retourne, révèle une Lune (mosaïque).
   Fond crème · la matière sombre vit dans la carte elle-même.
   ───────────────────────────────────────── */

main.oracle-page{
  padding-top: 110px;
  min-height: 100dvh;
  background: var(--creme);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background .65s cubic-bezier(.16,1,.3,1);
}
/* L'écran bascule en nuit profonde à la sélection (le footer reste, lui, inchangé) */
body.oracle-dark main.oracle-page{ background: #0A1838; }

/* Halo chaud très discret, immobile */
main.oracle-page::before{
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(52% 48% at 50% 36%, rgba(184,146,84,.07), transparent 62%),
    radial-gradient(46% 42% at 16% 96%, rgba(6,15,44,.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: opacity .65s cubic-bezier(.16,1,.3,1);
}
body.oracle-dark main.oracle-page::before{ opacity: 0; }

/* ─────────────────────────────────────────
   La scène — plein cadre, centrée
   ───────────────────────────────────────── */
.oracle-stage{
  flex: 1 1 auto;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 16px 40px 40px;
  min-height: calc(100dvh - 110px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.oracle-stage[data-phase="home"],
.oracle-stage[data-phase="leaving"]{
  align-items: flex-start;
  padding-top: 0;
}
.oracle-stage[data-phase="home"] .home-block,
.oracle-stage[data-phase="leaving"] .home-block{
  margin-top: -46px;
}

/* Voile de nuit — l'écran bascule en bleu profond à la sélection */
.oracle-veil{
  position: fixed; inset: 0;
  background: #0A1838;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity .65s cubic-bezier(.16,1,.3,1);
}
.oracle-veil.on{ opacity: 1; }

/* Voile de nuit — l'écran bascule en bleu profond à la sélection */
.oracle-veil{
  position: fixed; inset: 0;
  background: #0A1838;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity .65s cubic-bezier(.16,1,.3,1);
}
.oracle-veil.on{ opacity: 1; }

/* En‑tête éclairé quand l'écran est en nuit */
body.oracle-dark .site-header .brand img{ filter: invert(1) brightness(2.4); }
body.oracle-dark .site-header .header-nav a,
body.oracle-dark .site-header .lang,
body.oracle-dark .site-header .lang span,
body.oracle-dark .site-header .burger-btn,
body.oracle-dark .site-header .burger-btn .lbl{
  color: var(--creme);
  transition: color .5s cubic-bezier(.16,1,.3,1);
}
body.oracle-dark .site-header .burger-btn .line{ background: var(--creme); }
body.oracle-dark .site-header .lang .on{ color: var(--or); }
body.oracle-dark .site-header.scrolled{
  background: rgba(10,24,56,.92);
  border-bottom-color: rgba(184,146,84,.25);
}

/* ─────────────────────────────────────────
   ÉTAT A — Accueil : titre + sélecteur de mois
   ───────────────────────────────────────── */
.home-block{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home-block.leaving{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.home-head{ width: 100%; margin-bottom: clamp(20px, 3.2vh, 40px); }
.home-head .eyebrow{
  font-family: var(--font-caps); font-weight: 500;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--or);
  margin-bottom: 20px;
  white-space: nowrap;
}
.home-head h1{
  font-family: var(--font-display);
  font-weight: 300; font-style: normal;
  font-size: clamp(35px, 4.3vw, 61px);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--noir);
  margin: 0;
}
.home-head h1 em{ color: var(--or); font-style: normal; }
.home-head .byline{
  font-family: var(--font-caps); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gris);
  margin: 8px 0 0;
}
.home-head .sub{
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  color: var(--gris);
  margin: 22px auto 0;
  width: min(680px, 100%);
  white-space: normal;
  text-wrap: pretty;
}
.home-head .question{
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--noir);
  margin: 22px 0 0;
}
.home-head .signature{
  height: 38px; width: auto;
  margin: 20px auto 0;
  opacity: .4;
  mix-blend-mode: multiply;
}

/* Le sélecteur — 12 mois en 4 colonnes × 3 lignes */
.month-list{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 660px;
}
.month-list button{
  appearance: none; cursor: pointer;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(184,146,84,.4);
  color: var(--noir);
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
  font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: .01em;
  padding: 17px 10px;
  position: relative; overflow: hidden;
  z-index: 0;
  transition: color .55s var(--ease), border-color .55s var(--ease);
}
/* remplissage doré qui monte depuis le bas — écho de la carte qui se lève */
.month-list button::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--or);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.month-list button:hover,
.month-list button:focus-visible{
  color: var(--creme);
  border-color: var(--or);
  outline: none;
}
.month-list button:hover::before,
.month-list button:focus-visible::before{ transform: translateY(0); }

/* ─────────────────────────────────────────
   ÉTATS C→F — Lever, pause, flip, révélation
   ───────────────────────────────────────── */
.draw-block{
  --gap: clamp(40px, 6vw, 104px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

/* La carte */
.card-area{
  flex: 0 0 auto;
  width: clamp(200px, 20vw, 300px);
  max-height: 66vh;
  aspect-ratio: 752 / 1344;
  perspective: 1800px;
  /* centrée pendant la levée + le flip (le texte réserve sa place mais reste invisible) */
  transform: translateX(calc((460px + var(--gap)) / 2));
  transition: transform var(--flip-dur) var(--ease);
}
.draw-block.revealed .card-area{ transform: translateX(0); }  /* glisse sur le côté */
.card-rise{
  position: relative;
  width: 100%; height: 100%;
  border-radius: 10px;
  transform: translateY(124vh) scale(.94);
  box-shadow: 0 16px 32px -20px rgba(6,15,44,.4);
  will-change: transform;
}
.card-rise.lifted{
  transform: translateY(0) scale(1);
  box-shadow: 0 52px 96px -30px rgba(6,15,44,.62);
  transition:
    transform var(--rise-dur) var(--ease),
    box-shadow var(--rise-dur) var(--ease);
}
.card-flip{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform var(--flip-dur) var(--ease);
}
.card-flip.flipped{ transform: rotateY(180deg); }

.face{
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(184,146,84,.4);
}
.face img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.face.front{ transform: rotateY(180deg); }
/* liseré or intérieur très fin */
.face::after{
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(201,169,97,.22);
  border-radius: 5px;
  pointer-events: none;
}

/* ─────────────────────────────────────────
   Le bloc révélation
   ───────────────────────────────────────── */
.reveal-text{
  flex: 0 1 460px;
  max-width: 460px;
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.draw-block.revealed .reveal-text{ opacity: 1; transform: none; }

.reveal-text .kicker{
  font-family: var(--font-caps); font-weight: 500;
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--or);
  margin-bottom: 12px;
  opacity: 0;
  transition: opacity .8s var(--ease) .05s;
}
.reveal-text .moon-name{
  font-family: var(--font-display);
  font-style: normal; font-weight: 300;
  font-size: clamp(30px, 3vw, 41px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--creme);
  margin: 0 0 10px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .85s var(--ease) .12s, transform .85s var(--ease) .12s;
}
.reveal-text .intro{
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
  font-size: clamp(18px, 1.65vw, 22px);
  line-height: 1.5;
  color: rgba(244,239,230,.82);
  margin: 0;
  max-width: 38ch;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .85s var(--ease) .26s, transform .85s var(--ease) .26s;
}
.reveal-text .gold-rule{
  display: block; height: 1px; width: 52px;
  background: var(--or); opacity: .85;
  margin: 16px 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.2s var(--ease) .4s;
}
.reveal-text .triad{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 0 0 8px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .85s var(--ease) .5s, transform .85s var(--ease) .5s;
}
.reveal-text .triad .cell .lab{
  font-family: var(--font-caps); font-weight: 500;
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(244,239,230,.5);
  display: block; margin-bottom: 9px;
}
.reveal-text .triad .cell .val{
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.35;
  color: var(--creme);
}

/* states reveal — fade children in */
.draw-block.revealed .reveal-text .kicker,
.draw-block.revealed .reveal-text .moon-name,
.draw-block.revealed .reveal-text .intro,
.draw-block.revealed .reveal-text .triad{ opacity: 1; transform: none; }
.draw-block.revealed .reveal-text .gold-rule{ transform: scaleX(1); }

/* Bouton — Tirer une autre carte : remplissage progressif au survol */
.again-wrap{
  margin-top: 24px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s var(--ease) .8s, transform .8s var(--ease) .8s;
}
.draw-block.revealed .again-wrap{ opacity: 1; transform: none; }
.actions-row{ display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.again-btn{
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center;
  position: relative; overflow: hidden;
  background: transparent;
  border: 1px solid var(--or);
  color: var(--creme);
  text-decoration: none;
  font-family: var(--font-text);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  padding: 15px 28px;
  transition: color .5s var(--ease);
  z-index: 0;
}
.again-btn::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--or);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.again-btn:hover{ color: #0A1838; }
.again-btn:hover::before{ transform: translateY(0); }

.reset-link{
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--font-text);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244,239,230,.55);
  border-bottom: 1px solid transparent;
  padding: 0 0 3px;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.reset-link:hover{ color: var(--creme); border-bottom-color: var(--or); }

/* Variante « Partager » — contour plus discret */
.again-btn.ghost{ border-color: rgba(184,146,84,.45); }

/* Saisie de l'email — l'utilisateur reçoit sa Lune (visuel en pièce jointe) */
.mail-form{
  display: flex; align-items: stretch;
  border: 1px solid var(--or);
}
.mail-form input{
  background: transparent; border: 0; outline: 0;
  color: var(--creme);
  font-family: var(--font-text);
  font-size: 13px; letter-spacing: .02em;
  padding: 0 16px; width: clamp(160px, 22vw, 220px);
}
.mail-form input::placeholder{ color: rgba(244,239,230,.4); }
.mail-send{
  appearance: none; cursor: pointer; border: 0;
  background: var(--or); color: #0A1838;
  padding: 0 18px; font-size: 16px; line-height: 1;
  transition: background .4s var(--ease);
}
.mail-send:hover{ background: var(--creme); }

.mail-confirm{
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
  color: var(--creme);
  border-left: 2px solid var(--or);
  padding-left: 18px;
  margin: 0;
  max-width: 42ch;
}

/* ─────────────────────────────────────────
   Responsive — mobile first (le site est surtout consulté sur téléphone)
   ───────────────────────────────────────── */
@media (max-width: 860px){
  /* Le contenu démarrait trop haut sur mobile (caché sous le logo de l'en-tête).
     On dégage la hauteur réelle de l'en-tête et on annule la remontée du bloc. */
  main.oracle-page{ padding-top: 104px; }
  .oracle-stage{
    padding: 28px 22px calc(56px + env(safe-area-inset-bottom));
    min-height: calc(100dvh - 104px);
  }
  .oracle-stage[data-phase="home"],
  .oracle-stage[data-phase="leaving"]{ padding-top: 12px; }
  .oracle-stage[data-phase="home"] .home-block,
  .oracle-stage[data-phase="leaving"] .home-block{ margin-top: 0; }
  /* Month selector — 3 comfortable columns instead of a cramped 4 */
  .month-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .oracle-stage[data-phase="draw"]{ align-items: flex-start; }

  .draw-block{
    flex-direction: column;
    gap: 38px;
    padding-top: 8px;
  }
  .card-area{ width: min(70vw, 320px); transform: none; }
  .draw-block.revealed .card-area{ transform: none; }
  .reveal-text{
    flex: 0 0 auto;
    max-width: 100%;
    text-align: center;
  }
  .again-wrap{ align-items: center; }
  .actions-row{ justify-content: center; width: 100%; }
  .mail-confirm{ text-align: center; }
  .reveal-text .intro{ margin-inline: auto; }
  .reveal-text .gold-rule{ margin-inline: auto; }
  .reveal-text .triad{
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 280px;
    margin-inline: auto;
  }
  .home-head .sub{ white-space: normal; }
  .home-head .eyebrow{ white-space: normal; }
}

/* Tablettes (iPad) : en mode tirage, la carte et le texte reviennent côte à
   côte — empilés, le bloc révélé débordait en bas de l'écran. */
@media (min-width: 700px) and (max-width: 860px){
  .oracle-stage[data-phase="draw"]{ align-items: center; }
  .draw-block{
    flex-direction: row;
    align-items: center;
    gap: clamp(28px, 5vw, 56px);
    padding-top: 0;
  }
  .card-area{
    width: clamp(190px, 30vw, 250px);
    transform: none;
  }
  .draw-block.revealed .card-area{ transform: none; }
  .reveal-text{
    flex: 0 1 380px;
    max-width: 380px;
    text-align: left;
  }
  .again-wrap{ align-items: flex-start; }
  .actions-row{ justify-content: flex-start; width: auto; }
  .mail-confirm{ text-align: left; }
  .reveal-text .intro{ margin-inline: 0; }
  .reveal-text .gold-rule{ margin-inline: 0; }
  .reveal-text .triad{ margin-inline: 0; }
}

@media (max-width: 360px){
  .month-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}