/* =========================================================
   FEUILLE DE STYLE - PAGE UNIVERS ASTRAL
   Vient EN PLUS de style.css.
   Aucune regle navbar/menu/icones (deja dans style.css).
========================================================= */

/* =========================================================
   FOND DE TOUTE LA PAGE (image de tarot aux chandelles)
   On utilise un pseudo-element fixe derriere tout le contenu.
   C'est plus fiable que background-attachment: fixed.
========================================================= */
body.page-astral::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* derriere tout le contenu */
    background-image:
        linear-gradient(rgba(20, 15, 22, 0.5), rgba(20, 15, 22, 0.5)),
        url("../img/fond-astral.webp");
    background-size: cover;
    background-position: center;
}

/* Sur la page astral, les sections sombres deviennent
   semi-transparentes pour laisser voir le fond derriere. */
body.page-astral .ciel-horoscope,
body.page-astral .influence-lunaire {
    background-color: rgba(26, 19, 32, 0.75);
}

/* =========================================================
   BANNIERE (fond astral sombre + tirage de tarot)
========================================================= */
.banniere-astral {
    position: relative;
    background:
        linear-gradient(rgba(20, 15, 22, 0.72), rgba(20, 15, 22, 0.82)),
        url("../img/banniere-tarot.webp");
    background-size: cover;
    background-position: center;
    padding: 170px 0 100px 0;
}

.banniere-astral-contenu {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
}

.banniere-astral-contenu h1 {
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 46px;
    letter-spacing: 5px;
    color: var(--blanc-casse);
    margin-bottom: 18px;
}

.citation {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 22px;
    color: var(--texte-clair);
    margin-bottom: 30px;
}

/* =========================================================
   LE BLOC DU RITUEL (grand panneau sombre bordé d'or)
========================================================= */
.bloc-tirage {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(122, 95, 110, 0.35), transparent 60%),
        rgba(21, 16, 26, 0.84);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(201, 168, 106, 0.45);
    border-radius: 20px;
    padding: 50px 40px 60px 40px;
    text-align: center;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        inset 0 0 0 7px rgba(21, 16, 26, 0.6),
        inset 0 0 0 8px rgba(201, 168, 106, 0.18);
}

.titre-tirage {
    font-family: "Cormorant Garamond", serif;
    font-size: 44px;
    color: var(--blanc-casse);
    margin-bottom: 15px;
}

/* Le petit trait décoratif sous le titre */
.trait-deco {
    width: 80px;
    height: 1px;
    background-color: var(--or);
    margin: 0 auto 30px auto;
}

.tirage-consigne {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 22px;
    color: var(--texte-clair);
    min-height: 1.6em;
    margin-bottom: 25px;
}

/* --- Le champ de la question + le bouton --- */
.tirage-question {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.tirage-question input {
    width: min(380px, 100%);
    background-color: rgba(243, 237, 228, 0.06);
    border: 1px solid rgba(201, 168, 106, 0.35);
    border-radius: 999px;
    padding: 13px 22px;
    color: var(--blanc-casse);
    font-family: "Jost", sans-serif;
    font-size: 15px;
    transition: border-color 0.3s ease;
}

.tirage-question input::placeholder {
    color: var(--texte-gris);
}

.tirage-question input:focus {
    outline: none;
    border-color: var(--or-clair);
}

.tirage-question input:disabled {
    opacity: 0.5;
}

/* =========================================================
   LA SCÈNE : le paquet, puis l'éventail
   --l = largeur d'une carte. Les cartes sont toutes posées
   au même endroit, puis déplacées avec --x, --y et --angle
   (calculés par tirage.js).
========================================================= */
.tirage-scene {
    --l: 100px;
    position: relative;
    max-width: 980px;
    height: calc(var(--l) * 1.775 * 1.75 + 40px);
    margin: 0 auto 10px auto;
    transition: height 0.8s ease 0.9s;
}

.tirage-scene .carte-tarot {
    position: absolute;
    top: 30px;
    left: 50%;
    width: var(--l);
    height: calc(var(--l) * 1.775);
    margin-left: calc(var(--l) / -2);
    cursor: pointer;
    transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--angle, 0deg))
        translateY(var(--leve, 0px));
    transition:
        transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.6s ease,
        scale 0.6s ease;
}

/* Le paquet au repos "appelle" doucement */
.tirage-scene:not(.en-choix):not(.rangee) .carte-tarot:last-child .carte-tarot-dos {
    animation: appel 2.4s ease-in-out infinite;
}

/* Dans l'éventail, la carte survolée se soulève et s'illumine */
.tirage-scene.en-choix .carte-tarot:hover,
.tirage-scene.en-choix .carte-tarot:focus-visible {
    --leve: -28px;
}

.tirage-scene.en-choix .carte-tarot:hover .carte-tarot-dos,
.tirage-scene.en-choix .carte-tarot:focus-visible .carte-tarot-dos {
    box-shadow:
        0 0 28px rgba(217, 191, 143, 0.75),
        0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Une fois les 3 cartes choisies, le reste du paquet disparaît */
.tirage-scene.rangee {
    height: 0;
}

.tirage-scene.rangee .carte-tarot {
    opacity: 0;
    scale: 0.8;
    pointer-events: none;
}

@keyframes appel {
    50% {
        box-shadow:
            0 0 30px rgba(217, 191, 143, 0.6),
            0 10px 30px rgba(0, 0, 0, 0.4);
    }
}

/* =========================================================
   LES CARTES DE TAROT (avec retournement flip 3D)
========================================================= */
.carte-tarot-interieur {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1s cubic-bezier(0.3, 1.3, 0.5, 1);
    transform-style: preserve-3d;
}

.carte-tarot.retournee .carte-tarot-interieur {
    transform: rotateY(180deg);
}

.carte-tarot-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    isolation: isolate;
    border-radius: 8px;
    overflow: hidden;
    background-color: #2a1f26;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.3s ease;
}

.carte-tarot-face img,
.arcane-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* L'avant = la carte révélée (tournée de 180deg) */
.carte-tarot-avant {
    transform: rotateY(180deg);
    background-color: #120d15;
}

/* =========================================================
   LES 3 EMPLACEMENTS (Passé, Présent, Futur)
========================================================= */
.tirage-emplacements,
.tirage-lecture {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.tirage-emplacements {
    margin-bottom: 35px;
}

.emplacement {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.emplacement-nom {
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--or-clair);
}

.emplacement-carte {
    position: relative;
    width: min(170px, 100%);
    aspect-ratio: 1 / 1.775;
    border: 1px dashed rgba(201, 168, 106, 0.4);
    border-radius: 10px;
    perspective: 1000px;
    transition: border-color 0.4s ease;
}

.emplacement.rempli .emplacement-carte {
    border-color: transparent;
}

/* La carte posée dans son emplacement : elle s'incline à la souris */
.emplacement-carte .carte-tarot {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.6s ease;
}

.emplacement-carte .carte-tarot.incline {
    transition: transform 0.12s linear;
}

/* Les cartes encore face cachée invitent à être retournées */
.emplacement-carte .carte-tarot.a-retourner:not(.retournee) .carte-tarot-dos {
    animation: appel 2s ease-in-out infinite;
}

/* =========================================================
   L'INTERPRÉTATION DE CHAQUE CARTE
========================================================= */
.lecture-item {
    opacity: 0;
    translate: 0 20px;
    transition:
        opacity 0.8s ease 0.5s,
        translate 0.8s ease 0.5s;
}

.lecture-item.visible {
    opacity: 1;
    translate: 0 0;
}

.lecture-position {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--or);
    margin-bottom: 8px;
}

.lecture-item h3 {
    font-size: 28px;
    color: var(--blanc-casse);
    margin-bottom: 4px;
}

.lecture-mots {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 17px;
    color: var(--or-clair);
    margin-bottom: 10px;
}

.lecture-item p:last-child {
    font-size: 14px;
    line-height: 1.7;
    color: var(--texte-gris);
}

/* =========================================================
   LA SYNTHÈSE FINALE
========================================================= */
.tirage-synthese {
    max-width: 680px;
    margin: 50px auto 0 auto;
    padding-top: 40px;
    border-top: 1px solid rgba(201, 168, 106, 0.3);
    opacity: 0;
    translate: 0 20px;
    transition:
        opacity 0.9s ease,
        translate 0.9s ease;
}

.tirage-synthese.visible {
    opacity: 1;
    translate: 0 0;
}

.synthese-question {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 24px;
    color: var(--blanc-casse);
    margin-bottom: 15px;
}

.synthese-texte {
    font-size: 16px;
    line-height: 1.8;
    color: var(--texte-clair);
    margin-bottom: 15px;
}

.synthese-texte strong {
    font-weight: 500;
    color: var(--or-clair);
}

.synthese-lune {
    font-size: 14px;
    font-style: italic;
    color: var(--texte-gris);
    margin-bottom: 30px;
}

/* =========================================================
   CIEL NATAL + HOROSCOPE (fond sombre)
========================================================= */
.ciel-horoscope {
    background-color: var(--noir);
    padding: 80px 0;
}

.ciel-grille {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: start;
}

/* --- Le ciel natal (gauche) --- */
.ciel-natal h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 36px;
    color: var(--blanc-casse);
    margin-bottom: 35px;
}

.ligne-astre {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 25px;
}

.astre-icone {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background-color: rgba(201, 168, 106, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--or-clair);
    flex-shrink: 0;
}

.astre-icone {
    font-family: "Apple Symbols", "Segoe UI Symbol", serif;
    font-size: 22px;
}

/* --- Le formulaire de naissance --- */
.ciel-intro {
    font-size: 15px;
    color: var(--texte-gris);
    margin: -20px 0 25px 0;
}

.form-natal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 35px;
}

.form-natal label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--texte-gris);
}

.form-natal label span {
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
}

.form-natal input,
.form-natal select {
    background-color: rgba(243, 237, 228, 0.06);
    border: 1px solid rgba(201, 168, 106, 0.3);
    border-radius: 8px;
    padding: 11px 12px;
    color: var(--blanc-casse);
    font-family: "Jost", sans-serif;
    font-size: 15px;
    letter-spacing: 0;
    color-scheme: dark; /* le calendrier et l'horloge en version sombre */
}

.form-natal input:focus,
.form-natal select:focus {
    outline: none;
    border-color: var(--or-clair);
}

.form-large {
    grid-column: 1 / -1;
}

/* --- Le champ ville et sa liste de suggestions --- */
.champ-ville {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.champ-ville label {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--texte-gris);
}

.liste-villes {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
    background-color: #241b29;
    border: 1px solid rgba(201, 168, 106, 0.4);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.liste-villes li {
    padding: 10px 14px;
    font-size: 15px;
    color: var(--texte-clair);
    cursor: pointer;
}

.liste-villes li[aria-selected="true"],
.liste-villes li[role="option"]:hover {
    background-color: rgba(201, 168, 106, 0.18);
    color: var(--blanc-casse);
}

.liste-villes li.aucune {
    font-style: italic;
    color: var(--texte-gris);
    cursor: default;
}

/* Le message d'erreur (vide quand tout va bien) */
.form-erreur {
    font-size: 14px;
    color: #f0b8a8;
}

.form-erreur:empty {
    display: none;
}

.form-natal input[aria-invalid="true"] {
    border-color: #f0b8a8;
}

/* --- La roue du zodiaque (SVG dessiné par astral.js) --- */
.roue-zodiacale {
    width: min(320px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto 10px auto;
}

.roue-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* La roue arrive en tournant à chaque nouveau calcul */
.roue-zodiacale.tourne .roue-svg {
    animation: roue-entree 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes roue-entree {
    from {
        opacity: 0;
        rotate: -120deg;
        scale: 0.8;
    }
}

.secteur {
    cursor: pointer;
    outline: none;
}

.secteur path {
    fill: rgba(201, 168, 106, 0.04);
    stroke: rgba(201, 168, 106, 0.35);
    stroke-width: 0.5;
    transition: fill 0.3s ease;
}

.secteur text {
    fill: var(--or-clair);
    font-family: "Apple Symbols", "Segoe UI Symbol", serif;
    font-size: 11px;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.secteur:hover path,
.secteur:focus-visible path {
    fill: rgba(201, 168, 106, 0.16);
}

.secteur.actif path {
    fill: rgba(201, 168, 106, 0.35);
}

.secteur.actif text {
    fill: var(--blanc-casse);
}

.roue-trait {
    fill: none;
    stroke: rgba(201, 168, 106, 0.35);
    stroke-width: 0.5;
}

.roue-axe {
    stroke: var(--or-clair);
    stroke-width: 0.6;
    stroke-dasharray: 2 2;
}

.roue-asc {
    fill: var(--or-clair);
    font-family: "Jost", sans-serif;
    font-size: 7px;
    letter-spacing: 1px;
    text-anchor: end;
}

.roue-rayon {
    stroke: rgba(243, 237, 228, 0.4);
    stroke-width: 0.5;
}

.roue-astre circle {
    fill: #1a1320;
    stroke: var(--or-clair);
    stroke-width: 0.7;
}

.roue-astre text {
    fill: var(--blanc-casse);
    font-family: "Apple Symbols", "Segoe UI Symbol", serif;
    font-size: 11px;
    text-anchor: middle;
    dominant-baseline: central;
}

.roue-aide {
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: var(--texte-gris);
    margin-bottom: 30px;
}

.astre-label {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--texte-gris);
    margin-bottom: 2px;
}

.astre-valeur {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    color: var(--texte-clair);
}

/* --- L'horoscope (droite, carte claire) --- */
.horoscope {
    background-color: var(--blanc-casse);
    border-radius: 14px;
    padding: 45px;
    color: #3a2c30;
}

.horoscope-date {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--or-fonce);
    margin-bottom: 12px;
}

.horoscope h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 34px;
    color: #2a2028;
    margin-bottom: 4px;
}

.horoscope-signe {
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
    color: var(--violet-mauve);
    margin-bottom: 18px;
}

/* Petit fondu quand on change de signe */
.horoscope.change .horoscope-signe,
.horoscope.change .horoscope-texte,
.horoscope.change .horoscope-encarts {
    animation: monte 0.6s ease backwards;
}

.horoscope-texte {
    font-size: 15px;
    line-height: 1.8;
    color: #5a5048;
    margin-bottom: 30px;
}

.horoscope-encarts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    border-top: 1px solid #e0d6c8;
    padding-top: 25px;
}

.encart-titre {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--or-fonce);
    margin-bottom: 10px;
}

.horoscope-encart p {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 16px;
    color: #5a5048;
    line-height: 1.5;
}

/* =========================================================
   PIERRES POUR LE SIGNE (fond clair)
========================================================= */
.pierres-signe {
    background-color: #f9f1ea;
    padding: 80px 0;
}

.pierres-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.pierres-entete h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 34px;
    color: #2a2028;
}

.voir-collection {
    font-size: 12px;
    letter-spacing: 2px;
    color: #3a2c30;
    border-bottom: 1px solid var(--or);
    padding-bottom: 4px;
}

.voir-collection:hover {
    color: var(--violet-mauve);
}

.grille-pierres-signe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.pierre-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 18px;
}

.pierre-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pierre-carte:hover .pierre-image img {
    transform: scale(1.05);
}

/* Les pierres apparaissent l'une après l'autre quand on change de signe */
.grille-pierres-signe .pierre-carte {
    animation: monte 0.7s ease var(--delai, 0s) backwards;
}

.pierre-carte h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    color: #2a2028;
    margin-bottom: 8px;
}

.pierre-tag {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--or-fonce);
    margin-bottom: 12px;
}

.pierre-carte p {
    font-size: 14px;
    line-height: 1.6;
    color: #6b5f5a;
}

/* =========================================================
   INFLUENCE LUNAIRE (fond sombre + lune lumineuse)
========================================================= */
.influence-lunaire {
    background-color: var(--noir);
    padding: 80px 0;
}

.bloc-lunaire {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

/* Le cadre de la lune (avec double bordure doree fine) */
.lune-cadre {
    position: relative;
    border: 1px solid rgba(201, 168, 106, 0.25);
    border-radius: 12px;
    padding: 50px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
}

/* Le petit badge "LUNE GIBBEUSE" en haut */
.lune-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--beige);
    color: #2a2028;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 6px 16px;
    border-radius: 4px;
}

/* Le halo lumineux autour de la lune (meme effet que l'accueil) */
.lune-halo {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* coupe ce qui dépasse du cercle */
    box-shadow: 0 0 70px 10px rgba(220, 220, 235, 0.35);
    animation: pulse-lune 5s ease-in-out infinite;
}

/* La lune grossit et retrecit doucement (l'effet "qui grossit") */
@keyframes pulse-lune {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

.lune-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* --- Le texte a droite --- */
.lunaire-texte h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 36px;
    color: var(--blanc-casse);
    margin-bottom: 20px;
}

.lunaire-texte p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--texte-gris);
    margin-bottom: 35px;
}

.lunaire-stats {
    display: flex;
    gap: 50px;
    border-top: 1px solid rgba(201, 168, 106, 0.2);
    padding-top: 25px;
}

.stat-label {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--texte-gris);
    margin-bottom: 6px;
}

.stat-valeur {
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
    color: var(--or-clair);
}

.prochaines-lunes {
    margin-top: 25px;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--texte-gris);
}

/* =========================================================
   RESPONSIVE (telephones)
========================================================= */
@media (max-width: 900px) {
    .ciel-grille,
    .bloc-lunaire {
        grid-template-columns: 1fr;
    }

    .horoscope-encarts,
    .grille-pierres-signe {
        grid-template-columns: 1fr;
    }

    .pierres-entete {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .banniere-astral-contenu h1 {
        font-size: 32px;
    }

    .banniere-astral {
        padding-top: 218px;
    }

    .lunaire-stats {
        gap: 30px;
        flex-wrap: wrap;
    }

    .bloc-tirage {
        padding: 40px 16px 45px 16px;
    }

    .titre-tirage {
        font-size: 34px;
    }

    .tirage-scene {
        --l: 58px;
    }

    .tirage-emplacements {
        gap: 10px;
    }

    .emplacement-nom {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .tirage-lecture {
        grid-template-columns: 1fr;
    }

    .form-natal {
        grid-template-columns: 1fr;
    }

    .horoscope {
        padding: 30px 24px;
    }
}