body{
  background-color: #0D000D;
}


h1{
  font-size: 70px;
  font-family: ArialBlack;
  font-family: sans-serif;
  letter-spacing: 3px;
  font-weight: 550;
  margin-left: 6%;
  color: #E1D9CE
}


h2{
  font-family:Arial;
  font-weight: lighter;
  font-size: 12px;
  margin-left: 90px;
  line-height: 2px;
  margin-top: -3%;
  letter-spacing: 1,5px;
  color: #E1D9CE
}

h3{
  font-size: 12px;
  font-family: ArialBlack;
  font-family: sans-serif;
  font-weight: 500;
  margin-top: -20px;
  margin-left: 376px;

}

.auteur1{
  font-size: 10px;
  font-family:ArialBlack;
  font-family: sans-serif;
  font-weight: bold;
  line-height: 14px;
  margin-left: 4%;

}

.titre1{
  font-family:Arial;
  font-weight: lighter;
  font-size: 10px;
  margin-left: 4%;

}


.tableau{
  margin: 3% 5% 5% 5%;
}

.card {
  margin: 0 auto;
  width: 600px;
  max-width: 100%;
  min-height: 500px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5);
  overflow:hidden;
  background-image:url("IMAGES/fragment1.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}

.info {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: #7A79A4;
  transform: translateY(100%)
    translateY(-88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

.info:before {
  z-index: -1;
  display: block; position: absolute;
  content: ' ';
  width: 100%; height: 100%;
  overflow: hidden;
  background-image:url("IMAGES/fragment1.jpg");
  filter: blur(10px);
  background-size: cover;
  opacity: 0.25;
  transform: translateY(-100%)
    translateY(88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

.title {
  margin: 0;
  padding: 20px;
  font-size: 27px;
  line-height: 3;
  letter-spacing: 2px;
  color: #F24405;
  font-weight: lighter;

}

.description {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 13px;
  line-height: 1.5;
  font-family: Verdana;
  font-family: sans-serif;
  font-weight: lighter;
  column-count: 2;
}


.card:hover .info,
.card:hover .info:before {
  transform: translateY(0) translateZ(0);
}




.card2 {
  margin: 0 auto;
  width: 600px;
  max-width: 100%;
  min-height: 500px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5);
  overflow:hidden;
  background-image:url("IMAGES/fragment2.jpg");
  background-size: 100%;
}

.info2 {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: #7A79A4;
  transform: translateY(100%)
    translateY(-88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

.info2:before {
  z-index: -1;
  display: block; position: absolute;
  content: ' ';
  width: 100%; height: 100%;
  overflow: hidden;
  background-image:url("IMAGES/fragment2.jpg");
  filter: blur(10px);
  background-size: cover;
  opacity: 0.25;
  transform: translateY(-100%)
    translateY(88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

.title2 {
  margin: 0;
  padding: 20px;
  font-size: 27px;
  line-height: 3;
  letter-spacing: 2px;
  color: #F24405;
  font-weight: lighter;
}

.description2 {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 13px;
  line-height: 1.5;
  font-family: Verdana;
  font-family: sans-serif;
  font-weight: lighter;
  column-count: 2;
}



.card2:hover .info2,
.card2:hover .info2:before {
  transform: translateY(0) translateZ(0);
}




.card3 {
  margin: 0 auto;
  width: 600px;
  max-width: 100%;
  min-height: 500px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  background-image:url("IMAGES/fragment3.jpg");
  background-size: 140%;
  background-repeat: no-repeat;
  background-position: center;
}

.info3 {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: #7A79A4;
  transform: translateY(100%)
    translateY(-88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

.info3:before {
  z-index: -1;
  display: block; position: absolute;
  content: ' ';
  width: 100%; height: 100%;
  overflow: hidden;
  background-image:url("IMAGES/fragment3.jpg");
  filter: blur(10px);
  background-size: cover;
  opacity: 0.25;
  transform: translateY(-100%)
    translateY(88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

.title3 {
  margin: 0;
  padding: 20px;
  font-size: 27px;
  line-height: 3;
  letter-spacing: 2px;
  color: #F24405;
  font-weight: normal;

}

.description3 {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 13px;
  line-height: 1.5;
  font-family: Verdana;
  font-family: sans-serif;
  column-count: 1;
}

.card3:hover .info3,
.card3:hover .info3:before {
  transform: translateY(0) translateZ(0);
}


.card4 {
  margin: 0 auto;
  width: 600px;
  max-width: 100%;
  min-height: 500px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  background-image:url("IMAGES/fragment4.jpg");
  background-size: 150%;
  background-repeat: no-repeat;
  background-position: center;
}

.info4 {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: #7A79A4;
  transform: translateY(100%)
    translateY(-88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

.info4:before {
  z-index: -1;
  display: block; position: absolute;
  content: ' ';
  width: 100%; height: 100%;
  overflow: hidden;
  background-image:url("IMAGES/fragment4.jpg");
  filter: blur(10px);
  background-size: cover;
  opacity: 0.25;
  transform: translateY(-100%)
    translateY(88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

.title4 {
  margin: 0;
  padding: 20px;
  font-size: 27px;
  line-height: 3;
  letter-spacing: 2px;
  color: #F24405;
  font-weight: normal;
}

.description4 {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 13px;
  line-height: 1.5;
  font-family: Verdana;
  font-family: sans-serif;
  column-count: 2;
}

.card4:hover .info4,
.card4:hover .info4:before {
  transform: translateY(0) translateZ(0);
}

.card5 {
  margin: 0 auto;
  width: 600px;
  max-width: 100%;
  min-height: 500px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  background-image:url("IMAGES/fragment5.jpg");
  background-size: 135%;
}

.info5 {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: #7A79A4;
  transform: translateY(100%)
    translateY(-88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

.info5:before {
  z-index: -1;
  display: block; position: absolute;
  content: ' ';
  width: 100%; height: 100%;
  overflow: hidden;
  background-image:url("IMAGES/fragment5.jpg");
  filter: blur(10px);
  background-size: cover;
  opacity: 0.25;
  transform: translateY(-100%)
    translateY(88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
}

.title5 {
  margin: 0;
  padding: 20px;
  font-size: 27px;
  line-height: 3;
  letter-spacing: 2px;
  color: #F24405;
  font-weight: normal;
}

.description5 {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 13px;
  line-height: 1.5;
  font-family: Verdana;
  font-family: sans-serif;
  column-count: 2;
}

.card5:hover .info5,
.card5:hover .info5:before {
  transform: translateY(0) translateZ(0);
}







              .tableau2{
              background-color: #0D000D;
              margin: 10% 5% 5% 5%;
              }

              h4{
                font-size: 27px;
                font-family: ArialBlack;
                font-family: sans-serif;
                letter-spacing: 3px;
                font-weight: lighter;
                margin-left: 20px;
                margin-top: 2%;
                color: #7A79A4;

              }


              .auteur2{
                font-size: 10px;
                font-family:ArialBlack;
                font-family: sans-serif;
                font-weight: bold;
                line-height: 14px;
                margin-left: 3%;
                color:#E1D9CE;

              }

              .titre2{
                font-family:Arial;
                font-weight: lighter;
                font-size: 10px;
                margin-left: 3%;
                color:#E1D9CE;

              }

              .orange{
              color:#F24405;
              }

              .description6 {
                margin: 0;
                padding: 0 24px 24px;
                font-size: 13px;
                line-height: 1.5;
                font-family: Verdana;
                font-family: sans-serif;
                font-weight: lighter;
                column-count: 2;
                color: #E1D9CE;
              }

              .montage6 {
                margin: 0 auto;
                width: 600px;
                max-width: 100%;
                min-height: 500px;
                background-image:url("IMAGES/montage1.jpg");
                background-size: 160%;
                background-repeat: no-repeat;
                background-position: center;
                margin-top: -68px;
              }

              .montage7 {
                margin: 0 auto;
                width: 600px;
                max-width: 100%;
                min-height: 500px;
                background-image:url("IMAGES/montage2.jpg");
                background-size: 120%;
                background-repeat: no-repeat;
                background-position: center;
                margin-top: -40px;
              }

              .montage8 {
                margin: 0 auto;
                width: 600px;
                max-width: 100%;
                min-height: 500px;
                background-image:url("IMAGES/montage3.jpg");
                background-size: 120%;
                background-repeat: no-repeat;
                background-position: center;
                margin-top: 50px;
              }

              .montage9 {
                margin: 0 auto;
                width: 600px;
                max-width: 100%;
                min-height: 500px;
                background-image:url("IMAGES/montage4.jpg");
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center;
                margin-top: 50px;
              }

              .montage10 {
                margin: 0 auto;
                width: 600px;
                max-width: 100%;
                min-height: 500px;
                background-image:url("IMAGES/montage5.jpg");
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center;
                margin-top: 50px;
              }



              @media (min-width: 300px) and (max-width: 900px){

                body{
                  background-color: #7A79A4;
                  padding: 1% 1% 1% 1%;
                }
                h1{
                  font-size: 40px;
                  font-family: ArialBlack;
                  font-family: sans-serif;
                  letter-spacing: 3px;
                  font-weight: 550;
                  margin-left: 6%;
                  color: #0D000D
                }
                h2{
                  font-family:Arial;
                  font-weight: lighter;
                  font-size: 9px;
                  margin-left: 34px;
                  margin-top: -5%;
                  letter-spacing: 1,5px;
                  color: #0D000D

                }
                h3{
                  font-size: 9px;
                  font-family: ArialBlack;
                  font-family: sans-serif;
                  font-weight: 500;
                  margin-top: -15px;
                  margin-left: 250px;

                }

                .tableau{
                  border-spacing:collapse;

                }

                .auteur1{
                  font-size: 7px;
                  font-family:ArialBlack;
                  font-family: sans-serif;
                  font-weight: bold;
                  margin-top: -20px;
                  margin-left: 25px;
                  color: #E1D9CE;

                }

                .titre1{
                  font-family:Arial;
                  font-weight: lighter;
                  font-size: 7px;
                  margin-left: 25px;
                  line-height: 1px;
                  color: #E1D9CE;

                }

                .card {
                  margin-left:1px;
                  width: 250px;
                  max-width: 100%;
                  min-height: 250px;
                  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5);
                  overflow: scroll;
                  background-image:url("IMAGES/fragment1.jpg");
                  background-size: 100%;
                  background-repeat: no-repeat;
                }

                .info {
                  position: relative;
                  width: 100%;
                  height: 250px;
                  background-color: #0D000D;
                  transform: translateY(100%)
                    translateY(-100px)
                    translateZ(0);
                  transition: transform 0.3s ease-out;
                }

                .info:before {
                  z-index: -1;
                  display: block; position: absolute;
                  content: ' ';
                  width: 100%; height: 100%;
                  overflow: hidden;
                  background-image:url("IMAGES/fragment1.jpg");
                  filter: blur(10px);
                  background-size: cover;
                  opacity: 0.25;
                  transform: translateY(-100%)
                    translateY(88px)
                    translateZ(0);
                  transition: transform 0.3s ease-out;
                }

                .title {
                  margin-left: 2px;
                  padding: 20px;
                  font-size: 15px;
                  line-height: 1;
                  letter-spacing: 2px;
                  color: #E1D9CE;
                  font-weight: bold;

                }

                .description {
                  margin-left: 1px;
                  padding: 0 24px 24px;
                  font-size: 8px;
                  line-height: 1,5px;
                  font-family: Verdana;
                  font-family: sans-serif;
                  font-weight: lighter;
                  column-count: 1;
                  color: #E1D9CE;
                  margin-top: -8px;
                }


                .card:hover .info,
                .card:hover .info:before {
                  transform: translateY(0) translateZ(0);
                }




                .card2 {
                  margin-left: 2px;
                  width: 250px;
                  max-width: 100%;
                  min-height: 250px;
                  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5);
                  overflow:hidden;
                  background-image:url("IMAGES/fragment2.jpg");
                  background-size: 100%;
                  background-repeat: no-repeat;
                }

                .info2 {
                  position: relative;
                  width: 100%;
                  height: 250px;
                  background-color: #0D000D;
                  transform: translateY(100%)
                    translateY(-88px)
                    translateZ(0);
                  transition: transform 0.3s ease-out;

                }

                .info2:before {
                  z-index: -1;
                  display: block; position: absolute;
                  content: ' ';
                  width: 100%; height: 100%;
                  overflow: hidden;
                  background-image:url("IMAGES/fragment2.jpg");
                  filter: blur(10px);
                  background-size: cover;
                  opacity: 0.25;
                  transform: translateY(-100%)
                    translateY(88px)
                    translateZ(0);
                  transition: transform 0.3s ease-out;

                }

                .title2 {
                  margin-left: 2px;
                  padding: 20px;
                  font-size: 15px;
                  line-height: 1;
                  letter-spacing: 2px;
                  color: #E1D9CE;
                  font-weight: bold;
                }

                .description2 {
                  margin-left: 1px;
                  padding: 0 24px 24px;
                  font-size: 8px;
                  line-height: 1.5;
                  font-family: Verdana;
                  font-family: sans-serif;
                  font-weight: lighter;
                  column-count: 1;
                  color: #E1D9CE;
                  margin-top: -8px;
                }

                .card2:hover .info2,
                .card2:hover .info2:before {
                  transform: translateY(0) translateZ(0);
                }




                .card3 {
                  margin-left: 2px;
                  width: 250px;
                  max-width: 100%;
                  min-height: 250px;
                  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5);
                  overflow: hidden;
                  background-image:url("IMAGES/fragment3.jpg");
                  background-size: 120%;
                  background-repeat: no-repeat;
                  background-position: top;

                }

                .info3 {
                  position: relative;
                  width: 100%;
                  height: 250px;
                  background-color: #0D000D;
                  transform: translateY(100%)
                    translateY(-88px)
                    translateZ(0);
                  transition: transform 0.3s ease-out;
                }

                .info3:before {
                  z-index: -1;
                  display: block; position: absolute;
                  content: ' ';
                  width: 100%; height: 100%;
                  overflow: hidden;
                  background-image:url("IMAGES/fragment3.jpg");
                  filter: blur(10px);
                  background-size: cover;
                  opacity: 0.25;
                  transform: translateY(-100%)
                    translateY(88px)
                    translateZ(0);
                  transition: transform 0.3s ease-out;
                }

                .title3 {
                  margin-left: 2px;
                  padding: 20px;
                  font-size: 15px;
                  line-height: 1;
                  letter-spacing: 2px;
                  color: #E1D9CE;
                  font-weight: bold;
                }

                .description3 {
                  margin-left: 1px;
                  padding: 0 24px 24px;
                  font-size: 8px;
                  line-height: 1.5;
                  font-family: Verdana;
                  font-family: sans-serif;
                  column-count: 1;
                  color: #E1D9CE;
                  margin-top: -8px;
                }

                .card3:hover .info3,
                .card3:hover .info3:before {
                  transform: translateY(0) translateZ(0);
                }


                .card4 {
                  margin-left: 2px;
                  width: 250px;
                  max-width: 100%;
                  min-height: 250px;
                  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5);
                  overflow: hidden;
                  background-image:url("IMAGES/fragment4.jpg");
                  background-size: 150%;
                  background-repeat: no-repeat;
                  background-position: center;
                }

                .info4 {
                  position: relative;
                  width: 100%;
                  height: 250px;
                  background-color: #0D000D;
                  transform: translateY(100%)
                    translateY(-88px)
                    translateZ(0);
                  transition: transform 0.3s ease-out;
                }

                .info4:before {
                  z-index: -1;
                  display: block; position: absolute;
                  content: ' ';
                  width: 100%; height: 100%;
                  overflow: hidden;
                  background-image:url("IMAGES/fragment4.jpg");
                  filter: blur(10px);
                  background-size: cover;
                  opacity: 0.25;
                  transform: translateY(-100%)
                    translateY(88px)
                    translateZ(0);
                  transition: transform 0.3s ease-out;
                }

                .title4 {
                  margin-left: 2px;
                  padding: 20px;
                  font-size: 15px;
                  line-height: 1;
                  letter-spacing: 2px;
                  color: #E1D9CE;
                  font-weight: bold;
                }

                .description4 {
                  margin-left: 1px;
                  padding: 0 24px 24px;
                  font-size: 8px;
                  line-height: 1.5;
                  font-family: Verdana;
                  font-family: sans-serif;
                  column-count: 1;
                  color: #E1D9CE;
                  margin-top: -15px;
                }

                .card4:hover .info4,
                .card4:hover .info4:before {
                  transform: translateY(0) translateZ(0);
                }

                .card5 {
                  margin-left: 2px;
                  width: 250px;
                  max-width: 100%;
                  min-height: 250px;
                  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5);
                  overflow: hidden;
                  background-image:url("IMAGES/fragment5.jpg");
                  background-size: 135%;
                  background-repeat: no-repeat;
                }

                .info5 {
                  position: relative;
                  width: 100%;
                  height: 250px;
                  background-color: #0D000D;
                  transform: translateY(100%)
                    translateY(-88px)
                    translateZ(0);
                  transition: transform 0.3s ease-out;

                }

                .info5:before {
                  z-index: -1;
                  display: block; position: absolute;
                  content: ' ';
                  width: 100%; height: 100%;
                  overflow: hidden;
                  background-image:url("IMAGES/fragment5.jpg");
                  filter: blur(10px);
                  background-size: cover;
                  opacity: 0.25;
                  transform: translateY(-100%)
                    translateY(88px)
                    translateZ(0);
                  transition: transform 0.3s ease-out;
                }

                .title5 {
                  margin-left: 2px;
                  padding: 20px;
                  font-size: 15px;
                  line-height: 1;
                  letter-spacing: 2px;
                  color: #E1D9CE;
                  font-weight: bold;
                }

                .description5 {
                  margin-left: 1px;
                  padding: 0 24px 24px;
                  font-size: 8px;
                  line-height: 1.5;
                  font-family: Verdana;
                  font-family: sans-serif;
                  column-count: 1;
                  color: #E1D9CE;
                  margin-top: -15px;
                }

                .card5:hover .info5,
                .card5:hover .info5:before {
                  transform: translateY(0) translateZ(0);
                }



                .tableau2{
                background-color: #7A79A4;
                border-spacing:collapse;
                }

                h4{
                  font-size: 15px;
                  font-family: ArialBlack;
                  font-family: sans-serif;
                  letter-spacing: 2px;
                  font-weight: lighter;
                  margin-left: 25px;
                  margin-top: 2%;
                  color: #0D000D;
                }


                .auteur2{
                  font-size: 7px;
                  font-family:ArialBlack;
                  font-family: sans-serif;
                  font-weight: bold;
                  margin-top: -20px;
                  margin-left: 25px;
                  color: #0D000D;

                }

                .titre2{
                  font-family:Arial;
                  font-weight: lighter;
                  font-size: 7px;
                  margin-left: 25px;
                  line-height: 1px;
                  color: #0D000D;

                }

                .description6 {
                  margin left: 1px;
                  padding: 0 24px 24px;
                  font-size: 8px;
                  line-height: 1.5;
                  font-family: Verdana;
                  font-family: sans-serif;
                  font-weight: lighter;
                  column-count: 1;
                  color: #0D000D;
                  margin-top: 1px;
                  width: 90%;
                }

                .montage6 {
                  margin-left: 20px;
                  width: 600px;
                  max-width: 100%;
                  min-height: 500px;
                  background-image:url("IMAGES/montage1.jpg");
                  background-size: 200%;
                  background-repeat: no-repeat;
                  background-position: top;
                  margin-top: 1px;
                  width: 90%;
                }

                .montage7 {
                  margin-left: 20px;
                  width: 600px;
                  max-width: 100%;
                  min-height: 500px;
                  background-image:url("IMAGES/montage2.jpg");
                  background-size: 120%;
                  background-repeat: no-repeat;
                  background-position: top;
                  margin-top: 25px;
                  width: 90%;
                }

                .montage8 {
                  margin-left: 20px;
                  width: 600px;
                  max-width: 100%;
                  min-height: 500px;
                  background-image:url("IMAGES/montage3.jpg");
                  background-size: 120%;
                  background-repeat: no-repeat;
                  background-position: top;
                  margin-top: 20px;
                  width: 90%;
                }

                .montage9 {
                  margin-left: 20px;
                  width: 600px;
                  max-width: 100%;
                  min-height: 500px;
                  background-image:url("IMAGES/montage4.jpg");
                  background-size: 100%;
                  background-repeat: no-repeat;
                  background-position: top;
                  margin-top: 20px;
                  width: 90%;
                }

                .montage10 {
                  margin-left: 20px;
                  width: 600px;
                  max-width: 100%;
                  min-height: 500px;
                  background-image:url("IMAGES/montage5.jpg");
                  background-size: 100%;
                  background-repeat: no-repeat;
                  background-position: top;
                  margin-top: 20px;
                  width: 90%;
                }


              }