/* Font Inter pour les titres*/
       @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
       /* Font Roboto pour le texte*/
       @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
       
       /* ===== RÉINITIALISATION (Reset) ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Ajout d'un scroll plus agréable lorsque l'on clique sur les liens */
        html{
            scroll-behavior: smooth;
        }

        /* ===== STYLES GLOBAUX (Design Apple) ===== */
        body {
            font-family: "Inter", sans-serif;
            color: white;
            background-color: black;
            line-height: 1.6;
            scroll-behavior: smooth;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* ===== HEADER / NAVIGATION ===== */
        header {
            color: white;
            padding: 20px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(20px);
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
                 
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 100;
            letter-spacing: -0.5px;
            padding-top: 10px;
            color: #F19999;
        }

        .logo a{
            color: #F19999;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 40px;
            padding-top: 10px;
             }

        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 100;
            font-size: 1rem;
            transition: opacity 0.3s;
            font-family: "Roboto", sans serif;
        }

      
        /* ===== HERO SECTION ===== */
        .hero {
            color: white;
            --x: 50%;
            --y: 50%;
            background: radial-gradient(circle at var(--x) var(--y), #F19999 0%, #000000 33%); /* Ajout d'un background gradient*/
            padding: 140px 0;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .hero h1 {
            font-size: 4rem;
            font-weight: 100;
            margin-bottom: 24px;
            margin-top: 50px;
            letter-spacing: -1px;
            line-height: 1.1;
        }

        .hero p {
            font-size: 1.3rem;
            color: white;
            margin-bottom: 40px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
            font-weight: 300;
            font-family: "Roboto", sans-serif;
        }

        .cta-button {
            display: inline-block;
            background-image: linear-gradient(135deg, #F19999 0%, #6c5ce7 100%);
            color: white;
            padding: 14px 32px;
            border-radius: 15px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            font-size: 1.05rem;
            font-family: "Roboto", sans serif;
            
        }
    

        /* ===== ABOUT SECTION ===== */

        .title-background{
            background-color: rgb(242, 153, 153, 0.5);
            background-color: #F19999;
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            
        }
        
        .section-title {
            color: white;
            font-size: 6rem;
            font-weight: 100;
            margin-bottom: 60px;
            text-align: left;
            padding-left: 47px;
            padding-top: 10px;
            padding-bottom: 10px;
            letter-spacing: -0.5px;
        }

        .section-title-background{
            background-color: #F19999;
            border-radius: 8px;
        }

        .about-content {
            display: flex;
            gap: 60px;
            align-items: center;
            padding-bottom: 100px;
          
        }

        .about-image {
            flex: 1;
           
        }

        .about-image img {
            width: 80%;
            border-radius: 5px;
            display: block;
            margin-top: 80px;
        }

        .about-text {
            flex: 1
        }

        .about-text h2 {
            font-size: 2.4rem;
            font-weight: 700;
            color: white; 
            margin-bottom: 24px;
            letter-spacing: -0.5px;
            background-color: #F19999;
            padding-left: 20px;
            font-weight: 100;
        }

        .about-text p {
            font-size: 1.1rem;
            color: #6f6f74;
            margin-bottom: 24px;
            line-height: 1.8;
            font-weight: 400;
            font-family: "Roboto", sans serif;
        }

        /* ===== SKILLS SECTION ===== */
        .skills {
            padding: 120px 0;
        }

        .skills .section-title{
            position: relative;
            display: inline-block;
        }


        .skills .section-title::after{
            content: "";
            position: absolute;
            bottom: 30px;
            left: 50px;
            width: 1368px;
            height: 1px;
            background: rgba(255, 150, 150, 0.5);
        }
        span{
            color: #F19999;
            font-size: 40px;
            font-family: "Inter", sans serif;
        }
        .skills-grid {
            display: flex;
            gap: 40px;
            margin-top: 60px;
            justify-content: space-around;
            flex-wrap: wrap;
           
        }

        .skill-card {
            padding: 40px;
            border-radius: 20px;
            border: 1px solid transparent;
            background: 
                linear-gradient(#232020, #232020) padding-box, /* Ton fond sombre interne */
                linear-gradient(135deg, #F19999, #FFFFFF) border-box; /* Ton dégradé de contour */
            text-align: center;
            flex: 1;
            min-width: 250px;
            transition: all 0.3s;
        }
      
        .skill-card img{
            width: 100px;
        }
     

        .skill-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
        }

        .skill-card h3 {
            font-size: 1.4rem;
            font-weight: 600;
            color: white;
            margin-bottom: 12px;
        }

        .skill-card p {
            color: white;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
            font-family: "Roboto", sans serif;
        }

        /* ===== PROJECTS SECTION ===== */
        .projects {
            background-color: black;
            padding: 120px 0;
        }

        .projects .section-title{
            position: relative;
            display: inline-block;
        }

        .projects .section-title::after{
            content: "";
            position: absolute;
            bottom: 30px;
            left: 50px;
            width: 1368px;
            height: 1px;
            background: rgba(255, 150, 150, 0.5);
        }

        .projects-grid {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 100px;
            
        }

        .project-card {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 40px;
            width: 525px;
            height: 380px;
            align-items: center;
            padding: 40px;
            border: 1px solid transparent;
            background: 
                linear-gradient(#232020, #232020) padding-box, /* Ton fond sombre interne */
                linear-gradient(135deg, #F19999, #FFFFFF) border-box; /* Ton dégradé de contour */
            border-radius: 20px;
            transition: all 0.3s;
        }

        .project-card:nth-child(2){
            margin-top: 200px;
        }

        .project-mockup {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8); /* Un peu plus petit au début */
        width: 700px;
        opacity: 0;
        transition: all 0.5s ease;
        pointer-events: none; /* L'image ne bloque pas le clic */
    }

        .mockup-wikilearn{
            left: 170%;
            top: 90%;
            width: 600px;
        }

        .mockup-footlocker{
            left: -110%;
            width: 900px;
            bottom: 90%;

        }
        .project-image {
            width: 50%;
            min-height: 300px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.3rem;
            font-weight: 600;
        }

        .project-image img{
            width: 50%;
            padding-bottom: 60px; 
            padding-top: 40px;
            padding-right: 30px;
            padding-left: 30px;
        }


        .project-content h3 {
            text-align: left;
            font-size: 1.8rem;
            font-weight: 700;
            color: white;
            margin-bottom: 16px;
            letter-spacing: -0.5px;
        }

        .project-content p {
            color: white;
            text-align: left;
            margin-bottom: 20px;
            font-size: 1.1rem;
            line-height: 1.7;
            font-family: "Roboto", sans serif;
        }

        .project-link {
            display: inline-block;
            color: white;
            text-align: left;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            font-size: 1.05rem;
            display: block;
            font-family: "Roboto", sans serif;
        }

        .projects-grid:has(.card-1:hover) .card-2 {
            opacity: 0;
            transform: scale(0.9);
            pointer-events: none; /* Empêche de cliquer sur la carte invisible */
        }

        .card-1:hover .mockup-wikilearn {
            opacity: 1;
        }

        .projects-grid:has(.card-2:hover) .card-1 {
            opacity: 0;
            transform: scale(0.9);
        }
        .card-2:hover .mockup-footlocker {
            opacity: 1;
        }
        

        /* ===== CONTACT SECTION / FORM ===== */
        .contact {
            background-color: black;
            padding: 120px 0;
        }

        .contact h2 {
            text-align: center;
            font-size: 3rem;
            font-weight: 100;
            margin-bottom: 60px;
            letter-spacing: -0.5px;
            background-color: #F19999;
        }

    
        .contact-form {
            max-width: 500px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 24px;
            
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-group label {
            font-weight: 100;
            font-size: 1rem;
            color: white;
            font-family: "Roboto", sans serif;
        }

        .form-group input,
        .form-group textarea {
            padding: 12px 16px;
            border: 1px solid #d2d2d7;
            border-radius: 8px;
            font-family: inherit;
            font-size: 1rem;
            transition: all 0.3s;
        }

     

        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

        .submit-button {
            background-image: linear-gradient(135deg, #F19999 0%, #6c5ce7 100%);
            color: white;
            padding: 14px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1.08rem;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 16px;
            font-family: "Roboto", sans serif;
        }

               /* ===== FOOTER ===== */
        footer {
            background-color: black;
            color: white;
            padding: 60px 0;
            text-align: center;
            border-top: 1px solid #F19999;
        }

        .footer-content {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-section h3 {
            font-size: 1rem;
            font-weight: 600;
            color: white;
            margin-bottom: 12px;
        }

        .footer-section p {
            font-size: 0.9rem;
            line-height: 1.6;
            font-family: "Roboto", sans serif;
        }

        .social-links {
            display: flex;
            gap: 20px;
            justify-content: center;
        }

        .social-links img{
            width: 30px;
        }

        .social-links a {
            color: #6f6f74;
            text-decoration: none;
            font-size: 1.2rem;
            transition: color 0.3s;
        }

        .footer-bottom {
            font-size: 0.85rem;
            color: #a1a1a6;
            padding-top: 40px;
            border-top: 1px solid #F19999;
            font-family: "Roboto", sans serif;
        }

        /* ANIMATIONS CSS */
        .nav-links a:hover{
            color: #F19999;
        }

        .cta-button:hover{
            border: solid 2px white;
        }

        .skill-card:hover{
            transition: transform 0.3s ease;
            transform: translateY(-10px);
            cursor: pointer;
        }

        .project-card:hover{
            transition: transform 0.3s ease;
            transform: translateY(-10px);
            cursor: pointer;
        } 

        .submit-button:hover{
            border: solid 2px white;

        }
    
        .project-link:hover{
        background-color: #000000;
        color: #F19999;

        }

       
        /* ===== MEDIA QUERIES (RESPONSIVE) ===== */

             /* Tablette (768px et moins) */
@media (max-width: 768px) {
    .burger-menu {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.95);
        flex-direction: column;
        padding: 20px;
        gap: 20px;
        text-align: center;
        border-bottom: 1px solid #e5e5e7;
    }

    .nav-links.active {
        display: flex;
    }
}

     /* ===== MEDIA QUERIES (RESPONSIVE) ===== */

/* Tablette (768px et moins) */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        gap: 20px;
    }

    .nav-links {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}
/* Mobile (480px et moins) */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .about-text h2 {
        font-size: 1.8rem;
    }

    .about-text p {
        font-size: 1rem;
    }

    .skill-card h3 {
        font-size: 1.2rem;
    }

    .skill-card p {
        font-size: 0.9rem;
    }

    .skills-grid {
        flex-direction: column;
        gap: 20px;
    }

    .skill-card {
        min-width: 100%;
    }

    .project-content h3 {
        font-size: 1.4rem;
    }

    .project-content p {
        font-size: 1rem;
    }

    .about, .skills, .projects, .contact {
        padding: 60px 0;
    }

    .contact-form {
        max-width: 100%;
    }
}