/* Explain: Styles for premium features, mobile navigation, and member progression. */
/* ============================================================
   SPIRITUEL ACADÉMIE — EXPÉRIENCE PREMIUM, MOBILE & VIE MEMBRE
   ============================================================ */

/* --- Puce membre (degré) dans l'en-tête --- */
.sa-member-chip {
    display: none;
    align-items: center;
    gap: .45rem;
    padding: .42rem .95rem;
    border-radius: 999px;
    border: 1px solid var(--border-gold);
    background: rgba(232, 196, 122, 0.10);
    color: var(--gold-color);
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .25s, box-shadow .25s, transform .25s;
}
.sa-member-chip.is-on { display: inline-flex; }
.sa-member-chip:hover {
    background: rgba(232, 196, 122, 0.18);
    box-shadow: var(--glow-gold);
    transform: translateY(-1px);
}
.sa-member-chip i { font-size: .8rem; }

/* --- Barre de navigation tactile (mobile) --- */
.sa-bnav { display: none; }

@media (max-width: 1119px) {
    .sa-bnav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 55;
        padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom, 0px));
        background: rgba(8, 3, 18, 0.95);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -14px 40px rgba(3, 1, 8, 0.7);
    }
    .sa-bnav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        min-height: 52px;
        padding: .3rem .2rem;
        border-radius: 14px;
        color: var(--text-muted);
        font-size: .66rem;
        text-align: center;
        transition: color .25s, background .25s;
    }
    .sa-bnav a i { font-size: 1.05rem; }
    .sa-bnav a.is-active { color: var(--gold-color); background: rgba(139, 92, 246, 0.16); }
    body { padding-bottom: 4.9rem; }
    .sa-totop { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 1119px) {
    .sa-member-chip.is-on { display: none !important; }
}

/* --- Progression et paliers de degré --- */
.sa-level-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(160, 120, 255, 0.16);
    overflow: hidden;
    margin-top: .8rem;
}
.sa-level-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), var(--gold-color));
    transition: width 1s var(--ease-soft);
}
.sa-level-ladder { display: flex; flex-wrap: wrap; gap: .5rem; }
.sa-level-step {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    font-size: .78rem;
    color: var(--text-muted);
}
.sa-level-step i { font-size: .72rem; }
.sa-level-step.is-reached {
    border-color: var(--border-gold);
    color: var(--gold-color);
    background: rgba(232, 196, 122, 0.08);
}
.sa-level-step.is-current { box-shadow: 0 0 0 2px var(--gold-color); }

/* --- Rituel du jour --- */
.sa-ritual { display: grid; gap: 1.35rem; align-items: center; }
@media (min-width: 760px) { .sa-ritual { grid-template-columns: auto 1fr; } }

.sa-ritual-ring {
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    margin: 0 auto;
    background: radial-gradient(circle at 40% 30%, rgba(139, 92, 246, 0.92), rgba(43, 11, 82, 0.92));
    color: var(--gold-color);
    font-size: 1.9rem;
    box-shadow: var(--glow-violet);
}
.sa-ritual.is-done { border-color: var(--border-gold); }
.sa-ritual.is-done .sa-ritual-ring {
    background: radial-gradient(circle at 40% 30%, var(--gold-soft), var(--gold-deep));
    color: #1a0e05;
}

/* --- Profil spirituel : sélecteurs --- */
.sa-choice-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.sa-choice {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .55rem 1.05rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .25s, color .25s, background .25s, transform .25s;
}
.sa-choice:hover { border-color: var(--gold-color); color: var(--gold-color); transform: translateY(-1px); }
.sa-choice.is-on {
    border-color: var(--gold-color);
    color: var(--gold-color);
    background: rgba(232, 196, 122, 0.12);
}

/* --- Recommandations --- */
.sa-panel.is-recommended {
    border-color: var(--border-gold);
    box-shadow: 0 0 0 1px rgba(232, 196, 122, 0.16), var(--glow-gold);
}

/* --- Tableau comparatif des formules --- */
.sa-compare { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 34rem; }
.sa-compare th,
.sa-compare td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
.sa-compare thead th {
    font-family: var(--font-heading);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-color);
    white-space: nowrap;
}
.sa-compare td:first-child { color: var(--text-muted); }
.sa-compare .sa-yes { color: var(--gold-color); }
.sa-compare .sa-no { color: rgba(169, 159, 196, 0.45); }

/* --- Allègement des effets sur mobile (chargement + batterie) --- */
@media (max-width: 767px) {
    .sa-header,
    .sa-dropdown-list,
    .sa-suggest-box,
    .sa-totop,
    .sa-modal {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .sa-panel { transition: none; }
    .sa-panel:hover { box-shadow: none; }
    .sa-portal { animation: none; }
    .sa-portal::before,
    .sa-portal::after { animation: none; }
    .sa-orbit { animation: none; }
    .sa-btn-shine::after { display: none; }
    .sa-starfield { animation: none; opacity: .85; }
}