body {
  background-color: brown;
}

img{
  width: 100% ;
}

h1 {
  font-family: arial ;
  font-size: 19px;
  top : 30px ;
  position: sticky ;
}

p {
    font-size: 34px ;
  font-family: verdana ;
  margin: 5% 4% 2% 2% ;
  padding: 4% 0 3% 4% ;
  color : #747618 ;
  border-top: 55px inset blue;
  border-top-right-radius: 1em 10% ;
  border-bottom: 14px dashed red ;
  width:110% ;
  height: 120 % ;
  overflow : hidden ;
}

.article1{
  background-color: pink ;
  margin: 4% 0 10% 0 ;
  width:40% ;
  display :inline-block;
  column-count : 2;
}

.article2{
  background-color: white ;
  font-family : Times ;
  width: 20% ;
  display : inline-block;
}

.masquer {
  display:none ;
}


.conteneur-flex {
  background-color: grey ;
  display: flex ;
  flex-wrap:wrap ;
  margin :  2% ;
  padding : 4%  ;
}

.article-flex {
  background-color: grey ;
  flex: 1 1 450px;
  display : flex ;
  transition-duration : 1s ;
}

.article-flex:hover {
  background-color: pink ;
  font-size : 75px ;
  font-family : arial ;
  transition-duration : 1s ;
  transition-delay: 1s ;
}

.petite {
  background-color: lightblue ;
  flex : 1 1 40px ;
  margin : 2px ;
}

.article-flex-2 {
  background-color: pink ;
  flex : 3 1 340px ;
  overflow : hidden ;

  background-image: url("image/memoire.gif") ;
  background-position : center ;
  background-repeat: no-repeat ;
  background-size : cover ;
  box-shadow: 0PX 0PX 27PX 16PX #27C986 ;
}

.article-flex-2:hover {
transition-duration: 1s;
transform: scale(2,2) rotate(950deg) ;
box-shadow: 0PX 0PX 27PX 16PX;
}

.article-flex-3 {
  background-color : red ;
  flex : 5 1 200px;
}

@media (min-width: 200px) and (max-width: 1000px){
  body {
    background-color:#000;
  }
}