/* ======================================================
   NIGHTANGELS — ORACLE.CSS
   Univers : Oracle des Arcanes
====================================================== */

body[data-universe="oracle"] {
  --accent-color: #d4b0ff;
  --header-border: rgba(180, 120, 255, .2);

  --card-w:     160px;
  --card-ratio: 2 / 3;
  --gap:        20px;

  --color-bg-reading:  rgba(18, 10, 28, 0.95);
  --color-border:      rgba(180, 120, 255, .2);
  --color-border-gold: rgba(232, 196, 106, 1);
  --color-shadow:      rgba(120, 60, 200, .12);
  --color-shadow-gold: rgba(198, 161, 91, .25);
  --color-text-main:   #E8E1D6;
  --color-accent:      #d4b0ff;
  --color-accent-soft: #d8c5ff;
  --color-btn-bg:      #2D1644;

  --radius-card:    5px;
  --radius-reading: 5px;
  --radius-btn:     12px;

  --hero-image: url('/images/background/oracle.webp');

  --transition-flip: transform 0.9s cubic-bezier(.4, 0, .2, 1);
  --transition-ui:   0.2s ease;
}

/* ─── Background ──────────────────────────────────────── */

body[data-universe="oracle"]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background-image:
    linear-gradient(
      to bottom,
      rgba(5, 5, 7, 0.45),
      rgba(5, 5, 7, 0.82)
    ),
    var(--hero-image);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.95;
}

/* ═══════════════════════════════════════════
   CONTAINER
═══════════════════════════════════════════ */

.oracle-container {
  text-align: center;
  padding: 120px 20px 60px;
}

/* ═══════════════════════════════════════════
   TITRE & SOUS-TITRE
═══════════════════════════════════════════ */

.oracle-title {
  color: var(--color-accent);
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 5px;
}

.oracle-subtitle {
  color: #e8c46a;
  text-shadow:
    0 0 10px rgba(232, 196, 106, .7),
    0 0 30px rgba(198, 161, 91, .3);
  opacity: .75;
  text-align: center;
  font-style: italic;
  margin-bottom: 5px;
}

.oracle-subtitle-lite {
  color: #e8c46a;
  text-shadow:
    0 0 10px rgba(232, 196, 106, .7),
    0 0 30px rgba(198, 161, 91, .3);
  opacity: .75;
  font-style: italic;
  font-size: 0.8rem;
}

/* ═══════════════════════════════════════════
   BOUTON PRINCIPAL
═══════════════════════════════════════════ */

#drawButton {
  background: var(--color-btn-bg);
  color: var(--color-text-main);
  border: 1px solid var(--color-border-gold);
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  font-size: 1rem;
  cursor: pointer;
  margin-top: 20px;
  transition:
    background  var(--transition-ui),
    box-shadow  var(--transition-ui),
    transform   var(--transition-ui),
    opacity     var(--transition-ui);
}

#drawButton:hover:not(:disabled) {
  background: #3d1f5c;
  box-shadow: 0 0 20px var(--color-shadow-gold);
  transform: translateY(-2px);
}

#drawButton:active:not(:disabled) {
  transform: translateY(0);
}

#drawButton:disabled {
  opacity: .45;
  cursor: not-allowed;
}

#oracleGuide{
  transition:
    opacity .4s ease,
    transform .4s ease;
}

#oracleGuide.hidden{
  display:none !important;
}

/* ═══════════════════════════════════════════
   GRILLE DE CARTES (croix)
═══════════════════════════════════════════ */

#cardContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    ".    top    ."
    "left  .   right"
    ".   bottom  .";
  justify-items: center;
  align-items: center;
  gap: var(--gap);
  padding: 30px 10px;
}

/* ═══════════════════════════════════════════
   CARTE — STRUCTURE
═══════════════════════════════════════════ */

.oracle-card {
  width: var(--card-w);
  aspect-ratio: var(--card-ratio);
  cursor: pointer;
  perspective: 1000px;
  background: none;
  opacity: 0;
  animation: cardAppear 0.5s ease forwards;
}

.oracle-card:nth-child(1) { grid-area: top;    animation-delay: 0.1s; }
.oracle-card:nth-child(2) { grid-area: left;   animation-delay: 0.25s; }
.oracle-card:nth-child(3) { grid-area: right;  animation-delay: 0.4s; }
.oracle-card:nth-child(4) { grid-area: bottom; animation-delay: 0.55s; }

@keyframes cardAppear {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ═══════════════════════════════════════════
   CARTE — FLIP 3D
═══════════════════════════════════════════ */

.oracle-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: var(--transition-flip);
}

.oracle-card.flipped .oracle-card-inner {
  transform: rotateY(180deg);
}

.oracle-card:not(.flipped):hover .oracle-card-inner {
  transform: rotateY(8deg) scale(1.03);
}

/* Accessibilité clavier — anneau de focus visible */
.oracle-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-card);
}

/* ═══════════════════════════════════════════
   CARTE — FACES
═══════════════════════════════════════════ */

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.card-back  { background: transparent; }
.card-front { transform: rotateY(180deg); }

.card-face img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ═══════════════════════════════════════════
   SYMBOLE
═══════════════════════════════════════════ */

.card-symbol {
  font-size: 1.1em;
  margin-right: 4px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════
   LECTURES (index.php)
═══════════════════════════════════════════ */

#readingContainer {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px 40px;
}

.oracle-reading {
  background: var(--color-bg-reading);
  border: 1px solid var(--color-border);
  padding: 24px;
  border-radius: var(--radius-reading);
  box-shadow: 0 0 25px var(--color-shadow);
  text-align: left;
  animation: fadeSlideIn 0.45s ease both;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.oracle-reading h2 {
  text-align: center;
  margin-bottom: 16px;
  color: var(--color-accent);
  font-size: 1.1rem;
}

.intro {
  color: rgba(180, 120, 255, 0.75);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.5;
  text-shadow:
    0 0 15px rgba(140, 60, 220, 0.5),
    0 0 40px rgba(100, 30, 180, 0.2);
  opacity: .75;
}

.oracle-line {
  font-style: italic;
  color: var(--color-accent-soft);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: rgba(180, 120, 255, .07);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  line-height: 1.5;
}

.oracle-position {
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 0.85rem;
  background: rgba(180, 120, 255, .07);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-reading);
  font-style: italic;
  color: var(--color-text-main);
  line-height: 1.5;
  opacity: .75;
}

.oracle-mean {
  border-left: 3px solid var(--color-border-gold);
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-main);
  font-style: italic;
  opacity: .75;
  line-height: 1.5;
}


/* Réservé pour une future extension (affichage du champ "message" des cartes) */
.oracle-message {
  margin-top: 14px;
  font-weight: 600;
  color: var(--color-accent-soft);
}

/* Réservé pour une future extension (affichage du champ "question" en lecture rapide) */
.oracle-question {
  margin-top: 20px;
  font-style: italic;
  opacity: .75;
  line-height: 1.6;
}

#oracleIntro {
  max-width: 900px;
  margin: 0 auto 10px;
}

.oracle-navigation{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.oracle-cards-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fill,minmax(140px,1fr));
    gap:12px;
}

.oracle-card-link{
    display:flex;
    flex-direction:column;
    background:var(--color-bg-reading);
    border:1px solid var(--color-border-gold);
    border-radius:12px;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
}

.oracle-card-link img{
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
}

.oracle-card-content{
    padding:12px;
}

.oracle-card-content h3{
    min-height: 70px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:1rem;
    line-height:1.2;
    margin:0 0 6px;
}

.card-element{
    display:block;
    margin-top:4px;
    font-size:.9rem;
}

.card-element.fire{
    color:#ff7a5a;
}

.card-element.water{
    color:#7cc8ff;
}

.card-element.air{
    color:#d8d6ff;
}

.card-element.earth{
    color:#9fd36b;
}

.card-element.void{
    color:#b38cff;
}

.oracle-card-link:hover{
    transform:translateY(-4px);

    box-shadow:
        0 0 20px rgba(198,161,91,.25);
}

.card-description{
    font-size:.85rem;
    opacity:.8;
    margin-top:10px;
}

.oracle-filters{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    max-width:520px;
    margin:20px auto 0;
}

.oracle-filters button{
    width:100%;
    background:var(--color-btn-bg);
    color:var(--color-text-main);
    border:1px solid var(--color-border-gold);
    border-radius:12px;
    padding:10px 18px;
    cursor:pointer;
    transition:.25s ease;
}

.oracle-filters button:hover{
    transform:translateY(-2px);
    box-shadow:0 0 15px rgba(198,161,91,.3);
}

.oracle-filters button.active{
    background:#4b2670;
    box-shadow:
        0 0 15px rgba(180,120,255,.4);
}

.oracle-search{
    display:flex;
    justify-content:center;
    display:flex;
    justify-content:center;
    margin:20px 0;
}

.oracle-search input{
    width:100%;
    max-width:500px;
    padding:12px 16px;
    background:rgba(18,10,28,.95);
    color:#E8E1D6;
    border:1px solid rgba(232,196,106,1);
    border-radius:12px;
    font-size:1rem;
}

.oracle-search input::placeholder{
    color:rgba(232,225,214,.55);
}

.oracle-search input:focus{
    outline:none;

    box-shadow:
        0 0 15px rgba(180,120,255,.3);
}

.results-count{
    text-align:center;
    margin:10px 0 20px;
    color:var(--color-accent-soft);
    font-style:italic;
    opacity:.8;
}

/* ═══════════════════════════════════════════
   FINAL / INTRO BOX (oracle-final)
═══════════════════════════════════════════ */

.oracle-final {
  background: var(--color-bg-reading);
  border: 1px solid var(--color-border-gold);
  padding: 28px;
  border-radius: var(--radius-reading);
  box-shadow:
    0 0 40px var(--color-shadow),
    0 0 80px rgba(120, 60, 200, .08);
  text-align: left;
  animation: fadeSlideIn 0.6s ease both;
}

.oracle-final h2 {
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 16px;
  font-size: 1.15rem;
  letter-spacing: .03em;
}

.oracle-final p {
  line-height: 1.75;
  opacity: .9;
}

/* ═══════════════════════════════════════════
   PAGE INTERPRÉTATION — SECTIONS
   (classes générées par oracle-interpretation.js)
═══════════════════════════════════════════ */

/* Masque les éléments vides pendant l'animation typewriter */
.message:empty,
.tone:empty,
.lumineuse:empty,
.ambivalente:empty,
.eprouvante:empty,
.soft:empty,
.tag:empty,
.closing:empty,
.dominant:empty {
  display: none;
}

.moires,
.ombres {
  display: none;
}

/* Titre de section */
h2.section-title {
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  margin-top: 0.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* Tonalité globale */
.lumineuse {
  background: rgba(180, 120, 255, .07);
  border-left: 3px solid #6ddf6d;
  border-radius: 0 8px 8px 0;
  padding: 0.5rem;
  color: #6ddf6d;
    font-style: italic;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.ambivalente {
  background: rgba(180, 120, 255, .07);
  border-left: 3px solid #e8c46a;
  border-radius: 0 8px 8px 0;
  padding: 0.5rem;
  color: #e8c46a;
    font-style: italic;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.eprouvante {
  background: rgba(180, 120, 255, .07);
  border-left: 3px solid #ff6b6b;
  border-radius: 0 8px 8px 0;
  padding: 0.5rem;
  color: #ff6b6b;
    font-style: italic;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* Tonalité globale */
.tone {
  font-style: italic;
  color: var(--color-accent-soft);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: rgba(180, 120, 255, .07);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  line-height: 1.5;
}

.element.fire {
  background: #7a3d32;
  color: #f2eadb;
  border-left: 3px solid #ff7a5a;
  border-radius: 0 8px 8px 0;
  padding: 0.5rem;
    font-style: italic;
  opacity: .75;
  line-height: 1.5;
}

.element.water {
  background: #355b7a;
  color: #f2eadb;
  border-left: 3px solid #7cc8ff;
  border-radius: 0 8px 8px 0;
  padding: 0.5rem;
    font-style: italic;
  opacity: .75;
  line-height: 1.5;
}

.element.air {
  background: #6d6a86;
  color: #f2eadb;
  border-left: 3px solid #d8d6ff;
  border-radius: 0 8px 8px 0;
  padding: 0.5rem;
    font-style: italic;
  opacity: .75;
  line-height: 1.5;
}

.element.earth {
  background: #5c7f4d;
  color: #f2eadb;
  border-left: 3px solid #9fd36b;
  border-radius: 0 8px 8px 0;
  padding: 0.5rem;
    font-style: italic;
  opacity: .75;
  line-height: 1.5;
}

.element.void {
  background: #4a356b;
  color: #f2eadb;
  border-left: 3px solid #b38cff;
  border-radius: 0 8px 8px 0;
  padding: 0.5rem;
    font-style: italic;
  opacity: .75;
  line-height: 1.5;
}

.element.mixed {
  background: linear-gradient(
    90deg,
    #6b5a84,
    #74623d
  );
  border-left: 3px solid #d5b8ff;
  color: #f2eadb;
  border-radius: 0 8px 8px 0;
  padding: 0.5rem;
    font-style: italic;
  opacity: .75;
  line-height: 1.5;
}

/* Catégorie dominante */
.dominant {
  border-left: 3px solid var(--color-border-gold);
  padding: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-border-gold);
  line-height: 1.5;
  margin-bottom: 0.5rem;
  opacity: .75;
}

/* Message / tag */
.message,
.tag {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  font-size: 0.85rem;
  border-left: 3px solid var(--color-border-gold);
  color: var(--color-text-main);
  line-height: 1.5;
  opacity: .75;
}

/* Intro des Moires */
.moires {
  color: var(--color-border-gold);
  font-style: italic;
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  opacity: 0.75;
  text-shadow:
    0 0 20px rgba(232, 196, 106, 0.4),
    0 0 50px rgba(198, 161, 91, 0.15);
}

/* Catégorie soft (influence secondaire) */
.soft {
  border-left: 3px solid var(--color-border-gold);
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-main);
  font-style: italic;
  opacity: .75;
  line-height: 1.5;
}

/* Intro des Ombres */
.ombres {
  color: rgba(180, 120, 255, 0.75);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.5;
  text-shadow:
    0 0 15px rgba(140, 60, 220, 0.5),
    0 0 40px rgba(100, 30, 180, 0.2);
  opacity: .75;
}

/* Question de clôture */
.closing {
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 0.85rem;
  background: rgba(180, 120, 255, .07);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-reading);
  font-style: italic;
  color: var(--color-text-main);
  line-height: 1.5;
  opacity: .75;
}

/* ═══════════════════════════════════════════
   PAGE INTERPRÉTATION — LAYOUT
═══════════════════════════════════════════ */

.oracle-page {
  position: relative;
  padding: 130px 20px 40px;
  min-height: 100vh;
  overflow: hidden;
}

.oracle-hero {
  text-align: center;
  margin-bottom: 20px;
}

.oracle-reading-container {
  max-width: 900px;
  margin: auto;
}

#oracleCards {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.oracle-mini-card {
  width: 90px;
  border-radius: var(--radius-reading);
  cursor:pointer;
  overflow: hidden;
  box-shadow:
    0 0 5px  rgba(198, 161, 91, .6),
    0 0 10px rgba(198, 161, 91, .3),
    0 0 20px rgba(198, 161, 91, .12);
}

.oracle-mini-card img {
  width: 100%;
  display: block;
}

.card-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:99999;

    opacity:0;
    visibility:hidden;
    transition:.3s;
}

.card-modal.active{
    opacity:1;
    visibility:visible;
}

.card-modal img{
	    cursor:pointer;
    border-radius:12px;
    box-shadow:
        0 0 20px rgba(198,161,91,.4),
        0 0 40px rgba(198,161,91,.2);
    width:min(90vw,420px);
    max-height:75vh;

    position:relative;
    z-index:99999;
}

.card-modal-close{
    position:fixed;

    top:90px;
    right:15px;

    width:52px;
    height:52px;

    border:none;
    border-radius:50%;

    background:rgba(0,0,0,.85);
    border:1px solid rgba(255,215,150,.5);

    color:#fff;

    font-size:32px;
    font-weight:bold;

    z-index:100000;
}

/* Typewriter */
#typewriter {
  background: var(--color-bg-reading);
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-reading);
  line-height: 1.9;
  min-height: 0;
  color: var(--color-text-main);
}

#typewriter:empty {
  display: none;
}

/* Compte à rebours */
.oracle-countdown {
  text-align: center;
  margin: -10px auto 20px;
  font-style: italic;
  opacity: .8;
  font-size: 1.1rem;
  color: var(--color-accent-soft);
  animation: pulseCountdown 2s infinite;
}

@keyframes pulseCountdown {
  0%   { opacity: .4; }
  50%  { opacity: 1; }
  100% { opacity: .4; }
}

/* Actions */
.oracle-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 25px 0 35px;
  width: 100%;
}

.oracle-actions button,
.oracle-open-reading {
  padding: 14px 28px;
  background: var(--color-btn-bg);
  color: var(--color-text-main);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-btn);
  font-size: 1rem;
  cursor: pointer;
  min-width: 220px;
  transition: all .25s ease;
}

.oracle-actions button:hover,
.oracle-open-reading:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px var(--color-shadow-gold);
}

.oracle-actions button:focus-visible,
.oracle-open-reading:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════
   ÉTAT DE CHARGEMENT (spinner sur le bouton)
═══════════════════════════════════════════ */

#drawButton[disabled]:not([aria-disabled="true"]) {
  position: relative;
  padding-left: 48px;
}

#drawButton[disabled]:not([aria-disabled="true"])::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border-gold);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* ═══════════════════════════════════════════
   ERREUR
═══════════════════════════════════════════ */

.oracle-error {
  color: #ff9999;
  font-style: italic;
  margin-top: 12px;
  text-align: center;
}

/* ═══════════════════════════════════════════
   RESPONSIVE ≤ 768px
═══════════════════════════════════════════ */

@media (max-width: 768px) {

  body[data-universe="oracle"]::before {
    background-image:
      linear-gradient(
        to bottom,
        rgba(5, 5, 7, 0.45),
        rgba(5, 5, 7, 0.82)
      ),
      url('/images/background/oracle-mobile.webp');
  }

  h2.section-title {
    letter-spacing: 0.08em;
  }

  /* Correction spécificité : la variable doit être redéfinie sur le même sélecteur
     que la déclaration initiale (body[data-universe="oracle"]), pas sur :root */
  body[data-universe="oracle"] {
    --card-w: 100px;
  }

  .oracle-page {
    padding: 120px 12px 40px;
  }

  #cardContainer {
    grid-template-columns: 0.9fr auto 0.9fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      ". top ."
      "left . right"
      ". bottom .";
    justify-items: center;
    align-items: center;
    padding: 0;
    margin-top: 35px;
    column-gap: 5px;
    row-gap: 8px;
  }

  .oracle-card:nth-child(1) { margin-bottom: -55px; }
  .oracle-card:nth-child(2) { margin-right: -18px; }
  .oracle-card:nth-child(3) { margin-left: -18px; }
  .oracle-card:nth-child(4) { margin-top: -55px; }

  .oracle-container { padding: 120px 12px 40px; }
  #readingContainer { padding: 0 10px 30px; }
  .oracle-reading   { padding: 16px; }
  .oracle-final     { padding: 18px; }

  .oracle-mini-card { width: 70px; }

  .oracle-actions {
    flex-direction: column;
  }

  .oracle-actions button,
  .oracle-open-reading {
    width: 100%;
    max-width: 320px;
  }

  .oracle-cards-grid{
      grid-template-columns:
          repeat(2,1fr);
      gap:10px;
  }
  
}

/* ======================================================
   PREMIER SIGNE
====================================================== */

body.premier-signe #cardContainer{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px 0;
}

body.premier-signe .oracle-card{
    width:min(85vw,320px);
    aspect-ratio:2/3;
}

body.premier-signe .oracle-card:nth-child(1){
    margin:0;
    animation-delay:0s;
}

body.premier-signe .oracle-card{
    width:min(85vw,320px);
    aspect-ratio:2/3;

    border-radius:var(--radius-reading);

    box-shadow:
        0 0 8px rgba(198,161,91,.7),
        0 0 20px rgba(198,161,91,.45),
        0 0 40px rgba(198,161,91,.18);
}