
body
{
  font-family: trebuchet ms, geneva, arial, sans-serif;
  text-align: center;
}




.logo1
{
  font-family: 'Futura Md BT', sans-serif;
/* police CDNfonts */
  text-align: left;
  font-size: 140%;
  margin: 50px 0px 0px 15px;
}

.logo2
{
    font-family: 'Futura Md BT', sans-serif;
/* police CDNfonts */
    color: #ae006d;
    font-size: 120%;
    margin: 0px 15px;
    text-align: left;
}

.script
{
  font-family: 'Bad Script', cursive;
/* police google */
  font-size: 1.5em;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.conteneur
{
  display: flex;
  flex-wrap: wrap;
  margin: 60px 2.5% 10px 2.5%;
}

.flex
{
  display: flex;
  margin: 0% 2.5%;
  background-color: #4c4c4c;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.mission
{
  color: white;
  padding: 12px 2px 20px 4px;
  width: 350px;
}

.texte
{
  width: 410px;
  line-height: 140%;
  margin: auto;
  margin-bottom: 20px;
  margin-top: 40px;
}

.align-gauche
{
  text-align: left;
}


/* css pour images flex */

.container {
  display: flex;
  width: 100%;
  padding: 1% 2% 1% 2%;
  box-sizing: border-box;
}

.box {
  flex: 1;
  overflow: hidden;
  transition: 0.5s;
  margin: 0 0.5%;
  line-height: 0;
}

.box > img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: 0.5s;
  -webkit-filter: grayscale(100%);
  filter: grayscale(70%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.box:hover {
  flex: 1 1 25%;
}

.box:hover > img {
  width: 100%;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}


/* fin css pour images flex */


a
{
  text-decoration: none;
  color: black;
  margin: 0px 10px;
}

a img:hover
{
   box-shadow: 6px 6px 6px rgba(0,0,0,0.3);
}

.instagram
{
  margin-top: 40px;
  margin-bottom: 40px;
}

footer
{  
  background: url("icones/pix.png") repeat-x;
  font-size: 80%;
  padding: 1px 0px;
  margin: 0% 2.5%;
}




@media screen and (max-width: 980px)   
{

body
{
    font-size: 120%;
}

.logo1
{
  font-size: 160%;
  margin: 35px 0px 0px 15px;
}

.logo2
{
  font-size: 140%;
}

.script
{
font-size: 1.7em;
}

.texte
{
  width: 60%;
}

}

