/* STYLE GLOBAL DU SITE */
body {
  font-family: 'Segoe UI';   /* Police principale du site */
  background-color: #A7D4FA; /* Couleur de fond générale */
  margin: 0;                /* Supprime les marges par défaut du navigateur */
}




/* BARRE DE NAVIGATION */
header nav {
  background-color: #0078d7; /* Couleur de fond de la barre */
  color: white;              /* Couleur du texte */
  display: flex;             /* Mise en page flexible */
  justify-content: space-between; /* Titre à gauche, liens à droite */
  align-items: center;       /* Centrage vertical */
  padding: 10px 20px;        /* Espacement intérieur */
  margin-bottom: 30px;       /* Espace sous la barre de navigation */
}

/* Titre du site dans la navigation */
header nav h1 {
  font-size: 1.5rem; /* Taille du titre */
  font-weight: bold; /* Texte en gras */
  margin: 0;         /* Supprime la marge par défaut du h1 */
}

/* Liste des liens de navigation  */
header nav ul {
  list-style: none; /* Supprime les puces */
  display: flex;    /* Affiche les liens sur une ligne */
  gap: 20px;        /* Espace entre les liens */
  padding: 0;       /* Supprime le padding par défaut */
  margin: 0;        /* Supprime la marge par défaut */
}

/* Liens du menu */
header nav ul a {
  color: white;          /* Couleur du texte */
  text-decoration: none; /* Supprime le soulignement */
  font-weight: bold;     /* Texte en gras */
}

/* Effet au survol */
header nav ul a:hover {
  text-decoration: underline; /* Souligne au survol */
}







/* PAGE CV */
.mainCV {
  padding-left: 20px;  /* Décalage à gauche */
  text-align: center;  /* Centre le texte de l’en-tête */
}

/* Photo de profil */
.profilephoto {
  width: 120px;        /* Largeur de l’image */
  height: 120px;       /* Hauteur de l’image */
  border-radius: 50%;  /* Rend l’image ronde */
  object-fit: cover;   /* Garde les proportions */
  margin-bottom: 10px; /* Espace sous la photo */
}

/* En-tête du CV */
.cv-header {
  margin-bottom: 30px; /* Espace sous l’en-tête */
}

/* Texte de présentation */
.profil {
  text-align: left;    /* Texte aligné à gauche */
  padding-left: 20px;  /* Petit décalage à gauche */
}

/* Titres des sections du CV */
.h2CV {
  color: #0078d7;    /* Couleur bleue */
  margin-top: 20px; /* Espace au-dessus */
  margin-bottom: 10px; /* Espace en dessous */
  text-align: left; /* Alignement à gauche */
}

/* Listes du CV */
.ulCV {
  padding-left: 40px; /* Décalage des listes */
  text-align: left;   /* Texte aligné à gauche */
}

.gras {
  font-weight: bold; /* texte en gras */
}







/* PAGE LIVRE / FILM */
#book_film {
  margin-left: 37px;  /* Marge gauche */
  margin-right: 37px; /* Marge droite */
}

/* Titre principal de la page */
#titre_book_film {
  margin-top: 0px;       /* Supprime la marge du haut */
  padding-bottom: 10px; /* Espace sous le titre */
  font-size: 28px;      /* Taille du texte */
}

/* Images des livres/films */
.photo {
  height: 300px;      /* Hauteur de l’image */
  width: 500px;       /* Largeur de l’image */
  margin: 30px;       /* Marge autour */
  margin-left: 85px; /* Décalage supplémentaire à gauche */
  margin-top: 0px; /* Réduit l'écart des images avec le titre */
}

/* Texte descriptif */
#book_film_text {
  text-align: left; /* Texte aligné à gauche */
}








/* PAGE HOBBIE */


video {
  width: 700px;   /* largeur */
  height: auto;   /* garde les proportions */
  margin-left: 320px; /* Espace a gauche */
  margin-top: 20px; /* Espace en haut */
}










/* PAGE INDEX (ACCUEIL)*/
.indexbody {
  font-family: Arial, sans-serif; /* Police */
  background-color: #22404F;      /* Couleur arrière plan */
  margin: 0;                      /* Supprime les marges */
  text-align: center;             /* Texte centré */
}

/* Contenu principal */
.mainindex {
  padding: 40px; /* Espacement intérieur */
}

/* Titre principal */
.indexH1 {
  color: #62B4F5; /* Couleur bleu claire */
}

/* Paragraphe de l’index */
#pindex {
  color: #62B4F5; /* MEme couleur que le titre */
}

/* Liste de navigation */
nav ul {
  list-style: none; /* Supprime les puces */
  padding: 0;       /* Supprime le padding */
  margin-top: 30px; /* Espace au-dessus */
}

/* Éléments de la liste */
nav li {
  margin: 10px ; /* Espacement vertical */
}

/* Liens */
nav a {
  text-decoration: none; /* Pas de soulignement */
  font-size: 1.1rem;     /* Taille du texte */
  color: #0078d7;        /* Couleur bleu */
  font-weight: bold;     /* Texte en gras */
}

/* Effet au survol du lien */
nav a:hover {
  text-decoration: underline; /* Soulignement au survol du lien */
}








/* PAGE AUDIO/CITY */
.city_audio {
  margin: 40px; /* espacement */
}

.italique {
  font-style: italic; /* texte en italique */
}








/* PAGE VIDEO IUT */
iframe {
  display: block;          /* Permet le centrage */
  margin: 40px auto;       /* Centre horizontalement */
  border-radius: 8px;      /* Coins arrondis */
}

.titre_video {
  text-align: center;      /* Centre le titre */
  margin-top: 40px;        /* Espace au-dessus */
  font-size: 2rem;         /* Taille du texte */
  font-weight: bold;       /* Texte en gras */
  color: #0078d7;          /* Couleur bleue */
  text-decoration: underline; /* Soulignement */
}








/* Style général du footer */
footer {
    text-align: center;          /* Centre le texte horizontalement */
    color: white;                /* Couleur du texte en blanc */
    padding: 15px;               /* Espace intérieur autour du contenu */
    background-color: #212121;   /* Couleur de fond sombre */
    font-family: Arial, sans-serif; /* Police utilisée */
    font-size: 14px;             /* Taille du texte */
}

/* Style des liens à l'intérieur du footer */
footer a {
    color: #333;                 /* Couleur des liens */
    text-decoration: none;       /* Supprime le soulignement par défaut */
}

/* Style des liens au survol de la souris */
footer a:hover {
    text-decoration: underline;  /* Ajoute un soulignement au survol */
}