/* =========================================================
   FEUILLE DE STYLE PRINCIPALE - SITE LUNEA
   Ce fichier est chargé sur TOUTES les pages.
   Il contient : la navbar, le footer, et la page d'accueil.
========================================================= */

/* =========================================================
   VARIABLES DE COULEURS
========================================================= */
:root {
    --noir: #1a1320;
    --violet-fonce: #2a2230;
    --violet-mauve: #6b5772;
    --fond-rose: #8a6e78;
    --or: #c9a86a;
    --or-clair: #d9bf8f;
    --beige: #d6b87a;
    --blanc-casse: #f3ede4;
    --texte-clair: #e8e0d8;
    --texte-gris: #b3a8a0;
    --lila: #b487bc;
    /* Or plus foncé, pour le texte doré sur fond clair (contraste suffisant) */
    --or-fonce: #7d5f26;
}

/* =========================================================
   REMISE A ZERO DE BASE
========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Jost", sans-serif;
    background-color: var(--fond-rose);
    color: var(--texte-clair);
    line-height: 1.6;
}

html {
    scroll-behavior: smooth;
}

/* Les ancres (#tirage, #fiche...) ne passent pas sous la navbar fixe */
[id] {
    scroll-margin-top: 80px;
}

/* Fondu enchaîné quand on passe d'une page à l'autre (navigateurs récents) */
@view-transition {
    navigation: auto;
}

/* Le contour visible quand on navigue au clavier */
:focus-visible {
    outline: 1px solid var(--or-clair);
    outline-offset: 4px;
}

/* Caché à l'écran mais lu par les lecteurs d'écran */
.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

h1,
h2,
h3 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
}

img {
    display: block;
    width: 100%;
    height: auto; /* garde les proportions malgré les attributs width/height */
}

a {
    text-decoration: none;
    color: inherit;
}

.conteneur {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================================
   BARRE DE NAVIGATION (en haut, commune à toutes les pages)
========================================================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 50px;
    transition:
        background-color 0.4s ease,
        padding 0.4s ease,
        box-shadow 0.4s ease;
}

/* Quand on a défilé : fond sombre flouté (classe ajoutée par commun.js) */
.navbar.defile {
    background-color: rgba(26, 19, 32, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 14px 50px;
    box-shadow: 0 1px 0 rgba(201, 168, 106, 0.2);
}

.logo img {
    height: 100px;
    width: auto;
    transition: height 0.4s ease;
}

/* La barre se compacte au défilement : le logo aussi */
.navbar.defile .logo img {
    height: 72px;
}

.menu {
    display: flex;
    gap: 40px;
    list-style: none;
}

.menu a {
    font-size: 15px;
    color: var(--texte-clair);
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

.menu a.actif {
    border-bottom: 1px solid var(--or-clair);
}

.menu a:hover {
    color: var(--or-clair);
}

.icones {
    display: flex;
    align-items: center;
    gap: 24px;
}

.icone {
    color: var(--texte-clair);
    display: flex;
}

.icone svg {
    width: 22px;
    height: 22px;
}

.icone:hover {
    color: var(--or-clair);
}

/* --- Le bouton du son : 4 petites barres d'égaliseur --- */
.bouton-son {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    color: var(--texte-clair);
    cursor: pointer;
    transition: color 0.3s ease;
}

.bouton-son:hover {
    color: var(--or-clair);
}

.bouton-son-onde {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
}

.bouton-son-onde span {
    width: 2px;
    height: 6px;
    border-radius: 1px;
    background-color: currentColor;
}

/* Son coupé : les barres sont basses et barrées d'un trait */
.bouton-son[aria-pressed="false"] .bouton-son-onde {
    position: relative;
    opacity: 0.6;
}

.bouton-son[aria-pressed="false"] .bouton-son-onde span {
    height: 3px;
}

.bouton-son[aria-pressed="false"] .bouton-son-onde::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    top: 50%;
    height: 1px;
    background-color: currentColor;
    transform: rotate(-35deg);
}

/* La musique joue : les barres dansent, chacune à son rythme */
.bouton-son.joue {
    color: var(--or-clair);
}

.bouton-son.joue .bouton-son-onde span {
    animation: onde 1.1s ease-in-out infinite;
}

.bouton-son.joue .bouton-son-onde span:nth-child(2) {
    animation-delay: -0.3s;
}

.bouton-son.joue .bouton-son-onde span:nth-child(3) {
    animation-delay: -0.6s;
}

.bouton-son.joue .bouton-son-onde span:nth-child(4) {
    animation-delay: -0.9s;
}

@keyframes onde {
    50% {
        height: 16px;
    }
}

/* --- Le compteur du panier (petit badge doré) --- */
.icone-panier {
    position: relative; /* pour placer le badge par rapport à l'icône */
}

.panier-compteur {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--or);
    color: #2a2028;
    font-size: 11px;
    font-weight: 500;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    /* Caché au départ : on le fait apparaître avec le JS */
    transform: scale(0);
    transition: transform 0.25s ease;
}

/* Quand le panier contient au moins 1 article, on affiche le badge */
.panier-compteur.visible {
    transform: scale(1);
}

/* La petite animation "pop" jouée à chaque ajout */
.panier-compteur.pop {
    animation: pop-badge 0.35s ease;
}

@keyframes pop-badge {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

/* Petit rebond de l'icône panier elle-même à l'ajout */
.icone-panier.secoue svg {
    animation: secoue-panier 0.4s ease;
}

@keyframes secoue-panier {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
    }
}

/* =========================================================
   SECTION HERO (accueil)
========================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    /* Un voile sombre PAR-DESSUS la photo de l'autel de tarot,
     pour que le texte blanc et les cartes restent bien lisibles. */
    background:
        linear-gradient(rgba(20, 15, 22, 0.6), rgba(20, 15, 22, 0.7)),
        url("../img/fond-accueil.webp");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 100px 20px;
}

.lune-hero {
    font-size: 50px;
    color: var(--or);
    margin-bottom: 10px;
}

.hero h1 {
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 52px;
    letter-spacing: 4px;
    color: var(--blanc-casse);
    margin-bottom: 15px;
}

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

/* =========================================================
   LES CARTES DU MANTRA (accueil)
   Chaque carte est faite de 3 "étages" :
   - .carte : l'arrivée animée + l'inclinaison 3D à la souris
   - .carte-interieur : le flottement + le retournement (flip)
   - .carte-face : les deux faces (dos et mantra)
========================================================= */
.cartes {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    perspective: 1200px;
}

.carte {
    position: relative;
    width: 230px;
    height: 420px;
    cursor: pointer;
    transform-style: preserve-3d;
    /* --rx et --ry sont données par commun.js quand la souris bouge */
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition:
        transform 0.6s ease,
        opacity 0.6s ease,
        scale 0.6s ease;
    /* Les cartes arrivent l'une après l'autre (--i = 0, 1, 2) */
    animation: distribution 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: calc(var(--i) * 0.18s + 0.3s);
}

.carte.incline {
    transition:
        transform 0.12s linear,
        opacity 0.6s ease,
        scale 0.6s ease;
}

@keyframes distribution {
    from {
        opacity: 0;
        translate: 0 140px;
        rotate: calc((var(--i) - 1) * -14deg);
    }
}

.carte-interieur {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1s cubic-bezier(0.3, 1.4, 0.5, 1);
    transform-style: preserve-3d;
    /* Le flottement doux, décalé pour chaque carte */
    animation: flotte 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -2s);
}

@keyframes flotte {
    50% {
        translate: 0 -12px;
    }
}

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

/* La carte choisie grandit, les deux autres s'effacent */
.carte.elue {
    scale: 1.08;
}

.carte.ecartee {
    opacity: 0.25;
    scale: 0.9;
    pointer-events: none;
}

.carte-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    isolation: isolate;
    border: 2px solid var(--or);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
    box-shadow: 0 20px 50px rgba(10, 6, 14, 0.5);
}

/* Le fin cadre doré à l'intérieur de chaque face */
.carte-face::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid currentColor;
    border-radius: 4px;
    opacity: 0.35;
    pointer-events: none;
}

.etoile-carte {
    font-size: 20px;
    line-height: 1;
    color: var(--or-clair);
}

/* La face AVANT = le dos visible au départ (violet, "Découvrir") */
.carte-avant {
    background:
        radial-gradient(circle at 50% 45%, rgba(217, 191, 143, 0.18), transparent 55%),
        linear-gradient(160deg, #7a5f6e, #2a1f26);
    color: var(--or-clair);
}

.carte-avant .titre-carte {
    font-size: 14px;
    letter-spacing: 5px;
    color: var(--texte-clair);
    margin: auto 0;
    transition: letter-spacing 0.5s ease;
}

.carte:hover .carte-avant .titre-carte {
    letter-spacing: 7px;
}

/* La face ARRIERE = le mantra doré, révélé après le retournement */
.carte-arriere {
    background:
        radial-gradient(circle at 50% 40%, #f0dcae, transparent 70%),
        linear-gradient(160deg, #d6b87a, #b8955a);
    color: #3a2c10;
    transform: rotateY(180deg);
}

.carte-arriere .etoile-carte {
    color: #6b5228;
}

.carte-arriere .mantra {
    font-family: "Cormorant Garamond", serif;
    font-variant: small-caps;
    font-size: 26px;
    line-height: 1.3;
    text-align: center;
    color: #3a2c10;
    margin: auto 0;
}

.carte .nom-marque {
    font-size: 12px;
    letter-spacing: 4px;
    opacity: 0.7;
}

/* La carte élue rayonne d'un halo doré qui respire */
.carte.elue .carte-arriere {
    animation: halo-dore 3s ease-in-out infinite;
}

@keyframes halo-dore {
    50% {
        box-shadow:
            0 0 70px rgba(217, 191, 143, 0.65),
            0 20px 50px rgba(10, 6, 14, 0.5);
    }
}

.tirez {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 26px;
    color: var(--texte-clair);
    margin-top: 50px;
}

/* Le bouton discret "Tirer à nouveau" */
.bouton-lien {
    margin-top: 12px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--or);
    padding: 4px 0;
    color: var(--or-clair);
    font-family: "Jost", sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    cursor: pointer;
    animation: monte 0.6s ease backwards;
}

.bouton-lien:hover {
    color: var(--blanc-casse);
}

/* La petite flèche animée en bas du hero */
.fleche-defiler {
    position: absolute;
    bottom: 28px;
    left: 50%;
    translate: -50% 0;
    width: 24px;
    height: 40px;
    border: 1px solid rgba(217, 191, 143, 0.6);
    border-radius: 12px;
}

.fleche-defiler span {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 2px;
    height: 8px;
    margin-left: -1px;
    border-radius: 2px;
    background-color: var(--or-clair);
    animation: defiler 2s ease-in-out infinite;
}

@keyframes defiler {
    0% {
        opacity: 0;
        translate: 0 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        translate: 0 14px;
    }
}

/* =========================================================
   SECTION "EXPLOREZ LES ENERGIES"
========================================================= */
.energies {
    padding: 80px 0;
}

.boite-energies {
    background-color: var(--violet-fonce);
    border-radius: 16px;
    padding: 60px;
    display: flex;
    gap: 50px;
    align-items: center;
    flex-wrap: wrap;
}

.energies-texte {
    flex: 1;
    min-width: 300px;
}

.energies-texte h2 {
    font-size: 42px;
    color: var(--blanc-casse);
    margin-bottom: 25px;
}

.energies-texte p {
    color: var(--texte-gris);
    margin-bottom: 18px;
}

.boite-pierres {
    flex: 1;
    min-width: 300px;
    background-color: var(--blanc-casse);
    border-radius: 12px;
    padding: 25px;
    color: #3a2c30;
}

.boite-pierres .etiquette {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--violet-mauve);
    margin-bottom: 15px;
}

.ligne-pierre {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 12px;
    background-color: #f3ede4;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.ligne-pierre:hover {
    background-color: #ebe2d6;
    transform: translateX(6px);
}

/* Le rond qui contient la petite photo de la pierre */
.rond-pierre {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.rond-pierre img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ligne-pierre .infos {
    flex: 1;
}

.ligne-pierre .nom {
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-weight: 600;
}

.ligne-pierre .desc {
    font-size: 13px;
    color: #6b5f5a;
}

.ligne-pierre .fleche {
    color: #b3a8a0;
}

.bouton-violet {
    display: block;
    text-align: center;
    width: 100%;
    background-color: var(--violet-mauve);
    color: var(--blanc-casse);
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-family: "Jost", sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.bouton-violet:hover {
    background-color: #7d6584;
}

/* =========================================================
   PETITS TITRES DE SECTION (réutilisés partout)
========================================================= */
.eyebrow {
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--or-clair);
    text-align: center;
    margin-bottom: 8px;
}

.titre-section {
    font-size: 46px;
    color: var(--blanc-casse);
    text-align: center;
    margin-bottom: 45px;
}

/* =========================================================
   SECTION BOUTIQUE (aperçu produits sur l'accueil)
========================================================= */
.boutique-apercu {
    padding: 80px 0;
}

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

.produit {
    background-color: var(--violet-fonce);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    transition: transform 0.3s ease;
    display: block;
    color: inherit;
}

.produit:hover {
    transform: translateY(-6px);
}

.produit-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    background-color: #fff;
}

.produit-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.produit h3 {
    font-size: 24px;
    color: var(--blanc-casse);
    margin-bottom: 4px;
}

.produit-desc {
    font-size: 14px;
    color: var(--texte-gris);
    margin-bottom: 10px;
}

.produit-prix {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    color: var(--or-clair);
}

/* =========================================================
   SECTION GALERIE / UNIVERS ASTRAL (3 vignettes cliquables)
========================================================= */
.galerie {
    padding: 40px 0 80px 0;
}

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

/* Chaque vignette est un lien qui contient une image + un voile */
.galerie-grille {
    perspective: 1200px;
}

.vignette {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
}

/* L'inclinaison 3D au survol (les variables viennent de commun.js) */
.galerie .vignette {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition:
        transform 0.6s ease,
        opacity 0.9s ease var(--delai, 0s),
        translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--delai, 0s);
}

.galerie .vignette.incline {
    transition:
        transform 0.12s linear,
        opacity 0.9s ease,
        translate 0.9s ease;
}

.vignette img {
    height: 450px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vignette:hover img {
    transform: scale(1.05);
}

/* Le voile sombre en bas avec le titre */
/* Le voile sombre qui couvre TOUTE l'image, avec le titre centré */
.voile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Voile léger au repos, qui s'assombrit au survol */
    background-color: rgba(20, 15, 22, 0.25);
    transition: background-color 0.4s ease;
}

/* Au survol de la vignette, le voile s'assombrit */
.vignette:hover .voile {
    background-color: rgba(20, 15, 22, 0.6);
}

.vignette-titre {
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    color: var(--blanc-casse);
    letter-spacing: 1px;
    text-align: center;
    /* Petite animation : le titre grandit légèrement au survol */
    transition: transform 0.4s ease;
}

.vignette:hover .vignette-titre {
    transform: scale(1.1);
}

/* =========================================================
   SECTION LUNE DU SOIR
========================================================= */
.lune-section {
    padding: 0 0 80px 0;
}

.carte-lune {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(120, 100, 140, 0.2),
            transparent 50%
        ),
        #15101a;
    border-radius: 16px;
    padding: 60px;
    text-align: center;
    position: relative;
}

.carte-lune .intro {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 20px;
    color: var(--texte-gris);
    margin-bottom: 10px;
}

.carte-lune h2 {
    font-family: "Cormorant Garamond", serif;
    font-variant: small-caps;
    font-size: 60px;
    letter-spacing: 3px;
    color: var(--blanc-casse);
    margin-bottom: 5px;
}

.carte-lune .devise {
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--texte-gris);
    margin-bottom: 40px;
}

.lune-grille {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
}

.boite-info {
    border: 1px solid rgba(201, 168, 106, 0.3);
    border-radius: 12px;
    padding: 30px 20px;
}

.boite-info .symbole {
    font-size: 30px;
    color: var(--or-clair);
    margin-bottom: 10px;
    font-family: "Jost", sans-serif;
    /* Force l'affichage en version texte doré, pas en emoji coloré */
    font-variant-emoji: text;
}

.boite-info .titre-info {
    font-size: 14px;
    letter-spacing: 3px;
    color: var(--texte-clair);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(201, 168, 106, 0.3);
}

.boite-info .mots {
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--texte-gris);
    line-height: 2;
}

.lune-centre {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(220, 220, 230, 0.4);
    cursor: pointer;
    /* Transition douce pour le grossissement et le halo au survol */
    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
}

/* Au survol, la lune grossit un peu et son halo s'intensifie */
.lune-centre:hover {
    transform: scale(1.08);
    box-shadow: 0 0 90px rgba(220, 220, 230, 0.6);
}

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

/* Le calque SVG qui dessine l'ombre de la phase (créé par astro.js) */
.lune-centre,
.lune-halo {
    position: relative;
}

.lune-ombre {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: rgba(10, 6, 14, 0.86);
}

.barre-lune {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    border: 1px solid rgba(201, 168, 106, 0.3);
    border-radius: 12px;
    padding: 20px;
    max-width: 700px;
    margin: 0 auto;
}

.info-bas .label {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--or-clair);
}

.info-bas .valeur {
    font-size: 14px;
    color: var(--texte-clair);
}

/* =========================================================
   PIED DE PAGE (commun à toutes les pages)
========================================================= */
footer {
    background-color: var(--noir);
    padding: 60px 0 40px 0;
}

.footer-contenu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-logo img {
    height: 160px;
    width: auto;
}

.colonne-footer h4 {
    font-family: "Jost", sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--texte-gris);
    margin-bottom: 18px;
}

.colonne-footer ul {
    list-style: none;
}

.colonne-footer li {
    margin-bottom: 12px;
}

.colonne-footer a {
    color: var(--texte-clair);
    font-size: 15px;
}

.colonne-footer a:hover {
    color: var(--or-clair);
}

.footer-bas {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(201, 168, 106, 0.15);
    font-size: 13px;
    color: var(--texte-gris);
}

/* =========================================================
   SECTION À PROPOS (accueil)
========================================================= */
.a-propos {
    padding: 0 0 80px 0;
}

.a-propos-bloc {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    background-color: var(--violet-fonce);
    border-radius: 16px;
    padding: 50px 40px;
}

.a-propos-bloc h2 {
    font-size: 40px;
    color: var(--blanc-casse);
    margin-bottom: 20px;
}

.lien-boutique {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--or-clair);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

.lien-boutique:hover {
    color: var(--blanc-casse);
}

/* Sur les fonds clairs (pierres du signe), l'or foncé reste lisible */
.pierres-signe .lien-boutique {
    color: var(--or-fonce);
}

.a-propos-bloc p:not(.eyebrow) {
    color: var(--texte-clair);
    margin-bottom: 14px;
}

/* =========================================================
   PAGES DE TEXTE (confidentialité, conditions d'utilisation)
========================================================= */
body.page-texte,
body.page-404 {
    background-color: var(--noir);
}

.entete-texte {
    padding: 190px 20px 70px 20px;
    text-align: center;
    background: radial-gradient(ellipse at 50% 0%, rgba(122, 95, 110, 0.45), transparent 70%);
}

.entete-texte h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: 52px;
    color: var(--blanc-casse);
    margin-bottom: 15px;
}

.entete-intro {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 22px;
    color: var(--texte-clair);
    max-width: 640px;
    margin: 0 auto;
}

.texte-legal {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 20px 90px 20px;
}

.texte-legal .maj {
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--texte-gris);
    margin-bottom: 40px;
}

.texte-legal section {
    margin-bottom: 40px;
}

.texte-legal h2 {
    font-size: 30px;
    color: var(--or-clair);
    margin-bottom: 14px;
}

.texte-legal p,
.texte-legal li {
    color: var(--texte-clair);
    margin-bottom: 12px;
}

.texte-legal ul {
    padding-left: 22px;
    margin-bottom: 12px;
}

.texte-legal strong {
    font-weight: 500;
    color: var(--blanc-casse);
}

.texte-legal a,
.produit-note a {
    color: var(--or-clair);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.texte-legal .note {
    border-left: 2px solid var(--or);
    padding-left: 16px;
    font-size: 14px;
    color: var(--texte-gris);
}

.effacer {
    margin: 20px 0;
}

.effacer-message {
    margin-top: 14px;
    font-style: italic;
    color: var(--or-clair);
}

/* =========================================================
   PAGE 404
========================================================= */
.perdu {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 140px 20px 80px 20px;
    perspective: 1200px;
}

.perdu-carte {
    width: 220px;
    aspect-ratio: 200 / 355;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(217, 191, 143, 0.35);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.6s ease;
    animation: monte 1s ease backwards;
}

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

.perdu-texte {
    max-width: 460px;
}

.perdu-texte .eyebrow {
    text-align: left;
}

.perdu-texte h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: 48px;
    line-height: 1.15;
    color: var(--blanc-casse);
    margin-bottom: 20px;
}

.perdu-texte p:not(.eyebrow) {
    color: var(--texte-clair);
    margin-bottom: 30px;
}

.perdu-texte .bouton-or {
    display: inline-block;
}

/* =========================================================
   LES VRAIS PRODUITS DE LA BOUTIQUE (créés par boutique.js)
========================================================= */
.grille-produits-reels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 20px 0 22px 0;
    text-align: left;
}

.produit-reel {
    display: flex;
    flex-direction: column;
    background-color: rgba(243, 237, 228, 0.05);
    border: 1px solid rgba(201, 168, 106, 0.25);
    border-radius: 12px;
    overflow: hidden;
    animation: monte 0.7s ease var(--delai, 0s) backwards;
    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}

.produit-reel:hover {
    transform: translateY(-4px);
    border-color: rgba(217, 191, 143, 0.6);
}

.produit-reel-image {
    display: block;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    overflow: hidden;
}

.produit-reel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.produit-reel:hover .produit-reel-image img {
    transform: scale(1.05);
}

.produit-reel-infos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 16px 18px 18px 18px;
}

.produit-reel h3 {
    font-size: 20px;
    line-height: 1.25;
    color: var(--blanc-casse);
}

/* ".produit-reel" devant : plus précis que ".pierre-carte p" de astral.css */
.produit-reel .produit-reel-prix {
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--or-clair);
}

.produit-reel-sens {
    font-size: 14px;
    line-height: 1.6;
    color: var(--texte-gris);
}

.produit-reel-epuise {
    margin-top: auto;
    font-size: 13px;
    font-style: italic;
    color: var(--texte-gris);
}

/* Le bouton "Ajouter au panier" : bordé d'or, il se remplit au survol */
.bouton-ajouter {
    margin-top: auto;
    background: none;
    border: 1px solid var(--or-clair);
    border-radius: 999px;
    padding: 11px 18px;
    color: var(--or-clair);
    font-family: "Jost", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.bouton-ajouter:hover {
    background-color: var(--or-clair);
    color: #2a2028;
}

.bouton-ajouter:disabled {
    opacity: 0.7;
    cursor: default;
}

/* Les produits posés sur le fond clair des "pierres du signe" */
.pierres-signe .produit-reel {
    background-color: #fff;
    border-color: #eadfce;
}

.pierres-signe .produit-reel h3 {
    color: #2a2028;
}

.pierres-signe .produit-reel-prix,
.pierres-signe .bouton-ajouter {
    color: var(--or-fonce);
    border-color: var(--or-fonce);
}

.pierres-signe .bouton-ajouter:hover {
    background-color: var(--or-fonce);
    color: #fff;
}

.pierres-signe .produit-reel-sens {
    color: #6b5f5a;
}

/* Le prix à la place de la flèche, dans les pierres de l'accueil */
.ligne-pierre .prix-pierre {
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--or-fonce);
    white-space: nowrap;
}

/* Les pierres proposées à la fin du tirage */
.tirage-pierres {
    margin: 10px 0 34px 0;
}

/* La photo qui vole jusqu'au panier */
.image-volante {
    position: fixed;
    z-index: 1000;
    object-fit: cover;
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 0 40px rgba(217, 191, 143, 0.6);
}

/* =========================================================
   LE PANNEAU DU PANIER (il glisse depuis la droite)
========================================================= */
.panneau-panier {
    position: fixed;
    inset: 0;
    z-index: 500;
}

.panneau-fond {
    position: absolute;
    inset: 0;
    background-color: rgba(10, 6, 14, 0.6);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.panneau {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    background-color: #1a1320;
    border-left: 1px solid rgba(201, 168, 106, 0.35);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    translate: 100% 0;
    transition: translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.panneau-panier.ouvert .panneau-fond {
    opacity: 1;
}

.panneau-panier.ouvert .panneau {
    translate: 0 0;
}

.panneau-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(201, 168, 106, 0.2);
}

.panneau-entete h2 {
    font-size: 28px;
    color: var(--blanc-casse);
}

.panneau-fermer {
    background: none;
    border: none;
    font-size: 30px;
    line-height: 1;
    color: var(--texte-clair);
    cursor: pointer;
}

.panneau-lignes {
    flex: 1;
    overflow-y: auto;
    padding: 10px 24px;
}

.panneau-vide {
    margin-top: 30px;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 20px;
    color: var(--texte-gris);
    text-align: center;
}

.panneau-ligne {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(201, 168, 106, 0.12);
}

.panneau-ligne img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    background-color: #fff;
}

.panneau-nom {
    font-size: 14px;
    color: var(--texte-clair);
    line-height: 1.4;
}

.panneau-prix {
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    color: var(--or-clair);
}

.panneau-quantite {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    border: 1px solid rgba(201, 168, 106, 0.35);
    border-radius: 999px;
    padding: 2px 10px;
    color: var(--texte-clair);
    font-size: 14px;
}

.panneau-quantite button {
    background: none;
    border: none;
    color: var(--or-clair);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
}

.panneau-alerte {
    margin-top: 14px;
    font-size: 13px;
    font-style: italic;
    color: var(--or-clair);
}

.panneau-pied {
    padding: 20px 24px 26px 24px;
    border-top: 1px solid rgba(201, 168, 106, 0.2);
}

.panneau-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    color: var(--texte-clair);
}

.panneau-total strong {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    color: var(--blanc-casse);
}

.panneau-commander {
    display: block;
    text-align: center;
}

.panneau-note {
    margin-top: 12px;
    font-size: 12px;
    text-align: center;
    color: var(--texte-gris);
}

/* =========================================================
   LES ARCANES DU TAROT (dessinés en SVG par arcanes.js)
   Toutes les cartes utilisent les mêmes 4 styles de trait,
   c'est ce qui les rend cohérentes entre elles.
========================================================= */
.arcane-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.arcane-svg .t,
.arcane-svg .tf {
    fill: none;
    stroke: #d9bf8f;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.arcane-svg .t {
    stroke-width: 1.3;
}

.arcane-svg .tf {
    stroke-width: 0.7;
    opacity: 0.85;
}

.arcane-svg .p {
    fill: #d9bf8f;
}

/* Le voile : un léger remplissage doré sous le trait */
.arcane-svg .v {
    fill: rgba(217, 191, 143, 0.14);
}

.arcane-svg .poussiere {
    fill: #d9bf8f;
    opacity: 0.55;
}

.arcane-numero,
.arcane-nom,
.arcane-svg .lettre {
    font-family: "Cormorant Garamond", serif;
    fill: #e3cb9b;
    text-anchor: middle;
    dominant-baseline: central;
}

.arcane-numero {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
}

.arcane-nom {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
}

.arcane-nom.long {
    font-size: 10.5px;
    letter-spacing: 0.6px;
}

.arcane-svg .lettre {
    font-size: 13px;
}

/* =========================================================
   LE CIEL ÉTOILÉ (canvas ajouté par ciel.js)
   "isolation: isolate" permet de glisser le canvas juste
   au-dessus du fond de la zone, mais sous son contenu.
========================================================= */
[data-ciel] {
    position: relative;
    isolation: isolate;
}

.ciel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}

/* Le croissant du hero brille doucement */
.lune-hero {
    text-shadow: 0 0 24px rgba(217, 191, 143, 0.7);
    animation: monte 1s ease 0.1s backwards;
}

/* Le titre n'est pas animé : il s'affiche tout de suite,
   c'est l'élément que les navigateurs utilisent pour mesurer la vitesse */

.hero .sous-titre {
    animation: monte 1s ease 0.35s backwards;
}

@keyframes monte {
    from {
        opacity: 0;
        translate: 0 20px;
    }
}

/* =========================================================
   APPARITION AU DÉFILEMENT
   (seulement si le JavaScript marche, grâce à la classe "js")
========================================================= */
.js .apparait {
    opacity: 0;
    translate: 0 40px;
    transition:
        opacity 0.9s ease var(--delai, 0s),
        translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--delai, 0s);
}

.js .apparait.visible {
    opacity: 1;
    translate: 0 0;
}

/* =========================================================
   LE REFLET HOLOGRAPHIQUE DES CARTES
   Une tache de lumière suit la souris (--mx, --my) et un
   arc-en-ciel discret glisse sur la carte.
========================================================= */
.carte-face::after,
.carte-tarot-face::after,
.galerie .vignette::after,
.image-principale::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(
            circle at var(--mx, 50%) var(--my, 50%),
            rgba(255, 244, 220, 0.55),
            transparent 45%
        ),
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255, 130, 210, 0.25) 40%,
            rgba(130, 220, 255, 0.25) 50%,
            rgba(255, 225, 130, 0.25) 60%,
            transparent 75%
        );
    background-size:
        100% 100%,
        300% 300%;
    background-position:
        center,
        var(--mx, 50%) var(--my, 50%);
    mix-blend-mode: color-dodge;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Sur la face retournée, le reflet part dans l'autre sens */
.carte-arriere::after,
.carte-tarot-avant::after {
    background-position:
        center,
        var(--mx-inverse, 50%) var(--my, 50%);
    background-image:
        radial-gradient(
            circle at var(--mx-inverse, 50%) var(--my, 50%),
            rgba(255, 244, 220, 0.55),
            transparent 45%
        ),
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255, 130, 210, 0.25) 40%,
            rgba(130, 220, 255, 0.25) 50%,
            rgba(255, 225, 130, 0.25) 60%,
            transparent 75%
        );
}

.incline .carte-face::after,
.incline .carte-tarot-face::after,
.galerie .vignette.incline::after,
.image-principale.incline::after {
    opacity: 1;
}

/* =========================================================
   LES ÉTINCELLES DORÉES (créées par commun.js)
========================================================= */
.particule {
    position: fixed;
    width: var(--taille);
    height: var(--taille);
    margin: calc(var(--taille) / -2) 0 0 calc(var(--taille) / -2);
    border-radius: 50%;
    background-color: #f6e2b3;
    box-shadow: 0 0 10px 2px rgba(217, 191, 143, 0.8);
    pointer-events: none;
    z-index: 1000;
    animation: etincelle 1.1s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}

@keyframes etincelle {
    from {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
    to {
        opacity: 0;
        translate: var(--dx) var(--dy);
        scale: 0.2;
    }
}

/* =========================================================
   LE BOUTON DORÉ (réutilisé sur plusieurs pages)
========================================================= */
.bouton-or {
    background: linear-gradient(135deg, #e3cb9b, #b8955a);
    color: #2a2028;
    border: none;
    padding: 14px 32px;
    border-radius: 999px;
    font-family: "Jost", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(201, 168, 106, 0.25);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        opacity 0.3s ease;
}

.bouton-or:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(201, 168, 106, 0.45);
}

/* Le bouton secondaire : même forme, mais seulement bordé d'or.
   Ainsi, chaque écran n'a qu'UN bouton doré principal. */
.bouton-secondaire {
    display: inline-block;
    background: none;
    border: 1px solid var(--or-clair);
    color: var(--or-clair);
    padding: 13px 32px;
    border-radius: 999px;
    font-family: "Jost", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.bouton-secondaire:hover {
    background-color: rgba(217, 191, 143, 0.12);
    color: var(--blanc-casse);
}

.bouton-or:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

/* =========================================================
   LE VOYAGE DANS LE CYCLE LUNAIRE (curseur)
========================================================= */
.voyage {
    display: grid;
    gap: 12px;
    max-width: 520px;
    margin: 35px auto 0 auto;
}

.voyage label {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--or-clair);
}

.voyage output {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 20px;
    color: var(--texte-clair);
}

.voyage input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--or), rgba(201, 168, 106, 0.2));
    cursor: pointer;
}

.voyage input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff4dc, var(--or));
    box-shadow: 0 0 16px rgba(217, 191, 143, 0.8);
}

.voyage input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff4dc, var(--or));
    box-shadow: 0 0 16px rgba(217, 191, 143, 0.8);
}

/* =========================================================
   ANIMATIONS RÉDUITES
   Si l'utilisateur l'a demandé dans son système, on coupe
   presque toutes les animations.
========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   RESPONSIVE : pour les téléphones
========================================================= */
@media (max-width: 900px) {
    .logo img,
    .navbar.defile .logo img {
        height: 84px;
    }

    .navbar,
    .navbar.defile {
        position: absolute;
        flex-direction: column;
        gap: 15px;
        padding: 20px;
        background-color: transparent;
        backdrop-filter: none;
        box-shadow: none;
    }

    .menu {
        gap: 18px;
    }

    .menu a {
        font-size: 14px;
        white-space: nowrap;
    }

    .hero {
        padding-top: 218px;
    }

    .cartes {
        gap: 14px;
        flex-wrap: nowrap;
    }

    .carte {
        width: 104px;
        height: 190px;
    }

    .carte.elue {
        scale: 1.15;
    }

    .carte-face {
        padding: 14px 6px;
    }

    .carte-face::before {
        inset: 5px;
    }

    .carte-arriere .mantra {
        font-size: 13px;
    }

    .carte-avant .titre-carte,
    .carte .nom-marque {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .carte:hover .carte-avant .titre-carte {
        letter-spacing: 2px;
    }

    .hero .sous-titre {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .grille-produits,
    .grille-produits-reels,
    .galerie-grille,
    .lune-grille {
        grid-template-columns: 1fr;
    }

    .boite-energies,
    .carte-lune {
        padding: 30px;
    }

    .titre-section {
        font-size: 36px;
    }

    .a-propos-bloc {
        padding: 35px 24px;
    }

    .a-propos-bloc h2,
    .entete-texte h1 {
        font-size: 36px;
    }

    .entete-texte {
        padding-top: 238px;
    }

    .perdu {
        flex-direction: column;
        gap: 30px;
        padding-top: 238px;
        text-align: center;
    }

    .perdu-carte {
        width: 150px;
    }

    .perdu-texte .eyebrow {
        text-align: center;
    }

    .perdu-texte h1 {
        font-size: 34px;
    }
}