/* =============================================================
   Obelisk — Soft Themes (Rose, Ciel, Violet, Blanc)
   Accessible, welcoming palette for beginners
   ============================================================= */

/* ---- THEME SWITCHER WIDGET ---- */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}
.theme-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.theme-btn:hover { transform: scale(1.2); }
.theme-btn.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }
.theme-btn[data-theme="dark"]        { background: #0a0a0f; }
.theme-btn[data-theme="rose"]        { background: linear-gradient(135deg, #F9B8CE, #FFD6E7); }
.theme-btn[data-theme="ciel"]        { background: linear-gradient(135deg, #93C5FD, #BAE6FD); }
.theme-btn[data-theme="violet"]      { background: linear-gradient(135deg, #C4B5FD, #F0ABFC); }
.theme-btn[data-theme="blanc"]       { background: linear-gradient(135deg, #F8F8F4, #EEDFC0); }

/* ---- THEME: ROSE ---- */
body.theme-rose {
    --bg:         #FEF0F5;
    --bg2:        #FDE8F0;
    --bg3:        #FBD8E6;
    --border:     rgba(214, 99, 140, 0.25);
    --text:       #3D1A2A;
    --text-muted: #8A5068;
    --green:      #D6638C;
    --purple:     #9B3D6A;
    --gold:       #C97838;
    --accent:     #D6638C;
    --card-bg:    rgba(255,255,255,0.8);
    background: var(--bg);
    color: var(--text);
}
body.theme-rose .landing-header {
    background: rgba(254, 240, 245, 0.95);
    border-bottom-color: rgba(214,99,140,0.2);
}
body.theme-rose .landing-bg { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(249,184,206,0.5), transparent); }
body.theme-rose .hero { background: none; }
body.theme-rose .hero-title { color: #3D1A2A; }
body.theme-rose .hero-subtitle { color: #8A5068; }
body.theme-rose .hero-perks span { background: rgba(214,99,140,0.1); color: #D6638C; border-color: rgba(214,99,140,0.2); }
body.theme-rose .badge-green { background: rgba(214,99,140,0.12); color: #C04A78; border-color: rgba(214,99,140,0.3); }
body.theme-rose .badge-purple { background: rgba(155,61,106,0.12); color: #9B3D6A; border-color: rgba(155,61,106,0.3); }
body.theme-rose .section-title { color: #3D1A2A; }
body.theme-rose .section-desc { color: #8A5068; }
body.theme-rose .feature-card {
    background: rgba(255,255,255,0.9);
    border-color: rgba(214,99,140,0.2);
    color: #3D1A2A;
}
body.theme-rose .feature-title { color: #3D1A2A; }
body.theme-rose .feature-desc { color: #8A5068; }
body.theme-rose .feature-tag { background: rgba(214,99,140,0.1); color: #C04A78; }
body.theme-rose .product-card { background: rgba(255,255,255,0.9); border-color: rgba(214,99,140,0.2); }
body.theme-rose .product-name { color: #3D1A2A; }
body.theme-rose .product-apy { color: #C04A78; }
body.theme-rose .product-desc { color: #8A5068; }
body.theme-rose .product-protection { color: #D6638C; }
body.theme-rose .step-item { background: rgba(255,255,255,0.9); border-color: rgba(214,99,140,0.2); }
body.theme-rose .step-number { background: linear-gradient(135deg, #F9B8CE, #D6638C); color: #fff; }
body.theme-rose .step-title { color: #3D1A2A; }
body.theme-rose .step-desc { color: #8A5068; }
body.theme-rose .btn-open-app, body.theme-rose .btn-cta-primary {
    background: linear-gradient(135deg, #D6638C, #F9B8CE);
    color: #fff;
    border: none;
}
body.theme-rose .btn-cta-secondary { border-color: rgba(214,99,140,0.4); color: #D6638C; }
body.theme-rose .stats-bar { background: rgba(255,255,255,0.7); border-color: rgba(214,99,140,0.15); }
body.theme-rose .stat-value { color: #D6638C; }
body.theme-rose .stat-label { color: #8A5068; }
body.theme-rose .landing-footer { background: rgba(253,232,240,0.8); border-color: rgba(214,99,140,0.15); }
body.theme-rose .footer-logo, body.theme-rose .footer-tagline, body.theme-rose .footer-copy { color: #8A5068; }
body.theme-rose .footer-links a { color: #8A5068; }
body.theme-rose .faq-q { color: #3D1A2A; }
body.theme-rose .faq-a { color: #8A5068; }
body.theme-rose .faq-item { border-color: rgba(214,99,140,0.15); }
body.theme-rose .faq-item.open .faq-q { color: #D6638C; }
body.theme-rose .faq-item.open .faq-arrow { color: #D6638C; }
body.theme-rose .roadmap-phase { background: rgba(255,255,255,0.9); border-color: rgba(214,99,140,0.2); }
body.theme-rose .phase-title { color: #3D1A2A; }
body.theme-rose .phase-items li { color: #8A5068; }
body.theme-rose table thead tr { background: rgba(255,255,255,0.8); }
body.theme-rose table th { color: #8A5068; border-color: rgba(214,99,140,0.1); }
body.theme-rose table td { color: #3D1A2A; border-color: rgba(214,99,140,0.06); }
body.theme-rose #calc-amount, body.theme-rose #calc-product {
    background: #fff;
    border-color: rgba(214,99,140,0.3);
    color: #3D1A2A;
}
body.theme-rose input[type=range] { accent-color: #D6638C; }

/* ---- THEME: CIEL (SKY BLUE) ---- */
body.theme-ciel {
    --bg:         #EFF8FF;
    --bg2:        #DBEFFE;
    --bg3:        #C6E4FC;
    --border:     rgba(58,142,219,0.25);
    --text:       #0F2D4A;
    --text-muted: #4A7A9B;
    --green:      #3A8EDB;
    --purple:     #2563EB;
    --gold:       #C97838;
    --accent:     #3A8EDB;
    --card-bg:    rgba(255,255,255,0.85);
    background: var(--bg);
    color: var(--text);
}
body.theme-ciel .landing-header { background: rgba(239,248,255,0.95); border-bottom-color: rgba(58,142,219,0.2); }
body.theme-ciel .landing-bg { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(147,197,253,0.5), transparent); }
body.theme-ciel .hero-title { color: #0F2D4A; }
body.theme-ciel .hero-subtitle { color: #4A7A9B; }
body.theme-ciel .hero-perks span { background: rgba(58,142,219,0.1); color: #3A8EDB; border-color: rgba(58,142,219,0.2); }
body.theme-ciel .badge-green { background: rgba(58,142,219,0.12); color: #2563EB; border-color: rgba(58,142,219,0.3); }
body.theme-ciel .badge-purple { background: rgba(37,99,235,0.12); color: #1D4ED8; border-color: rgba(37,99,235,0.3); }
body.theme-ciel .section-title { color: #0F2D4A; }
body.theme-ciel .section-desc { color: #4A7A9B; }
body.theme-ciel .feature-card { background: rgba(255,255,255,0.9); border-color: rgba(58,142,219,0.2); color: #0F2D4A; }
body.theme-ciel .feature-title { color: #0F2D4A; }
body.theme-ciel .feature-desc { color: #4A7A9B; }
body.theme-ciel .feature-tag { background: rgba(58,142,219,0.1); color: #2563EB; }
body.theme-ciel .product-card { background: rgba(255,255,255,0.9); border-color: rgba(58,142,219,0.2); }
body.theme-ciel .product-name { color: #0F2D4A; }
body.theme-ciel .product-apy { color: #2563EB; }
body.theme-ciel .product-desc { color: #4A7A9B; }
body.theme-ciel .product-protection { color: #3A8EDB; }
body.theme-ciel .step-item { background: rgba(255,255,255,0.9); border-color: rgba(58,142,219,0.2); }
body.theme-ciel .step-number { background: linear-gradient(135deg, #93C5FD, #3A8EDB); color: #fff; }
body.theme-ciel .step-title { color: #0F2D4A; }
body.theme-ciel .step-desc { color: #4A7A9B; }
body.theme-ciel .btn-open-app, body.theme-ciel .btn-cta-primary { background: linear-gradient(135deg, #3A8EDB, #93C5FD); color: #fff; border: none; }
body.theme-ciel .btn-cta-secondary { border-color: rgba(58,142,219,0.4); color: #3A8EDB; }
body.theme-ciel .stats-bar { background: rgba(255,255,255,0.7); border-color: rgba(58,142,219,0.15); }
body.theme-ciel .stat-value { color: #3A8EDB; }
body.theme-ciel .stat-label { color: #4A7A9B; }
body.theme-ciel .landing-footer { background: rgba(219,239,254,0.8); border-color: rgba(58,142,219,0.15); }
body.theme-ciel .footer-logo, body.theme-ciel .footer-tagline, body.theme-ciel .footer-copy, body.theme-ciel .footer-links a { color: #4A7A9B; }
body.theme-ciel .faq-q { color: #0F2D4A; }
body.theme-ciel .faq-a { color: #4A7A9B; }
body.theme-ciel .faq-item { border-color: rgba(58,142,219,0.15); }
body.theme-ciel .faq-item.open .faq-q, body.theme-ciel .faq-item.open .faq-arrow { color: #3A8EDB; }
body.theme-ciel .roadmap-phase { background: rgba(255,255,255,0.9); border-color: rgba(58,142,219,0.2); }
body.theme-ciel .phase-title { color: #0F2D4A; }
body.theme-ciel .phase-items li { color: #4A7A9B; }
body.theme-ciel table thead tr { background: rgba(255,255,255,0.8); }
body.theme-ciel table th { color: #4A7A9B; border-color: rgba(58,142,219,0.1); }
body.theme-ciel table td { color: #0F2D4A; border-color: rgba(58,142,219,0.06); }
body.theme-ciel #calc-amount, body.theme-ciel #calc-product { background: #fff; border-color: rgba(58,142,219,0.3); color: #0F2D4A; }
body.theme-ciel input[type=range] { accent-color: #3A8EDB; }

/* ---- THEME: VIOLET ROSE ---- */
body.theme-violet {
    --bg:         #FAF0FB;
    --bg2:        #F3E0F6;
    --bg3:        #E9D0EF;
    --border:     rgba(155,95,176,0.25);
    --text:       #2D0F3A;
    --text-muted: #7A4A8A;
    --green:      #9B5FB0;
    --purple:     #7C3D99;
    --gold:       #C97838;
    --accent:     #9B5FB0;
    --card-bg:    rgba(255,255,255,0.85);
    background: var(--bg);
    color: var(--text);
}
body.theme-violet .landing-header { background: rgba(250,240,251,0.95); border-bottom-color: rgba(155,95,176,0.2); }
body.theme-violet .landing-bg { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(196,181,253,0.5), transparent); }
body.theme-violet .hero-title { color: #2D0F3A; }
body.theme-violet .hero-subtitle { color: #7A4A8A; }
body.theme-violet .hero-perks span { background: rgba(155,95,176,0.1); color: #9B5FB0; border-color: rgba(155,95,176,0.2); }
body.theme-violet .badge-green { background: rgba(155,95,176,0.12); color: #7C3D99; border-color: rgba(155,95,176,0.3); }
body.theme-violet .badge-purple { background: rgba(124,61,153,0.12); color: #6B2A88; border-color: rgba(124,61,153,0.3); }
body.theme-violet .section-title { color: #2D0F3A; }
body.theme-violet .section-desc { color: #7A4A8A; }
body.theme-violet .feature-card { background: rgba(255,255,255,0.9); border-color: rgba(155,95,176,0.2); color: #2D0F3A; }
body.theme-violet .feature-title { color: #2D0F3A; }
body.theme-violet .feature-desc { color: #7A4A8A; }
body.theme-violet .feature-tag { background: rgba(155,95,176,0.1); color: #7C3D99; }
body.theme-violet .product-card { background: rgba(255,255,255,0.9); border-color: rgba(155,95,176,0.2); }
body.theme-violet .product-name { color: #2D0F3A; }
body.theme-violet .product-apy { color: #7C3D99; }
body.theme-violet .product-desc { color: #7A4A8A; }
body.theme-violet .product-protection { color: #9B5FB0; }
body.theme-violet .step-item { background: rgba(255,255,255,0.9); border-color: rgba(155,95,176,0.2); }
body.theme-violet .step-number { background: linear-gradient(135deg, #F0ABFC, #9B5FB0); color: #fff; }
body.theme-violet .step-title { color: #2D0F3A; }
body.theme-violet .step-desc { color: #7A4A8A; }
body.theme-violet .btn-open-app, body.theme-violet .btn-cta-primary { background: linear-gradient(135deg, #9B5FB0, #F0ABFC); color: #fff; border: none; }
body.theme-violet .btn-cta-secondary { border-color: rgba(155,95,176,0.4); color: #9B5FB0; }
body.theme-violet .stats-bar { background: rgba(255,255,255,0.7); border-color: rgba(155,95,176,0.15); }
body.theme-violet .stat-value { color: #9B5FB0; }
body.theme-violet .stat-label { color: #7A4A8A; }
body.theme-violet .landing-footer { background: rgba(243,224,246,0.8); border-color: rgba(155,95,176,0.15); }
body.theme-violet .footer-logo, body.theme-violet .footer-tagline, body.theme-violet .footer-copy, body.theme-violet .footer-links a { color: #7A4A8A; }
body.theme-violet .faq-q { color: #2D0F3A; }
body.theme-violet .faq-a { color: #7A4A8A; }
body.theme-violet .faq-item { border-color: rgba(155,95,176,0.15); }
body.theme-violet .faq-item.open .faq-q, body.theme-violet .faq-item.open .faq-arrow { color: #9B5FB0; }
body.theme-violet .roadmap-phase { background: rgba(255,255,255,0.9); border-color: rgba(155,95,176,0.2); }
body.theme-violet .phase-title { color: #2D0F3A; }
body.theme-violet .phase-items li { color: #7A4A8A; }
body.theme-violet table thead tr { background: rgba(255,255,255,0.8); }
body.theme-violet table th { color: #7A4A8A; border-color: rgba(155,95,176,0.1); }
body.theme-violet table td { color: #2D0F3A; border-color: rgba(155,95,176,0.06); }
body.theme-violet #calc-amount, body.theme-violet #calc-product { background: #fff; border-color: rgba(155,95,176,0.3); color: #2D0F3A; }
body.theme-violet input[type=range] { accent-color: #9B5FB0; }

/* ---- THEME: BLANC NACRE ---- */
body.theme-blanc {
    --bg:         #FDFCF8;
    --bg2:        #F5F2EA;
    --bg3:        #EDE9DC;
    --border:     rgba(184,150,12,0.2);
    --text:       #2A2416;
    --text-muted: #7A6A40;
    --green:      #B8960C;
    --purple:     #8A6A00;
    --gold:       #C97838;
    --accent:     #B8960C;
    --card-bg:    rgba(255,255,255,0.9);
    background: var(--bg);
    color: var(--text);
}
body.theme-blanc .landing-header { background: rgba(253,252,248,0.97); border-bottom-color: rgba(184,150,12,0.15); }
body.theme-blanc .landing-bg { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(224,212,160,0.4), transparent); }
body.theme-blanc .hero-title { color: #2A2416; }
body.theme-blanc .hero-subtitle { color: #7A6A40; }
body.theme-blanc .hero-perks span { background: rgba(184,150,12,0.08); color: #B8960C; border-color: rgba(184,150,12,0.2); }
body.theme-blanc .badge-green { background: rgba(184,150,12,0.1); color: #9A7800; border-color: rgba(184,150,12,0.25); }
body.theme-blanc .badge-purple { background: rgba(138,106,0,0.1); color: #7A6000; border-color: rgba(138,106,0,0.25); }
body.theme-blanc .section-title { color: #2A2416; }
body.theme-blanc .section-desc { color: #7A6A40; }
body.theme-blanc .feature-card { background: rgba(255,255,255,0.95); border-color: rgba(184,150,12,0.15); color: #2A2416; }
body.theme-blanc .feature-title { color: #2A2416; }
body.theme-blanc .feature-desc { color: #7A6A40; }
body.theme-blanc .feature-tag { background: rgba(184,150,12,0.08); color: #9A7800; }
body.theme-blanc .product-card { background: rgba(255,255,255,0.95); border-color: rgba(184,150,12,0.15); }
body.theme-blanc .product-name { color: #2A2416; }
body.theme-blanc .product-apy { color: #9A7800; }
body.theme-blanc .product-desc { color: #7A6A40; }
body.theme-blanc .product-protection { color: #B8960C; }
body.theme-blanc .step-item { background: rgba(255,255,255,0.95); border-color: rgba(184,150,12,0.15); }
body.theme-blanc .step-number { background: linear-gradient(135deg, #E0D4A0, #B8960C); color: #fff; }
body.theme-blanc .step-title { color: #2A2416; }
body.theme-blanc .step-desc { color: #7A6A40; }
body.theme-blanc .btn-open-app, body.theme-blanc .btn-cta-primary { background: linear-gradient(135deg, #B8960C, #E0D4A0); color: #2A2416; border: none; }
body.theme-blanc .btn-cta-secondary { border-color: rgba(184,150,12,0.3); color: #B8960C; }
body.theme-blanc .stats-bar { background: rgba(255,255,255,0.8); border-color: rgba(184,150,12,0.1); }
body.theme-blanc .stat-value { color: #B8960C; }
body.theme-blanc .stat-label { color: #7A6A40; }
body.theme-blanc .landing-footer { background: rgba(245,242,234,0.9); border-color: rgba(184,150,12,0.12); }
body.theme-blanc .footer-logo, body.theme-blanc .footer-tagline, body.theme-blanc .footer-copy, body.theme-blanc .footer-links a { color: #7A6A40; }
body.theme-blanc .faq-q { color: #2A2416; }
body.theme-blanc .faq-a { color: #7A6A40; }
body.theme-blanc .faq-item { border-color: rgba(184,150,12,0.12); }
body.theme-blanc .faq-item.open .faq-q, body.theme-blanc .faq-item.open .faq-arrow { color: #B8960C; }
body.theme-blanc .roadmap-phase { background: rgba(255,255,255,0.95); border-color: rgba(184,150,12,0.15); }
body.theme-blanc .phase-title { color: #2A2416; }
body.theme-blanc .phase-items li { color: #7A6A40; }
body.theme-blanc table thead tr { background: rgba(255,255,255,0.9); }
body.theme-blanc table th { color: #7A6A40; border-color: rgba(184,150,12,0.08); }
body.theme-blanc table td { color: #2A2416; border-color: rgba(184,150,12,0.05); }
body.theme-blanc #calc-amount, body.theme-blanc #calc-product { background: #fff; border-color: rgba(184,150,12,0.25); color: #2A2416; }
body.theme-blanc input[type=range] { accent-color: #B8960C; }

/* ---- SOFT BG on section alternation (all light themes) ---- */
body.theme-rose section[style*="rgba(15,15,26"],
body.theme-ciel section[style*="rgba(15,15,26"],
body.theme-violet section[style*="rgba(15,15,26"],
body.theme-blanc section[style*="rgba(15,15,26"] {
    background: rgba(0,0,0,0.03) !important;
}
body.theme-rose .roadmap-phase.phase-done { border-color: rgba(214,99,140,0.4); }
body.theme-ciel .roadmap-phase.phase-done { border-color: rgba(58,142,219,0.4); }
body.theme-violet .roadmap-phase.phase-done { border-color: rgba(155,95,176,0.4); }
body.theme-blanc .roadmap-phase.phase-done { border-color: rgba(184,150,12,0.4); }

/* Transition douce au changement de theme */
body { transition: background 0.4s ease, color 0.3s ease; }

/* ============================================================
   REGLES DE CONTRASTE MINIMUM — thèmes clairs
   Empêche tout texte d'être invisible sur fond clair.
   Toutes les couleurs inline trop claires sont écrasées.
   ============================================================ */

/* Raccourci */
body.theme-rose, body.theme-ciel, body.theme-violet, body.theme-blanc { --_lt: 1; }

/* Hero title : gradient blanc → invisible sur fond clair → remplacé par gradient sombre */
body.theme-rose .hero-title,
body.theme-ciel .hero-title,
body.theme-violet .hero-title,
body.theme-blanc .hero-title {
    background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Titres inline avec color:#e8e4d9 (blanc cassé) → forcé en couleur de texte */
body.theme-rose h2[style], body.theme-ciel h2[style], body.theme-violet h2[style], body.theme-blanc h2[style] { color: var(--text) !important; }
body.theme-rose h3[style], body.theme-ciel h3[style], body.theme-violet h3[style], body.theme-blanc h3[style] { color: var(--text) !important; }
body.theme-rose h4[style], body.theme-ciel h4[style], body.theme-violet h4[style], body.theme-blanc h4[style] { color: var(--text) !important; }

/* Paragraphes / texte avec couleurs vertes sombres (#8a9e8a, #6b8f6b) → ok sur dark mais trop pâle sur clair */
body.theme-rose p[style], body.theme-ciel p[style], body.theme-violet p[style], body.theme-blanc p[style] { color: var(--muted) !important; }
body.theme-rose div[style] > p, body.theme-ciel div[style] > p, body.theme-violet div[style] > p, body.theme-blanc div[style] > p { color: var(--muted) !important; }

/* strong inline avec color blanc/clair → forcé en couleur accent */
body.theme-rose strong, body.theme-ciel strong, body.theme-violet strong, body.theme-blanc strong {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
}

/* Spans de texte inline clairs */
body.theme-rose span[style*="color:#e8e4d9"],
body.theme-ciel span[style*="color:#e8e4d9"],
body.theme-violet span[style*="color:#e8e4d9"],
body.theme-blanc span[style*="color:#e8e4d9"] { color: var(--text) !important; }

body.theme-rose span[style*="color:#6b8f6b"],
body.theme-ciel span[style*="color:#6b8f6b"],
body.theme-violet span[style*="color:#6b8f6b"],
body.theme-blanc span[style*="color:#6b8f6b"] { color: var(--muted) !important; }

/* div inline backgrounds sombres → neutralisés */
body.theme-rose div[style*="background:rgba(10,10"],
body.theme-ciel div[style*="background:rgba(10,10"],
body.theme-violet div[style*="background:rgba(10,10"],
body.theme-blanc div[style*="background:rgba(10,10"] {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
}

/* Cellules tableau */
body.theme-rose table td, body.theme-ciel table td, body.theme-violet table td, body.theme-blanc table td { color: var(--text) !important; }
body.theme-rose table th, body.theme-ciel table th, body.theme-violet table th, body.theme-blanc table th { color: var(--muted) !important; }
body.theme-rose table tr[style], body.theme-ciel table tr[style], body.theme-violet table tr[style], body.theme-blanc table tr[style] { background: rgba(0,0,0,0.03) !important; }

/* Phase roadmap inline colors */
body.theme-rose .phase-status, body.theme-ciel .phase-status, body.theme-violet .phase-status, body.theme-blanc .phase-status { color: var(--text) !important; }

/* Input/select dark backgrounds dans le simulateur */
body.theme-rose #calc-amount, body.theme-rose #calc-product,
body.theme-ciel  #calc-amount, body.theme-ciel  #calc-product,
body.theme-violet #calc-amount, body.theme-violet #calc-product,
body.theme-blanc #calc-amount, body.theme-blanc #calc-product {
    background: #ffffff !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Labels du simulateur */
body.theme-rose label[style], body.theme-ciel label[style], body.theme-violet label[style], body.theme-blanc label[style] { color: var(--muted) !important; }

/* Bandeau debutant : texte blanc sur fond transparent → forcé visible */
body.theme-rose .landing-bg + * span[style*="color:#e8e4d9"],
body.theme-ciel .landing-bg + * span[style*="color:#e8e4d9"],
body.theme-violet .landing-bg + * span[style*="color:#e8e4d9"],
body.theme-blanc .landing-bg + * span[style*="color:#e8e4d9"] { color: var(--text) !important; }

/* Lang switcher buttons — restent lisibles sur tous les thèmes */
body.theme-rose #lang-fr, body.theme-rose #lang-en,
body.theme-ciel #lang-fr, body.theme-ciel #lang-en,
body.theme-violet #lang-fr, body.theme-violet #lang-en,
body.theme-blanc #lang-fr, body.theme-blanc #lang-en {
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ============================================================
   THEME HINT — Callout "Choose your theme"
   ============================================================ */

#theme-hint {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(10, 10, 20, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 40px;
    padding: 9px 18px 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #e8e4d9;
    white-space: nowrap;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,255,136,0.08);
    animation: hint-in 0.5s cubic-bezier(.22,1,.36,1) both;
}
#theme-hint.hint-out {
    animation: hint-out 0.4s ease forwards;
}
@keyframes hint-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes hint-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}
.hint-text { flex: 1; }
.hint-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    margin-left: 4px;
    transition: color 0.2s;
}
.hint-close:hover { color: #fff; }

/* Thèmes clairs — hint adapté */
body.theme-rose #theme-hint,
body.theme-ciel #theme-hint,
body.theme-violet #theme-hint,
body.theme-blanc #theme-hint {
    background: rgba(255,255,255,0.88);
    border-color: rgba(var(--accent-rgb, 214,99,140), 0.4);
    color: var(--text);
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
body.theme-rose .hint-close,
body.theme-ciel .hint-close,
body.theme-violet .hint-close,
body.theme-blanc .hint-close { color: var(--muted); }

/* ============================================================
   MATRIX RAIN — Canvas + Toggle + Palette
   ============================================================ */

#matrix-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    display: none;
}

/* Contenu passe au-dessus du canvas sur toutes les pages */
body.matrix-active > *:not(#matrix-canvas) { position: relative; z-index: 1; }

/* Bouton toggle Matrix */
#matrix-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 13px;
    font-weight: 700;
    color: #e8e4d9;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
}
#matrix-toggle:hover {
    background: rgba(0,255,136,0.15);
    border-color: rgba(0,255,136,0.4);
    color: #00ff88;
}
#matrix-toggle.matrix-on {
    background: rgba(0,255,136,0.18);
    border-color: rgba(0,255,136,0.5);
    color: #00ff88;
    box-shadow: 0 0 12px rgba(0,255,136,0.25);
}

/* Palette de couleurs (affiché quand Matrix ON) — dropdown absolu */
#matrix-colors {
    display: none;
    position: absolute;
    top: 64px;
    right: 0;
    z-index: 200;
    background: rgba(10,10,15,0.97);
    border: 1px solid rgba(255,255,255,0.12);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 10px 14px;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.mpal-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    position: relative;
}
.mpal-dot:hover { transform: scale(1.25); }
.mpal-dot.mpal-active {
    border-color: #fff;
    transform: scale(1.2);
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
}
/* Couleurs des dots */
[data-matrix-palette="auto"]   { background: conic-gradient(#00ff88,#3a8edb,#d6638c,#b45fb0,#ffc300); }
[data-matrix-palette="green"]  { background: #00ff88; }
[data-matrix-palette="blue"]   { background: #1e82ff; }
[data-matrix-palette="cyan"]   { background: #00d2dc; }
[data-matrix-palette="rose"]   { background: #ff508c; }
[data-matrix-palette="violet"] { background: #b464ff; }
[data-matrix-palette="red"]    { background: #ff3c3c; }
[data-matrix-palette="gold"]   { background: #ffc300; }
[data-matrix-palette="white"]  { background: #d2e6ff; }

/* Thèmes clairs — bouton matrix adapté */
body.theme-rose #matrix-toggle,
body.theme-ciel #matrix-toggle,
body.theme-violet #matrix-toggle,
body.theme-blanc #matrix-toggle {
    color: var(--text) !important;
    border-color: var(--border) !important;
}
body.theme-rose #matrix-toggle.matrix-on,
body.theme-ciel #matrix-toggle.matrix-on,
body.theme-violet #matrix-toggle.matrix-on,
body.theme-blanc #matrix-toggle.matrix-on {
    background: rgba(0,200,100,0.12) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
}