/* Responsive Design - Mobile */
@media (max-width: 768px) {



    /* Navigation mobile */
    .navbar {
        padding: 1rem;
    }
    
    .mobile-nav-buttons {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }
    
    .mobile-contact-btn {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
    }
    
    .mobile-contact-btn svg {
        fill: black;
        transition: fill 0.3s ease;
    }
    
    .mobile-contact-btn:hover svg {
        fill: #333;
    }
    
    .hamburger {
        display: block;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: var(--primary-blue);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        transition: right 0.3s ease;
        z-index: 9999;
    }
    
    .nav-links.menu-open {
        right: 0;
    }
    
    .nav-links li {
        list-style: none;
    }
    
    .nav-links a {
        font-size: 2rem;
        color: white;
        text-decoration: none;
        font-weight: 600;
        padding: 1rem 2rem;
        transition: color 0.3s ease;
    }



    .mobile-menu-header {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        margin-bottom: 3rem;
        background-color: transparent;
    }

    .contact-button {
        display: none;
    }

    /* Hero section */
    .hero-section {
        padding: 2rem 1rem;
    }

    .hero-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "slogan"
            "image"
            "subtitles";
        gap: 2rem;
        text-align: center;
        justify-items: center;
    }

    .hero-slogan {
        text-align: center;
    }

    .hero-subtitles {
        text-align: center;
    }

    .hero-image {
        justify-content: center;
    }

    .portrait {
        width: 200px;
    }

    .logo {
        font-size: 1.5rem;
        font-weight: 800;
        font-family: "Montserrat", "Comic Sans MS", "Marker Felt", "Bradley Hand", cursive;
    }

    .slogan {
        font-size: 1.25rem;
        font-weight: 700;
    }

    .slogan-subtitle {
        font-size: 1rem;  
        margin-top: 2rem;
        font-weight: 400;
    }

    /* Tooltips cachés sur mobile */
    .tooltip {
        display: none;
    }

    .info-icon {
        cursor: pointer;
    }

    /* Expertises */
    .expertise-grid {
        gap: 1rem;
    }

    .expertise-card {
        flex-direction: column;
    }

    .expertise-image {
        width: 100px;
        height: 100px;
        align-self: center;
    }
    
    /* Experiences */
    .experience-grid {
        gap: 1rem;
    }
    
    .experience-header {
        display: grid;
        grid-template-areas:
            "title"
            "image";
        gap: 1.5rem;
        align-items: start;
        justify-content: start;
        justify-items: start;
        text-align: left;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0rem;
    }

    .experience-title {
        grid-area: title;
        text-align: left;        
        width: 100%;               
    }
    
    .experience-image-link {
        grid-area: image;
        justify-self: center;
    }
    
    .experience-toggle {
        margin-top: 1rem;
        width: 100%;
    }


    
    /* Désactiver les liens d'entreprise en mobile et les rendre cliquables pour popup */
    .experience-company {
        cursor: pointer;
        text-decoration: none;
    }
    
    .experience-company a {
        pointer-events: none;
        cursor: inherit;
    }
/*
    .experience-image-link{
        display: None;
    }*/
    
    
    .experience-image {
        width: 125px;    
        height: 125px; 
        align-self: center;

        
    }

    .company-description {
        display: none;
    }

    /* Tech & tools */
    .tech-tools-image-grid {
        display: flex;                    
        flex-direction: column;
        justify-content: none;   
        align-items: center;             
        width: 100%;                     
        gap: 2rem;
    }

    /* Contact */
    .contact-grid {
        gap: 1rem;
    }
    
    .contact-card {
        flex-direction: column;
        text-align: center;
    }

    .contact-image {
        display: none;
    }
}