*{
    box-sizing: border-box;


}
body {
    font-family: 'Nova Cut';
    font-weight: 400;
  }
  
  h1, h2, h3, h4, h5 {
    font-family: 'Nova Cut';
    font-weight: 700;
  }
  
  html {font-size: 100%;} /* 16px */
  
  h1 {font-size: 4.210rem; /* 67.36px */}
  
  h2 {font-size: 3.158rem; /* 50.56px */}
  
  h3 {font-size: 2.369rem; /* 37.92px */}
  
  h4 {font-size: 1.777rem; /* 28.48px */}
  
  h5 {font-size: 1.333rem; /* 21.28px */}
  
  small {font-size: 0.750rem; /* 12px */}


html,body{
    margin: 0;
    padding: 0;

}

.grid-container{
    grid-template-columns: 2FR 2FR;
    display: grid;
    grid-template-areas: 
    "header header"
    "nav nav"
    "aside section"
    "footer footer";

}
.grid-container2{
    grid-template-columns: 1fr 1fr 1fr 1fr;
    display: grid;
    grid-template-areas: 
    "header header header header "
    "nav nav nav nav "
    "section section section section "
    "footer footer footer footer ";
}
.grid-contact{
    display: grid;
    grid-template-columns: auto;
    column-gap: 10px;
    row-gap: 10px;
}

.header{
    display: flex;
    justify-content: center;
    grid-area: header;
    background-image: url("../../Paul iglesias/photo-1503262028195-93c528f03218.jpg");
    background-size: 35%;
    background-position: center;
    text-align: center;
    font-size: large;
    padding: 20px;
}
.encadre {
    border: 2px solid black;
    padding: 10px;
    display: inline-block;
    background-color: blueviolet;
}

.nav{
    grid-area: nav;
    background-color: aqua;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.nav nav{
    display: flex;
    grid-area: nav;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding:0%;
}

.nav a{
    text-decoration: none;
    color: rgb(243, 37, 157);
    padding: 20px 80px;
    font-size: xx-large;

}
.nav a:hover {
    background-color: burlywood;/*pour mettre en evidence le bouton*/
}

.aside{
    grid-area: aside;
    background-color: darkgoldenrod;
    text-align: center;/*centre le mot dans sa box*/
    justify-content: center;/*centre horizontalement*/
    align-items: center;/*centre verticalement*/

}

.section{
    grid-area: section;
    background-color: rgb(20, 129, 20);
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;

}
.section section {
    margin: 0%;
}

.footer {
    grid-area: footer;
    background-color: rgb(125, 20, 196);
    height: 10vh;
    background-color: aqua;
    display: flex;

}

@media screen and (max-width: 500px)
{
    .grid-container{
        display: grid;
        grid-template-areas: 
        "header"
        "nav"
        "aside"
        "section"
        "footer";
        grid-template-columns: auto;
        grid-template-rows: 0.5FR 0.5FR 6FR 0.5FR 2fr;
    }

    .nav nav{
        flex-direction: column;
    }


    
} 
.image-responsive {
    width: 100%; 
    height: auto; 
  }
  .galerie {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    grid-template-rows: repeat(2, 2fr);
    height: 100vw;
    width: 100vw;
    gap: 0;

}

.produit {
    position: relative;
    overflow: hidden;
    background-color: #f4f4f4;
    height: auto;
    width: 100%; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

.produit img {
    width: 100%;
    height: auto;
    display: block; 
    border-radius: 8px;
}

.prix {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%); 
    background-color: rgba(0, 0, 0, 0.7); 
    color: white; 
    font-size: 100px;
    padding: 10px;
    height: 150px;
    width: 300px;
    text-align: center;


}