/* Général */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
    scroll-behavior: smooth; /* Active le défilement fluide */
}

.dev-progress {
    text-align: center;
    color: red;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #0056b3;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Assure que tout est centré verticalement */
    padding: 10px 20px;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.navbar .logo {
    flex-shrink: 0; /* Empêche le logo de se redimensionner */
}

.navbar .logo a img {
    height: 40px;
    display: block;
}

/* Liens de navigation */
.navbar .nav-links {
    list-style: none;
    display: flex;
    gap: 20px; /* Espacement entre les liens */
    margin: 0;
    padding: 0;
    align-items: center; /* Centre verticalement les liens avec le bouton */
}

.navbar .nav-links li {
    display: inline-block;
}

.navbar .nav-links a {
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s ease;
}

/* Bouton Contact */
.navbar .nav-links .btn-contact {
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 30px; /* Arrondi sur les côtés */
    border: 2px solid rgba(255, 223, 0, 0.8); /* Bordure jaune subtile */
    background-color: #ffdd57; /* Fond jaune clair */
    color: #0056b3; /* Texte bleu foncé */
    transition: all 0.3s ease; /* Animation fluide */
}

.navbar .nav-links .btn-contact:hover {
    background-color: #ffc107; /* Jaune plus foncé au survol */
    color: #0056b3; /* Texte bleu foncé */
    transform: scale(1.05); /* Mise en avant */
}

/* Effet sur les liens standards */
.navbar .nav-links a:hover {
    color: #67c8ff; /* Nouveau bleu pour le survol */
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.8); /* Couleur blanche transparente */
    color: #0056b3; /* Texte devient bleu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ajoute une ombre subtile */
}

.navbar.scrolled .nav-links a {
    color: #0056b3; /* Liens deviennent bleus */
}



.navbar.scrolled .nav-links a:hover {
    color: #67c8ff; /* Liens deviennent bleus */
}

.navbar.scrolled .btn-contact:hover {
    background-color: #ffc107; /* Jaune plus foncé au survol */
    color: white; /* Texte reste blanc */
}




/* Mobile Menu */
@media (max-width: 768px) {
    .navbar {
        flex-direction: row;
        justify-content: space-between;
    }

    .burger-menu {
        display: flex; /* Visible sur mobile */
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #0056b3;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transform: translateY(-100%);
        visibility: hidden;
        opacity: 0;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease;
    }

    .nav-links.active {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
    }

    .nav-links li {
        margin: 15px 0;
    }

    .nav-links .btn-contact {
        padding: 8px 15px;
        font-size: 12px;
    }

    .logo img {
        height: 30px;
    }
}

/* Section de présentation */

#presentation {
    position: relative; /* Nécessaire pour positionner le pseudo-élément */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    background: linear-gradient(135deg, #0056b3, #67c8ff); /* Fond dégradé */
    color: white;
    text-align: left;
    padding: 0 10%;
    box-sizing: border-box;
    overflow: hidden; /* Empêche le mot de dépasser */
}



#presentation::before {
    content: "Hi"; /* Le mot à afficher */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1); /* Centrage et échelle initiale */
    font-size: 300px; /* Taille du texte */
    font-weight: 700; /* Style épais */
    color: transparent; /* Le remplissage est invisible */
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5); /* Contour blanc semi-transparent */
    z-index: 0; /* Derrière le contenu principal */
    pointer-events: none; /* Empêche les interactions avec le mot */
    animation: hi-animation 6s infinite ease-in-out; /* Animation fluide et répétée */
    font-family: 'Bebas Neue', sans-serif; /* Police spécifique pour le mot Hi */
}

/* Animation Keyframes */
@keyframes hi-animation {
    0% {
        transform: translate(-50%, -50%) scale(0.95); /* Taille normale */
        opacity: 0.4; /* Plus transparent */
    }
    50% {
        transform: translate(-50%, -50%) scale(1); /* Légèrement plus grand */
        opacity: 0.8; /* Plus visible */
    }
    100% {
        transform: translate(-50%, -50%) scale(0.95); /* Retour à la taille normale */
        opacity: 0.4; /* Re-devient transparent */
    }
}


#presentation .content, 
#presentation .photo {
    position: relative; /* Assure que ces éléments restent devant le mot "Hi" */
    z-index: 1; /* Place ces éléments au-dessus du pseudo-élément */
}



#presentation .content {
    flex: 1; /* Le texte prend 50% de l'espace */
    max-width: 600px;
}

#presentation h1 {
    font-size: 48px;
    margin-bottom: 40px;
}

#presentation p {
    font-size: 40px;
    margin-bottom: 60px;
    font-weight: 300;
}

#presentation .buttons {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

#presentation .btn {
    text-decoration: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: white;
}

#presentation .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Bouton CV */
#presentation .btn {
    display: inline-block;
    text-decoration: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px; /* Arrondi sur les côtés */
    border: 2px solid rgba(255, 223, 0, 0.8); /* Bordure jaune subtile */
    background-color: #ffdd57; /* Jaune pour le fond */
    color: #0056b3; /* Texte bleu foncé */
    transition: all 0.3s ease; /* Animation fluide */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

#presentation .btn:hover {
    background-color: #ffc107; /* Jaune plus foncé au survol */
    color: #0056b3; /* Texte bleu foncé */
    transform: scale(1.05); /* Légère mise en avant */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée */
}


/* Bouton LinkedIn */
#presentation .btn-linkedin {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Taille du bouton */
    height: 50px;
    border-radius: 50%; /* Forme ronde */
    border: 2px solid rgba(255, 255, 255, 0.8); /* Bordure fine */
    background-color: transparent; /* Même couleur que la page */
    color: rgba(255, 255, 255, 0.8); /* Couleur de l'icône */
    font-size: 20px; /* Taille de l'icône */
    transition: all 0.3s ease; /* Animation fluide */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

#presentation .btn-linkedin:hover {
    background-color: white; /* Fond blanc au survol */
    color: #0077b5; /* Couleur officielle de LinkedIn */
    border-color: white; /* Harmonise la bordure avec le fond */
    transform: scale(1.1); /* Légère mise en avant */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée */
}


@media (max-width: 768px) {
    #presentation .btn {
        padding: 12px 24px; /* Réduit la taille du bouton CV */
        font-size: 14px;
    }

    #presentation .btn-linkedin {
        width: 40px; /* Réduit la taille du bouton */
        height: 40px;
        font-size: 16px; /* Réduit la taille de l'icône */
    }
}


/* Photo */
#presentation .photo {
    display: flex;
    justify-content: center; /* Centre l'image horizontalement */
    align-items: center; /* Centre l'image verticalement */
}

#presentation .photo img {
    width: 400px; /* Taille du cercle */
    height: 400px;
    border-radius: 50%; /* Cercle parfait */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optionnel : ombre douce */
    object-fit: cover; /* Remplit le cercle sans déformation */
    object-position: center top; /* Centre par défaut */
}











section:not(#presentation) {
    margin-top: -20px; /* Ajuste si nécessaire pour éviter l'écart */
    padding-top: 70px; /* Compense la hauteur de la navbar */
}


@media (max-width: 768px) {
    #presentation {
        flex-direction: column; /* Empile texte et image */
        text-align: center; /* Centre le texte */
        padding: 20px; /* Réduit les marges */
    }

    #presentation .content {
        max-width: 100%;
        margin-bottom: 20px; /* Espace entre le texte et l'image */
    }

    #presentation .photo {
        margin-top: 20px;
    }

    #presentation .photo img {
        width: 200px; /* Réduit la taille du cercle sur mobile */
        height: 200px;
    }
}



#about {
    padding: 60px 10%;
    background: linear-gradient(135deg, #0056b3, #67c8ff); /* Couleurs en dégradé */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap; /* Adaptation sur petits écrans */
    text-align: left;
}

.about-container {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: auto;
}

.about-text {
    flex: 1;
    max-width: 1000px;
}

.about-text h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #ffdd57; /* Couleur jaune pour le titre */
}

.about-text p {
    font-size: 18px;
    line-height: 1.6;
}

/* Responsivité */
@media (max-width: 768px) {
    #about {
        padding: 40px 20px;
    }

    .about-container {
        flex-direction: column; /* Empile texte et image */
        text-align: center; /* Centre le texte */
    }

    .about-text h2 {
        font-size: 28px;
    }

    .about-text p {
        font-size: 16px;
    }
}




/* Sections */
section {
    padding: 40px 20px;
    margin-bottom: 20px;
}

/* Section Projets */
.projects {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.project {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    width: calc(33.333% - 20px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.project img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.project h3 {
    margin: 15px 0 10px;
}

.project p {
    font-size: 14px;
    color: #555;
}








/* Section Timeline */
#formation {
    text-align: center;
    padding: 40px 20px;
    background-color: #f9f9f9;
}

#formation h2 {
    font-size: 28px;
    color: #0056b3;
    margin-bottom: 30px;
}

.timeline {
    position: relative;
    margin: 0 auto;
    max-width: 800px;
    padding: 0;
    z-index: 1; 
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background-color: #0056b3;
    z-index: 0; /* Place la ligne derrière les contenus */
}

.timeline-item {
    position: relative;
    margin: 40px 0;
    width: 50%;
    z-index: 1;
}

.timeline-item.left {
    left: 0;
    text-align: right;
}

.timeline-item.right {
    left: 50%;
    text-align: left;
}

.timeline-content {
    position: relative;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: inline-block;
    z-index: 1; /* Place le contenu devant la ligne */
}

.timeline-item.left .timeline-content {
    transform: translateX(-30px);
}

.timeline-item.right .timeline-content {
    transform: translateX(30px);
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 50%; /* Centre le cercle verticalement par rapport à la ligne */
    transform: translateY(-50%);
    left: calc(100% - 10px);
    width: 20px;
    height: 20px;
    background-color: #ffdd57;
    border: 3px solid white;
    border-radius: 50%;
    z-index: 2; /* Place les cercles devant la ligne */
}

.timeline-item.right::before {
    left: -13px; /* Positionne le cercle à gauche pour les éléments alignés à droite */
}

.timeline-item.left::before {
    left: auto; /* Ignore le positionnement gauche par défaut */
    right: -13px; /* Positionne le cercle pour les items à gauche */
}

/* Responsivité */
@media (max-width: 768px) {
    .timeline {
        padding: 0;
    }

    .timeline-item {
        width: 100%;
    }

    .timeline-item.left .timeline-content,
    .timeline-item.right .timeline-content {
        transform: translateX(0);
        text-align: center;
    }

    .timeline-item::before {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}









/* Expériences Professionnelles */
.experience-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: calc(33.333% - 20px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Popup */
.popup {
    display: none; /* Cachée par défaut */
    position: fixed; /* Toujours visible à l'écran */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Priorité maximale */
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
    position: relative; /* Nécessaire pour positionner la croix à l'intérieur */
    z-index: 10000;
}

.popup-content .close {
    position: absolute; /* Positionnée par rapport à .popup-content */
    top: 10px; /* Distance du haut de .popup-content */
    right: 10px; /* Distance de la droite de .popup-content */
    font-size: 20px; /* Taille de la croix */
    font-weight: bold;
    color: #333;
    cursor: pointer;
    z-index: 10001; /* Assure que la croix reste au-dessus du contenu */
}

.popup-content .close:hover {
    color: #ff5722; /* Change la couleur au survol */
}

/* Section Compétences */
#competences {
    text-align: center;
    padding: 40px 10%;
    background-color: #f9f9f9;
}

#competences h2 {
    font-size: 28px;
    color: #0056b3;
    margin-bottom: 30px;
}

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px; /* Limite la largeur totale de la grille */
    margin: 0 auto;
}

/* Cartes de compétences */
.skill-card {
    position: relative;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    text-align: center;
    overflow: hidden; /* Masque tout ce qui dépasse */
    z-index: 0;
}

/* Liseré progressif */
.skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 2px solid #0056b3; /* Couleur du liseré */
    border-radius: 8px; /* Coins arrondis */
    transition: width 0.3s ease, height 0.3s ease; /* Animation progressive */
    z-index: -1; /* Place derrière le contenu */
    outline: 1px solid red; /* Debug temporaire */

}

.skill-card:hover::before {
    width: 100%; /* Étend le liseré en largeur */
    height: 100%; /* Étend le liseré en hauteur */
}


.skill-card img {
    width: 50px; /* Réduit la taille des images */
    height: 50px;
    margin: 0; /* Supprime les marges autour de l'image */
}

.skill-card h3 {
    font-size: 14px;
    color: #0056b3;
    margin: 0; /* Supprime les marges pour un alignement précis */
    flex: 1; /* Permet au texte de se positionner au milieu */
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-card p {
    font-size: 12px;
    color: #555;
    margin: 0; /* Supprime les marges */
}


/* Responsivité */
@media (max-width: 768px) {
    #competences {
        padding: 40px 5%; /* Réduit les marges latérales sur mobile */
    }

    .skill-card {
        width: 100px; /* Réduit davantage la largeur des cartes sur mobile */
    }

    .skills-grid {
        gap: 15px; /* Réduit l'espacement entre les cartes sur mobile */
    }
}




/* Section Certifications */
#certifications {
    text-align: center;
    padding: 40px 20px;
    background-color: #f9f9f9;
}

#certifications h2 {
    font-size: 28px;
    color: #0056b3;
    margin-bottom: 30px;
}

.company {
    margin-bottom: 20px;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.company h3 {
    font-size: 20px;
    color: #0056b3;
    cursor: pointer;
    margin: 10px 0;
    transition: color 0.3s ease;
}

.company h3:hover {
    color: #003d7a;
}

.certifications-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0; /* Cache la liste par défaut */
    opacity: 0; /* Rend la liste invisible */
    transform: translateY(-20px); /* Décale légèrement vers le haut */
    overflow: hidden;
    background-color: transparent; /* Couleur initiale */
    transition: max-height 1s ease, opacity 1s ease, transform 1s ease, background-color 1s ease;
}

.certifications-list.expanded {
    max-height: 500px; /* Une hauteur suffisamment grande pour couvrir le contenu */
    opacity: 1; /* Rétablit la visibilité */
    transform: translateY(0); /* Replace à la position initiale */
    background-color: #f0f8ff; /* Couleur de fond lorsqu’elle est ouverte */

}

.certifications-list li {
    margin: 10px 0;
}

.certifications-list li a {
    text-decoration: none;
    color: #555;
    font-size: 16px;
    transition: color 0.3s ease;
}

.certifications-list li a:hover {
    color: #0056b3;
}




/* Section Contact */
#contact {
    text-align: center;
    margin-top: 40px;
}

#contact p {
    margin: 10px 0;
}

#contact a {
    text-decoration: none;
    background-color: #0056b3;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
    margin: 5px 0;
    transition: background-color 0.3s ease;
}

#contact a:hover {
    background-color: #003d7a;
}

/* Pied de page */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    font-size: 14px;
}

/* Responsivité */
@media (max-width: 768px) {
    .projects {
        flex-direction: column;
    }
    .project {
        width: 100%;
    }
}