/* Tirage de tarot oui / non (tarot.js). Dos de carte dessiné en CSS, faces Rider-Waite 1909. */

.tarot-app { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
.tarot-form { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.tarot-form .ask-field { display: flex; }
.tarot-message { min-height: 1.4em; color: #ff9b9b; font-size: 14px; margin: 0; }

.tarot-deck {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 10px;
    max-width: 880px;
    padding: 6px 0;
}
.tarot-back {
    aspect-ratio: 10 / 17;
    border-radius: 9px;
    border: 1px solid var(--line-gold-3);
    padding: 0;
    cursor: pointer;
    background:
        radial-gradient(circle at 50% 50%, rgba(226, 199, 126, 0.55) 0 6%, transparent 7%),
        radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(226, 199, 126, 0.35) 18% 19%, transparent 20%),
        repeating-linear-gradient(45deg, rgba(226, 199, 126, 0.08) 0 2px, transparent 2px 9px),
        linear-gradient(160deg, var(--violet) 0%, #2a1650 55%, #120b20 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(14, 12, 20, 0.85), inset 0 0 0 4px rgba(226, 199, 126, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.4s ease;
    animation: tarotIn 0.5s ease backwards;
    animation-delay: calc(var(--i) * 25ms);
}
.tarot-back:hover, .tarot-back:focus-visible { transform: translateY(-8px); box-shadow: 0 14px 28px rgba(124, 77, 255, 0.35), inset 0 0 0 3px rgba(14, 12, 20, 0.85), inset 0 0 0 4px var(--gold); outline: none; }
.tarot-deck.picked .tarot-back { opacity: 0.25; pointer-events: none; }
.tarot-deck.picked .tarot-back.chosen { opacity: 1; transform: translateY(-14px) scale(1.08); box-shadow: 0 0 40px rgba(226, 199, 126, 0.55); }
@keyframes tarotIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.tarot-result {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;
    gap: 28px;
    align-items: center;
    padding: 24px;
    border-radius: 18px;
    border: 1px solid var(--line-gold-2);
    background: rgba(255, 255, 255, 0.02);
    max-width: 880px;
}
.tarot-card { perspective: 900px; }
.tarot-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    animation: tarotFlip 0.7s ease both;
}
.tarot-card.reversed img { animation-name: tarotFlipRev; transform: rotate(180deg); }
@keyframes tarotFlip { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
@keyframes tarotFlipRev { from { transform: rotate(180deg) rotateY(90deg); } to { transform: rotate(180deg) rotateY(0); } }

.tarot-answer { font-family: var(--serif); font-size: clamp(44px, 7vw, 68px); line-height: 1; margin: 0 0 8px; color: var(--gold-hi); text-transform: uppercase; }
.answer-o .tarot-answer { color: #9be7b0; }
.answer-n .tarot-answer { color: #ff9b9b; }
.tarot-name { font-family: var(--serif); font-size: 26px; margin: 0 0 8px; color: var(--text); }
.tarot-name span { font-family: var(--sans); font-size: 13px; color: var(--dim); margin-left: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.tarot-text p { color: var(--body); margin: 0 0 10px; }
.tarot-rev { font-size: 14px; color: var(--dim) !important; }
.tarot-again { align-self: flex-start; }

@media (max-width: 760px) {
    .tarot-deck { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
    .tarot-result { grid-template-columns: 1fr; text-align: center; padding: 18px; }
    .tarot-card { max-width: 200px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .tarot-back, .tarot-card img { animation: none !important; }
}

/* Mobile : le thème passe .hero-copy en display: contents et ordonne ses enfants. */
@media (max-width: 899px) {
    .tarot-app { order: 3; width: 100%; text-align: left; }
}

/* Le thème donne order: 3 à .ask-form : le formulaire reste en tête de l'outil. */
.tarot-app .tarot-form { order: -1; }
/* display: grid / inline-flex l'emporteraient sinon sur l'attribut hidden. */
.tarot-result[hidden], .tarot-again[hidden] { display: none !important; }

/* Derniers tirages sous le tarot : une seule carte, alignée sur la largeur du tirage. */
.tarot-latest { grid-template-columns: minmax(0, 880px); }
.tarot-latest .q-list { min-height: 0; }