/* Général */
body {
    padding: 0; /* Suppression du padding par défaut */
    font-family: Arial, sans-serif; /* Nouvelle Police */
    line-height: 1.6; /* Hauteur ligne */
    box-sizing: border-box; /*  Padding + border dans la taille de l'élément */
    min-height: 100vh; /* Au moins toute la hauteur de l'écran */
    margin: 0; /* Pas de marge*/
}

/* En-tête */
header {
    background: #08018d; /* Fond bleu */
    color: #fff; /* Texte en blanc */
    padding: 5px; /* Espacement autour */
    text-align: center; /* Centre le texte */
    position: relative; /* Position en Relative */
    z-index: 1; /* Priorité affichage */
}

/* Image de profil */
.profile-picture {
    width: 170px; /* Largeurimage */
    height: 170px; /* Hauteur image */
    border-radius: 50%; /* Forme circulaire pour l'image */
    position: absolute; /* Positionnement absolu pour superposer dans le header */
    top: 5px; /*  A 5px du haut */
    left: 5px; /* A 5px de la gauche */
    border: 2px solid white; /* Bordure blanche image */
    object-fit: cover; /* Couvre espace sans changer image */
    object-position: top; /* image centrée haut */
    margin-top: 15px; /* Decaler image vers le bas */
    margin-left: 15px; /* Decaler l'image vers la droite */
    
}

/* NavBarre */
nav {
    background-color: black; /* Fond noir */
    text-align: center; /* Centre texte */
    padding: 10px; /* Espacement autour des éléments */
    position: sticky; /*NavBarre suit le scroll */
    top: 0; /* Positionnée haut page */
    left: 0; /* Alignée gauche */
    z-index: 1; /* Priorité affichage */
}

nav ul {
    list-style: none; /* Suppression point liste */
    padding: 0; /* Suppression  padding */
    margin: 0; /* Suppression marge */
    display: flex; /* aligner éléments horizontalement */
    justify-content: center; /* Centrage éléments */
    gap: 30px; /* Espacement 30px entre éléments */
}

nav ul li a {
    color: #fff; /* Couleur texte blanc */
    text-decoration: none; /* Suppression soulignement */
    font-size: 20px; /* Taille texte */
    transition: background-color 0.3s ease, padding 0.3s ease; /* Effet transition fond + padding */
}

nav ul li a:hover {
    background-color: #08018d; /* Changement fond au survol */
    padding: 10px 15px; /* Augmentation padding au survol */
    border-radius: 5px; /* Arrondir bords au survol */
}

/* Principal */
main {
    margin-left: 270px; /* Décalage contenu principal */
}

/* Barre cote */
aside {
    position: absolute; /* Positionnement absolu */
    top: 270px; /* Positionnement 270px du haut */
    height: 158vh; /* Hauteur presque égale à la fenêtre */
    left: 0; /* Alignée gauche */
    width: 220px; /* Largeur barre cote */
    background-color: black; /* Fond noir */
    color: white; /* Couleur texte blanc */
    padding: 20px; /* Espacement autour contenu */
    gap: 10px; /* Espacement entre éléments */
    z-index: 0; /* - prioritaire */
}

aside ul {
    list-style: none; /* Suppression style */
    padding-right: 50px; /* Marge  droite */
    padding-left: 0; /* Suppression padding gauche */
}

aside h3 {
    border: 4px solid #08018d; /* Bordure bleue */
    border-radius: 10px; /* Bordures arrondies */
    background-color: black; /* Fond noir */
    color: white; /* Couleur texte blanc */
    display: inline-block; /* titre en ligne */
    padding: 10px; /* Espacement autour titre */
    margin-bottom: 10px; /* Marge sous titre */
}

aside img {
    top: 400px; /* Position 400px du haut */
    width: 50px; /* Largeur image */
    height: 50px; /* Hauteur image */
    object-fit: contain; /* Maintient proportions image */
    margin: 5px; /* Marge autour image */
}

/* Section principale */
section {
    margin-bottom: 20px; /* Marge bas chaque section */
    padding: 15px; /* Espacement autour contenu */
}

section h3 {
    border: 4px solid #08018d; /* Bordure bleue */
    border-radius: 10px; /* Bordures arrondies */
    background-color: black; /* Fond noir */
    color: white; /* Couleur texte blanc */
    display: inline-block; /* garder titre en ligne */
    padding: 10px; /* Espacement autour titre */
    margin-bottom: 10px; /* Marge sous titre */
}

section ul {
    list-style: none; /* Suppression styles */
    padding: 0; /* Suppression padding */
    margin: 0; /* Suppression marge */
    display: flex; /* Flexbox aligner  éléments verticalement */
    flex-direction: column; /* Aligne éléments en colonne */
    gap: 10px; /* Espacement entre éléments */
}

section ul li img {
    width: 50px; /* Largeur images */
    height: 50px; /* Hauteur image section */
    object-fit: contain; /* Maintient proportions images */
    margin: 5px; /* Marge autour images */
}

/* Logiciels */
.software {
    display: flex; /* Flexbox pour aligner éléments */
    flex-wrap: wrap; /* Deplacement plusieur ligne si besoin */
    justify-content: space-around; /* Répartition égale éléments */
    flex-direction: row; /* Alignement horizontal éléments */
    gap: 10px; /* Espacement entre éléments */
    padding: 10px; /* Espacement autour éléments */
}

/* Future */
.future, .future2 {
    font-size: 20px; /* Taille  texte */
    text-align: center; /* Centre texte */
    display: flex; /* Utilisation de flexbox pour l'alignement */
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
}

/* Portfolio */
.portfolio {
    margin-top: 80px; /* Marge au-dessus du portfolio */
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-wrap: nowrap; /* Ne pas permettre aux éléments de se répartir sur plusieurs lignes */
    align-items: center; /* Centrage vertical des éléments */
    gap: 20px; /* Espacement entre les éléments */
}

.portfolio img {
    width: 300px; /* Largeur des images du portfolio */
    height: 200px; /* Hauteur des images du portfolio */
    border-radius: 5%; /* Bordures légèrement arrondies */
    border: 4px solid black; /* Bordure noire autour des images */
}

.portfolio img:hover {
    transform: scale(2); /* Agrandissement des images au survol */
}

.portfolio p {
    font-size: 20px; /* Taille du texte */
    line-height: 1.5; /* Hauteur de ligne pour la lisibilité */
    max-width: 600px; /* Limite la largeur du texte */
}

/* Vidéo */
.vid video {
    margin-left: 16%; /* Décale la vidéo vers la droite */
    width: 500px; /* Largeur de la vidéo */
    height: 300px; /* Hauteur de la vidéo */
}

/* Section Des carrieres */
.c p {
    font-size: 20px; /* Taille du texte */
    margin-top: 0; /* Supprime la marge en haut */
    margin-left: 100px; /* Décale le texte vers la droite */
    text-align: center; /* Centre le texte */
    max-width: 600px; /* Limite la largeur du texte */
}

.c h3 {
    margin: auto; /* Marge auto */
    margin-right: 250px; /* Décale vers la gauche */
    display: flex; /* flexbox pour centrer  */
    justify-content: center; /* texte centré */
}

/* Formulaire de contact */
.formcontact {
    max-width: 600px; /* Limite largeur formulaire */
    margin-left: 90px; /* Décale formulaire vers la droite */
    padding: 20px; /* Espace autour contenu */
    border-radius: 10px; /* Bordures arrondies */
    text-align: center; /* Centre texte du formulaire */
}

.formcontact h2 {
    margin-bottom: 20px; /* Marge sous titre */
    font-size: 24px; /* Taille texte titre */
    color: #08018d; /* Couleur bleu */
}

.formcontact p {
    top: -351px; /* Positionnement paragraphe */
    position: relative; /* Positionnement relatif */
    font-size: 16px; /* Taille du texte */
    color: #000000; /* texte en noir */
    margin-bottom: 30px; /* Marge sous texte */
}

.formcontact form {
    display: flex; /* Flex pour aligner éléments du formulaire */
    flex-direction: column; /* Aligne éléments en colonne */
    gap: 10px; /* Espacement entre éléments */
}

.formcontact label {
    font-size: 16px; /* Taille texte labels */
    color: #333; /* Couleur labels */
    display: flex; /* flexbox pour l'alignement */
    align-items: center; /* Aligne texte verticalement */
    margin-bottom: 10px; /* Marge sous labels */
}

.formcontact input,
.formcontact textarea {
    width: 100%; /* Remplir largeur formulaire */
    padding: 10px; /* Espacement intérieur  */
    font-size: 16px; /* Taille texte */
    border-radius: 5px; /* Bordures arrondies */
    box-sizing: border-box; /* Padding + border dans taille totale */
}

.formcontact button {
    background-color: #08018d; /* Couleur bleu */
    color: white; /* Couleur texte blanc */
    font-size: 18px; /* Taille texte */
    border: none; /* Aucune bordure */
    padding: 10px 20px; /* Espacement autour texte */
    border-radius: 5px; /* Bordures arrondies */
    cursor: pointer; /* Curseur pointeur */
    transition: background-color 0.3s ease; /* Transition changement couleur */
}

.formcontact button:hover {
    background-color: #06016e; /* Couleur fond survol */
}

.formcontact input[type="checkbox"] {
    width: 20px; /* largeur case à cocher */
    height: 20px; /* hauteur case à cocher */
    margin-bottom: 20px; /* Marge sous case */
    margin-right: 170px; /* Marge droite */
}

/* Pied de page */
footer {
    background: #222; /* Couleur fond */
    color: #fff; /* Couleur texte*/
    text-align: center; /* Centrer texte */
    padding: 10px; /* Espacement autour texte */
}