/* ===================================================================
   EasyGold PRO — Thème premium « Noir & Or »
   =================================================================== */

:root {
    --eg-black:        #0a0a0f;
    --eg-black-2:      #12121a;
    --eg-black-3:      #1a1a25;
    --eg-surface:      rgba(255, 255, 255, 0.04);
    --eg-surface-2:    rgba(255, 255, 255, 0.07);
    --eg-border:       rgba(212, 175, 55, 0.18);
    --eg-gold:         #d4af37;
    --eg-gold-light:   #f5d77a;
    --eg-gold-deep:    #b8941f;
    --eg-gold-grad:    linear-gradient(135deg, #f5d77a 0%, #d4af37 45%, #b8941f 100%);
    --eg-text:         #f5f5f7;
    --eg-text-muted:   #9a9aa8;
    --eg-success:      #2ecc71;
    --eg-danger:       #e74c3c;
    --eg-warning:      #f39c12;
    --eg-info:         #3498db;
    --eg-radius:       16px;
    --eg-shadow:       0 20px 60px rgba(0, 0, 0, 0.5);
    --eg-shadow-gold:  0 8px 32px rgba(212, 175, 55, 0.25);
    --eg-font:         'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--eg-font);
    color: var(--eg-text);
    background: var(--eg-black);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Fond animé doré ---------- */
.eg-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 28% 42%, rgba(212, 175, 55, 0.18), transparent 38%),
        radial-gradient(circle at 85% 75%, rgba(212, 175, 55, 0.08), transparent 42%),
        linear-gradient(160deg, #0a0a0f 0%, #12121a 50%, #060608 100%);
}
/* Effet « bougies de marché » subtil en fond */
.eg-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='400' viewBox='0 0 1200 400'><g fill='none' stroke='%23d4af37' stroke-width='1.2' opacity='0.10'><polyline points='0,330 80,300 160,310 240,260 320,270 400,210 480,220 560,160 640,170 720,120 800,130 880,80 960,90 1040,50 1120,60 1200,30'/></g><g fill='%23d4af37' opacity='0.06'><rect x='70' y='285' width='10' height='40'/><rect x='230' y='245' width='10' height='45'/><rect x='390' y='195' width='10' height='50'/><rect x='550' y='150' width='10' height='48'/><rect x='710' y='105' width='10' height='52'/><rect x='870' y='70' width='10' height='46'/><rect x='1030' y='40' width='10' height='44'/></g></svg>");
    background-repeat: no-repeat;
    background-position: center 60%;
    background-size: 120% auto;
    mask-image: radial-gradient(ellipse at center, black, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 85%);
}
.eg-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(212,175,55,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,175,55,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, black, transparent 80%);
}

/* Particules dorées flottantes */
.eg-particles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.eg-particle {
    position: absolute;
    width: 4px; height: 4px;
    background: var(--eg-gold);
    border-radius: 50%;
    opacity: 0.5;
    box-shadow: 0 0 8px var(--eg-gold);
    animation: floatUp linear infinite;
}
@keyframes floatUp {
    from { transform: translateY(105vh) scale(0.5); opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    to   { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* ---------- Glassmorphism ---------- */
.eg-glass {
    background: var(--eg-surface);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    box-shadow: var(--eg-shadow);
}

/* ---------- Texte doré ---------- */
.eg-gold-text {
    background: var(--eg-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--eg-gold);
}

/* ---------- Logo circulaire ---------- */
.eg-logo {
    width: 96px; height: 96px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 30% 30%, #1a1a25, #0a0a0f);
    border: 2px solid var(--eg-gold);
    box-shadow: var(--eg-shadow-gold), inset 0 0 20px rgba(212,175,55,0.2);
    position: relative;
    animation: logoPulse 3s ease-in-out infinite;
}
.eg-logo span {
    font-size: 2.4rem; font-weight: 800;
    background: var(--eg-gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes logoPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.4), var(--eg-shadow-gold); }
    50%     { box-shadow: 0 0 0 14px rgba(212,175,55,0), var(--eg-shadow-gold); }
}

/* ---------- Boutons ---------- */
.eg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1.5rem;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
    text-decoration: none;
}
.eg-btn-gold {
    background: var(--eg-gold-grad);
    color: #1a1300;
    box-shadow: var(--eg-shadow-gold);
}
.eg-btn-gold:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 36px rgba(212,175,55,0.4); }
.eg-btn-gold:active { transform: translateY(0); }
.eg-btn-ghost {
    background: transparent;
    border: 1px solid var(--eg-border);
    color: var(--eg-text);
}
.eg-btn-ghost:hover { background: var(--eg-surface-2); }
.eg-btn-block { width: 100%; }

/* ---------- Formulaires ---------- */
.eg-field { margin-bottom: 1.1rem; }
.eg-label {
    display: block; margin-bottom: .45rem;
    font-size: .85rem; font-weight: 500; color: var(--eg-text-muted);
}
.eg-input-wrap { position: relative; }
.eg-input {
    width: 100%;
    padding: .85rem 1rem .85rem 2.8rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--eg-border);
    border-radius: 12px;
    color: var(--eg-text);
    font-size: .95rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.eg-input::placeholder { color: #6a6a78; }
.eg-input:focus {
    outline: none;
    border-color: var(--eg-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
    background: rgba(0,0,0,0.45);
}
.eg-input-icon {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--eg-gold); opacity: .8; font-size: 1.05rem;
}

/* ---------- Alertes ---------- */
.eg-alert {
    padding: .85rem 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    font-size: .9rem;
    border: 1px solid transparent;
}
.eg-alert-danger  { background: rgba(231,76,60,0.12);  border-color: rgba(231,76,60,0.35);  color: #ff9b8f; }
.eg-alert-success { background: rgba(46,204,113,0.12); border-color: rgba(46,204,113,0.35); color: #7ee2a8; }
.eg-alert-info    { background: rgba(52,152,219,0.12); border-color: rgba(52,152,219,0.35); color: #8fc7ef; }

/* ---------- Switch de langue (pilule) ---------- */
.eg-lang-pill {
    position: absolute; top: 1.6rem; right: 1.8rem; z-index: 20;
    display: flex; align-items: center; gap: .25rem;
    padding: .3rem .4rem .3rem .7rem;
    background: rgba(18,18,26,0.7);
    border: 1px solid var(--eg-border);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.eg-lang-globe { color: var(--eg-gold); font-size: .95rem; display: grid; place-items: center; margin-right: .15rem; }
.eg-lang-pill a {
    padding: .35rem .85rem; border-radius: 999px;
    font-size: .82rem; font-weight: 600; text-decoration: none;
    color: var(--eg-text-muted); transition: all .2s;
}
.eg-lang-pill a.active { color: #1a1300; background: var(--eg-gold-grad); box-shadow: var(--eg-shadow-gold); }
.eg-lang-pill a:not(.active):hover { color: var(--eg-gold-light); }

/* ---------- Cartes KPI ---------- */
.eg-kpi {
    padding: 1.4rem;
    position: relative;
    overflow: hidden;
}
.eg-kpi-label { font-size: .8rem; color: var(--eg-text-muted); margin-bottom: .4rem; }
.eg-kpi-value { font-size: 1.7rem; font-weight: 800; }
.eg-kpi-icon {
    position: absolute; top: 1rem; right: 1rem;
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(212,175,55,0.12); color: var(--eg-gold); font-size: 1.2rem;
}

/* ---------- Animations d'entrée ---------- */
.eg-fade-up { animation: fadeUp .6s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Utilitaires ---------- */
.text-muted-eg { color: var(--eg-text-muted); }
a.eg-link { color: var(--eg-gold-light); text-decoration: none; }
a.eg-link:hover { text-decoration: underline; }