/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ------------------------------
   RÉGLAGES GLOBAUX DU SITE
   ------------------------------ */
body {
  margin: 0;/* marge extérieure du body */
  padding: 0;          /* enlève tout l’espace intérieur du body */
  background-color: #E10657;  /* couleur de fond principale (rose vif) */
  color: #fff;         /* couleur du texte par défaut (blanc) */
  font-family: 'Quicksand', sans-serif; /* police par défaut */
  line-height: 1.5;    /* hauteur des lignes (lisibilité) */
}

/* Contenu principal */
.content {
  width: 80%;              /* largeur max de la zone de texte */
  margin: 0 auto;          /* centre la zone horizontalement */
  text-align: center;      /* centre les titres, images, listes */
}

/* Paragraphes dans le contenu */
.content p {
  text-align: justify;     /* texte justifié */
}

/* Listes à gauche pour plus de lisibilité */
.content ul {
  text-align: left;        /* aligne les listes à gauche */
  display: inline-block;   /* permet de rester centré globalement */
  margin: 0 auto;          /* centre le bloc de liste */
}

/* ------------------------------
   TITRES (H1, H2, H3)
   ------------------------------ */
h1, h2, h3 {
  font-family: 'Great Vibes', cursive; /* police calligraphiée */
  margin-top: 20px; /* espace au-dessus des titres */
}

/* ------------------------------
   LOGO
   ------------------------------ */
.logo {
  display: block;                /* affiche le logo comme un bloc */
  margin: 10px auto 20px auto;   /* marge : 10px haut, auto gauche/droite (centré), 20px bas */
  width: 25%;                    /* le logo occupe 25% de la largeur de la page */
  cursor: pointer;               /* curseur en main quand on passe dessus */
}

/* ------------------------------
   LIENS HYPERTEXTE
   ------------------------------ */
a {
  color: #FFD700;          /* couleur or pour les liens */
  text-decoration: none;   /* pas de soulignement */
}

a:hover {
  text-decoration: underline; /* souligné quand la souris passe dessus */
}

/* ------------------------------
   MENU DE NAVIGATION
   ------------------------------ */
.menu {
  background-color: #fff;       /* fond blanc */
  padding: 10px 0;              /* espace intérieur (haut/bas 10px, gauche/droite 0) */
  text-align: center;           /* centre le texte */
  margin: 0 auto 30px auto;     /* centré horizontalement + 30px sous le menu */
  border-radius: 20px;          /* coins arrondis */
  width: 90%;                   /* largeur du menu (90% de la page) */
}

/* liste interne du menu */
.menu ul {
  list-style: none;  /* enlève les puces */
  padding: 0;        /* enlève l’espace intérieur */
  margin: 0;         /* enlève l’espace extérieur */
}

/* chaque élément du menu */
.menu li {
  display: inline-block; /* les met côte à côte (horizontaux) */
  margin: 0 20px;        /* espace de 20px entre chaque bouton */
}

/* style des liens dans le menu */
.menu a {
  text-decoration: none;                  /* pas de soulignement */
  color: #E10657;                         /* texte rose */
  font-family: 'Quicksand', sans-serif;   /* police moderne */
  font-weight: bold;                      /* texte en gras */
  font-size: 18px;                        /* taille des liens */
}

/* effet quand la souris passe sur un lien du menu */
.menu a:hover {
  color: #FFD700; /* devient doré */
}