:root {
    --primary-color: #3b82f6;
    --secondary-color: #10b981;
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --text-color: #f1f5f9;
    --text-muted: #94a3b8;
    --nav-height: 70px;
    --transition-speed: 0.3s;
}

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

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed);
}

ul {
    list-style: none;
}

/* Header & Navigation */
header {
    background-color: var(--card-bg);
    /* Removed backdrop blur and transparency for solid look, or keep transparent but solid color? User said remove gradients, not transparency. I'll keep transparency but ensure no gradient. Actually the header had a solid color with opacity. Leaving it. */
    background-color: rgba(30, 41, 59, 0.9);
    /* Slightly more opaque */
    backdrop-filter: blur(10px);
    height: var(--nav-height);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    /* Solid color instead of gradient */
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-weight: 500;
    position: relative;
    padding: 0.5rem 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width var(--transition-speed);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* Main Content */
main {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    animation: fadeIn 0.8s ease-out;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem;
    background-color: var(--card-bg);
    color: var(--text-muted);
    margin-top: auto;
}

/* Components */
.card {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background: var(--primary-color);
    /* Solid background */
    color: white;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity var(--transition-speed), background-color var(--transition-speed);
}

.btn:hover {
    background-color: var(--secondary-color);
    /* Hover effect solid color change */
}

/* Home Page */
.hero {
    text-align: center;
    padding: 80px 0;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    /* Solid white/off-white */
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.project-desc {
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.skill-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.skill-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
    transition: transform var(--transition-speed);
}

.skill-card:hover .skill-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Tech Watch (Veille) */
.rss-feed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.rss-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rss-date {
    font-size: 0.85rem;
    color: var(--secondary-color);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* Simplification for now, usually would add a burger menu */
    }

    .hero h1 {
        font-size: 2.5rem;
    }
}

/* Stage Page */
.stage-section {
    margin-bottom: 4rem;
}

.stage-section h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stage-intro {
    background-color: var(--card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border-left: 4px solid var(--secondary-color);
    color: var(--text-color);
}

.pdf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.pdf-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--card-bg);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform var(--transition-speed), border-color var(--transition-speed);
    text-align: center;
    gap: 1rem;
}

.pdf-block:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.pdf-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.pdf-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
}

.pdf-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
}