body {
  margin: 30px;
  background-color: #f6f5f2;
  font-family: sans-serif;
}
header {
	/* background: url(IMG/Passagesetmassages_logo.png) no-repeat center;
  background-size: 80%;
  height: 500px; */
}
a:link, a:visited {
  color : white;
  padding: 3px 5px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  }
a:hover {
  color : white;
  background-color: #E4A4D6;
  }


.sidebar {
    grid-area: sidebar;
    background: url(IMG/img_sidebar.jpg) no-repeat center;
    background-size: 90%;
  }

  .sidebar2 {
    grid-area: sidebar2;
  }

  .sidebar3 {
    grid-area: sidebar3;
  }

 .sidebar4 {
    grid-area: sidebar4;
  }
 .content {
    grid-area: content;
  }

 .header {
    grid-area: header;
   }

 .footer {
    grid-area: footer;
  }

 .wrapper {
    background-color:  #ec8a04;
    color: #444;
  }

 .wrapper {
    display: grid;
    grid-gap: 1em;
    background-color: #f6f5f2;
    grid-template-areas:
     "header"
     "sidebar"
     "content"
     "sidebar2"
     "sidebar3"
     "footer"
  }

 @media only screen and (min-width: 500px)  {
 .wrapper {

    grid-template-columns: 20% auto;
    grid-template-areas:
    "header   header"
    "sidebar  content"
    "sidebar2 sidebar3"
    "footer   footer";
  }
  }

 @media only screen and (min-width: 900px)   {
   .wrapper {
      grid-gap: 25px;
      grid-template-columns: 350px auto 350px;
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
      grid-template-areas:
      "header  header header header"
      "sidebar content content content"
      "sidebar2 sidebar2 sidebar3 sidebar4"
      "footer  footer footer footer";
      max-width: 1200px;
    }
  }

.box {
  background-color:#FF8000;
  color: #000;
  border-radius: 5px;
  padding: 20px;
  line-height:1.3;
  font-size: 120%;
}

.header,
.footer {
  background-color: #D15524;
}

.header
{
  text-align: center;
  font-size: 300%;
  font-style: italic;
  font-family: "Times New Roman", Times, serif;

}

.footer {
 font-size: 80%;
 padding: 10px;
 text-align: center;
}

.sidebar3 {
  /* background: url(IMG/molet-300.jpg) no-repeat center 20%; */
  background-image: url(IMG/img_sidebar3.jpg) ;
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  color: #444;
}

.sidebar4 {
  padding:4px;
  background-image: url(IMG/Murielle.jpg) ;
  background-size: 83%;
  background-repeat: no-repeat;
  background-position: center;
  /* width:auto; height:auto; */
  color: #444;
}
{
    color: blue;
}

.fit-pict {
	width: 180px;
}

.maclasse
{
  padding:40px;
  font-style: italic;
  font-family: "Times New Roman", Times, serif;
  font-size:110%;

}

.maclasse2
{
  padding:0px;
  font-style: normal;
  font-size:70%;

}
.maclasse3
{
  padding:0px;
  font-style: normal;
  font-size:100%;

}
/* instructions pour mobiles

@media all and (max-width:480px)
{

}

/*instructions pour tablettes

@media (min-width:480px) and (max-width:780px)
{

}

@media (min-width:781px) and (max-width:979px)
{

}
*/