/* ══════════════════════════════════════════════════════════════
   AstroBioLove — style.css
   Styles globaux + utilitaires front-end
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:      #0d0d1a;
    --bg2:     #1a1a2e;
    --bg3:     #1e1e3a;
    --purple:  #7c3aed;
    --purple2: #a78bfa;
    --pink:    #c084fc;
    --green:   #4ade80;
    --orange:  #fb923c;
    --red:     #f87171;
    --blue:    #60a5fa;
    --text:    #eee;
    --muted:   #888;
    --radius:  12px;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--purple2); text-decoration: none; }
a:hover { color: var(--pink); }

/* ── NAVBAR ── */
nav {
    background: rgba(13,13,26,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #2a2a4a;
    position: sticky; top: 0; z-index: 100;
    padding: 0 24px;
    display: flex; align-items: center;
    justify-content: space-between;
    height: 64px;
}
.nav-logo {
    font-size: 1.3em; font-weight: bold;
    color: var(--pink); letter-spacing: 0.5px;
}
.nav-logo span { color: var(--purple2); }
.nav-links {
    display: flex; align-items: center;
    gap: 8px; list-style: none;
}
.nav-links a {
    padding: 8px 14px; border-radius: 8px;
    font-size: 0.95em; color: var(--text);
    transition: background 0.2s;
}
.nav-links a:hover { background: var(--bg3); color: var(--pink); }
.nav-links .btn-nav {
    background: var(--purple); color: white !important;
    padding: 8px 18px; border-radius: 8px;
}
.nav-links .btn-nav:hover { background: #6d28d9; }

/* Hamburger */
.hamburger {
    display: none; flex-direction: column;
    gap: 5px; cursor: pointer; padding: 4px;
}
.hamburger span {
    display: block; width: 24px; height: 2px;
    background: var(--text); border-radius: 2px;
    transition: all 0.3s;
}
.nav-mobile {
    display: none; flex-direction: column;
    background: var(--bg2);
    border-bottom: 1px solid #2a2a4a;
    padding: 12px 24px 20px; gap: 4px;
}
.nav-mobile a {
    padding: 12px 16px; border-radius: 8px;
    color: var(--text); font-size: 1em; display: block;
}
.nav-mobile a:hover { background: var(--bg3); color: var(--pink); }
.nav-mobile .btn-nav {
    background: var(--purple); color: white !important;
    text-align: center; margin-top: 8px;
}
.nav-mobile.open { display: flex; }

/* ── FORMULAIRES ── */
label {
    display: block; margin: 12px 0 4px;
    font-size: 0.9em; color: #ccc;
}
input[type="text"], input[type="email"],
input[type="password"], input[type="date"],
input[type="time"], select, textarea {
    width: 100%; padding: 10px; box-sizing: border-box;
    background: var(--bg2); border: 1px solid #444;
    color: var(--text); border-radius: 6px;
    font-size: 0.95em;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--purple);
}

/* ── BOUTONS ── */
.btn-primary {
    background: var(--purple); color: white;
    padding: 14px 32px; border-radius: 10px;
    font-size: 1.05em; font-weight: 600;
    border: none; cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    display: inline-block;
}
.btn-primary:hover {
    background: #6d28d9; color: white;
    transform: translateY(-2px);
}
.btn-secondary {
    background: transparent; color: var(--purple2);
    padding: 14px 32px; border-radius: 10px;
    font-size: 1.05em; font-weight: 600;
    border: 1px solid rgba(167,139,250,0.4);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    display: inline-block;
}
.btn-secondary:hover {
    border-color: var(--purple2); color: var(--pink);
    transform: translateY(-2px);
}
.btn-danger {
    background: #991b1b; color: white;
    padding: 10px 20px; border-radius: 6px;
    border: none; cursor: pointer;
}
.btn-danger:hover { background: #7f1d1d; }
.btn-edit {
    background: #0f766e; color: white;
    padding: 10px 20px; border-radius: 6px;
    border: none; cursor: pointer;
}
.btn-edit:hover { background: #0d9488; }
button {
    padding: 10px 20px; background: var(--purple);
    color: white; border: none; border-radius: 6px;
    cursor: pointer; font-size: 0.95em;
}
button:hover { background: #6d28d9; }

/* ── CARDS ── */
.card {
    background: var(--bg2); padding: 20px;
    border-radius: var(--radius); margin: 14px 0;
    border-left: 3px solid var(--purple);
}
.card.editing { border-left-color: #0d9488; }
.card h3 { margin: 0 0 8px; color: var(--pink); }
.card p  { margin: 4px 0; font-size: 0.9em; color: #aaa; }
.card-actions {
    margin-top: 14px; display: flex;
    gap: 10px; flex-wrap: wrap;
}

/* ── MESSAGES ── */
.success {
    color: var(--green); background: #052e16;
    padding: 10px; border-radius: 6px; margin: 10px 0;
}
.error {
    color: var(--red); background: #2d0a0a;
    padding: 10px; border-radius: 6px; margin: 10px 0;
}

/* ── FORM BOX ── */
.form-box {
    background: var(--bg2); padding: 24px;
    border-radius: var(--radius);
    border: 1px solid var(--purple); margin-bottom: 30px;
}
.form-box.edit-mode { border-color: #0d9488; }
.form-title {
    color: var(--pink); margin: 0 0 20px;
    font-size: 1.1em;
}

/* ── AUTOCOMPLÉTION ── */
.autocomplete-wrapper { position: relative; }
.suggestions-list {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg2); border: 1px solid #555;
    border-top: none; border-radius: 0 0 6px 6px;
    max-height: 220px; overflow-y: auto;
    z-index: 999; display: none;
}
.suggestions-list div {
    padding: 10px 12px; cursor: pointer;
    font-size: 0.9em; border-bottom: 1px solid #333; color: #ddd;
}
.suggestions-list div:hover { background: #2e2e4e; color: var(--pink); }
.coords-ok   { font-size: 0.78em; color: var(--green); margin-top: 4px; min-height: 16px; }
.coords-wait { font-size: 0.78em; color: #666; margin-top: 4px; min-height: 16px; }

/* ── LAYOUT ── */
.container {
    max-width: 700px; margin: 0 auto;
    padding: 40px 20px; flex: 1;
}
.container-wide {
    max-width: 1000px; margin: 0 auto;
    padding: 40px 20px;
}
hr { border-color: #333; margin: 30px 0; }

/* ── UTILITAIRES TEXTE ── */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--muted); }
.text-pink    { color: var(--pink); }
.text-purple  { color: var(--purple2); }
.text-green   { color: var(--green); }
.text-red     { color: var(--red); }
.text-orange  { color: var(--orange); }
.text-blue    { color: var(--blue); }
.text-sm      { font-size: .85em; }
.text-xs      { font-size: .78em; }
.text-bold    { font-weight: 700; }
.text-italic  { font-style: italic; }

/* ── UTILITAIRES ESPACEMENT ── */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-30 { margin-top: 30px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }

/* ── UTILITAIRES AFFICHAGE ── */
.d-flex        { display: flex; }
.d-grid        { display: grid; }
.d-inline-flex { display: inline-flex; }
.d-none        { display: none; }
.align-center  { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.gap-6         { gap: 6px; }
.gap-8         { gap: 8px; }
.gap-12        { gap: 12px; }
.gap-16        { gap: 16px; }
.gap-24        { gap: 24px; }

/* ── ACCORDÉONS (comparaison.php) ── */
.accordion-item {
    margin-bottom: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(124,58,237,0.2);
}
.accordion-header {
    background: var(--bg2);
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    transition: background 0.2s;
}
.accordion-header:hover { background: var(--bg3); }
.accordion-body {
    background: var(--bg2);
    padding: 20px;
    border-top: 1px solid rgba(124,58,237,0.15);
}

/* ── SCORE BARS (comparaison.php) ── */
.score-bar-wrap {
    height: 6px;
    background: #2a2a4a;
    border-radius: 3px;
    margin-bottom: 8px;
    overflow: hidden;
}
.score-bar-fill {
    height: 100%;
    border-radius: 3px;
}

/* ── CARDS COMPOSANTS (comparaison.php) ── */
.component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}
.component-card {
    background: var(--bg2);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
}
.component-card .c-icon  { font-size: 1.5em; margin-bottom: 6px; }
.component-card .c-label { font-size: 0.8em; color: var(--muted); margin-bottom: 8px; }
.component-card .c-score { font-size: 1.1em; font-weight: 700; }

/* ── PROFIL CARD (comparaison.php header) ── */
.profile-card {
    background: var(--bg2);
    border-radius: 16px;
    padding: 20px 24px;
    border: 1px solid rgba(124,58,237,0.2);
    min-width: 160px;
    text-align: center;
}
.profile-card-name {
    color: var(--pink);
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 12px;
}
.profile-card-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.88em;
}
.profile-card-date {
    color: var(--muted);
    font-size: 0.85em;
    margin-top: 4px;
}

/* ── SCORE GLOBAL (comparaison.php) ── */
.global-score-box {
    background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.2) 0%, transparent 70%), var(--bg2);
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 30px;
    border: 1px solid rgba(124,58,237,0.3);
}
.global-score-num {
    font-size: clamp(3em, 10vw, 5em);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
}
.global-score-title {
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 12px;
}
.global-score-desc {
    color: var(--muted);
    max-width: 500px;
    margin: 0 auto 20px;
    font-size: 0.95em;
    line-height: 1.6;
}
.global-score-fond {
    display: inline-block;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 0.85em;
    color: var(--muted);
}

/* ── BLOC IA (comparaison.php) ── */
.interp-box {
    background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(192,132,252,0.12));
    border: 1px solid rgba(124,58,237,0.5);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 30px;
}
.interp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.interp-title {
    color: var(--pink);
    margin: 0;
    font-size: 1.1em;
}
.interp-engine {
    font-size: 0.75em;
    color: var(--muted);
}
.interp-synthese {
    line-height: 1.8;
    color: #fff !important;
    margin-bottom: 24px;
    font-size: 1.02em;
    min-height: 40px;
}
.interp-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.interp-col-ok {
    background: rgba(74,222,128,0.11);
    border-radius: 10px;
    padding: 16px;
    border-left: 3px solid #4ade80;
}
.interp-col-ok .col-title  { color: #4ade80; font-weight: 600; margin-bottom: 10px; }
.interp-col-warn {
    background: rgba(248,113,113,0.11);
    border-radius: 10px;
    padding: 16px;
    border-left: 3px solid #f87171;
}
.interp-col-warn .col-title { color: #f87171; font-weight: 600; margin-bottom: 10px; }
.interp-col-item {
    font-size: 0.88em;
    color: #fff !important;
    margin-bottom: 6px;
    line-height: 1.5;
}
.interp-conseil {
    background: rgba(167,139,250,0.14);
    border-radius: 10px;
    padding: 16px;
    border-left: 3px solid var(--purple2);
    margin-top: 16px;
}
.interp-conseil .col-title { color: var(--purple2); font-weight: 600; margin-bottom: 8px; }


/* ── Erreur analyse IA ── */
.interp-error-msg {
    color: #f87171;
    margin-top: 12px;
    font-size: 0.9em;
}
/* ── BLOC DÉVERROUILLAGE IA ── */
.unlock-box {
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(192,132,252,0.07));
    border: 1px solid rgba(124,58,237,0.45);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    margin-bottom: 30px;
}
.unlock-box h3  { color: var(--pink); margin-bottom: 8px; }
.unlock-box p   { color: var(--muted); max-width: 420px; margin: 0 auto 20px; font-size: 0.95em; line-height: 1.6; }

/* ── ERREUR API ── */
.api-error-box {
    background: var(--bg2);
    border: 1px solid rgba(251,146,60,0.4);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    margin-bottom: 30px;
}
.api-error-box h3 { color: var(--orange); margin-bottom: 8px; }

/* ── NUMÉROLOGIE (comparaison.php) ── */
.num-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.num-card {
    background: var(--bg3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.num-card-name { color: var(--pink); font-weight: 600; font-size: 1em; margin-bottom: 12px; }
.num-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.num-detail-item {
    background: var(--bg2);
    padding: 8px;
    border-radius: 6px;
}
.num-detail-label { color: var(--muted); margin-bottom: 2px; font-size: 0.82em; }
.num-detail-value { font-weight: 700; font-size: 1.2em; }
.num-detail-name  { color: var(--muted); font-size: 0.85em; }

/* ── BIORYTHMES ── */
.bio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.bio-card {
    background: var(--bg3);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.bio-card-label { color: var(--muted); font-size: 0.8em; margin-bottom: 6px; }
.bio-card-value { font-size: 1.4em; font-weight: 800; }

/* ── HUMAN DESIGN ── */
.hd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.hd-card {
    background: var(--bg3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.hd-card-name     { color: var(--pink); font-weight: 600; margin-bottom: 8px; }
.hd-card-emoji    { font-size: 2em; margin-bottom: 6px; }
.hd-card-type     { font-weight: 700; color: var(--orange); margin-bottom: 4px; }
.hd-card-energy   { font-size: 0.8em; color: var(--muted); margin-bottom: 8px; }
.hd-card-desc     { font-size: 0.82em; color: var(--text); line-height: 1.5; }
.hd-card-strategy { margin-top: 10px; font-size: 0.78em; color: var(--muted); font-style: italic; }
.hd-card-gates    { margin-top: 10px; font-size: 0.78em; color: var(--orange); }
.hd-score-box {
    background: rgba(251,146,60,0.1);
    border: 1px solid rgba(251,146,60,0.3);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 16px;
}
.hd-score-num  { font-size: 2.5em; font-weight: 800; color: var(--orange); margin-bottom: 6px; }
.hd-score-desc { color: var(--text); line-height: 1.6; font-size: 0.95em; }
.hd-gates-wrap { margin-bottom: 12px; }
.hd-gates-title { color: var(--purple2); font-weight: 600; margin-bottom: 10px; }
.hd-gates-list  { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-gate-badge {
    background: rgba(251,146,60,0.15);
    border: 1px solid rgba(251,146,60,0.4);
    color: var(--orange);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
}

/* ── LOADER (comparaison.php) ── */
.loader-box {
    max-width: 500px;
    text-align: center;
    padding: 80px 20px;
    margin: 0 auto;
}
.loader-bar-wrap {
    height: 6px;
    background: #2a2a4a;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 30px;
}
.loader-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--purple), var(--pink));
    border-radius: 3px;
    transition: width 0.3s;
}

/* ── SPINNER ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(124,58,237,0.3);
    border-top-color: var(--purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ── FOOTER ── */
footer {
    background: var(--bg2);
    border-top: 1px solid #2a2a4a;
    text-align: center;
    padding: 24px;
    font-size: 0.85em; color: var(--muted);
}
footer a { color: var(--muted); }
footer a:hover { color: var(--purple2); }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .nav-links  { display: none; }
    .hamburger  { display: flex; }
    .container  { padding: 24px 16px; }
    .btn-primary, .btn-secondary { padding: 12px 24px; }
    .interp-cols  { grid-template-columns: 1fr; }
    .num-grid     { grid-template-columns: 1fr; }
    .hd-grid      { grid-template-columns: 1fr; }
    .bio-grid     { grid-template-columns: repeat(2, 1fr); }
    .component-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   CLASSES COMPLÉMENTAIRES — ajoutées lors de la migration
   ══════════════════════════════════════════════════════════════ */

/* ── LAYOUT PAGE ── */
.section-header {
    text-align: center;
    padding: 30px 0 20px;
}
.section-footer {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}
.container { max-width: 700px; }

/* ── SCORE GLOBAL — label SCORE DU JOUR ── */
.score-du-jour-label {
    color: var(--muted);
    font-size: 0.8em;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}

/* ── PROFIL CARDS ── */
.profile-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88em;
}
.profiles-sep {
    font-size: 1.8em;
    color: var(--muted);
    font-weight: 300;
}
.ico-sun  { color: #f59e0b; }
.ico-asc  { color: #a78bfa; }
.ico-moon { color: #60a5fa; }

/* ── TEXTE UTILITAIRES SUPPLÉMENTAIRES ── */
.text-center  { text-align: center; }
.text-purple  { color: var(--purple2); }
.text-xs      { font-size: .78em; }
.text-sm-95   { font-size: 0.95em; }
.text-italic  { font-style: italic; }
.mb-8         { margin-bottom: 8px; }
.mb-10        { margin-bottom: 10px; }
.mb-30        { margin-bottom: 30px; }
.mt-8         { margin-top: 8px; }

/* ── ACCORDÉON — texte corps ── */
.acc-text {
    line-height: 1.8;
    color: #fff !important;
}

/* ── ERREUR API — debug box ── */
.debug-box {
    background: #2d0a0a;
    color: #f87171;
    border-radius: 8px;
    padding: 12px;
    margin: 12px auto;
    max-width: 600px;
    font-size: .82em;
    text-align: left;
    word-break: break-all;
}

/* ── UNLOCK / API ERROR — emoji intro ── */
.unlock-box .box-emoji,
.api-error-box .box-emoji {
    font-size: 1.5em;
    margin-bottom: 8px;
}
.api-error-box p {
    max-width: 420px;
    margin: 0 auto 20px;
    font-size: 0.95em;
    line-height: 1.6;
}

/* ── BIORYTHMES ── */
.bio-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.bio-row { margin-bottom: 10px; }
.bio-row-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    margin-bottom: 4px;
}
.bio-peak {
    display: flex;
    justify-content: space-between;
    background: var(--bg3);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.9em;
}

/* ── SYNASTRIE OCCIDENTALE ── */
.west-profiles {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.west-profile-card {
    flex: 1;
    min-width: 200px;
    background: var(--bg3);
    padding: 14px;
    border-radius: 10px;
}
.west-planet-asc {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    padding: 4px 8px;
    margin-bottom: 2px;
    border-radius: 4px;
    background: rgba(124,58,237,0.1);
}
.west-planet-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    padding: 4px 0;
    border-bottom: 1px solid #2a2a4a;
}
.west-aspect {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg3);
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 0.88em;
    border-left: 3px solid transparent;
}

/* ── VÉDIQUE ── */
.ved-score {
    text-align: center;
    padding: 20px 0;
}
.ved-score-num {
    font-size: 2.5em;
    font-weight: 800;
    color: var(--pink);
}
.ved-message {
    font-size: 0.9em;
    color: var(--muted);
    font-style: italic;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg3);
    border-radius: 8px;
}
.ved-koota {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg3);
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 0.88em;
}
.ved-koota-name   { min-width: 120px; }
.ved-koota-signs  { flex: 1; text-align: center; }

/* ── NUMÉROLOGIE ── */
.num-card { background: var(--bg3); }
.num-lp { margin-bottom: 12px; }
.num-lp-label { font-size: 0.75em; color: var(--muted); margin-bottom: 2px; }
.num-lp-value { font-size: 2.2em; font-weight: 800; color: #60a5fa; }
.num-lp-name  { font-size: 0.8em; color: var(--muted); }
.num-bonus {
    background: var(--bg3);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.85em;
    color: var(--muted);
    text-align: center;
}

/* ── YEUX ── */
.eyes-profiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.eyes-profile-card {
    background: var(--bg3);
    padding: 16px;
    border-radius: 10px;
    text-align: center;
}
.eyes-scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.eyes-score-card {
    background: var(--bg3);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9em;
}
.eyes-score-value {
    color: #f9a8d4;
    font-weight: 700;
}

/* ── LOADER — emoji ── */
.loader-box-emoji {
    font-size: 3em;
    margin-bottom: 20px;
}

/* ── ADMIN COMPLÉMENTS ── */
.admin-empty {
    color: var(--muted);
    font-size: .9em;
    text-align: center;
    padding: 20px;
}
.admin-subtitle {
    color: var(--pink);
    font-size: .9em;
    margin-bottom: 12px;
}
.admin-section-sep {
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.05);
}
.admin-desc {
    color: var(--muted);
    font-size: .85em;
    margin-bottom: 16px;
}
.th-320 { width: 320px; }
.btn-sm { padding: 5px 12px; font-size: .82em; }

/* ── RESPONSIVE COMPLÉMENTS ── */
@media (max-width: 640px) {
    .bio-cols        { grid-template-columns: 1fr; }
    .eyes-profiles   { grid-template-columns: 1fr; }
    .eyes-scores     { grid-template-columns: 1fr; }
    .west-profiles   { flex-direction: column; }
    .num-grid        { grid-template-columns: 1fr; }
}

/* ── UTILITAIRES FINAUX ── */
.fw-normal   { font-weight: 400; }
.text-normal { color: var(--text); }
.mr-8        { margin-right: 8px; }
.form-inline { display: inline; }
.box-emoji   { font-size: 1.5em; margin-bottom: 8px; }
.api-error-desc {
    max-width: 420px;
    margin: 0 auto 20px;
    font-size: 0.95em;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   ACHETER-TOKENS
   ══════════════════════════════════════════════════════════════ */
.page-title {
    color: var(--pink);
    text-align: center;
    margin-bottom: 8px;
}
.payment-success { text-align: center; padding: 20px; margin-bottom: 24px; }
.token-balance-box {
    background: var(--bg2);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    margin-bottom: 30px;
    border: 1px solid rgba(124,58,237,0.3);
}
.token-balance-num { font-size: 3em; font-weight: 800; color: var(--purple2); }
.packs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; }
.pack-card {
    background: var(--bg2);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    position: relative;
    border: 2px solid rgba(255,255,255,0.05);
}
.pack-card.pack-popular { border-color: var(--purple); }
.pack-popular-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--purple); color: white; font-size: 0.75em;
    padding: 4px 14px; border-radius: 999px; font-weight: 600; white-space: nowrap;
}
.pack-tokens    { font-size: 2.2em; font-weight: 800; color: var(--pink); margin-bottom: 4px; }
.pack-label     { color: var(--muted); font-size: 0.9em; margin-bottom: 16px; }
.pack-price     { font-size: 1.6em; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.pack-unit-price { color: var(--muted); font-size: 0.8em; margin-bottom: 20px; }
.btn-full       { width: 100%; }

/* ══════════════════════════════════════════════════════════════
   MES-SCANS
   ══════════════════════════════════════════════════════════════ */
.scans-header {
    color: var(--purple2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.empty-list { text-align: center; padding: 40px 0; }
.btn-portrait { background: linear-gradient(135deg, var(--purple), var(--pink)); color: white; border: none; border-radius: 6px; padding: 10px 20px; cursor: pointer; }
.btn-cancel   { background: #374151; color: white; border: none; border-radius: 6px; padding: 10px 20px; cursor: pointer; }
.gap-10       { gap: 10px; }

/* ══════════════════════════════════════════════════════════════
   MON-PROFIL
   ══════════════════════════════════════════════════════════════ */
.card-toggle  { cursor: pointer; }
.card-pink    { border-left-color: var(--pink) !important; }
.card-teal    { border-left-color: #0d9488 !important; }
.form-box-attached { margin-top: -10px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; }
.cb-auto      { width: auto; margin-top: 3px; }
.cb-label     { margin: 0; color: var(--muted); font-size: 0.9em; }

/* ══════════════════════════════════════════════════════════════
   MON-PORTRAIT
   ══════════════════════════════════════════════════════════════ */
.portrait-title { font-size: 1.8em; color: var(--pink); margin-bottom: 4px; }
.trinity-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 16px;
    margin-bottom: 8px;
}
.trinity-item  { text-align: center; }
.trinity-icon  { font-size: 1.2em; }
.trinity-label { font-size: 0.8em; color: var(--muted); }
.trinity-value { font-size: 0.9em; font-weight: 600; }
.ico-num   { color: #60a5fa; }
.ico-soul  { color: #f9a8d4; }
.ico-expr  { color: #fb923c; }

.planet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 8px; }
.planet-card { background: var(--bg3); border-radius: 10px; padding: 12px; text-align: center; }
.planet-card-asc { background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.3); }
.planet-icon  { font-size: 1.3em; margin-bottom: 4px; }
.planet-name  { font-size: 0.78em; color: var(--muted); margin-bottom: 4px; }
.planet-sign  { font-size: 0.88em; font-weight: 600; }
.planet-deg   { font-size: 0.75em; color: var(--muted); }

.num-grid-portrait { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 8px; }
.num-card-sm       { background: var(--bg3); border-radius: 10px; padding: 12px; text-align: center; }
.num-card-label    { font-size: 0.75em; color: var(--muted); margin-bottom: 4px; }
.num-card-value    { font-size: 1.8em; font-weight: 800; }
.num-card-sublabel { font-size: 0.75em; color: var(--muted); }

.portrait-essence {
    line-height: 1.8;
    color: var(--text);
    margin-bottom: 24px;
    font-size: 1.05em;
    font-style: italic;
    border-left: 3px solid var(--pink);
    padding-left: 16px;
}
.mb-20 { margin-bottom: 20px; }

/* ── INSCRIPTION ── */
.info-box {
    font-size: 0.85em;
    color: var(--muted);
    background: var(--bg2);
    padding: 14px;
    border-radius: 8px;
    border-left: 3px solid var(--purple);
}
.success-lg { font-size: 1.1em; }
.mt-10      { margin-top: 10px; }

/* ── UTILITAIRES SUPPLÉMENTAIRES ── */
.mt-14 { margin-top: 14px; }
.mt-24 { margin-top: 24px; }
.btn-full { width: 100%; }

/* ══════════════════════════════════════════════════════════════
   ASTROLOGIE CHINOISE
   ══════════════════════════════════════════════════════════════ */
.chinese-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.chinese-card {
    background: var(--bg3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(252,196,70,0.2);
}
.chinese-card-name   { color: var(--pink); font-weight: 600; margin-bottom: 8px; }
.chinese-card-sign   { font-size: 2.5em; margin-bottom: 4px; }
.chinese-card-label  { font-size: 1.1em; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.chinese-card-full   { font-size: 0.8em; color: #fcd34d; margin-bottom: 8px; }
.chinese-card-hour   { font-size: 0.82em; color: var(--muted); margin-bottom: 8px; }
.chinese-card-desc   { font-size: 0.78em; color: var(--muted); line-height: 1.5; text-align: left; }

.chinese-score-box   { text-align: center; margin-bottom: 16px; }
.chinese-score-num   { font-size: 2.5em; font-weight: 800; color: #fcd34d; }
.chinese-score-desc  { color: var(--muted); font-size: 0.9em; margin-top: 4px; }

.chinese-bonuses     { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }

/* ── Day Master ── */
.chinese-dm-block    { margin: 8px 0 4px; padding: 7px 10px; background: rgba(252,211,77,.07); border: 1px solid rgba(252,211,77,.2); border-radius: 7px; font-size: .82em; color: var(--text); text-align: center; }
.chinese-dm-tag      { display: block; font-size: .65em; color: #fcd34d; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }

/* ── 4 Piliers BaZi ── */
.chinese-pillars-block { margin: 8px 0 6px; }
.chinese-pillars-row   { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.chinese-pillar        { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 5px 3px; text-align: center; }
.chinese-pillar--day   { border-color: rgba(252,211,77,.4); background: rgba(252,211,77,.06); }
.cp-lbl  { font-size: .58em; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.cp-zh   { font-size: 1.25em; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 2px; }
.chinese-pillar--day .cp-zh { color: #fcd34d; }
.cp-fr   { font-size: .56em; color: #94a3b8; line-height: 1.3; }
.cp-nature { font-size: .72em; color: var(--muted); font-style: italic; margin-top: 6px; line-height: 1.45; text-align: left; }
.chinese-bonus-badge {
    background: rgba(252,211,77,0.1);
    border: 1px solid rgba(252,211,77,0.3);
    color: #fcd34d;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.8em;
}