:root {
    --night: #493a5d;
    --night-soft: #675675;
    --ink: #40334d;
    --cream: #fbf6ec;
    --paper: #fffaf2;
    --gold: #d4b45f;
    --gold-light: #f1dc9a;
    --white: #fffdf8;
    --shadow: 0 24px 70px rgba(48, 34, 58, .25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -8%, rgba(241, 220, 154, .32), transparent 34rem),
        radial-gradient(circle at 12% 45%, rgba(178, 145, 190, .26), transparent 30rem),
        radial-gradient(circle at 88% 65%, rgba(211, 181, 117, .17), transparent 28rem),
        linear-gradient(145deg, #463755 0%, #62516f 48%, #51415f 100%);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

[hidden] { display: none !important; }

.stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .75) 55%, transparent 95%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .75) 55%, transparent 95%);
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: rgba(255, 252, 238, .85);
}

.stars::before {
    width: 2px;
    height: 2px;
    box-shadow:
        6vw 12vh rgba(255, 252, 238, .75), 17vw 28vh rgba(241, 220, 154, .55),
        29vw 8vh rgba(255, 255, 255, .65), 41vw 22vh rgba(255, 252, 238, .42),
        54vw 11vh rgba(241, 220, 154, .72), 67vw 31vh rgba(255, 255, 255, .48),
        79vw 16vh rgba(255, 252, 238, .70), 91vw 37vh rgba(241, 220, 154, .45),
        11vw 52vh rgba(255, 255, 255, .38), 24vw 68vh rgba(241, 220, 154, .50),
        37vw 46vh rgba(255, 252, 238, .68), 49vw 73vh rgba(255, 255, 255, .35),
        63vw 57vh rgba(241, 220, 154, .62), 74vw 81vh rgba(255, 252, 238, .40),
        86vw 61vh rgba(255, 255, 255, .58), 96vw 76vh rgba(241, 220, 154, .48);
}

.stars::after {
    width: 1px;
    height: 1px;
    opacity: .7;
    box-shadow:
        3vw 36vh #fff, 9vw 77vh #f1dc9a, 14vw 18vh #fff, 21vw 43vh #fff,
        27vw 86vh #f1dc9a, 34vw 34vh #fff, 39vw 62vh #fff, 46vw 6vh #f1dc9a,
        52vw 39vh #fff, 58vw 88vh #fff, 65vw 19vh #f1dc9a, 71vw 49vh #fff,
        77vw 70vh #fff, 83vw 27vh #f1dc9a, 89vw 90vh #fff, 94vw 53vh #fff;
}

h1,
h2,
p { margin-top: 0; }

h1,
h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    letter-spacing: .015em;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.back-to-site {
    position: absolute;
    top: 24px;
    left: 28px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px solid rgba(241, 220, 154, .45);
    border-radius: 999px;
    background: rgba(255, 253, 248, .09);
    color: rgba(255, 253, 248, .88);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.back-to-site:hover {
    transform: translateY(-2px);
    border-color: var(--gold-light);
    background: rgba(255, 253, 248, .16);
    color: var(--white);
}

.back-to-site span:first-child {
    color: var(--gold-light);
    font-size: 1.15rem;
}

.hero {
    position: relative;
    z-index: 1;
    width: min(900px, calc(100% - 40px));
    margin: 0 auto;
    padding: 72px 0 35px;
    text-align: center;
}

.eyebrow {
    margin-bottom: 12px;
    color: var(--gold-light);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 850px;
    margin: 0 auto 4px;
    color: var(--white);
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    line-height: .96;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}

.hero__subtitle {
    margin-bottom: 22px;
    color: var(--gold-light);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.25rem, 2.4vw, 1.8rem);
    font-style: italic;
}

.gold-divider {
    display: inline-block;
    position: relative;
    width: 170px;
    height: 1px;
    margin: 0 auto 28px;
    background: linear-gradient(90deg, transparent, rgba(241, 220, 154, .85), transparent);
}

.gold-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255, 247, 218, .8);
    background: var(--gold-light);
    box-shadow: 0 0 14px rgba(241, 220, 154, .65);
    transform: translate(-50%, -50%) rotate(45deg);
}

.hero__intro {
    max-width: 670px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .78);
    font-size: .96rem;
    line-height: 1.85;
}

main { position: relative; z-index: 1; }

.oracle {
    width: min(1160px, calc(100% - 32px));
    margin: 0 auto 75px;
}

.draw-stage {
    min-height: 610px;
    padding: 35px 20px 48px;
    overflow: hidden;
    border: 1px solid rgba(235, 208, 139, .5);
    border-radius: 32px;
    background:
        radial-gradient(circle at center 34%, rgba(255, 235, 182, .2), transparent 23rem),
        linear-gradient(145deg, rgba(255, 250, 240, .1), rgba(120, 91, 132, .09));
    box-shadow: 0 28px 75px rgba(39, 27, 48, .28), inset 0 1px rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
}

.card-fan {
    position: relative;
    width: min(650px, 100%);
    height: 390px;
    margin: 0 auto;
    transition: opacity .6s ease, transform .8s ease;
}

.fan-card {
    position: absolute;
    left: calc(50% - 108px);
    bottom: 15px;
    width: 216px;
    aspect-ratio: 3 / 4;
    transform-origin: 50% 115%;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .36));
}

.fan-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.fan-card--1 { transform: rotate(-25deg) translateY(38px); }
.fan-card--2 { transform: rotate(-17deg) translateY(17px); }
.fan-card--3 { transform: rotate(-8deg) translateY(5px); }
.fan-card--4 { transform: rotate(0); z-index: 2; }
.fan-card--5 { transform: rotate(8deg) translateY(5px); }
.fan-card--6 { transform: rotate(17deg) translateY(17px); }
.fan-card--7 { transform: rotate(25deg) translateY(38px); }

.card-fan.is-shuffling .fan-card:nth-child(odd) { animation: shuffle-left .7s ease-in-out infinite alternate; }
.card-fan.is-shuffling .fan-card:nth-child(even) { animation: shuffle-right .65s ease-in-out infinite alternate; }
.card-fan.is-gathering { height: 0; opacity: 0; transform: translateY(-20px) scale(.9); }

@keyframes shuffle-left { to { transform: translate(-20px, -5px) rotate(-4deg); } }
@keyframes shuffle-right { to { transform: translate(20px, 5px) rotate(4deg); } }

.ritual-copy {
    margin-top: 78px;
    text-align: center;
}

.ritual-copy__lead {
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .88);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 13px 26px;
    border-radius: 999px;
    font: 500 .82rem/1 'Montserrat', sans-serif;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s, background .25s;
}

.primary-button {
    border: 1px solid #f5e2aa;
    background: linear-gradient(135deg, #f0d98f, #c59d48);
    box-shadow: 0 12px 35px rgba(202, 162, 76, .34);
    color: #372a45;
}

.secondary-button {
    border: 1px solid rgba(214, 184, 109, .65);
    background: rgba(255, 255, 255, .05);
    color: var(--gold-light);
}

.primary-button:hover,
.secondary-button:hover { transform: translateY(-2px); }
.primary-button:hover { box-shadow: 0 15px 38px rgba(201, 164, 76, .38); }
.primary-button:disabled { opacity: .7; cursor: wait; }

.daily-note {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .55);
    font-size: .73rem;
}

.reveal {
    display: grid;
    grid-template-columns: minmax(260px, 390px) minmax(300px, 470px);
    align-items: center;
    justify-content: center;
    gap: clamp(36px, 7vw, 90px);
    padding: 35px 20px 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s ease, transform .55s ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

.flip-card {
    width: 100%;
    aspect-ratio: 3 / 4;
    perspective: 1400px;
}

.flip-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(.2, .72, .2, 1);
}

.flip-card.is-revealed .flip-card__inner { transform: rotateY(180deg); }

.flip-card__side {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    border: 1px solid rgba(242, 221, 163, .6);
    border-radius: 22px;
    box-shadow: 0 26px 52px rgba(0, 0, 0, .38);
}

.flip-card__front { transform: rotateY(180deg); }
.flip-card__side img { display: block; width: 100%; height: 100%; object-fit: cover; }

.reveal__copy {
    padding: clamp(25px, 4vw, 42px);
    border: 1px solid rgba(241, 220, 154, .35);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255, 253, 248, .13), rgba(255, 255, 255, .055));
    box-shadow: 0 22px 55px rgba(44, 31, 53, .2), inset 0 1px rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
}

.reveal__copy h2 {
    margin-bottom: 15px;
    font-size: clamp(2.15rem, 4vw, 3.45rem);
    line-height: 1.04;
    text-wrap: balance;
}

.card-subtitle {
    margin-bottom: 24px;
    color: #f3dfa5;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-style: italic;
    line-height: 1.45;
}

.return-message {
    max-width: 520px;
    margin-bottom: 28px;
    color: rgba(255, 253, 248, .84);
    font-size: .96rem;
    line-height: 1.8;
}

.status-message { margin: 15px 0 0; text-align: center; }
.status-message.is-error { color: #ffd0c8; }

.reading {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto 80px;
    padding: 60px clamp(18px, 5vw, 60px);
    border: 1px solid rgba(212, 180, 95, .32);
    border-radius: 30px;
    background: radial-gradient(circle at top, rgba(239, 220, 181, .3), transparent 26rem), var(--cream);
    box-shadow: var(--shadow);
    color: var(--ink);
}

.reading__heading { text-align: center; }
.reading__heading .eyebrow { color: #8d6d2d; }

.reading__heading h2 {
    margin-bottom: 8px;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    line-height: 1.05;
}

.reading__pages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(18px, 4vw, 42px);
}

.reading__pages img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(142, 108, 57, .18);
    border-radius: 14px;
    box-shadow: 0 16px 42px rgba(72, 48, 30, .14);
}

.shop-button { width: max-content; margin: 40px auto 0; }

.about {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    width: min(820px, calc(100% - 40px));
    margin: 0 auto 85px;
    padding: 35px 0;
    border-top: 1px solid rgba(214, 184, 109, .28);
    border-bottom: 1px solid rgba(214, 184, 109, .28);
}

.about__symbol { color: var(--gold); font-size: 2rem; }
.about h2 { margin-bottom: 8px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.about p:last-child { margin-bottom: 0; color: rgba(255, 255, 255, .66); line-height: 1.75; }

footer {
    position: relative;
    z-index: 1;
    padding: 30px 20px 40px;
    color: rgba(255, 255, 255, .5);
    font-size: .72rem;
    text-align: center;
}

.footer-note { margin-bottom: 0; }

@media (max-width: 760px) {
    .back-to-site {
        top: 15px;
        left: 15px;
        padding: 9px 13px;
        font-size: .65rem;
    }

    .hero { padding-top: 70px; }
    .hero h1 { font-size: clamp(2.55rem, 14vw, 4rem); }

    .draw-stage {
        min-height: 560px;
        padding-inline: 12px;
        border-radius: 22px;
    }

    .card-fan {
        left: 50%;
        width: 520px;
        height: 350px;
        margin-left: -260px;
        transform: scale(.82);
        transform-origin: center bottom;
    }

    .ritual-copy { margin-top: 58px; }

    .reveal {
        grid-template-columns: 1fr;
        padding-top: 15px;
        text-align: center;
    }

    .flip-card { width: min(310px, 82vw); margin: 0 auto; }

    .reveal__copy {
        max-width: 430px;
        margin: 0 auto;
        padding: 25px 18px;
    }

    .reveal__copy h2 { font-size: clamp(2rem, 10vw, 3rem); }

    .reading { padding: 45px 14px; }
    .reading__pages { grid-template-columns: 1fr; gap: 18px; }
    .about { grid-template-columns: 1fr; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}
/* Ajustements demandés par Marlène-Denise */

.hero__eyebrow {
    margin-bottom: 16px;
    color: var(--gold-light);
    font-size: clamp(0.9rem, 1.5vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.2em;
}

.hero__intro {
    max-width: 800px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1rem, 1.7vw, 1.18rem);
    font-weight: 700;
    line-height: 1.75;
}

.daily-note {
    margin-top: 17px;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    font-weight: 700;
}

.return-message {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.75;
}

footer {
    font-size: clamp(0.82rem, 1.2vw, 0.95rem);
    font-weight: 700;
    line-height: 1.6;
}

.footer-copyright {
    margin-bottom: 5px;
}

.footer-note {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .hero__eyebrow {
        font-size: 0.85rem;
        letter-spacing: 0.14em;
    }

    .hero__intro {
        font-size: 1rem;
        line-height: 1.65;
    }

    .return-message {
        font-size: 0.95rem;
    }
}