#cv-page {
    font-family: Arial, sans-serif; /* police d'écriture en Arial */
    line-height: 1.6; /* espacement entre les lignes */
    background-color: whitesmoke; /* couleur de fond gris clair */
}

#entete-principale {
    background-color: steelblue; /* couleur  */
    color: white; /* couleur du texte */
    padding: 20px 50px; /* espacement interne */
    text-align: center; /* centré le texte */
}

#entete-principale h1 {
    font-size: 2.5em;/* taille de la police */
    margin-bottom: 5px; /* espacement en bas */
}

#entete-principale h2 {
    font-size: 1.2em; /* taille de la police */
    font-weight: normal;/* poid de la police */
}

.sommaire {
    font-style: italic; /* style italique */
    font-size: 1.1em; /* taille de la police */
}

#menu-navigation {
    background-color: blueviolet; /* couleur de fond */
    padding: 10px 0; /* espacement interne */
}

#menu-navigation ul {
    text-align: center; /* centré le texte */
}

#menu-navigation li {
    display: inline;/* afficher les éléments en ligne */
    margin: 0 15px;/* espacement entre les éléments */
}

#menu-navigation a {
    color: white;/* couleur du texte */
    text-decoration: none;/* supprimer le soulignement */
    font-weight: bold;/* écriture en gras */
    padding: 5px 10px; /* espacement interne */
}

#menu-navigation a:hover {
    background-color: blue; /* couleur de fond au survol */
    border-radius: 3px; /* coins arrondis */
}

#contenu-cv {
    display: flex; /* utilisation de Flexbox */
    max-width: 1000px; /* largeur maximale */
    margin: 30px auto; /* centrage horizontal */
    background-color: white; /* couleur de fond blanche */
    box-shadow: 0 0 15px; /* Ajout d'une ombre légère */
}

#barre-profil {
    width: 30%; /* largeur de la barre de profil */
    padding: 20px; /* espacement interne */
    background-color: bisque; /* couleur de fond */
}

#barre-profil h3 {
    border-bottom: 2px solid indigo; /* ligne en dessous du titre */
}

#barre-profil ul {
    list-style: none;/* supprimer les puces */
    padding: 0; /* supprimer la marge */
}


#infos-pro {
    width: 70%; /* largeur de la section infos */
    padding: 20px 30px; /* espacement interne */
}


.titre-section {
    font-size: 1.5em; /* taille de la police */
    color: dimgray;/* couleur du texte */
    border-bottom: 2px solid midnightblue;/* ligne en dessous du titre */
    padding-bottom: 5px;/* espacement en bas */
    margin-top: 30px;/* espacement en haut */
    margin-bottom: 15px;/* espacement en bas */
}

.entree {
    margin-bottom: 20px;/* espacement en bas */
}

.entree h4 {
    font-size: 1.1em;/* taille de la police */
    color: #444;/* couleur du texte */
    margin-bottom: 5px;/* espacement en bas */
}

.entreprise {
    font-style: italic;/* style italique */
    color: #777;/* couleur du texte */
    margin-bottom: 10px;/* espacement en bas */
}

.entree ul {
    padding-left: 20px;/* espacement à gauche */
}

.entree li {
    margin-bottom: 5px;/* espacement en bas */
}

.liste-simple { 
    padding-left: 20px;/* espacement à gauche */
}

#photo-identite {
    width: 150px; /* largeur de l'image */
    height: 150px;/* hauteur de l'image */
    border-radius: 50%; /* image ronde */
    display: block; /* Pour qu'elle prenne sa propre ligne */
    margin: 0 auto 20px auto; /* centré horizontalement avec marge en bas */
    border: 3px solid darkgoldenrod; /* bordure dorée */
    object-fit: cover; /* Remplit bien le cadre */
}





#page-passions {
    font-family: 'Segoe UI'; /* police d'écriture */
    background-color: whitesmoke;/* couleur de fond */
    margin: 0;/* supprimer les marges */
    color: dimgray;/* couleur du texte */
}


#entete-principale {
    background-color: darkslategray;/* couleur de fond */
    color: white;/* couleur du texte */
    padding: 40px;/* espacement interne */
    text-align: center;/* centré le texte */
}


#conteneur-passions {
    display: grid; /* utilisation du CSS Grid (openclassrooms) */
    grid-template-columns: 1fr 1fr; /* deux colonnes de taille égale */
    max-width: 1100px;/* largeur maximale */
    margin: 20px auto;/* centrage horizontal */
    gap: 20px;/* espacement entre les éléments de la grille */
}


.section-passion {
    background: white;/* couleur de fond blanche */
    padding: 20px;/* espacement interne */
    border-radius: 8px;/* coins arrondis */
    box-shadow: 0 4px 6px;/* ombre légère */

    display: flex;/* utilisation de Flexbox (openclassrooms) */
    flex-direction: column;/* disposition en colonne */
    justify-content: space-between;/* espacement entre les éléments */
}

.titre-passion {
    color: dodgerblue;/* couleur du texte */
    border-bottom: 2px solid #3498db;/* ligne en dessous du titre */
    padding-bottom: 5px;/* espacement en bas */
    margin-top: 0;/* supprimer la marge en haut */
}

#liste-voyages {
    padding-left: 20px;/* espacement à gauche */
}

img{
    width: 500px; /* largeur de l'image */
    height: 300px;/* hauteur de l'image */
}
.center {
    width: 350px; /* largeur de l'image */
    height: 350px;/* hauteur de l'image */
    display: block;/* Pour qu'elle prenne sa propre ligne */
    margin: auto;/* centré horizontalement */
}










.Creil {
    margin: 0;/* supprimer les marges */
    font-family: sans-serif;/* police d'écriture sans serif */
    background-color: oldlace; /* couleur de fond */
}


#en-tete-creil{
    background-color: midnightblue; /* couleur de fond */
    color: white;/* couleur du texte */
    text-align: center;/* centré le texte */
    padding: 20px;/* espacement interne */
}


#contenu-principal-creil {
    padding: 20px;/* espacement interne */
    max-width: 800px;/* largeur maximale */
    margin-left: auto;/* centré horizontalement */
    margin-right: auto;/* centré horizontalement */
}


.zone-info {
    background-color: white;/* couleur de fond blanche */
    padding: 20px;/* espacement interne */
    margin-bottom: 30px;/* espacement en bas */
    border-radius: 8px;/* coins arrondis */
    border-left: 5px solid darkred; /* bordure à gauche */
}


#chiffre-clés {
    background-color: lightsteelblue; /* couleur de fond */
    padding: 15px;/* espacement interne */
    margin-bottom: 30px;/* espacement en bas */
    border-radius: 10px;/* coins arrondis */
    text-align: center;/* centré le texte */
}

#chiffre-clés ul {
    list-style-type: none;/* supprimer les puces */
    padding: 0;/* supprimer la marge */
}


.image-ville {
    width: 100%; /* largeur de l'image */
    margin-top: 15px;/* espacement en haut */
    border: 2px solid gray; /* bordure grise */
    object-fit: cover; /* c'est pour remplir le cadre */
}

.audio {
    width: 100%;/* largeur de l'audio */
}

.Vidéo {
    height: 310px;/* hauteur de la vidéo */
    display: block;/* Pour qu'elle prenne sa propre ligne */
    margin: 0 auto;/* centré horizontalement */
}
.présentation {
    margin: 0;/* supprimer les marges */
    width: 100vw;/* largeur de la fenêtre */
    height: 100vh;/* hauteur de la fenêtre */
}

.conteneur-videos {
    display: flex; /* Active l'alignement côte à côte */
    justify-content: space-between; /* Espace entre les deux vidéos */
    margin-bottom: 30px; /* Espacement en bas */
}

.conteneur-videos video, 
.conteneur-videos iframe {
    width: 48%; /* Chaque vidéo prend un peu moins de la moitié de la largeur */
    height: 220px; /* Hauteur fixe pour qu'elles soient égales */
}