/* Réinitialisation et styles globaux */
* {
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les espacements par défaut */
    box-sizing: border-box; /* Inclut les bordures et le padding dans la largeur et la hauteur des éléments */
    font-family: 'Open Sans', Arial, sans-serif; /* Définition de la police principale */
}

body {
    background-color: #f3f0ff; /* Couleur de fond douce */
    color: #333; /* Couleur de texte par défaut */
    line-height: 1.6; /* Espacement entre les lignes de texte */
}

/* En-tête */
header {
    background-color: #6a0dad; /* Fond violet pour l'en-tête */
    color: white; /* Texte blanc */
    padding: 10px 0; /* Espacement autour du contenu */
    position: fixed; /* Fixe l'en-tête en haut de la page */
    width: 100%; /* Prend toute la largeur */
    top: 0; /* Aligne l'en-tête en haut */
    left: 0; /* Aligne l'en-tête à gauche */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre subtile sous l'en-tête */
}

header nav {
    max-width: 1200px; /* Largeur maximale du menu */
    margin: auto; /* Centre le menu */
    padding: 0 20px; /* Espacement intérieur du menu */
    display: flex; /* Utilisation de flexbox pour une disposition flexible */
    justify-content: space-between; /* Espace égal entre les éléments */
    align-items: center; /* Centrage vertical des éléments */
}

header .nav-title {
    font-size: 1.5rem; /* Taille de la police du titre */
}

header ul {
    display: flex; /* Affiche les éléments de la liste horizontalement */
    list-style: none; /* Supprime les puces de la liste */
}

header ul a {
    color: white; /* Couleur des liens */
    text-decoration: none; /* Supprime le soulignement des liens */
    margin: 0 15px; /* Espacement entre les liens */
    position: relative; /* Nécessaire pour l'animation */
    transition: color 0.3s; /* Animation de changement de couleur */
}

header ul a::after {
    content: ''; /* Ajoute un pseudo-élément après chaque lien */
    display: block; /* Affiche le pseudo-élément sous forme de bloc */
    width: 0; /* Largeur initiale du pseudo-élément */
    height: 2px; /* Hauteur de la ligne sous le lien */
    background: violet; /* Couleur de la ligne */
    transition: width 0.3s; /* Animation de la largeur */
    position: absolute; /* Positionne la ligne sous le lien */
    bottom: -5px; /* Place la ligne légèrement sous le lien */
    left: 0; /* Aligne la ligne à gauche */
}

header ul a:hover {
    color: violet; /* Change la couleur du texte au survol */
}

header ul a:hover::after {
    width: 100%; /* Étend la ligne sous le lien au survol */
}

/* Contenu principal */
main {
    padding-top: 80px; /* Marge pour éviter que le contenu soit caché sous l'en-tête */
    max-width: 1200px; /* Largeur maximale du contenu */
    margin: auto; /* Centrage du contenu */
    padding: 20px; /* Espacement intérieur */
}

/* Sections */
section {
    background-color: #e6e6fa; /* Fond doux pour chaque section */
    padding: 20px; /* Espacement autour du contenu */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre subtile autour des sections */
    margin: 40px 0; /* Espacement entre les sections */
}

/* Section CV */
.cv-header {
    text-align: center; /* Centre le titre de la section */
    margin-bottom: 20px; /* Espace sous le titre */
}

.cv-picture img {
    border-radius: 50%; /* Image ronde */
    margin-bottom: 10px; /* Espace sous l'image */
    width: 20%; /* Taille de l'image */
    max-width: 150px; /* Limite la taille maximale de l'image */
}

.title {
    text-align: center; /* Centre le titre */
    font-size: 4rem; /* Taille de police importante */
}

.cv-info {
    color: #4b0082; /* Couleur violette */
    max-width: 700px; /* Largeur maximale du texte */
    margin: auto; /* Centre le texte */
    text-align: center; /* Centre le texte */
}

.cv-body {
    background-color: white; /* Fond blanc pour le contenu du CV */
    padding: 20px; /* Espacement interne */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre autour du corps du CV */
    margin-top: 20px; /* Espace au-dessus du corps du CV */
}

.cv-body h2 {
    color: #6a0dad; /* Couleur violette pour les titres */
    margin-bottom: 20px; /* Espacement sous le titre */
}

.cv-body ul {
    list-style-type: none; /* Supprime les puces des listes */
}

.cv-body li {
    color: #4b0082; /* Couleur des éléments de la liste */
    margin-bottom: 15px; /* Espace sous chaque élément */
    font-weight: bold; /* Gras pour les éléments de la liste */
}

/* Compétences */
.skills ul {
    list-style: none; /* Supprime les puces des compétences */
    padding: 0;
    margin: 0;
}

.skills li {
    display: flex; /* Affiche les éléments de manière flexible */
    align-items: center; /* Centre verticalement les éléments */
    margin-bottom: 20px; /* Espace sous chaque compétence */
}

.skill-icon {
    width: 50px; /* Taille des icônes */
    height: 50px;
    margin-right: 15px; /* Espace entre l'icône et le texte */
    border-radius: 10px; /* Coins arrondis pour les icônes */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre subtile autour des icônes */
}

.skills .description {
    color: #4b0082; /* Couleur violette pour la description */
}

/* Formulaire */
.formu {
    color: #6a0dad; /* Couleur violette pour le formulaire */
    text-align: center; /* Centre le texte du formulaire */
}

form {
    background-color: white; /* Fond blanc pour le formulaire */
    padding: 20px; /* Espacement interne */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre autour du formulaire */
    margin-top: 20px; /* Espace au-dessus du formulaire */
    max-width: 600px; /* Largeur maximale du formulaire */
    margin: auto; /* Centrage du formulaire */
}

form label {
    display: block; /* Affiche les labels sous forme de blocs */
    font-weight: bold; /* Gras pour les labels */
    margin-top: 10px; /* Espacement au-dessus des labels */
    color: #6a0dad; /* Couleur violette pour les labels */
}

form input,
form select,
form textarea {
    width: 100%; /* Prend toute la largeur */
    padding: 10px; /* Espacement intérieur */
    margin-top: 5px; /* Espacement au-dessus des champs */
    border: 1px solid #ddd; /* Bordure gris clair */
    border-radius: 5px; /* Coins arrondis */
}

form input[type="submit"],
form input[type="reset"] {
    width: 48%; /* Largeur des boutons */
    margin-top: 10px; /* Espacement au-dessus */
    padding: 10px; /* Espacement interne */
    font-weight: bold; /* Texte en gras */
    color: white; /* Texte blanc */
    background-color: #6a0dad; /* Fond violet */
    border: none; /* Supprime la bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur pointeur pour indiquer un clic */
}

form input[type="submit"]:hover,
form input[type="reset"]:hover {
    background-color: #8a2be2; /* Changement de couleur au survol */
}

/* Portfolio */
.portfolio h2,
.video-pitch h2,
.carriere h2 {
    color: #6a0dad; /* Couleur violette pour les titres */
    text-align: center; /* Centre les titres */
    margin-bottom: 20px; /* Espacement sous le titre */
}

/* Conteneur principal de la galerie de projets */
.project-gallery {
    display: flex; /* Utilisation de flexbox pour l'alignement des projets */
    flex-direction: column; /* Empile les projets verticalement */
    gap: 50px; /* Espacement entre les projets */
    justify-content: center; /* Centre les projets verticalement */
    align-items: center; /* Centre les projets horizontalement */
    width: 100%; /* La galerie prend toute la largeur */
    padding: 0 10%; /* Espacement horizontal autour de la galerie */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}

/* Style individuel de chaque projet */
.project {
    display: block; /* Empile les projets les uns sous les autres */
    width: 100%; /* Chaque projet prend toute la largeur */
    max-width: 100%; /* Empêche les projets de dépasser la largeur */
    margin: 10px 0; /* Espacement vertical entre les projets */
    text-align: center; /* Centre le texte et les contenus du projet */
    padding: 40px; /* Espacement interne */
    border-radius: 10px; /* Coins arrondis */
    background-color: #f9f9f9; /* Fond gris clair */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* Ombre autour des projets */
}

/* Conteneur des images dans chaque projet */
.project-images {
    display: flex; /* Flexbox pour aligner les images */
    gap: 30px; /* Espacement entre les images */
    justify-content: center; /* Centre les images horizontalement */
    margin-top: 30px; /* Espacement au-dessus des images */
    flex-wrap: wrap; /* Permet aux images de passer à la ligne */
}

/* Style des images */
.project img {
    max-width: 100%; /* Garantit que l'image ne dépasse pas la largeur du conteneur */
    height: auto; /* Préserve les proportions des images */
    border-radius: 10px; /* Coins arrondis pour les images */
    transition: transform 0.3s; /* Effet de zoom au survol */
}

.project img:hover {
    transform: scale(1.05); /* Agrandissement de l'image au survol */
}

.project a {
    display: block; /* Le lien prend toute la largeur */
    color: #6a0dad; /* Texte violet */
    text-decoration: none; /* Pas de soulignement */
    margin-top: 20px; /* Espacement au-dessus du lien */
    transition: color 0.3s; /* Changement de couleur au survol */
}

.project a:hover {
    color: #8a2be2; /* Violet plus clair au survol */
}

.project h2 {
    color: #6a0dad; /* Couleur violette pour les titres des projets */
    font-size: 2rem; /* Taille de police plus grande pour le titre */
}

.project p {
    color: #6a0dad; /* Couleur violette pour le texte */
    font-size: 1rem; /* Taille standard du texte */
}

/* Vidéo - Séparation avec un cadre distinct */
.video-pitch {
    display: flex;
    flex-direction: column; /* Empile les éléments verticalement */
    justify-content: center;
    align-items: center;
    margin-top: 60px; /* Espacement au-dessus */
    margin-bottom: 60px; /* Espacement en bas */
    margin-left: 10%; /* Espacement à gauche */
    margin-right: 10%; /* Espacement à droite */
    padding: 30px; /* Espacement autour du contenu */
    background-color: #f3f0ff; /* Couleur pastel pour la vidéo */
    border-radius: 15px; /* Coins arrondis pour l'élément */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Ombre pour un effet de profondeur */
    border: 2px solid #dcdcdc; /* Légère bordure grise */
}

/* Style pour le titre de la vidéo */
.video-pitch h3 {
    margin-bottom: 20px; /* Espacement sous le titre */
    font-size: 1.5rem; /* Taille du titre */
    color: #6a0dad; /* Couleur violette */
    text-align: center; /* Centrage du titre */
}

/* Conteneur de la vidéo */
.video-pitch .video-container {
    width: 50%; /* Taille de la vidéo */
    max-width: 800px; /* Taille maximale */
    margin: 0 auto;
    padding: 15px; /* Espacement interne */
    border-radius: 20px; /* Coins arrondis */
    background-color: #ffffff; /* Fond blanc */
}

/* Vidéo */
.video-pitch video {
    width: 100%; /* La vidéo occupe toute la largeur disponible */
    height: auto; /* Préserve les proportions */
    border-radius: 10px; /* Coins arrondis */
}

/* Logos dans l'éducation */
.Uvsq,
.lb {
    display: block;
    margin: 0 auto;
    max-width: 100px; /* Limite la taille des logos */
}

/* Container pour chaque carrière */
.career-container {
    display: flex; /* Flexbox pour organiser les éléments */
    align-items: center; /* Centrage vertical */
    gap: 20px; /* Espacement entre les éléments */
    margin-bottom: 40px; /* Espacement en bas */
}

/* Image de la carrière (sauf pour la guitare) */
.career-image {
    width: 30%; /* Taille des images */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre autour des images */
}

/* Image spécifique pour la guitare : pas de changement de taille */
.career-container.reverse .guitar-image {
    width: auto; /* Taille d'origine pour l'image de guitare */
    height: auto;
}

/* Le texte s'ajuste à la position de l'image */
.career-option {
    max-width: 60%; /* Limite la largeur du texte */
}

/* Pour inverser l'ordre des éléments (texte à droite et image à gauche) */
.career-container.reverse {
    flex-direction: row-reverse; /* Inverse l'ordre des éléments */
}

/* Stylisation du titre de chaque option de carrière */
.career-option h3 {
    color: #8a2be2; /* Couleur violette pour les titres */
}

/* Stylisation du paragraphe de chaque option de carrière */
.career-option p {
    color: #8a2be2; /* Couleur violette pour le texte */
}