/* ========================================
   RÉINITIALISATION ET BASE
======================================== */

/* Réinitialisation des marges et padding par défaut */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Configuration de base du body */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0a0e27; /* Bleu très foncé spatial */
    color: #ffffff;
    overflow-x: hidden; /* Empêche le scroll horizontal */
    line-height: 1.6;
}

/* Scroll fluide pour toute la page */
html {
    scroll-behavior: smooth;
}

/* Container centralisé pour le contenu */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* ========================================
   FOND ÉTOILÉ ANIMÉ - VERSION CORRIGÉE
======================================== */

/* Première couche d'étoiles (petites et rapides) */
.stars,
.stars::after {
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    background: transparent;
    border-radius: 50%;
    /* Crée des petites étoiles blanches */
    box-shadow: 
        100px 50px white, 300px 100px white, 500px 150px white,
        700px 80px white, 900px 180px white, 1100px 120px white,
        1300px 90px white, 1500px 160px white, 200px 200px white,
        400px 250px white, 600px 300px white, 800px 280px white,
        1000px 320px white, 1200px 270px white, 1400px 350px white,
        150px 400px white, 350px 450px white, 550px 420px white,
        750px 480px white, 950px 440px white, 1150px 500px white,
        80px 550px white, 280px 580px white, 480px 620px white,
        680px 590px white, 880px 640px white, 1080px 610px white,
        1280px 670px white, 120px 700px white, 320px 730px white,
        520px 760px white, 720px 710px white, 920px 780px white;
    animation: animateStars 50s linear infinite;
}

/* Double les étoiles pour créer un effet continu */
.stars::after {
    content: "";
    position: fixed;
    top: 2000px;
}

/* Deuxième couche d'étoiles (moyennes, vitesse moyenne) */
.stars2,
.stars2::after {
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 
        200px 100px white, 400px 150px white, 600px 200px white,
        800px 120px white, 1000px 250px white, 1200px 180px white,
        1400px 220px white, 250px 300px white, 450px 350px white,
        650px 320px white, 850px 380px white, 1050px 340px white,
        1250px 400px white, 180px 450px white, 380px 480px white,
        580px 520px white, 780px 490px white, 980px 540px white,
        1180px 510px white, 220px 600px white, 420px 630px white,
        620px 660px white, 820px 620px white, 1020px 680px white;
    animation: animateStars 100s linear infinite;
}

.stars2::after {
    content: "";
    position: fixed;
    top: 2000px;
}

/* Troisième couche d'étoiles (grandes et lentes) */
.stars3,
.stars3::after {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 
        300px 120px white, 500px 180px white, 700px 230px white,
        900px 160px white, 1100px 270px white, 1300px 200px white,
        350px 330px white, 550px 380px white, 750px 350px white,
        950px 410px white, 1150px 370px white, 280px 470px white,
        480px 510px white, 680px 480px white, 880px 540px white,
        1080px 500px white, 320px 610px white, 520px 650px white;
    animation: animateStars 150s linear infinite;
}

.stars3::after {
    content: "";
    position: fixed;
    top: 2000px;
}

/* Animation de déplacement des étoiles */
@keyframes animateStars {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-2000px);
    }
}



/* ========================================
   NAVIGATION
======================================== */

.navbar {
    position: fixed; /* Fixe la nav en haut */
    top: 0;
    width: 100%;
    background: rgba(10, 14, 39, 0.9); /* Fond semi-transparent */
    backdrop-filter: blur(10px); /* Effet de flou */
    z-index: 1000; /* Au-dessus de tout */
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

/* Logo avec effet lumineux */
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Menu de navigation */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

/* Liens de navigation */
.nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

/* Effet au survol des liens */
.nav-link:hover {
    color: #667eea;
}

/* Ligne animée sous les liens */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #667eea;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}


/* ========================================
   SECTION HERO (ACCUEIL)
======================================== */

.hero {
    height: 100vh; /* Pleine hauteur de l'écran */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 20px;
}

.hero-content {
    z-index: 10; /* Au-dessus du fond étoilé */
    animation: fadeInUp 1s ease;
}

/* Animation d'apparition */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Titre principal avec effet lumineux */
.glowing-text {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: glow 2s ease-in-out infinite alternate;
}

/* Animation de lueur */
@keyframes glow {
    from {
        filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.5));
    }
    to {
        filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.8));
    }
}

/* Sous-titre */
.subtitle {
    font-size: 1.5rem;
    color: #a0aec0;
    margin-bottom: 1rem;
}

img.picture_1{
    border-radius: 50%;
    width: 250px;
    height: 250px;
}

/* Description */
.description {
    font-size: 1.1rem;
    color: #cbd5e0;
    max-width: 600px;
    margin: 0 auto 2rem;
    padding-top: 10px;
}

/* Bouton d'appel à l'action */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Effet au survol du bouton */
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

/* Flèche dans le bouton */
.arrow {
    transition: transform 0.3s ease;
}

.cta-button:hover .arrow {
    transform: translateX(5px);
}


/* ========================================
   INDICATEUR DE SCROLL
======================================== */

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #a0aec0;
    font-size: 0.9rem;
}

/* Design de la souris */
.mouse {
    width: 25px;
    height: 40px;
    border: 2px solid #667eea;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

/* Roue de la souris animée */
.wheel {
    width: 3px;
    height: 8px;
    background: #667eea;
    border-radius: 2px;
    animation: scroll 1.5s infinite;
}

/* Animation de la roue */
@keyframes scroll {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(15px);
    }
}


/* ========================================
   TITRES DE SECTIONS
======================================== */

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h2.contact-title {
    margin-bottom: 25px;
}


/* ========================================
   SECTION À PROPOS
======================================== */

.about-section {
    padding: 100px 0;
    position: relative;
    z-index: 10;
}

/* Grille de cartes */
.about-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Carte d'information */
.info-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

/* Effet au survol de la carte */
.info-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

/* Icône de la carte */
.card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Titre de la carte */
.info-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #667eea;
}

/* Texte de la carte */
.info-card p {
    color: #cbd5e0;
    line-height: 1.8;
}


/* ========================================
   SECTION PROJETS
======================================== */

.projects-section {
    padding: 100px 0;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10;
}

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

/* Carte de projet */
.project-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

/* Image/Icône du projet */
.project-image {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 1rem;
}

/* Titre du projet */
.project-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

/* Description du projet */
.project-card p {
    color: #cbd5e0;
    margin-bottom: 1rem;
}

/* Lien du projet */
.project-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.project-link:hover {
    color: #764ba2;
}


/* ========================================
   SECTION CONTACT
======================================== */

.contact-section {
    padding: 30px 0;
    position: relative;
    z-index: 10;
}

.contact-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.contact-text {
    font-size: 1.2rem;
    color: #cbd5e0;
    margin-bottom: 2rem;
    line-height: 1.8;
}

/* Boutons de contact */
.contact-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-btn {
    padding: 12px 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.contact-btn:hover {
    background: linear-gradient(45deg, #667eea, #764ba2);
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}


/* ========================================
   FOOTER
======================================== */

.footer {
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 2rem;
    color: #a0aec0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}


/* ========================================
   RESPONSIVE DESIGN (Mobile)
======================================== */

/* Pour les écrans de moins de 768px (tablettes et mobiles) */
@media (max-width: 768px) {
    
    /* Titre principal plus petit */
    .glowing-text {
        font-size: 2.5rem;
    }
    
    /* Sous-titre plus petit */
    .subtitle {
        font-size: 1.2rem;
    }
    
    /* Menu navigation en colonne */
    .nav-menu {
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Réduction des titres de section */
    .section-title {
        font-size: 2rem;
    }
    
    /* Grilles en une seule colonne */
    .about-content,
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    /* Boutons de contact en colonne */
    .contact-buttons {
        flex-direction: column;
    }
}