/* Kalamo — CSS vanilla */

:root {
    --color-lime:    #BFF47B;
    --color-dark:    #262E36;
    --color-white:   #FFFFFF;
    --color-gray-50: #F7F8FA;
    --color-gray-100:#ECEEF2;
    --color-gray-300:#C4C9D4;
    --color-gray-500:#737B8C;
    --color-gray-700:#3F4A5C;
    --color-red:     #E53E3E;
    --color-green:   #38A169;

    --font-heading: 'Space Grotesk', sans-serif;
    --font-body:    'Open Sans', sans-serif;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10);

    --container: 1200px;
    --gap: 1.5rem;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--color-gray-50);
    color: var(--color-dark);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Container */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1rem; }

/* Typographie */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.25; }
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

/* Header */
.site-header {
    background: var(--color-dark);
    color: var(--color-white);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-md);
}
.site-header .container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.site-header .logo {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-lime);
    letter-spacing: -.5px;
}
.site-header nav { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.site-header nav a {
    color: var(--color-gray-300);
    font-size: .9rem;
    padding: .4rem .75rem;
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
}
.site-header nav a:hover { color: var(--color-white); background: rgba(255,255,255,.08); }
.site-header .btn-nav {
    background: var(--color-lime);
    color: var(--color-dark);
    font-weight: 700;
    font-size: .85rem;
    padding: .45rem .9rem;
    border-radius: var(--radius-sm);
    transition: opacity .15s;
}
.site-header .btn-nav:hover { opacity: .9; color: var(--color-dark); }

/* Wallet badge */
.wallet-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(191,244,123,.12);
    border: 1px solid rgba(191,244,123,.3);
    color: var(--color-lime);
    font-size: .82rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: 999px;
}

/* Main */
main { flex: 1; padding: var(--gap) 0; }

/* Cards articles */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap);
}
.article-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.article-card img { width: 100%; height: 180px; object-fit: cover; }
.article-card .card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.article-card .card-category {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-gray-500);
}
.article-card h3 { font-size: 1rem; line-height: 1.35; }
.article-card .card-author { font-size: .82rem; color: var(--color-gray-500); margin-top: auto; }
.article-card .card-price {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-dark);
    background: var(--color-lime);
    padding: .2rem .55rem;
    border-radius: 999px;
    width: fit-content;
}
.article-card .card-price.free { background: var(--color-gray-100); color: var(--color-gray-500); }

/* Boutons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .9rem;
    padding: .65rem 1.4rem;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: opacity .15s, background .15s;
    text-decoration: none;
}
.btn:hover { opacity: .88; }
.btn-primary { background: var(--color-lime); color: var(--color-dark); }
.btn-dark    { background: var(--color-dark); color: var(--color-white); }
.btn-outline {
    background: transparent;
    color: var(--color-dark);
    border: 2px solid var(--color-dark);
}
.btn-sm { font-size: .8rem; padding: .4rem .9rem; }

/* Formulaires */
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-label { font-size: .875rem; font-weight: 600; color: var(--color-gray-700); }
.form-input {
    width: 100%;
    padding: .6rem .9rem;
    border: 1.5px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-family: var(--font-body);
    background: var(--color-white);
    transition: border-color .15s;
    outline: none;
}
.form-input:focus { border-color: var(--color-dark); }

/* Auth card */
.auth-page { display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; min-height: 70vh; }
.auth-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.auth-card h1 { font-size: 1.6rem; }

/* Alertes */
.alert {
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 500;
}
.alert-error   { background: #FEF2F2; color: var(--color-red); border: 1px solid #FECACA; }
.alert-success { background: #F0FFF4; color: var(--color-green); border: 1px solid #9AE6B4; }

/* Footer */
.site-footer {
    background: var(--color-dark);
    color: var(--color-gray-500);
    font-size: .85rem;
    padding: 1.5rem 0;
    text-align: center;
}
.site-footer a { color: var(--color-gray-300); }

/* Section hero */
.hero {
    background: var(--color-dark);
    color: var(--color-white);
    padding: 4rem 0 3rem;
    text-align: center;
}
.hero h1 span { color: var(--color-lime); }
.hero p { color: var(--color-gray-300); margin: 1rem auto; max-width: 540px; font-size: 1.05rem; }
.hero .hero-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 1.75rem; flex-wrap: wrap; }

/* Categories pills */
.categories-bar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding: 1rem 0;
}
.category-pill {
    font-size: .8rem;
    font-weight: 600;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-100);
    color: var(--color-gray-700);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.category-pill:hover,
.category-pill.active { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }

/* Responsive */
@media (max-width: 640px) {
    .site-header nav .hide-mobile { display: none; }
}