img {
    max-width: 100%; 
    height: auto;    
  
}
/* j'utilise images fluides pour que mes images restent dans les bonnes proportions*/
body {
    background-color: rgb(152, 251, 152);
}
/*J'ai mis back ground color en vert*/

p { 
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    overflow: auto;
} 
/* J'ai mis times new roman comme police et une taille standard, overflow si jamais le texte dépasse  */

#titre1 {
    color: blue;
    text-align: center;
    font-family: Times, sans-serif;
}
/* j'ai changé le style principal de mon titre principal) */

.titre2 {
    color :#0047AB;
    font-family: Times, sans-serif;
}
/* class pour mes sous-titres*/

.barre {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f3f3f3;
  border-bottom: 1px solid #e7e7e7;
  overflow: hidden;  /* barre de navigation comme dans les notes de cours*/
  position : static;
  z-index: 100
}

.barre li {
  /* pour qu'ils soient à coté les uns les autres*/
  float: left;
}

.barre li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: Times, sans-serif;
}


.container {
display: grid;
grid-template-columns: auto auto auto;  /* j'ai cherché sur internet, mais je ne comprend pas pourquoi il y a un triangle jaune à coté, je me suis fié à W3 Schools, comme je voyais dans mon autre cours de programmation https://www.w3schools.com/cssref/pr_grid-template-columns.php*/
background-color: dodgerblue;
padding: 10px;
text-align: center;
}
.container div {
background-color: #f1f1f1;
border: 1px solid black;
padding: 10px;
font-size: 30px;
text-align: center;
}
/* C'est pour faire mes grilles dans la section galerie*/

.container img {
    width: 100%;      /* je veux que les images prennent toute la largeur */
    height: 200px;    /* j'ai mis une hauteur pour mes images de ma galerie */
}

/* C'est ce bloc qui "emprisonne" l'étiquette */
.item-photo {
    position: relative; /* j'ai défini ma position relative */
    display: inline-block; 
}

.etiquette-rabais {
    position: absolute; /* position absolue par rapport à ma relative pour que mon étiquette fonctionne */
    top: 10px;
    right: 10px;
    background-color: red;
    color: white;
    padding: 5px;
}
/* C'est pour mettre un rabais sur la photo brésil (je cherchais une façon d'utiliser les positions)*/

.tableau {
    width: 100%; 
    border-collapse: collapse;
    border: 1px solid black;
    overflow-x: auto;
}