@font-face {
  font-family: Montserrat;
  src: url(../font/Montserrat-VariableFont_wght.ttf);
}

@font-face {
  font-family: BebasNeue;
  src: url(../font/BebasNeue-Regular.ttf);
}

@font-face {
  font-family: Yanone;
  src: url(../font/YanoneKaffeesatz-VariableFont_wght.ttf)
}

:root {
  --primary-color: rgb(73, 125, 0);
  --header-color: rgb(73, 125, 0, 0.5);
  --header-gradiant: linear-gradient(
    180deg,
    rgba(95, 133, 1, 1) 1%,
    rgba(125, 156, 48, 1) 52%,
    rgba(172, 189, 128, 1) 100%
  );

  --bp-over-color: rgb(247, 254, 231);
  --bg-carte: rgb(192, 197, 204, 0.2);
  --bd-color: #f1f1f1;
  --bd-image : 5px solid var(--bd-color);

  /* variable font carte */
  --Bebas: "BebasNeue", sans-serif;
  --Montserrat: "Montserrat", sans-serif;
  --Yanone : "Yanone", sans-serif;

  /* Shadow box carte */
  --sh-box: 0 2px 20px -5px rgba(0,0,0,0.5);
  --shadow-box: 1px 1px 25px rgb(0, 0, 0, 0.07);
  --sh-carte: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.nouveautes{ 
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: auto;
 grid-column-gap: 0px;
 grid-row-gap: 0px;
 justify-content : space-between;
 align-items: center; 
 }

.carte-gauche{
  grid-area: 1 / 1 / 2 / 2;	
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Carte lecture en cours */
.New-lecture-container{
  position: relative;
  /*adaptation à x3Gallery */
  rotate: -2deg;
  transform: translateY(10px);
  transition: 0.3s;
}

.ribbon {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #bfdc7a;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#bfdc7a),
    to(#8ebf45)
  );
  background-image: -webkit-linear-gradient(top, #bfdc7a, #8ebf45);
  background-image: -moz-linear-gradient(top, #bfdc7a, #8ebf45);
  background-image: -ms-linear-gradient(top, #bfdc7a, #8ebf45);
  background-image: -o-linear-gradient(top, #bfdc7a, #8ebf45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}

.New-lecture{
  background: url(../images/liseuse495x700.png);
  background-size: cover;
  width:380px;
  height: 540px;
  padding: 30px 30px 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#cover-book img{
  width: 230px; /* modif taille à 230 au lieu de 250px pour x3 Gallery */
  border: var(--bd-image);
  box-shadow: var(--sh-box);
  margin-top: 10px;
}

#date{
  font-family: var(--Yanone);
  font-size: 24px;
  margin-top: 5px;
}

.bp-voir{
  margin-top: auto;
  width: 250px;
  display: flex;
  justify-content: center;
  background: #dedede;
  border-radius: 5px;
  padding: 3px;
  color: var(--primary-color);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none !important;
}

.bp-voir:hover{
  border: 1px solid var(--primary-color);
  background: var(--bp-over-color);
  transition: 0.5s;
}

/* fin carte lecture en cours */


/* partie carte billet ------------------------------------------- */

.billet-container{
  display: flex;
  justify-content: center;
}

.carte-droite{
	grid-area: 1 / 2 / 2 / 3;
	display: flex;
	justify-content: center;
	align-items: center;
}

.carte-billet-container{
   width: 400px;
  height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  border: 0.125rem solid var(--primary-color);
  border-radius: 15px;
  background: url(../images/fond.jpg);
  box-shadow: var(--sh-box);
  position: relative;
  /*top: 40%;
  left: 50%;*/
  rotate: 2deg;
  transition: 0.3s;
}
  
.img-billet{
  display: flex;
  padding: 20px 0 5px ;
}

.img-billet img{
  margin: 0 auto;
  width: 95%;
  border: 10px solid rgb(103, 103, 103);
}

.description-billet{
  width: 90%;
  height: 35px;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 15px auto;
}

.ref-billet{
  font-family: var(--Yanone);
  font-variant: small-caps;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--primary-color);
}

.url-billet{
  display: block;
  background: #dedede;
  width: 100%;
  /* margin: 20px auto; */
  margin-top: auto;
  padding: 3px 0;
  font-size: 15px;
  text-transform: uppercase;
  text-decoration: none !important;
  font-weight: 600;
  color: var(--primary-color);
  border-radius: 5px;
  box-shadow: var(--sh-carte);
  transition: 0.300s;
}

.url-billet:hover{
  background: var(--bp-over-color);
  transition: 0.300s;
  border: 1px solid var(--primary-color);
}

/* media queries */
@media (max-width: 840px){
  .nouveautes{
	display: flex;
	flex-direction : column;
	justify-content: space-between;
  }
  
  .New-lecture-container{
    rotate: none;
	transform: translateY(0);
	transition: 0.3s;
   }

  .carte-billet-container{
	margin-top: 20px;
	rotate: none;
	transition: 0.3s;
  }  
  
}