/* GLOBAL STYLE */
/*====================================================================================================================*/
html, body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #e9e9e9;
    line-height: 1.6;
    scroll-behavior: smooth;
}


/* HEADER */
/*====================================================================================================================*/
header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #4c72af;
    color: white;
    padding: 10px 0;
    z-index: 1000;
}

#desktop-navigation {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 10px;
}

#desktop-navigation li {
    margin: 0 15px;
}

#desktop-navigation li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 10px;
    border-radius: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#desktop-navigation li a:hover,
#desktop-navigation li a.active {
    background-color: white;
    color: #4c72af;
}

/* Menu mobile */
#mobile-navigation {
    display: none; /* Masqué par défaut */
    list-style: none;
    margin: 0;
    padding: 5px;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 20px;
}

#mobile-navigation li {
    list-style: none;
}


#mobile-navigation li a:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* SECTION */
/*====================================================================================================================*/
section {
    padding: 100px 20px;
    min-height: 100vh;
    text-align: center;
    overflow: hidden;
}


/* CV DOWNLOAD BUTTON */
/*====================================================================================================================*/
#cv-button {
    position: absolute; /* Position absolue pour s'adapter au header */
    top: 100px; /* Juste en dessous du header */
    left: 40px; /* Position ajustée à gauche */
    width: 80px; /* Taille ajustée pour un rendu équilibré */
    height: 80px;
    cursor: pointer; /* Indique que c'est cliquable */
    z-index: 10; /* Assure sa visibilité */
    display: flex;
    align-items: center; /* Centre le contenu visuellement */
    justify-content: center; /* Centre le contenu visuellement */
    opacity: 0; /* Caché par défaut */
    pointer-events: none; /* Désactive les clics quand invisible */
    animation: button-move 10s infinite linear; /* Animation de mouvement */
    transition: top 1.5s ease, left 1.5s ease, opacity 0.8s ease; /* Animation fluide */
}

/* Bouton CV visible */
#cv-button.visible {
    opacity: 1; /* Pleine visibilité */
    pointer-events: auto; /* Active les clics quand visible */
}

/* Apparence du bouton */
#cv-button::before {
    content: "";
    width: 120px; /* Taille ajustée à celle du container */
    height: 140px;
    background: url('../img/asset/cv.png') no-repeat center / contain; /* Lien vers l'image */
    position: fixed;
    transition: transform 0.3s ease; /* Animation légère au survol */
    display: block;
}

/* Animation au survol */
#cv-button:hover::before {
    transform: scale(1.15) rotate(5deg); /* Agrandit légèrement et pivote au survol */
}


/* Modale */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 3000; /* Toujours visible au-dessus */
}

.modal-content {
    background-color: white;
    width: 80%;
    max-width: 600px;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.modal-content iframe {
    width: 100%;
    height: 400px;
    border: none;
}

/* Bouton de téléchargement */
.download-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.download-button:hover {
    background-color: #0056b3;
}

/* Bouton de fermeture */
.close-button {
    position: absolute;
    top: 15px; /* Ajustez cette valeur pour éloigner du bord supérieur */
    right: 15px; /* Ajustez cette valeur pour éloigner du bord droit */
    font-size: 2rem; /* Taille légèrement plus grande pour meilleure visibilité */
    color: #333; /* Couleur */
    background-color: rgba(255, 255, 255, 0.8); /* Ajout d'un fond légèrement visible */
    border: none; /* Pas de bordure */
    border-radius: 50%; /* Cercle */
    width: 40px; /* Largeur du bouton */
    height: 40px; /* Hauteur du bouton */
    line-height: 40px; /* Alignement vertical */
    text-align: center; /* Centrer le "×" */
    cursor: pointer; /* Curseur pour indiquer un bouton cliquable */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre pour meilleure distinction */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animation */
}

.close-button:hover {
    background-color: rgba(255, 255, 255, 1); /* Fond plein au survol */
    transform: scale(1.1); /* Légèrement plus grand au survol */
    color: #ff0000; /* Change la couleur au survol */
}


/* Modale masquée */
.hidden {
    display: none;
}

/* Modale visible */
.show {
    display: flex; /* Active l'affichage */
}


/* Section : INTRO */
/*====================================================================================================================*/
#intro {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background-image: url("../img/intro_bg/intro-bg-earth.png");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#intro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    pointer-events: none;
}

#text {
    position: relative;
    z-index: 3;
    color: rgb(200, 231, 248);
}

#text h1 {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

#text h1:hover {
    color: #4c72af;
    transform: scale(1.1);
}

#text p {
    font-size: 1.2rem;
    margin: 5px 0;
    transition: all 0.3s ease;
}

#text p:hover {
    color: #d0481e;
    transform: translateX(10px);
}

/* Animation de flottement */
#plane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url("../img/intro_bg/intro-bg-plane.png");
    background-size: cover;
    background-position: center;
    pointer-events: none;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(-2%);
    }
    50% {
        transform: translateY(2%);
    }
}


/* Section : SAVOIR-FAIRE */
/*====================================================================================================================*/
#skills {
    background-color: #34373c;
    color: white;
    padding: 50px 20px;
    text-align: center;
}

.skills-h1 {
    font-size: 4rem; 
    font-weight: bold;
    color:#028a44;
}

.skills-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.skill {
    background-color: #444; /* Couleur de fond sombre */
    color: #fff; /* Couleur du texte */
    border-radius: 10px; /* Coins arrondis */
    padding: 20px;
    width: 300px; /* Largeur uniforme */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre douce */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation fluide */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espace entre les éléments */
}

/* Liste des compétences */
.skill-list {
    list-style: none; /* Supprime les puces par défaut */
    padding: 0;
    margin: 0;
}

.skill-list li {
    font-size: 1rem;
    color: #ddd;
    margin-bottom: 10px;
    text-align: left; /* Alignement à gauche pour lisibilité */
    padding-left: 10px;
    position: relative;
}

.skill-list li::before {
    content: "•"; /* Ajoute une puce personnalisée */
    color: #4c72af; /* Couleur de la puce */
    font-weight: bold;
    display: inline-block;
    width: 1rem;
    margin-left: -1rem;
}

.skill:hover {
    transform: scale(1.05); /* Légère mise en avant */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Accentuation de l'ombre */
}

.skill h3 {
    margin: 0;
    font-size: 1.4rem;
    text-align: center; /* Centrer le titre */
    font-weight: bold;
    margin-bottom: 15px; /* Espace en bas du titre */
    color: #4c72af; /* Couleur du titre */
}

/* Ligne contenant le label et la barre */
.skill-row {
    display: flex; /* Flexbox pour aligner les éléments horizontalement */
    align-items: center; /* Aligne verticalement le label et la barre */
    gap: 10px; /* Espace entre le label et la barre */
    color: #ddd;
}

/* Style des labels */
.skill-row label {
    flex: 2; /* Le label prend une proportion raisonnable de l'espace */
    font-size: 1rem; /* Taille de la police */
    text-align: right; /* Aligne le texte à gauche */
    color: #ddd; /* Couleur légèrement grise */
    /*display: flex;*/
    align-items: center; /* Aligne le texte et l'icône verticalement */
    gap: 5px; /* Espace entre le texte et l'icône */
}

/* Style de l'icône graphique */
.skill-row-icon {
    flex: 1; /* Fixe la taille de l'icône */
    width: 25px; /* Largeur de l'icône */
    height: 25px; /* Hauteur de l'icône */
    background-color: transparent; /* Fond transparent */
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

.skill-row-icon img {
    width: 30px; /* Ajuste l'image à la taille définie */
    height: 30px;
}

/* Style des barres de progression */
.skill-row progress {
    flex: 2; /* La barre prend plus d'espace */
    width: 100%; /* Barre pleine largeur */
    height: 10px; /* Hauteur des barres */
    border-radius: 5px; /* Coins arrondis */
    overflow: hidden; /* Évite les débordements */
    appearance: none; /* Supprime le style par défaut */
}

/* Style pour les navigateurs */
.skill-row progress::-webkit-progress-bar {
    background-color: #666; /* Couleur de fond de la barre */
    border-radius: 5px;
}

.skill-row progress::-webkit-progress-value {
    background-color: #4c72af; /* Couleur de la progression */
    border-radius: 5px;
}

.skill-row progress::-moz-progress-bar {
    background-color: #4c72af; /* Couleur pour Firefox */
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Espacement entre les cartes */
    max-width: 80%; /* Réduit la largeur totale du conteneur */
    margin: 0 auto; /* Centre le conteneur */
}

.card {
    position: relative;
    background-color: #282a27; /* Fond sombre */
    color: #ddd; /* Couleur du texte */
    border-radius: 10px; /* Coins arrondis */
    padding: 20px;
    width: 250px; /* Largeur uniforme */
    height: 300px; /* Hauteur fixe */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    text-align: center; /* Centre le texte */
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation fluide */
}

.card-inner {
    display: flex;
    flex-direction: column; /* Organise les éléments verticalement */
    justify-content: center; /* Centre les éléments verticalement */
    gap: 10px; /* Espace entre chaque élément (label + progress) */
    margin-top: 10px; /* Espacement par rapport au titre et à l'icône */
}

.card h3 {
    margin: 0 0 10px 0; /* Espace sous le titre */
    font-size: 1.2rem;
}

.card p {
    color: #ddd; /* Couleur légèrement grise */
    font-size: 1rem; /* Taille de la police */
    flex-grow: 1; /* Permet à la description de s'étendre si nécessaire */
}

/* Position de l'icône */
.card-icon {
    position: absolute;
    top: 5px; /* Ajuste l'icône au bord supérieur */
    left: 5px; /* Ajuste l'icône au bord gauche */
    width: 30px; /* Taille réduite pour rester discrète */
    height: 30px; /* Taille uniforme */
    z-index: 2; /* Assure que l'icône est visible */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Transition fluide */
    opacity: 1; /* Assure que l'icône est visible par défaut */
}

/* Animation de l'icône lors du survol */
.card:hover {
    transform: rotateX(10deg) rotateY(10deg); /* L'icône suit la rotation de la carte */
}

/* Assurez-vous que l'icône reste visible et normale sans hover */
.card:not(:hover) .card-icon {
    transform: none; /* Pas de transformation par défaut */
    opacity: 1; /* Reste visible en mode normal */
}

.card-header {
    display: flex; /* Active le mode flexbox */
    align-items: center; /* Centre verticalement l'icône et le texte */
    gap: 10px; /* Espace entre l'icône et le texte */
}

.card-header .icon-container {
    width: 60px; /* Largeur de l'icône */
    height: 60px; /* Hauteur de l'icône */
    flex-shrink: 0; /* Empêche le conteneur de se redimensionner */
}

.card-header .icon-container img {
    width: 100%; /* L'image remplit le conteneur */
    height: 100%; /* Maintient les proportions */
}

.card-header .text-container {
    flex-grow: 1; /* Le texte prend tout l'espace restant */
}

.card-header .text-container h3 {
    margin: 0; /* Supprime les marges par défaut */
    font-size: 1.2rem; /* Taille du texte */
    font-weight: bold;
    color: #00a2ff; /* Couleur du texte */
}

/* Pour mieux centrer les rangées après réduction */
#skills {
    background-color: #34373c;
    color: white;
    padding: 50px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments */
    justify-content: center;
    gap: 30px;
}

/* Section : PROJECTS */
/*====================================================================================================================*/
#projects {
    background-color: #e9e9e9;
    color: #333;
    padding: 50px 20px;
    text-align: center;
}

#projects-container {
    display: flex; /* Active Flexbox */
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre verticalement */
    min-height: calc(100vh - 200px); /* Ajuste la hauteur pour prendre en compte l'en-tête ou autre espace */
    gap: 20px; /* Ajoute de l'espace entre les cartes */
    margin-top: 20px; /* Espace entre le conteneur et les boutons de tri */
    justify-content: center; /* S'assure que tout est centré */
}

.projects-h1 {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #028a44;
}

.projects-sort-container {
    display: flex;
    justify-content: center;
    gap: 15px; /* Espacement entre les boutons */
    margin-bottom: 20px; /* Espace avec la liste de projets */
}

.projects-h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 20px;
    color: #192c22;
    text-align: left; /* Aligne les sous-titres à gauche */
    margin-bottom: 15px;
}

.projects-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Ajoute de l'espace entre les projets */
    justify-content: center; /* Centre les projets horizontalement */
    width: 100%; /* S'assure que les projets s'étendent bien */
}

.project {
    background-color: #ffffff;
    color: #333;
    border-radius: 10px;
    padding: 20px;
    width: 300px; /* Fixe une largeur uniforme */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left; /* Alignement du contenu à gauche */
    margin: 10px; /* Assure un espacement uniforme autour des cartes */
}

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

.sort-btn {
    background-color: #4c72af; /* Couleur de fond par défaut */
    color: white; /* Couleur du texte */
    border: none;
    border-radius: 20px; /* Coins arrondis */
    padding: 10px 20px; /* Taille des boutons */
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.sort-btn:hover {
    background-color: #3a5c87; /* Couleur au survol */
    transform: scale(1.05); /* Agrandissement léger */
}

.sort-btn.active {
    background-color: #2c4670; /* Couleur du bouton actif */
    font-weight: bold;
}

.project-link {
    text-decoration: none; /* Supprime le soulignement */
    color: inherit; /* Utilise la couleur parente */
    display: block; /* Rend tout le bloc cliquable */
}

.project-link:hover {
    text-decoration: bold; /* Ajoute un soulignement au survol si souhaité */
}


/* Section : CONTACT */
/*====================================================================================================================*/
.profile-container {
    display: flex;
    justify-content: center; /* Centre les cartes horizontalement */
    align-items: flex-start; /* Aligne les cartes en haut */
    gap: 20px; /* Espace entre les cartes */
    margin: 20px auto;
    padding: 10px;
}

.contact-h1 {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #028a44;
}

/* Styles communs pour les cartes */
.linkedin-card, .github-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 300px; /* Fixe une largeur uniforme */
    text-align: center;
}

.linkedin-avatar, .github-avatar {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-bottom: 10px;
}

.linkedin-name, .github-name {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.linkedin-bio, .github-bio {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.linkedin-link, .github-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073b1; /* Bleu LinkedIn */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.github-link {
    background-color: #333; /* Noir GitHub */
}

.linkedin-link:hover {
    background-color: #005582; /* Couleur LinkedIn au survol */
}

.github-link:hover {
    background-color: #555; /* Couleur GitHub au survol */
}


/* Section : EDUCATION - Timeline */
/*====================================================================================================================*/

.education-h1 {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #028a44;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 50px auto;
    padding: 20px 0;
}

/* Vertical line */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background-color: #0a354d;
    z-index: 1;
}

/* Timeline item */
.timeline-item {
    display: flex;
    margin-bottom: 40px;
    position: relative;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

/* Alternate item positions */
.timeline-item:nth-child(even) {
    justify-content: flex-start;
}

/* Timeline icon */
.timeline-icon {
    width: 20px;
    height: 20px;
    background-color: white;
    border: 4px solid #0a354d;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
}

/* Timeline content */
.timeline-content {
    background-color: white;
    padding: 30px 20px 20px; /* Ajoute de l'espace pour le logo */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 40%;
    text-align: left;
    z-index: 2;
    position: relative;
    opacity: 0;
    transform: translateY(50px); /* Start position for animation */
    transition: opacity 1s ease, transform 1s ease;
}

/* Logo container */
.timeline-content .logo-container {
    position: absolute;
    top: -30px; /* Décalé au-dessus de la carte */
    left: 50%;
    transform: translateX(-50%);
    background-color: #f9f9f9; /* Couleur de fond claire */
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    z-index: 2;
}

/* Style de l'image du logo */
.timeline-content .logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Dates */
.timeline-date {
    font-size: 0.9rem;
    color: #007bff;
}

/* Title and text */
.timeline-content h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #0a354d;
}

.timeline-content p {
    font-size: 0.95rem;
    color: #555;
    margin: 0;
}

/* When the item becomes visible */
.timeline-item.visible .timeline-content {
    opacity: 1;
    transform: translateY(0); /* Reset to normal position */
}

/* When the item is hidden again */
.timeline-item.hidden-again .timeline-content {
    opacity: 0;
    transform: translateY(-50px); /* Move up */
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .timeline-content {
        width: 90%;
        padding: 40px 20px 20px; /* Ajuste l'espace pour le logo */
    }
    .timeline-item {
        justify-content: center;
    }
    .timeline-icon {
        left: 50%; /* Keep icon centered */
    }
    .timeline-content .logo-container {
        top: -20px;
        width: 50px;
        height: 50px;
    }
}


/* Section : BY-ME-A-COFFE */
/*====================================================================================================================*/
#buy-me-coffee {
    text-align: center;
    padding: 40px 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    margin: 20px 0;
}

.buy-me-coffee-h1 {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #028a44;
}

.payment-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.payment-method {
    text-align: center;
    max-width: 200px;
}

.payment-qr {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.copy-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.copy-button:hover {
    background-color: #0056b3;
}


/* FOOTER */
/*====================================================================================================================*/
footer {
    display: flex; /* Utiliser Flexbox pour l'alignement */
    flex-direction: column; /* Empile le contenu verticalement */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: auto; /* Laisse la hauteur s'adapter au contenu */
    background-color: #575757; /* Couleur de fond */
    color: #f3f3f3; /* Couleur du texte */
    font-size: 0.9rem; /* Taille de police */
    text-align: center; /* Centre le texte */
    padding: 10px 20px; /* Ajoute un espace autour du contenu */
    border-top: 1px solid #ddd; /* Ligne de séparation en haut */
}

.footer-content p {
    margin: 0 0 10px; /* Espace sous le texte principal */
}

.footer-links {
    display: flex; /* Utiliser Flexbox pour les liens */
    gap: 20px; /* Espacement entre les liens */
}

.footer-links a {
    color: #007bff; /* Couleur des liens */
    text-decoration: none; /* Supprime le soulignement */
    font-weight: bold; /* Mets en gras */
    transition: color 0.3s ease; /* Effet de transition */
}

.footer-links a:hover {
    color: #4593e7; /* Couleur des liens au survol */
}



/* Section : INTERESTS */
/*====================================================================================================================*/
#interests {
    text-align: center;
    margin: 40px 0;
    max-width: 85%; /* Réduit la largeur du conteneur pour moins de cartes */
    margin-left: auto;
    margin-right: auto;
}

.interests-h1 {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #028a44;
}

.flip-card-container {
    --hue: 150;
    --primary: hsl(var(--hue), 50%, 50%);
    --white-1: hsl(0, 0%, 90%);
    --dark: #2a2a2a;

    width: 280px; /* Réduction de la largeur pour mieux s'adapter */
    height: 380px; /* Réduction de la hauteur */
    margin: 20px;
    perspective: 1000px;
    display: inline-block;
}


/* Carte */
.flip-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

/* Hover animation */
.flip-card-container:hover .flip-card,
.flip-card-container:focus-within .flip-card {
    transform: rotateY(180deg);
}

/* Faces des cartes */
.card-front,
.card-back {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Compatibilité iOS */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Face avant */
.card-front {
    transform: rotateY(0deg);
    z-index: 2;
}

.card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.card-front figcaption {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--white-1);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 0;
    text-align: center;
}

/* Face arrière */
.card-back {
    background-color: var(--dark);
    transform: rotateY(180deg);
    color: var(--white-1);
}

.card-back h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--white-1);
}

.card-back p {
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    color: var(--white-1);
}

.card-back button {
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: var(--primary);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.card-back button:hover {
    background-color: hsl(var(--hue), 60%, 60%);
}


/* RESPONSIVE DESIGN : GENERAL SECTION */
/*====================================================================================================================*/
@media screen and (max-width: 768px) {
    /* Global Styles */
    html, body {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Header */
    header nav ul {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    header nav ul li {
        margin: 0;
    }

    /* Sections */
    section {
        padding: 50px 10px;
    }

    #satellite {
        width: 50px;
        height: 50px;
    }

    /* Intro Section */
    #intro {
        background-position: center;
        background-size: cover;
        padding: 20px;
    }

    #text h1 {
        font-size: 2.5rem;
    }

    #text p {
        font-size: 1rem;
    }

    /* Skills Section */
    .skills-container {
        flex-direction: column;
        align-items: center;
    }

    .skill {
        width: 90%;
    }

    /* Projects Section */
    #projects-container {
        flex-direction: column;
        gap: 15px;
    }

    .project {
        width: 90%;
    }

    /* Contact Section */
    .profile-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .linkedin-card, .github-card {
        width: 90%;
    }

    /* Timeline Section */
    .timeline {
        max-width: 100%;
    }

    .timeline-content {
        width: 90%;
        margin: 0 auto;
    }
}


/* RESPONSIVE DESIGN : HEADER SECTION */
/*====================================================================================================================*/
/* Mobile Menu: Small screens (max-width: 480px) */
@media screen and (max-width: 480px) {
    /* Masquer le menu desktop */
    #desktop-navigation {
        display: none;
    }

    /* Afficher le menu mobile */
    #mobile-navigation {
        display: flex;
    }

    #mobile-navigation li a {
        display: block;
        width: 35px; /* Taille adaptée pour petits écrans */
        height: 35px;
        background-color: #007bff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    #mobile-navigation li a img {
        width: 20px; /* Taille adaptée des icônes */
        height: 20px;
    }
}

/* Tablet Menu: Medium screens (481px to 1124px) */
@media screen and (min-width: 481px) and (max-width: 1124px) {
    /* Masquer le menu desktop */
    #desktop-navigation {
        display: none;
    }

    /* Afficher le menu mobile */
    #mobile-navigation {
        display: flex;
    }

    #mobile-navigation li a {
        display: block;
        width: 50px; /* Taille adaptée pour tablettes */
        height: 50px;
        background-color: #007bff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    #mobile-navigation li a img {
        width: 30px; /* Taille adaptée des icônes */
        height: 30px;
    }
}

/* Desktop Menu: Large screens (min-width: 1125px) */
@media screen and (min-width: 1125px) {
    /* Masquer le menu mobile */
    #mobile-navigation {
        display: none;
    }

    /* Afficher le menu desktop */
    #desktop-navigation {
        display: flex;
    }
}


/* RESPONSIVE DESIGN : INTEREST SECTION */
/*====================================================================================================================*/
@media screen and (max-width: 768px) {
    /* Section Interests */
    #interests {
        margin: 20px 0;
        text-align: center;
    }

    .interests-h1 {
        font-size: 2rem;
        margin-bottom: 20px;
        color: #028a44;
    }

    /* Container des cartes */
    .flip-card-container {
        width: 100%; /* Utilise toute la largeur du container */
        margin: 15px 0; /* Supprime le centrage horizontal */
        padding: 0; /* Supprime tout padding */
        border-radius: 15px; /* Coins arrondis pour tout le container */
        background-color: #fff; /* Fond blanc */
    }

    /* Cartes */
    .flip-card {
        width: 100%;
        position: relative;
        background-color: #fff; /* Fond blanc pour le flip-card */
        border-radius: 15px;
        overflow: hidden; /* Empêche les débordements */
    }

    /* Image de la carte */
    .card-front img {
        width: 100%; /* S'adapte à la largeur du container */
        object-fit: cover; /* Recadre si nécessaire */
    }

    /* Légende superposée */
    .card-front figcaption {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent */
        color: white;
        font-size: 1rem;
        font-weight: bold;
        padding: 10px;
        text-align: center;
    }
}


/* RESPONSIVE DESIGN : FORMATION SECTION */
/*====================================================================================================================*/
@media screen and (max-width: 768px) {
    .timeline {
        max-width: 100%; /* S'étend sur toute la largeur */
        padding: 20px 10px;
    }

    .timeline::before {
        display: none; /* Supprime la ligne verticale */
    }

    .timeline-item {
        justify-content: center; /* Centre tous les éléments */
        flex-direction: column; /* Aligne tout verticalement */
        margin-bottom: 30px;
    }

    .timeline-icon {
        display: none; /* Retire les cercles noirs */
    }

    .timeline-content {
        width: 90%; /* Réduit la largeur pour s'adapter au mobile */
        text-align: center; /* Centre le texte */
        margin: 0 auto; /* Centre le contenu */
    }

    .timeline-content .logo-container {
        top: -20px; /* Décale légèrement le logo */
        width: 50px;
        height: 50px;
    }

    .timeline-content h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .timeline-content p {
        font-size: 0.9rem;
    }

    .timeline-date {
        font-size: 0.85rem;
    }
}


/*====================================================================================================================*/