/* Style général */
body {
    font-family: Arial, sans-serif; /* Définit la police de caractères pour toute la page */
    margin: 0; /* Supprime les marges par défaut du navigateur */
    padding: 20px; /* Ajoute un espace intérieur de 20px autour du contenu */
    background-color: #f5f5f5; /* Définit un arrière-plan gris très clair */
    color: #333; /* Définit la couleur du texte en gris foncé */
}

/* Navigation */
nav {
    background-color: #333; /* Arrière-plan gris foncé pour la barre de navigation */
    padding: 15px; /* Espace intérieur de 15px autour du contenu du nav */
    margin-bottom: 30px; /* Espace de 30px en dessous de la navigation */
}

nav a {
    color: white; /* Couleur blanche pour les liens de navigation */
    text-decoration: none; /* Supprime le soulignement des liens */
    margin-right: 20px; /* Espace de 20px à droite de chaque lien */
    padding: 10px; /* Espace intérieur de 10px autour du texte du lien */
}

nav a:hover {
    background-color: #555; /* Change l'arrière-plan en gris moyen au survol de la souris */
}

/* Titres */
h1 {
    color: #2c3e50; /* Couleur bleu-gris foncé pour les titres de niveau 1 */
    border-bottom: 3px solid #3498db; /* Bordure inférieure bleue de 3px d'épaisseur */
    padding-bottom: 10px; /* Espace de 10px entre le texte et la bordure inférieure */
}

h2 {
    color: #34495e; /* Couleur gris-bleu pour les titres de niveau 2 */
}

h3 {
    color: #7f8c8d; /* Couleur gris moyen pour les titres de niveau 3 */
}

/* Paragraphes */
p {
    line-height: 1.6; /* Hauteur de ligne 1,6 fois la taille de la police pour améliorer la lisibilité */
    margin: 15px 0; /* Marge de 15px en haut et en bas des paragraphes */
}

/* Listes */
ul {
    line-height: 1.8; /* Hauteur de ligne 1,8 fois la taille de la police pour les listes */
}

li {
    margin: 10px 0; /* Marge de 10px en haut et en bas de chaque élément de liste */
}

/* Liens */
a {
    color: #3498db; /* Couleur bleue pour tous les liens (hors navigation) */
}

a:hover {
    color: #2980b9; /* Change la couleur en bleu plus foncé au survol de la souris */
}

/* Lignes horizontales */
hr {
    border: none; /* Supprime la bordure par défaut */
    border-top: 2px solid #ddd; /* Crée une ligne grise claire de 2px en haut */
    margin: 30px 0; /* Marge de 30px en haut et en bas de la ligne */
}

/* Footer */
footer {
    margin-top: 50px; /* Marge de 50px au-dessus du pied de page */
    padding-top: 20px; /* Espace intérieur de 20px au-dessus du contenu du footer */
    border-top: 2px solid #ddd; /* Bordure supérieure grise claire de 2px */
    text-align: center; /* Centre le texte du footer */
    color: #7f8c8d; /* Couleur grise moyenne pour le texte du footer */
}

/* Style pour le texte en gras */
strong {
    color: #2c3e50; /* Couleur bleu-gris foncé pour le texte en gras */
}

/* Photo de profil du CV */
img {
    margin: 0 0 20px 0; /* Pas de marge à gauche/droite/haut, 20px en bas */
    border: 3px solid #3498db; /* Bordure bleue de 3px autour de l'image */
    display: block; /* Affiche l'image comme un élément de bloc (prend toute la largeur) */
}

/* Tableau pour la mise en page */
table {
    width: 100%; /* Le tableau prend toute la largeur disponible */
    border-collapse: collapse; /* Fusionne les bordures des cellules adjacentes */
}

.colonne-gauche {
    width: 250px; /* Largeur fixe de 250px pour la colonne gauche */
    vertical-align: top; /* Aligne le contenu en haut de la cellule */
    padding-right: 30px; /* Espace de 30px à droite de la colonne */
}

.colonne-droite {
    vertical-align: top; /* Aligne le contenu en haut de la cellule */
}

/* Pour afficher les pages de couverture des livres et les affiches de films au milieu de la page */
.image-centree {
    display: block; /* Affiche l'image comme un élément de bloc */
    margin-left: auto; /* Marge automatique à gauche pour centrer */
    margin-right: auto; /* Marge automatique à droite pour centrer */
    width: 200px; /* Largeur fixe de 200px pour l'image */
    cursor: pointer; /* Change le curseur en main au survol (indique que l'image est cliquable) */
}
audio {
    width: 100%;      /* s’adapte à la largeur de l’écran */
    max-width: 600px; /* limite sur grand écran */
}