/* ============================================================
 * Uni-Vers la Spiritualité — Enhancements
 * Tarot multi-tirages · Horoscope · Numérologie · Méditation
 * Curseur mystique · Parallax
 * ============================================================ */

/* === SECTION GENERIQUE === */
.uvs-feature {
    padding: var(--sp-9) 0;
    position: relative;
}
.uvs-feature .section-heading { margin-bottom: var(--sp-7); }

/* ===========================
   TAROT — Tirages multiples
   =========================== */
.tarot-section { padding: var(--sp-9) 0; position: relative; }

.tarot-spreads {
    display: flex; justify-content: center; gap: var(--sp-3);
    margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.tarot-spread-btn {
    padding: 10px 22px; border-radius: 999px;
    border: 1px solid var(--c-border-soft);
    color: var(--c-text-dim); font-family: var(--ff-body);
    letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem;
    transition: all .3s var(--ease); background: rgba(11, 4, 32, 0.3);
}
.tarot-spread-btn:hover { color: var(--c-gold); border-color: var(--c-gold); }
.tarot-spread-btn.is-active { background: var(--c-gold); color: var(--c-night); border-color: var(--c-gold); }

.tarot-question-wrap {
    max-width: 640px; margin: 0 auto var(--sp-5);
    text-align: center;
}
.tarot-question {
    width: 100%; padding: 14px 22px;
    background: rgba(11, 4, 32, 0.5);
    border: 1px solid var(--c-border-soft); border-radius: 999px;
    color: var(--c-text); font-family: var(--ff-serif); font-style: italic;
    font-size: 1.05rem; transition: border-color .25s var(--ease);
}
.tarot-question::placeholder { color: var(--c-text-muted); font-style: italic; }
.tarot-question:focus { border-color: var(--c-gold); outline: none; }

.tarot-display {
    display: flex; justify-content: center; align-items: flex-start;
    gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
    perspective: 1400px;
}

.tarot-card {
    width: 200px; flex: 0 0 200px;
    display: flex; flex-direction: column; gap: var(--sp-3);
    opacity: 0; transform: translateY(20px);
    animation: tarotAppear .5s var(--ease) forwards;
    animation-delay: calc(var(--idx, 0) * 0.08s);
}
@keyframes tarotAppear { to { opacity: 1; transform: translateY(0); } }

.tarot-card-inner {
    position: relative; width: 100%; height: 320px;
    transform-style: preserve-3d;
    transition: transform 1.1s cubic-bezier(.45, 1.5, .4, 1);
}
.tarot-card.is-flipped .tarot-card-inner { transform: rotateY(180deg); }
.tarot-card.is-reversed.is-flipped .tarot-card-inner { transform: rotateY(180deg) rotate(180deg); }

.tarot-face {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--sp-4); text-align: center;
}
.tarot-back {
    background: radial-gradient(circle at center, var(--c-violet) 0%, var(--c-deep-purple) 70%);
    border: 2px solid var(--c-gold);
    box-shadow: var(--shadow-card), inset 0 0 25px rgba(212,175,55,.15);
}
.tarot-back::before {
    content: ''; position: absolute; inset: 10px;
    border: 1px dashed rgba(212, 175, 55, 0.45); border-radius: var(--radius);
}
.tarot-back-art { font-size: 3.5rem; color: var(--c-gold); animation: pulse 3s ease-in-out infinite; }

.tarot-front {
    background: linear-gradient(180deg, #1a0b2e 0%, #2d1854 100%);
    border: 2px solid var(--c-gold);
    transform: rotateY(180deg);
    box-shadow: var(--shadow-card), inset 0 0 25px rgba(212,175,55,.1);
    gap: var(--sp-2);
}
.tarot-front-glyph { font-size: 3.5rem; color: var(--c-gold); }
.tarot-front-name { font-family: var(--ff-display); font-size: 1rem; color: var(--c-light); letter-spacing: 0.05em; }
.tarot-front-pos {
    font-family: var(--ff-serif); font-style: italic; font-size: 0.85rem;
    color: var(--c-gold-soft); margin-top: var(--sp-2);
    padding-top: var(--sp-2); border-top: 1px solid rgba(212, 175, 55, 0.25);
    width: 80%;
}

.tarot-card-meaning {
    font-family: var(--ff-serif); font-size: 0.92rem;
    color: var(--c-text-dim); text-align: center; line-height: 1.5;
    min-height: 3.5em;
}

.tarot-actions {
    display: flex; justify-content: center; gap: var(--sp-3);
    margin-bottom: var(--sp-6); flex-wrap: wrap;
}

.tarot-interpretation { max-width: 760px; margin: var(--sp-6) auto 0; }
.tarot-interp-ai, .tarot-interp-static {
    padding: var(--sp-6);
    background: var(--c-card-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-card);
    animation: tarotAppear .6s var(--ease);
}
.tarot-interp-ai h3, .tarot-interp-static h3 {
    font-family: var(--ff-display); color: var(--c-gold-soft);
    font-size: 1.3rem; margin: 0 0 var(--sp-4);
    text-align: center; letter-spacing: 0.1em;
}
.tarot-interp-ai p, .tarot-interp-static p {
    font-family: var(--ff-serif); font-size: 1.1rem;
    color: var(--c-text); line-height: 1.75; margin: 0 0 var(--sp-3);
}
.tarot-interp-loading {
    text-align: center; padding: var(--sp-6);
    color: var(--c-text-dim); font-family: var(--ff-serif); font-style: italic;
}

/* === PARTAGE DU TIRAGE === */
.tarot-share-actions {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--sp-3); margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-border-soft);
}
.tarot-share-actions .btn {
    padding: 10px 22px; font-size: 0.85rem;
    display: inline-flex; align-items: center; gap: var(--sp-2);
}
.tarot-share-actions .share-icon {
    font-size: 1.1rem; line-height: 1;
    color: var(--c-gold);
}

/* Boutons réseaux sociaux */
.tarot-share-socials {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--sp-2); margin-top: var(--sp-4);
}
.tarot-social-btn {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--c-border-soft); border-radius: 50%;
    background: rgba(11, 4, 32, 0.4); color: var(--c-text-dim);
    cursor: pointer; transition: all .3s var(--ease);
    padding: 0;
}
.tarot-social-btn:hover {
    border-color: var(--c-gold); color: var(--c-gold);
    transform: translateY(-3px); box-shadow: var(--shadow-gold);
}
.tarot-social-facebook:hover  { color: #1877f2; border-color: #1877f2; box-shadow: 0 0 24px rgba(24,119,242,.45); }
.tarot-social-x:hover         { color: #e7e9ea; border-color: #e7e9ea; box-shadow: 0 0 24px rgba(231,233,234,.35); }
.tarot-social-whatsapp:hover  { color: #25d366; border-color: #25d366; box-shadow: 0 0 24px rgba(37,211,102,.45); }
.tarot-social-telegram:hover  { color: #29b6f6; border-color: #29b6f6; box-shadow: 0 0 24px rgba(41,182,246,.45); }
.tarot-social-pinterest:hover { color: #e60023; border-color: #e60023; box-shadow: 0 0 24px rgba(230,0,35,.45); }
.tarot-social-linkedin:hover  { color: #0a66c2; border-color: #0a66c2; box-shadow: 0 0 24px rgba(10,102,194,.45); }
.tarot-social-instagram:hover { color: #e4405f; border-color: #e4405f; box-shadow: 0 0 24px rgba(228,64,95,.45); }

.tarot-instagram-hint {
    margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
    background: rgba(228, 64, 95, 0.12);
    border: 1px solid rgba(228, 64, 95, 0.4); border-radius: var(--radius);
    color: var(--c-text); font-family: var(--ff-serif); font-size: 0.95rem;
    text-align: center;
    opacity: 0; transform: translateY(8px); transition: all .35s var(--ease);
}
.tarot-instagram-hint.show { opacity: 1; transform: translateY(0); }

/* === SAINT DU JOUR — version riche === */
.saint-widget {
    margin-top: var(--sp-5);
    background: var(--c-card-bg);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    backdrop-filter: blur(10px);
    transition: all .4s var(--ease);
}
.saint-widget:hover { border-color: var(--c-border); box-shadow: var(--shadow-card); }

.saint-header {
    display: flex; align-items: center; gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-border-soft);
}
.saint-header .saint-glyph {
    width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.8rem; color: var(--c-gold);
    background: radial-gradient(circle at 35% 30%, rgba(245, 230, 200, 0.25), rgba(212, 175, 55, 0.15) 50%, rgba(74, 29, 110, 0.4) 100%);
    border: 1px solid var(--c-gold);
    box-shadow: inset 0 0 18px rgba(212, 175, 55, 0.15), 0 0 24px rgba(212, 175, 55, 0.25);
    position: relative;
}
.saint-header .saint-glyph::before {
    content: ''; position: absolute; inset: 6px;
    border: 1px dashed rgba(212, 175, 55, 0.4); border-radius: 50%;
}
.saint-date {
    font-size: 0.85rem; color: var(--c-text-muted);
    letter-spacing: 0.08em; margin: 0 0 4px;
    text-transform: capitalize;
}
.saint-name {
    font-family: var(--ff-display); font-size: 1.4rem;
    color: var(--c-light); line-height: 1.25; margin: 0;
    letter-spacing: 0.03em;
}

.saint-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--sp-6);
    align-items: start;
}
.saint-widget:not(.has-image) .saint-body {
    grid-template-columns: 1fr;
}

.saint-figure {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--c-gold);
    box-shadow: var(--shadow-card), 0 0 25px rgba(212, 175, 55, 0.18);
    background: linear-gradient(180deg, #1a0b2e, #2d1854);
    position: relative;
}
.saint-figure::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(74, 29, 110, 0.0) 60%, rgba(74, 29, 110, 0.4) 100%);
    pointer-events: none;
}
.saint-figure img {
    width: 100%; height: auto; display: block;
    aspect-ratio: auto;
    /* Léger filtre pour harmoniser avec le thème mystique */
    filter: saturate(0.92) contrast(1.02);
}

.saint-text {
    font-family: var(--ff-serif);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--c-text);
}
.saint-text p {
    margin: 0 0 var(--sp-4);
}
.saint-text p:last-child { margin-bottom: 0; }
.saint-text p:first-child::first-letter {
    font-family: var(--ff-display);
    font-size: 2.6em;
    line-height: 0.9;
    float: left;
    color: var(--c-gold);
    padding: 4px 8px 0 0;
    font-weight: 500;
}

.saint-source {
    margin-top: var(--sp-5) !important;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border-soft);
    text-align: right;
    font-size: 0.9rem;
}
.saint-link {
    color: var(--c-gold); font-weight: 500;
    letter-spacing: 0.06em;
    transition: color .25s var(--ease);
}
.saint-link:hover { color: var(--c-gold-soft); }

@media (max-width: 820px) {
    .saint-body {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
    .saint-figure {
        max-width: 260px;
        margin: 0 auto;
    }
    .saint-header { flex-direction: column; text-align: center; }
}

/* === CTA CARTOMANCIE — bloc permanent sous Tarot === */
.tarot-cta {
    padding: var(--sp-6) 0 var(--sp-8);
    position: relative;
}
.tarot-cta-inner {
    max-width: 760px; margin: 0 auto;
    text-align: center;
    padding: var(--sp-7) var(--sp-6);
    background:
        radial-gradient(ellipse at top, rgba(212, 175, 55, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(45, 24, 84, 0.6), rgba(26, 11, 46, 0.7));
    border: 1px solid var(--c-gold);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-gold);
}
.tarot-cta-inner::before {
    content: ''; position: absolute; inset: 8px;
    border: 1px dashed rgba(212, 175, 55, 0.35);
    border-radius: calc(var(--radius-lg) - 6px);
    pointer-events: none;
}
.tarot-cta-inner::after {
    content: '✦'; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    color: var(--c-gold); font-size: 1.2rem; opacity: 0.55;
    animation: pulse 3s ease-in-out infinite;
}
.tarot-cta-eyebrow {
    display: inline-block;
    font-family: var(--ff-serif); font-style: italic;
    font-size: 1.05rem; color: var(--c-gold);
    letter-spacing: 0.2em; margin-bottom: var(--sp-3);
    position: relative;
}
.tarot-cta-title {
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--c-light);
    margin: 0 0 var(--sp-3);
    letter-spacing: 0.03em;
    position: relative;
}
.tarot-cta-text {
    font-family: var(--ff-serif);
    font-size: 1.15rem; color: var(--c-text-dim);
    margin: 0 auto var(--sp-5); max-width: 580px;
    line-height: 1.7; position: relative;
}
.tarot-cta-button {
    position: relative;
    gap: var(--sp-3);
}
.tarot-cta-arrow {
    transition: transform .3s var(--ease);
    display: inline-block;
}
.tarot-cta-button:hover .tarot-cta-arrow {
    transform: translateX(6px);
}
.spinner-mystic {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid var(--c-border-soft);
    border-top-color: var(--c-gold);
    border-radius: 50%; animation: rotate-spinner 1s linear infinite;
    vertical-align: middle; margin-right: var(--sp-2);
}
@keyframes rotate-spinner { to { transform: rotate(360deg); } }

/* ===========================
   HOROSCOPE
   =========================== */
.horoscope-section { padding: var(--sp-9) 0; }
.horoscope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-3);
    max-width: 1100px; margin: 0 auto var(--sp-6);
}
.horoscope-sign {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: var(--sp-4) var(--sp-3);
    background: var(--c-card-bg); border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    color: var(--c-text); transition: all .3s var(--ease);
    cursor: pointer;
}
.horoscope-sign:hover { transform: translateY(-4px); border-color: var(--c-gold); }
.horoscope-sign.is-active { background: var(--c-card-bg-hover); border-color: var(--c-gold); box-shadow: var(--shadow-gold); }
.horoscope-glyph {
    font-size: 2.2rem; color: var(--c-gold);
    transition: transform .4s var(--ease);
}
.horoscope-sign:hover .horoscope-glyph { transform: rotate(15deg); }
.horoscope-glyph[data-el="feu"]   { color: #ff8a4c; text-shadow: 0 0 18px rgba(255, 138, 76, 0.5); }
.horoscope-glyph[data-el="terre"] { color: #95a96a; text-shadow: 0 0 18px rgba(149, 169, 106, 0.5); }
.horoscope-glyph[data-el="air"]   { color: #c084fc; text-shadow: 0 0 18px rgba(192, 132, 252, 0.5); }
.horoscope-glyph[data-el="eau"]   { color: #6ec1e4; text-shadow: 0 0 18px rgba(110, 193, 228, 0.5); }
.horoscope-name { font-family: var(--ff-display); font-size: 0.95rem; color: var(--c-light); letter-spacing: 0.05em; }
.horoscope-dates { font-family: var(--ff-serif); font-style: italic; font-size: 0.78rem; color: var(--c-text-muted); text-align: center; }

.horoscope-detail {
    max-width: 760px; margin: 0 auto;
    background: var(--c-card-bg); border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg); padding: var(--sp-6);
    opacity: 0; transform: translateY(20px); pointer-events: none;
    transition: all .5s var(--ease);
}
.horoscope-detail.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; border-color: var(--c-gold); }
.horoscope-detail-inner { text-align: left; }
.horoscope-detail-header {
    display: flex; align-items: center; gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-border-soft);
    margin-bottom: var(--sp-5);
}
.horoscope-detail-glyph { font-size: 4rem; margin: 0; line-height: 1; flex-shrink: 0; }
.horoscope-detail-name { font-family: var(--ff-display); font-size: 1.8rem; color: var(--c-light); margin: 0 0 var(--sp-2); }
.horoscope-detail-dates { font-family: var(--ff-serif); font-style: italic; color: var(--c-gold-soft); margin: 0; font-size: 0.95rem; text-transform: capitalize; }
.horoscope-detail-msg { font-family: var(--ff-serif); font-size: 1.15rem; color: var(--c-text); line-height: 1.7; margin: 0; }

.horoscope-sections {
    display: flex; flex-direction: column; gap: var(--sp-4);
}
.horoscope-section-row {
    display: flex; gap: var(--sp-4); align-items: flex-start;
    padding: var(--sp-3) 0;
}
.horoscope-section-row + .horoscope-section-row {
    border-top: 1px dashed rgba(212, 175, 55, 0.18);
}
.horoscope-section-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 1.2rem; color: var(--c-gold);
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.15), rgba(74, 29, 110, 0.3));
    border: 1px solid var(--c-gold);
    border-radius: 50%;
    line-height: 1;
}
.horoscope-section-content { flex: 1; min-width: 0; }
.horoscope-section-label {
    font-family: var(--ff-display); font-size: 0.85rem;
    color: var(--c-gold); letter-spacing: 0.12em;
    text-transform: uppercase; margin: 0 0 6px;
}
.horoscope-section-text {
    font-family: var(--ff-serif); font-size: 1.05rem;
    color: var(--c-text); line-height: 1.65; margin: 0;
}

.horoscope-lucky {
    display: flex; gap: var(--sp-4); justify-content: center;
    margin-top: var(--sp-5); padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border-soft);
    flex-wrap: wrap;
}
.lucky-item {
    text-align: center; padding: var(--sp-3) var(--sp-5);
    background: rgba(11, 4, 32, 0.4);
    border: 1px solid var(--c-gold);
    border-radius: var(--radius);
    min-width: 140px;
}
.lucky-label {
    display: block;
    font-family: var(--ff-serif); font-style: italic;
    font-size: 0.8rem; color: var(--c-text-muted);
    letter-spacing: 0.08em; margin-bottom: 6px;
}
.lucky-value {
    display: block;
    font-family: var(--ff-display);
    font-size: 1.5rem; color: var(--c-gold);
    text-transform: capitalize;
}
.horoscope-loading {
    text-align: center; padding: var(--sp-5);
    color: var(--c-text-dim); font-family: var(--ff-serif); font-style: italic;
}
@media (max-width: 540px) {
    .horoscope-detail-header { flex-direction: column; text-align: center; }
    .horoscope-section-row { flex-direction: column; align-items: center; text-align: center; }
}

/* === PARTAGE DE L'HOROSCOPE === */
.horo-share-actions {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--sp-3); margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-border-soft);
}
.horo-share-actions .btn {
    padding: 10px 22px; font-size: 0.85rem;
    display: inline-flex; align-items: center; gap: var(--sp-2);
}
.horo-share-actions .horo-share-icon {
    font-size: 1.1rem; line-height: 1;
    color: var(--c-gold);
}

/* Boutons réseaux sociaux horoscope */
.horo-share-socials {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--sp-2); margin-top: var(--sp-4);
}
.horo-social-btn {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--c-border-soft); border-radius: 50%;
    background: rgba(11, 4, 32, 0.4); color: var(--c-text-dim);
    cursor: pointer; transition: all .3s var(--ease);
    padding: 0;
}
.horo-social-btn:hover {
    border-color: var(--c-gold); color: var(--c-gold);
    transform: translateY(-3px); box-shadow: var(--shadow-gold);
}
.horo-social-facebook:hover  { color: #1877f2; border-color: #1877f2; box-shadow: 0 0 24px rgba(24,119,242,.45); }
.horo-social-x:hover         { color: #e7e9ea; border-color: #e7e9ea; box-shadow: 0 0 24px rgba(231,233,234,.35); }
.horo-social-whatsapp:hover  { color: #25d366; border-color: #25d366; box-shadow: 0 0 24px rgba(37,211,102,.45); }
.horo-social-telegram:hover  { color: #29b6f6; border-color: #29b6f6; box-shadow: 0 0 24px rgba(41,182,246,.45); }
.horo-social-pinterest:hover { color: #e60023; border-color: #e60023; box-shadow: 0 0 24px rgba(230,0,35,.45); }
.horo-social-linkedin:hover  { color: #0a66c2; border-color: #0a66c2; box-shadow: 0 0 24px rgba(10,102,194,.45); }
.horo-social-instagram:hover { color: #e4405f; border-color: #e4405f; box-shadow: 0 0 24px rgba(228,64,95,.45); }

.horo-instagram-hint {
    margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
    background: rgba(228, 64, 95, 0.12);
    border: 1px solid rgba(228, 64, 95, 0.4); border-radius: var(--radius);
    color: var(--c-text); font-family: var(--ff-serif); font-size: 0.95rem;
    text-align: center;
    opacity: 0; transform: translateY(8px); transition: all .35s var(--ease);
}
.horo-instagram-hint.show { opacity: 1; transform: translateY(0); }

/* ===========================
   NUMEROLOGIE
   =========================== */
.numerology-section { padding: var(--sp-9) 0; }
.numerology-form {
    max-width: 480px; margin: 0 auto;
    display: flex; flex-direction: column; gap: var(--sp-3);
    background: var(--c-card-bg); border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg); padding: var(--sp-6);
    text-align: center;
}
.numerology-form label {
    font-family: var(--ff-serif); font-style: italic; color: var(--c-text-dim);
    font-size: 1.05rem;
}
.numerology-form input[type="date"] {
    padding: 14px 22px; background: rgba(11, 4, 32, 0.5);
    border: 1px solid var(--c-border-soft); border-radius: 999px;
    color: var(--c-text); font-family: var(--ff-body); font-size: 1rem;
    transition: border-color .25s var(--ease);
    color-scheme: dark;
}
.numerology-form input[type="date"]:focus { border-color: var(--c-gold); outline: none; }

.numerology-result {
    max-width: 480px; margin: var(--sp-5) auto 0;
    opacity: 0; transform: translateY(20px); transition: all .5s var(--ease);
}
.numerology-result.is-active { opacity: 1; transform: translateY(0); }
.numerology-card {
    background: linear-gradient(180deg, var(--c-deep-purple), var(--c-royal));
    border: 2px solid var(--c-gold);
    border-radius: var(--radius-lg); padding: var(--sp-6);
    text-align: center; box-shadow: var(--shadow-gold);
    position: relative; overflow: hidden;
}
.numerology-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.15), transparent 65%);
}
.numerology-number {
    font-family: var(--ff-display); font-size: 5rem; line-height: 1;
    color: var(--c-gold); margin-bottom: var(--sp-3);
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
    position: relative;
}
.numerology-title { font-family: var(--ff-display); font-size: 1.6rem; color: var(--c-light); margin: 0 0 var(--sp-3); position: relative; }
.numerology-text { font-family: var(--ff-serif); font-size: 1.1rem; color: var(--c-text); line-height: 1.7; margin: 0 0 var(--sp-3); position: relative; }
.numerology-meta { color: var(--c-text-dim); font-size: 0.95rem; margin: 0; position: relative; }

/* ===========================
   MEDITATION
   =========================== */
.meditation-section { padding: var(--sp-9) 0; }
.meditation-card {
    max-width: 720px; margin: 0 auto;
    background: var(--c-card-bg); border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg); padding: var(--sp-7);
    text-align: center; backdrop-filter: blur(10px);
}
.meditation-timer {
    font-family: var(--ff-display); font-size: 5rem; line-height: 1;
    color: var(--c-gold); margin-bottom: var(--sp-5);
    letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
    transition: color .4s var(--ease);
}
.meditation-section.is-running .meditation-timer,
[data-uvs-meditation].is-running .meditation-timer {
    color: var(--c-amethyst-soft);
    text-shadow: 0 0 40px rgba(157, 78, 221, 0.6);
    animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.05); opacity: 0.85; }
}

.meditation-durations, .meditation-sounds {
    display: flex; justify-content: center; gap: var(--sp-2);
    margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.meditation-durations button, .meditation-sounds button {
    padding: 8px 18px; border-radius: 999px;
    border: 1px solid var(--c-border-soft);
    color: var(--c-text-dim); font-family: var(--ff-body);
    font-size: 0.85rem; letter-spacing: 0.05em;
    background: rgba(11, 4, 32, 0.4); transition: all .3s var(--ease);
}
.meditation-durations button:hover, .meditation-sounds button:hover { color: var(--c-gold); border-color: var(--c-gold); }
.meditation-durations button.is-active { background: var(--c-gold); color: var(--c-night); border-color: var(--c-gold); }
.meditation-sounds button.is-active {
    background: var(--c-amethyst); color: var(--c-light); border-color: var(--c-amethyst);
    box-shadow: 0 0 25px rgba(157, 78, 221, 0.5);
}

.meditation-section-label {
    font-family: var(--ff-serif); font-style: italic; color: var(--c-text-muted);
    font-size: 0.95rem; margin-bottom: var(--sp-2);
}
.meditation-actions { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }

/* ===========================
   CURSEUR MYSTIQUE
   =========================== */
.uvs-cursor-layer {
    position: fixed; inset: 0; z-index: 9999;
    pointer-events: none; overflow: hidden;
}
.uvs-cursor-star {
    position: absolute; width: var(--s); height: var(--s);
    border-radius: 50%; opacity: 0.9;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px currentColor;
    animation: cursorFade 1.1s ease-out forwards;
}
@keyframes cursorFade {
    0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;   transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); }
}
@media (prefers-reduced-motion: reduce), (hover: none) {
    .uvs-cursor-layer { display: none; }
}

/* ===========================
   ANIMATIONS REVEAL (scroll)
   =========================== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 820px) {
    .tarot-card { width: 160px; flex-basis: 160px; }
    .tarot-card-inner { height: 256px; }
    .tarot-front-glyph, .tarot-back-art { font-size: 2.8rem; }
    .meditation-timer { font-size: 3.5rem; }
}
@media (max-width: 540px) {
    .tarot-display { gap: var(--sp-3); }
    .tarot-card { width: 130px; flex-basis: 130px; }
    .tarot-card-inner { height: 210px; }
    .horoscope-grid { grid-template-columns: repeat(3, 1fr); }
}