body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}
/*Commentaire : ici, on importe la police "Macondo" et on définit ses critères. Police importée de Google Fonts*/
.macondo-regular {
  font-family: "Macondo", cursive;
  font-weight: 400;
  font-style: normal;
}
/*Commentaire : ici, on importe la police "Kaushan" et on définit ses critères. Police importée de Google Fonts*/
.kaushan-script-regular {
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-style: normal;
}
/*Commentaire : ici, on importe la police "Aldrich" et on définit ses critères. Police importée de Google Fonts*/
.aldrich-regular {
  font-family: "Aldrich", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/*Commentaire : ici, on définit la couleur du titre h1, sa police et la couleur du fond du titre, dégradé obtenu à l'aide du site CSS Gradient*/
h1 {
    color: white;
    font-family: 'Brush Script MT', cursive;
    text-align: center;
  background: #ff0000;
background: linear-gradient(0deg,rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 12%, rgba(255, 0, 0, 1) 25%, rgba(255, 0, 0, 1) 38%, rgba(0, 0, 255, 1) 50%, rgba(0, 0, 255, 1) 63%, rgba(0, 0, 255, 1) 75%, rgba(255, 255, 255, 1) 87%, rgba(255, 255, 255, 1) 100%);
    font-size: 100px;
    margin: 0;
    padding: 20px 0;
}
/*Commentaire : ici, on définit la disposition des images en galerie/grille, et on met le cadre*/
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 10000px;
    margin: 0 auto;
}
/*Commentaire : ici, on définit le cadre, sa couleur, sa taille, sa distance avec l'image, sa couleur, et la rondeur de ses angles*/
.galerie figure {
    margin: 0;
    padding: 10px;
    background: lightskyblue;
  border-radius: 15px;
}
/*Commentaire : ici, on définit l'image, sa taille, l'arrondi de ses angles, et le temps qu'il faut pour que cette dernière grossisse quand on passe la souris dessus*/
.galerie img {
    width: 100%;
    height: auto;
   border-radius: 15px;
    transition: transform 0.3s ease;
}
/*Commentaire : ici, on définit simplement la taille du grossissement de l'image en passant la souris dessus (ici, 1.02 fois plus grand que l'image.*/
.galerie img:hover {
    transform: scale(1.02);
}
/*Commentaire : ici, on définit la couleur du titre h2 & sa police ainsi que sa taille*/
h2 {
    font-family: Courier New;
    text-align: center;
    font-size: 40px;
    color: #333;
}
/*Commentaire : ici, on définit la police des légendes des images*/
figcaption {
    font-family:Macondo ;
    text-align: center;
}
/*Commentaire : ici, on définit la couleur et la taille des titres de liste*/
li a {
   font-size: 18px;
color: darkred;
}
/*Commentaire : on décrit comment doit se présenter le texte dans la section climat*/
#climat {
    text-align: center;
    padding: 30px;
  font-family: Comic Sans MS;
}
/*Commentaire : on donne ici toutes les caractéristiques du bouton "meteo-btn" que l'on a nommé dans le code HTML. On lui donne sa taille, sa couleur, la rondeur de ses angles, en bre, ses propriétés*/
.meteo-btn {
    padding: 10px 20px;
   background: #2A7B9B;
background: radial-gradient(circle, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
  color : white;
    border-radius: 90px;
  }
/*Commentaire : On définit la police et l'alignement de texte de "p" et "h3"*/
p {
  font-family: Aldrich;
  text-align: center;
}
h3 {
  font-family: Times New Roman;
  text-align: center;
}
/*Commentaire : on modifie la taille et l'emplacement de l'audio (ici, on le met au centre*/
audio {
  display: block;
  margin: 0 auto;
 width: 1000px;  
}
/*Commentaire : on définit la présentation de la section plats, la disposition en grille, et l'écart de 20px entre chaque présentation*/
.plats {
    display: grid;
    gap: 20px;
}

/*Commentaire : On finit par définir les propriétés du bandeau, sa couleur, l'arrondi de ses angles, et sa police */
footer {
    background: skyblue;
    text-align: center;
  border-radius: 75px;
  font-family: Macondo;
}