body {
    font-family: 'Arial', sans-serif; /* Police d'écriture */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les espacements par défaut */
    line-height: 1.6; /* Espacement des lignes */
    background-color: #f0e5d8; /* Fond clair beige*/
}

header {
    background-color: #8d6e63; /* Couleur brun*/
    color: #fff; /* Texte en blanc */
    text-align: center; /* Aligne le contenu au centre */
    padding: 10px 0; /* Espacement vertical dans le header */
}

header h1 {
    margin: 0; /* Supprime les marges par défaut autour du titre */
}

nav ul {
    list-style: none; /* Supprime les puces de liste */
    padding: 0; /* Supprime les espacements internes */
    display: flex; /* Affiche les éléments en ligne */
    justify-content: center; /* Centre les éléments horizontalement */
    gap: 15px; /* Espacement uniforme entre les liens */
    margin: 0; /* Supprime les marges externes */
}

nav ul li {
    display: inline; /* Chaque élément de la liste reste en ligne */
}

nav ul li a {
    color: #fff; /* Liens en blanc pour contraster avec le fond */
    text-decoration: none; /* Supprime le soulignement par défaut */
    padding: 5px 10px; /* Ajoute de l'espace autour du texte */
    border-radius: 5px; /* Coins arrondis*/
    transition: background-color 0.3s ease; /* Animation au survol */
}

nav ul li a:hover {
    background-color: #6d4f41; /* Brun plus foncé pour indiquer le survol */
}

a {
    text-decoration: none; /* Supprime le soulignement des liens */
    color: #8d6e63; /* Couleur brun pour les liens */
}

a:hover {
    text-decoration: underline; /* Ajoute un soulignement au survol */
}

.container {
    display: flex; /* Mise en page flexible pour séparer les sections */
    justify-content: space-between; /* Espace entre les sections */
    margin: 20px; /* Espacement extérieur autour du conteneur */
    background-color: #ffffff; /* Fond blanc pour les sections */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    overflow: hidden; /* Coupe le contenu débordant */
}

.left-section {
    flex: 1; /* Occupe un espace proportionnel */
    padding: 20px; /* Espacement interne */
    background-color: #d7ccc1; /* Beige clair pour le fond */
    border-right: 2px solid #b5a89e; /* Bordure à droite */
}

.right-section {
    flex: 3; /* Plus large que la section de gauche */
    padding: 20px; /* Espacement interne */
    background-color: #f0e5d8; /* Beige rosé */
}

.photo1 {
    width: 150px; /* Largeur fixe de l'image */
    height: 150px; /* Hauteur fixe */
    border-radius: 50%; /* Forme ronde */
    display: block; /* Centrage avec le margin auto */
    margin: 0 auto 20px; /* Centrage horizontal et espacement en bas */
    border: 5px solid #8d6e63; /* Bordure brun moyen */
}

.content h1 {
    font-size: 1.5rem; /* Taille du titre */
    margin-bottom: 10px; /* Espacement en bas */
    color: #8d6e63; /* Couleur brun moyen */
}

.decor, .dicaprio, .maquette, .persona, .swot, .diagnostic {
    width: 600px; /* Largeur fixe */
    height: 300px; /* Hauteur fixe */
    display: block; /* Centrage avec le margin auto */
    margin: 0 auto 20px; /* Espacement en bas et centrage */
    float: left; /* Position à gauche (pour certaines classes) */
}

.myvideo {
    display: flex; /* Conteneur flexible */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    margin: 20px 0; /* Espacement au-dessus et en dessous */
}

.job {
    width: 460px; /* Taille spécifique pour l'image */
    height: 350px;
    display: block;
    margin: 0 auto 20px; /* Centrage horizontal et espacement en bas */
}

video {
    width: 600px; /* Largeur fixe */
    height: 300px; /* Hauteur fixe */
    display: block; /* Centrage */
    margin: 0 auto 20px;
}

.career {
    background-color: #f0e5d8; /* Fond beige pour la section */
}

h2 {
    border-bottom: 2px solid #8d6e63; /* Ligne de soulignement */
    padding-bottom: 5px; /* Espacement en dessous du texte */
    color: #8d6e63; /* Couleur du texte */
}

ul {
    padding: 0; /* Supprime l'espace interne */
    list-style-type: none; /* Supprime les puces */
}

ul li {
    padding: 5px 0; /* Espacement interne des éléments */
    color: #4e342e; /* Texte brun foncé */
}

.right-section h2 {
    color: #8d6e63; /* Titre en brun moyen */
    margin-top: 0; /* Supprime la marge supérieure */
}

.contact, .languages {
    background-color: #f5f3f0; /* Fond beige clair */
    padding: 15px; /* Espacement interne */
    border-radius: 8px; /* Coins arrondis */
    margin-bottom: 10px; /* Espacement extérieur en bas */
    border: 1px solid #b5a89e; /* Bordure brun clair */
}

footer {
    background-color: #fff; /* Fond blanc */
    padding: 20px; /* Espacement interne */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
    width: 100%;
    max-width: 400px; /* Limite la largeur */
}

footer label {
    display: block; /* Affichage en bloc */
    margin-bottom: 5px; /* Espacement en bas */
    color: #4e342e; /* Couleur brun foncé */
}

footer input, footer textarea, footer select {
    width: 100%; /* Prend toute la largeur disponible */
    padding: 10px; /* Espacement interne */
    margin-bottom: 10px; /* Espacement en bas */
    border: 2px solid #ccc; /* Bordure grise */
    border-radius: 5px; /* Coins arrondis */
    font-size: 1rem; /* Taille du texte */
    background-color: #fafafa; /* Fond clair */
}

footer input[type="submit"] {
    background-color: #8d6e63; /* Bouton brun */
    color: white; /* Texte blanc */
    padding: 10px; /* Espacement interne */
    border: none; /* Supprime la bordure par défaut */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur en main au survol */
    width: 100%; /* Prend toute la largeur */
    transition: background-color 0.3s; /* Animation fluide au survol */
}

footer input[type="submit"]:hover {
    background-color: #6d4f41; /* Brun plus foncé au survol */
}