.texte {
    display: flex; /* Utilise Flexbox pour aligner les éléments sur la même ligne */
    align-items: flex-start; /* Aligne les éléments en haut de la ligne */
    justify-content: flex-start; /* Aligne les éléments au début de la ligne */
}

.texte h1 {
    margin: 0; /* Supprime la marge autour du titre */
    padding-right: 20px; /* Espace entre le texte et l'image */
}

.texte span {
    display: flex; /* Permet au texte de se diviser en plusieurs lignes */
    padding: 20px;
    margin: 23px;
    border-radius: 15px;
    background-color: white;
    border: 1px solid #ddd;
    color: rgb(0, 0, 0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: max(60%, 700px); /* Taille maximale du texte */
    zoom: 100%;
}

.en-tete-competence {
    display: block; /* Utilise Flexbox pour aligner les éléments */
    align-items: center; /* Alignement vertical des éléments */
    justify-content: space-between; /* Espace égal entre les éléments */
    margin-right: min(5%, 30px);
    font-family: 'Roboto', sans-serif;
    height: 100%;
}

.en-tete-competence h1 {
    position: top;
    font-size: 26px;
}

.en-tete-competence p {
    position: center;
    font-size: 16px;
}

.photo-profil {
    width: 200px; /* Taille de l'image */
    border-radius: 15px; /* Coins arrondis */
    margin-left: 20px; /* Espace entre l'image et le texte */
    align-self: flex-start; /* Aligne l'image en haut */
}

#parcours {
    background-image: url('../media/competence/fleur.svg'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Container de la timeline */
.timeline {
    position: relative;
    max-width: 700px;
    padding: 0 10px;
}

/* Chaque item de la timeline */
.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 0;
}

/* Date à gauche ou droite en fonction de l'élément */
.timeline-item:nth-child(odd) {
    flex-direction: row-reverse; /* Les éléments impairs seront inversés */
}

/* Style de la date */
.timeline-date {
    width: 80px;
    padding: 15px;
    background-color: #011e31; /* Couleur marron pour la date */
    color: white;
    text-align: center;
    font-weight: bold;
    border-radius: 5px; 
    margin: 0 20px;
}

/* Style du contenu de la timeline */
.timeline-content {
    background-color: white; /* Fond blanc pour le contenu */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre subtile autour du contenu */
    max-width: 500px;
    color: black;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Animation fluide sur le survol */
}

.timeline-content:hover {
    background-color: #f4f4f4; /* Fond gris clair pour le contenu */
    box-shadow: 0 12px 15px rgba(0, 0, 0, 0.1); /* Ombre plus prononcée sur le survol */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Animation fluide sur le survol */
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    color: black;
    background-color: white;
    max-width: 30%;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-left: 3%;
}

.projet-lier {
    display: flex;
    align-items: center;
    gap: 10px; 
    flex-wrap: wrap; /* Oblige les éléments à revenir à la ligne si nécessaire */
}

.projet-lier a {
    display: inline-block; 
    padding: 5px 10px; 
    color: rgb(0, 0, 0); 
    text-decoration: none;
    border-radius: 5px; 
    transition: background-color 0.3s ease, color 0.3s ease; 
}

.projet-lier a:hover {
    background-color: #b4dbdc; 
    color: black; 
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 5px; 
}

/* Media queries pour les écrans de taille inférieure à 800px */


@media screen and (max-width: 800px) {
    h2 {
        max-width: 90%;
    }

    #parcours {
        background-image: url('../media/competence/fleur2.svg');
        background-repeat: repeat;
    }

    .photo-profil {
        display: none;
    }

    
}