body {                                              /* police, couleurs du site et petit espace en haut */
  font-family: Trebuchet MS, sans-serif; 
  color: #e4e6eb;
  background-color: #000814;
  padding: 20px 0 0 0;                              /* espace en haut de la page */
}



.Onglets a {
  font-size: 30px;                                  /* taille du texte dans les onglets */
  display:flex;                                     /* met les mini-onglets en mode flex */
  justify-content: center;                          /* centre le texte dans chaque onglet */
  padding: 8px 16px;                                /*crée un espace entre la bordure et l'extérieur*/
  margin-right: 20px;                               /* Même chose mais entre la bordure et l'intérieur*/
  background-color: #ffd60a;                  
  text-decoration: none;                            /*enlève le surlignage automatique sur les hyperliens*/
  color: #003566;
  font-weight: 500;
  border-radius: 20px;              
  border: 2px solid #001d3d;      
  transition: background 0.2s, color 0.2s, transform 0.1s;   /* petit effet de transition avec la couleur d'arrière plan qui se transforme sous nos yeux */
}

h1 {                                                /* gros titre de la page au centre*/
  font-size: 2rem;
  color: #ffc300;
  margin-bottom: 16px;
  text-align: center;
}

h2 {                                                /* sous-titre d’intro avec une ligne en bas*/
  font-size: 1.4rem;
  color: #ffd60a;
  border-bottom: 2px solid #003566;
  padding-bottom: 4px;
  margin: 24px 0 12px;
}

p {                                                 /* style de base pour les paragraphes */
  margin-bottom: 12px;
  color: #e4e6eb;
}

video, audio, iframe {                              /* centre les vidéos et audios et les arrondit un peu */
  display: block;
  max-width: 720px;
  margin: 0 auto 16px;
  border-radius: 10px;
}

iframe {                                            /* taille fixe pour les vidéos de type youtube */
  width: 720px; 
  height: 405px;
}




/* Menu du haut */

.Onglets a:hover {                                  /* effet quand on passe la souris sur un onglet qui fait monter les onglets et leur change de couleur */
  background-color: #ffc300;       
  color: #121212;                  
  transform: translateY(-2px);     
}

.Onglets {                                          /* aligne les onglets au centre avec des espacements à gauche et à droite*/
   display:flex;
   justify-content: center;
   text-align: center;
   padding: 0 80px 0 80px;
}



/* Partie livres (books.html) */

.Livres {                                           /* empile les livres/films verticalement */
  display: flex;
  flex-direction: column;
}

.Livres .livre {                                    /* chaque livre/film sur une ligne : image + texte */
  display: flex;
  margin-bottom: 32px;                              /* espace entre deux livres */
}



.Livres .livre img {                                /* image du livre à gauche, largeur 150px */
  max-width: 150px;
  height: auto;
  display: block;
  margin-right: 16px;                               /* espace entre l’image et le texte */
}

/* Encadré texte à droite */
.Livres .livre-texte {                              /* bloc jaune pour la description du livre */
  background-color: #ffc300;
  border: 1px solid #003566;
  padding: 12px 16px;
  border-radius: 4px;
}

/* Titre dans l'encadré */
.Livres .livre-texte h3 {                           /* titre du livre dans le bloc */
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: bold;
  color: #001d3d;
}

.Livres .livre-texte p {                            /* texte du livre en bleu foncé */
    color: #003566;
}


/* Partie town.html */

.image-cadre {                                      /* cadre autour des images de la ville */
  background-color: #001d3d;
  border: 4px solid #ffc300;
  border-radius: 20px;                              /* coins arrondis */
  padding: 30px;
  margin: 30px auto;
  max-width: 486px;                                 /* largeur max du cadre */
  text-align: center;
}

/* Titre au-dessus de l'image */
.image-cadre h3 {                                   /* titre dans le cadre */
  margin: 0 0 25px 0;                               /* espace sous le titre */
  font-size: 24px;
  font-weight: 900;
  color: #ffc300;
}

/* Image dans le cadre */
.image-cadre img {                                  /* image qui s’adapte au cadre */
  max-width: 100%;                                  /* ne dépasse pas le cadre */
  height: auto;                                     /* garde les proportions en s'adaptant à la largeur*/
  border-radius: 15px;
  display: block;
}