body{
  background-image: url("../images/fond.jpg");
  background-attachment: fixed;
  background-size: cover
}

@font-face{
  font-family: "bricolage";
  src: url("font/bricolage.woff2") format("woff2 supports variations"),
    url("font/bricolage.woff2") format("woff2-variations");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Oswald";
  src: url("font/oswald/Oswald-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

.oswald {
  font-variation-settings: "wght" var(--oswald-wght);
}

.bricolage {
  font-variation-settings: "wght" var(--bricolage-wght), "wdth" var(--bricolage-wdth), "opsz" var(--bricolage-opsz);
}


.grille {
    margin: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 50px;
    background-color: rgb(215, 138, 82);
}

.Livres {
  margin-bottom: 100px;
}

h1{
    margin: 50px;
    text-align: right;
    font-family: "bricolage";
    font-size: 100px;
    color: rgb(0, 0, 0);
    padding-top: 40px;
    padding-bottom: 40px;

}

h2{
    margin: 50px;
    font-family: "oswald";
    font-size: 40px;
    font-weight: 400;

}


.groupe{
  background-color: rgb(210, 181, 140);
  margin: 5%;
  padding-bottom: 30px;
}

a{
  text-decoration: none;
  color: rgb(215, 46, 17);
  text-align: end;
}

.textimage {
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 20px;
    font-family: "oswald"; 
}

.textimage figure {
    aspect-ratio: 3/4;
    margin: 0;
}

.textimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;  
}

figure{
 height: 100%;
background: white;
  transition: all .5s;
  overflow: hidden;
}

figure:hover img {
  filter: sepia();
  transform: scale(1.1);
}

img {
    width: 100%;
    height: 100%;
  object-fit: cover;
  flex: 1;
  filter: grayscale(0);
  mix-blend-mode: multiply;
  transition: all .5s;
}