/* CSS Document */
/* ====== VARIABLES & RESET ====== */
:root {
    --primary: #7c3aed;
    --secondary: #06b6d4;
    --grad: linear-gradient(135deg, var(--primary), var(--secondary));
    --card-shadow-light: 0 10px 40px rgba(0,0,0,0.08);
}

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
    transition: background 0.6s ease, color 0.6s ease;
    display: flex;
    justify-content: center;
}

body.dark { background: #05070d; color: #e5e7eb; }
body.light { background: #f0f2f5; color: #111827; }

/* ====== SCROLLBAR CUSTOM ====== */
.timeline-container::-webkit-scrollbar { height: 10px; }
.timeline-container::-webkit-scrollbar-track { background: rgba(128, 128, 128, 0.1); border-radius: 10px; }
.timeline-container::-webkit-scrollbar-thumb { background: var(--grad) !important; border-radius: 10px; border: none; }
.timeline-container::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }
.timeline-container { scrollbar-width: thin; scrollbar-color: var(--primary) rgba(128, 128, 128, 0.1); }

/* ====== LAYOUT GRID ====== */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 40px;
    max-width: 1400px;
    width: 100%;
}

.card {
    border-radius: 28px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.card:hover { transform: translateY(-5px); }

.intro { grid-column: 1 / span 4; text-align: center; align-items: center; }
.accueil { grid-column: 5 / span 8; justify-content: center; }
.competences { grid-column: 1 / span 7; }
.logiciels { grid-column: 8 / span 5; }
.timeline { grid-column: 1 / span 12; }
.portfolio { grid-column: 1 / span 12; }

/* ====== THEME & BUTTONS ====== */
#themeToggle {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    padding: 10px 20px; border-radius: 999px; border: none;
    cursor: pointer; backdrop-filter: blur(14px);
    background: rgba(255,255,255,0.1); color: inherit;
    font-weight: 600; border: 1px solid rgba(255,255,255,0.1);
}

body.dark .card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
body.light .card { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); box-shadow: var(--card-shadow-light); }

.card::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.12), transparent 40%);
    z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s;
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 2; }

/* ====== ELEMENTS ====== */
.profile { width: 110px; height: 110px; border-radius: 35px; object-fit: cover; margin-bottom: 15px; border: 3px solid rgba(124, 58, 237, 0.3); }
.social-links { display: flex; gap: 15px; margin-top: 10px; justify-content: center; }
.social-icon { width: 22px; height: 22px; transition: 0.3s; filter: opacity(0.6); }
body.dark .social-icon { filter: invert(1) opacity(0.7); }

.btn-cv {
    display: inline-block; padding: 12px 24px; border-radius: 999px;
    background: var(--grad); color: white; text-decoration: none;
    font-weight: 700; width: fit-content; transition: 0.3s; margin-top: 15px;
}

.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-top: 15px; }
.tag { padding: 10px; border-radius: 15px; background: rgba(255,255,255,0.06); text-align: center; font-size: 14px; transition: 0.3s; }
body.light .tag { background: #f3f4f6; border: 1px solid rgba(0,0,0,0.05); }

.logo-grid { display: flex; flex-wrap: wrap; gap: 15px; }
.logo { width: 55px; height: 55px; background: rgba(255,255,255,0.08); border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.logo img { width: 30px; filter: brightness(0) invert(1); }
body.light .logo { background: #f8fafc; }
body.light .logo img { filter: none; }

/* ====== TIMELINE ====== */
.timeline-container { display: flex; gap: 20px; overflow-x: auto; padding: 20px 10px; scroll-behavior: smooth; }
.timeline-item { flex: 0 0 300px; padding: 25px; border-radius: 24px; transition: 0.3s; cursor: pointer; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
body.light .timeline-item { background: #fcfcfc; border: 1px solid rgba(0,0,0,0.08); }
.timeline-logo { width: 50px; height: 50px; background: var(--grad); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-bottom: 15px; color: white; overflow: hidden; flex-shrink: 0; }
.timeline-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ====== PORTFOLIO ====== */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; margin-top: 20px; }
.project-card { border-radius: 20px; overflow: hidden; cursor: pointer; transition: 0.3s; border: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); }
.project-card:hover { border-color: var(--primary); }
.project-card img { width: 100%; height: 220px; object-fit: cover; }
.project-info { padding: 15px; }

.filters { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.filter { padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); background: none; color: inherit; cursor: pointer; transition: 0.3s; }
.filter.active { background: var(--grad); color: white; border-color: transparent; }

/* ====== POPUP CORE ====== */
.popup-overlay { 
    position: fixed; inset: 0; background: rgba(0,0,0,0.92); 
    display: none; align-items: center; justify-content: center; 
    z-index: 10000; backdrop-filter: blur(12px); padding: 20px; 
}

.popup { 
    background: #11141d; border-radius: 30px; max-width: 1100px; 
    width: 100%; height: 85vh; display: flex; position: relative; 
    overflow: hidden; border: 1px solid rgba(255,255,255,0.1); 
}

body.light .popup { background: white; color: #111; }

.popup-content { 
    flex: 1; padding: 40px; overflow-y: auto; 
    border-right: 1px solid rgba(255,255,255,0.05); 
}

.popup-visual { 
    flex: 1.5; background: #000; overflow-y: auto; 
    display: flex; flex-direction: column; gap: 10px; padding: 10px; 
}

.popup-visual img { width: 100%; border-radius: 10px; display: block; margin-bottom: 5px; }

.close-btn { 
    position: absolute; top: 20px; right: 25px; font-size: 35px; 
    color: white; cursor: pointer; z-index: 100; font-weight: bold; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
body.light .close-btn { color: #333; }

.hide { display: none !important; }

/* ====== RESPONSIVE MODIFICATIONS ====== */
@media (max-width: 900px) {
    .grid { padding: 20px; }
    
    /* On change la structure de la popup pour un scroll vertical continu */
    .popup { 
        flex-direction: column; 
        height: 90vh; 
        overflow-y: auto; /* La popup entière scrolle */
    }

    .popup-content { 
        flex: none; 
        width: auto; 
        height: auto; /* S'adapte au contenu */
        overflow-y: visible; /* Désactive le scroll interne */
        border-right: none; 
        padding: 30px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .popup-visual { 
        flex: none; 
        width: auto;
        height: auto; /* S'adapte au nombre d'images */
        overflow-y: visible; /* Désactive le scroll interne */
        padding: 15px;
    }

    /* Grille responsive */
    .intro, .accueil, .competences, .logiciels { grid-column: span 12; }
    
    .close-btn { 
        top: 10px; right: 15px; 
        background: rgba(0,0,0,0.2); 
        width: 40px; height: 40px; 
        display: flex; align-items: center; justify-content: center; 
        border-radius: 50%; 
    }
}
	
	/* Empêche la sélection du texte */
body {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10+ */
    user-select: none;         /* Standard */
}

/* Empêche le drag & drop des images (évite de les glisser vers le bureau) */
img {
    -webkit-user-drag: none;
    user-drag: none;
}