/* --- 1. RESET & VARIABLES --- */
:root {
    --bg-color: #030303;
    --card-bg: rgba(20, 20, 20, 0.4); 
    --text-main: #ffffff;
    --text-muted: #9ca3af;
    --accent-cyan: #00f3ff;
    --accent-violet: #6366f1;
    --border: rgba(255, 255, 255, 0.08);
    --font-main: 'Inter', sans-serif;
    --spacing: 1rem;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-main);
    min-height: 100dvh;
    padding: var(--spacing);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    position: relative;
}

b, strong {
    color: #00f3ff !important;
}

/* --- FOND AMBIANT (BLOBS) --- */
.ambient-background { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; overflow: hidden; 
}

.blob { 
    position: absolute; border-radius: 50%; mix-blend-mode: screen; filter: blur(120px); opacity: 0.6; will-change: transform; 
}

/* Blob 1 : Cyan (Souris) */
.blob-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--accent-cyan) 0%, rgba(0,0,0,0) 70%);
    top: -300px; left: -300px;
    transform: translate(var(--mouse-x, 50vw), var(--mouse-y, 50vh));
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Blob 2 : Violet (Flottant) */
.blob-2 {
    width: 900px; height: 900px;
    background: radial-gradient(circle, var(--accent-violet) 0%, rgba(0,0,0,0) 70%);
    bottom: -300px; right: -300px;
    animation: float-ambient 25s infinite ease-in-out alternate;
}

@keyframes float-ambient {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-10%, 10%) scale(1.1); }
    100% { transform: translate(5%, -15%) scale(0.95); }
}

/* --- GRILLE & LAYOUT --- */
.main-container { width: 100%; max-width: 1100px; z-index: 2; }
.bento-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing); }

/* --- STYLE DES CARTES --- */
.bento-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 24px; padding: 1.5rem;
    position: relative; overflow: hidden;
    backdrop-filter: blur(160px) saturate(120%); -webkit-backdrop-filter: blur(160px) saturate(120%);
    display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s;
}
.bento-card:hover { border-color: rgba(255, 255, 255, 0.25); }

/* --- HERO --- */
.hero-card { min-height: 350px; justify-content: flex-end; }
.hero-card h1 { font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; line-height: 1; margin-bottom: 1rem; }
.gradient-text { background: linear-gradient(120deg, #ffffff, var(--text-muted)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* --- BIO --- */
.bio-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); background: #111; }
.status-indicator { background: rgba(16, 185, 129, 0.1); color: #10b981; padding: 6px 12px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pulsing-dot { width: 6px; height: 6px; background: #10b981; border-radius: 50%; animation: pulse 2s infinite; }

/* --- PROJETS (AVEC FAVICONS) --- */
.card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; color: var(--text-muted); flex-shrink: 0; }
.projects-card h2, .stack-card h3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }

.project-list { flex-grow: 1; overflow-y: auto; padding-right: 10px; }
/* Scrollbar custom */
.project-list::-webkit-scrollbar { width: 4px; }
.project-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
.project-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }
.project-list::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }

/* Item Layout */
.project-item { 
    display: flex; align-items: center; 
    padding: 16px 0; border-bottom: 1px solid var(--border); 
    text-decoration: none; color: var(--text-main); 
    transition: all 0.3s ease; 
}

/* Nouveau Style Favicon */
.project-favicon {
    width: 32px; height: 32px;
    border-radius: 8px; margin-right: 15px;
    object-fit: cover; background-color: rgba(255,255,255,0.05);
}

/* Utilitaire pour inverser les logos noirs en blancs */
.invert-color {
    filter: invert(100%) brightness(200%);
}

.project-info { flex-grow: 1; }

.project-item:hover { padding-left: 10px; color: var(--accent-cyan); border-color: var(--accent-cyan); }
.project-item:last-child { border-bottom: none; }

.project-name { display: block; font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }
.project-desc { font-size: 0.85rem; color: var(--text-muted); }

.arrow-icon { 
    opacity: 0; transform: translateX(-10px); 
    transition: all 0.3s ease; font-size: 1.2rem; margin-left: 10px;
}
.project-item:hover .arrow-icon { opacity: 1; transform: translateX(0); }

/* --- STACK --- */
.tech-grid { 
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-content: center;
}
@media (max-width: 768px) { .tech-grid { grid-template-columns: repeat(3, 1fr); } }

.stack-icon {
    width: 2.5rem; height: 2.5rem;
    margin: 0 auto; cursor: pointer;
    transition: transform 0.8s ease;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
.stack-icon:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
}

/* --- CONTACT --- */
.contact-card { background: var(--text-main); color: #000; border: none; cursor: pointer; transition: transform 0.2s; }
.contact-card:hover { transform: scale(0.98); }
.contact-card a { text-decoration: none; color: #000; font-weight: 700; font-size: 1.2rem; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; }

/* --- ANIMATIONS --- */
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.reveal h1, .reveal h2, .reveal h3, .reveal p, .reveal span, .reveal .project-item, .reveal .stack-icon, .reveal a, .reveal .avatar, .reveal .status-indicator, .reveal .project-favicon { opacity: 0; }
.is-visible h1, .is-visible h2, .is-visible h3, .is-visible p, .is-visible span, .is-visible .project-item, .is-visible .stack-icon, .is-visible a, .is-visible .avatar, .is-visible .status-indicator, .is-visible .project-favicon { animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

.is-visible h1, .is-visible h2, .is-visible h3, .is-visible .avatar { animation-delay: 0.1s; }
.is-visible p, .is-visible .status-indicator { animation-delay: 0.2s; }

/* --- RESPONSIVE DESKTOP --- */
@media (min-width: 1024px) {
    .bento-grid {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: 320px 320px 100px;
        gap: 1.5rem;
    }
    .hero-card { grid-column: 1 / 2; grid-row: 1 / 3; }
    .bio-card { grid-column: 2 / 4; grid-row: 1 / 2; }
    .projects-card { grid-column: 2 / 3; grid-row: 2 / 3; }
    .stack-card { grid-column: 3 / 4; grid-row: 2 / 3; }
    .contact-card { grid-column: 1 / 4; grid-row: 3 / 4; }
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 1023px) {
    body { display: block; padding-top: 2rem; }
    .bento-grid { display: flex; flex-direction: column; gap: 1rem; }
    .projects-card { height: auto; min-height: auto; }
    .project-list { overflow: visible; max-height: none; }

    /* Blobs Mobile - Mouvement Automatique */
    .blob-1 {
        animation: move-blob-mobile-1 10s infinite alternate ease-in-out;
        top: 10%; left: 10%;
    }
    .blob-2 {
        animation: move-blob-mobile-2 15s infinite alternate ease-in-out;
    }
}

@keyframes move-blob-mobile-1 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40vw, 20vh); }
}
@keyframes move-blob-mobile-2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-30vw, -40vh); }
}