/* assets/styles/landing.css */
:root { --bg:#0f0f12; --fg:#e9e9ef; --muted:#b8b8c7; --primary:#9b5cff; --card:#15151c; --line:#242435; }
*{box-sizing:border-box} img{max-width:100%;height:auto;display:block}
body.landing{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto}
a{color:inherit;text-decoration:none}
h1,h2{line-height:1.2;margin:.25rem 0 .5rem}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;min-height:92vh;padding:6rem 8vw}
.hero__content{max-width:640px}
.logo{height:256px;margin-bottom:1rem}
p{color:var(--muted)}
.cta{display:flex;gap:1rem;margin:2rem 0 1.5rem}
.btn{padding:.9rem 1.2rem;border-radius:12px;font-weight:700;border:1px solid transparent;display:inline-block}
.btn--primary{background:var(--primary);color:#fff}
.btn--secondary{background:#222534;color:#fff}
.btn--ghost{border-color:#3a3a46}
.hero__img{width:100%;border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.5)}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;padding:3rem 8vw}
.feature{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.25rem}

.screens{padding:2rem 8vw}
.screens .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.newsletter{padding:3rem 8vw}
.nl-form{display:flex;gap:.75rem;max-width:520px}
.nl-form input{flex:1;padding:.9rem 1rem;border-radius:12px;border:1px solid #2a2a35;background:#11131a;color:var(--fg)}

.footer{padding:2rem 8vw;border-top:1px solid var(--line);color:#a7a7bb;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer nav{display:flex;gap:1rem}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.topbar {
    background: #0f0f12;
    color: #fff;
    padding: .75rem 8vw;
    position: sticky; /* reste en haut au scroll */
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #242435;
}

.topbar__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar .brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
}

.topbar .auth-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.topbar .auth-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.topbar .auth-links a:hover {
    text-decoration: underline;
}

.topbar .welcome {
    font-size: .9rem;
    color: #ccc;
}

/* Auth layout */
.auth {
    min-height: calc(100vh - 64px); /* laisse la topbar si présente */
    display: grid;
    place-items: center;
    padding: 4rem 1rem;
}

.auth-card {
    width: min(480px, 92vw);
    background: #14141a;
    border: 1px solid #242435;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.auth-card__header {
    text-align: center;
    margin-bottom: 1rem;
}
.auth-card__header img {
    display:block; margin:0 auto .5rem auto;
}
.auth-card__header h1 {
    font-size: 1.5rem; margin: .25rem 0;
}
.auth-card__subtitle {
    color: var(--muted);
    margin: 0;
}

.auth-alert {
    background: #2a1e1e;
    border: 1px solid #5a2f2f;
    color: #ffd3d3;
    padding: .75rem .9rem;
    border-radius: 10px;
    margin: .75rem 0 1rem;
}

.auth-info {
    background: #151923;
    border: 1px solid #26304a;
    color: #bcd1ff;
    padding: .6rem .9rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: .95rem;
}

.auth-form .field {
    display: grid;
    gap: .35rem;
    margin-bottom: 1rem;
}

.auth-form label {
    font-weight: 600;
}

.auth-form input:not([type="checkbox"]),
.auth-form select,
.auth-form textarea {
    background: #11131a;
    color: var(--fg);
    border: 1px solid #2a2a35;
    border-radius: 12px;
    padding: .85rem 1rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.auth-form input:not([type="checkbox"]):focus,
.auth-form select:focus,
.auth-form textarea:focus {
    border-color: #3e3e8f;
    box-shadow: 0 0 0 3px rgba(62,62,143,.25);
}

.field--inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-top: .5rem;
}
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    user-select: none;
}
.checkbox input {
    width: 18px; height: 18px;
}

.btn--full { width: 100%; }

/* -------- Avatar utilisateur dans le header -------- */
.user-info {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    padding: .3rem .75rem .3rem .3rem;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #1e1e26;
}

.user-avatar--placeholder {
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    color: #ccc;
}

.user-email {
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
}

/* Ajuste la disposition globale dans le header */
.auth-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* === Hover / Focus / Active states for buttons === */
.btn {
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}

/* Bouton principal */
.btn--primary:hover,
.btn--primary:focus-visible {
    background: #b388ff; /* plus clair */
    box-shadow: 0 0 0 3px rgba(155, 92, 255, .35);
    transform: translateY(-1px);
}

.btn--primary:active {
    background: #8248ff; /* plus foncé */
    transform: translateY(0);
}

/* Bouton secondaire */
.btn--secondary:hover,
.btn--secondary:focus-visible {
    background: #2d3042;
    box-shadow: 0 0 0 3px rgba(255,255,255,.1);
    transform: translateY(-1px);
}

.btn--secondary:active {
    background: #1b1d28;
    transform: translateY(0);
}

/* Bouton fantôme (borders seulement) */
.btn--ghost:hover,
.btn--ghost:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(155, 92, 255, 0.08);
    transform: translateY(-1px);
}

.btn--ghost:active {
    background: rgba(155, 92, 255, 0.18);
    transform: translateY(0);
}

/* Accessibilité : focus clair sans hover */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(155, 92, 255, .4);
}

.btn--store {
    padding: .5rem .8rem;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1;
}

.auth-card__footer {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
    color: var(--muted);
}
.auth-link { color: #c7c7ff; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

/* ---- Wallet badges (topbar) ---- */
.wallet-badges {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.wallet-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid #3a3a46;
    background: #1a1b23;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    white-space: nowrap;
    line-height: 1;
    transition: transform .08s ease, box-shadow .12s ease;
}

.wallet-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

.wallet-badge--gold {
    border-color: #a8862b;
    background: linear-gradient(180deg, #1f1b12, #17140e);
}

.wallet-badge--gems {
    border-color: #4b3775;
    background: linear-gradient(180deg, #1e1730, #171225);
}

.wallet-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

/* Responsive */
@media (max-width: 480px){
    .field--inline { flex-direction: column; align-items: flex-start; }
    .btn--full { width: 100%; }
}

@media (max-width:980px){
    .hero{grid-template-columns:1fr;gap:1rem;padding:4rem 6vw}
    .features{grid-template-columns:1fr}
    .screens .grid{grid-template-columns:1fr}
}