@font-face {
  font-family: millimetre light;
  src: url(fonts/Millimetre-Light.otf);
}

@font-face {
  font-family: millimetre regular;
  src: url(fonts/Millimetre-Regular.otf);
}

@font-face {
  font-family: millimetre bold;
  src: url(fonts/Millimetre-Bold.otf);
}

@font-face {
  font-family: millimetre extrablack;
  src: url(fonts/Millimetre-Extrablack.otf);
}


* MOBILE FIRST */


/* reset général de marges */
body, h1, h2, h3, h4, h5, ul{
  margin:0;
  padding: 0;
}

.global {
  width: auto;
  padding: 0;

}




.M {width: 40%;
float: left;
padding-top: 40px;
margin-left: 30px;

margin-right: 25px;}
.quatre{
padding-bottom: 20px;
  padding-left: 190px;
  padding-top: 40px;

  

}

.quatrebis {border-top: 3px solid #ed70a7;  
padding-top: 40px;
padding-bottom: 20px;}
.A {
padding-top: 80px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 50px;
  width: 45%;
  float: right;

}

.glyphe1 {width: 50%;
  float: right;
  margin-top: 45px;


}

.trois { padding-top: 30px;
margin-bottom: 80px;
border-top: 3px solid #ed70a7;
border-bottom: 3px solid #ed70a7;
padding-bottom: 50px;
float: right;
}

.typogif {border-top: 3px solid #ed70a7;
border-bottom: 3px solid #ed70a7;
width:80%;
margin-left: 30px;
margin-top: 50px;
margin-bottom: 50px;}

.typo {border-bottom: 3px solid #ed70a7;
padding-bottom: 40px;
;
}

.font {width: 80%;
margin-left: 30px;
margin-top: 40px;
margin-bottom: 40px;
}

body {margin: 0;
padding: 0;
background-image:url(images/fond3.png);


}





.deux {
  
  padding-bottom: 27px;
margin-bottom: 20px;

padding-top: 40px;

font-size: 15px;


}

.deuxbis {margin-bottom: 60px;
margin-top: 30px;}

.cinq {padding-right: 80px;
border-bottom: 3px solid #ed70a7;
margin-bottom: 60px;
padding-bottom: 50px;

}

.pgrille {
padding-bottom: 30px;
  
  

  padding-top: 20px;

}

.pglyphebis {padding-top: 40px;}

.pglyphe { 
padding-left: 5px;
border-bottom: 3px solid #ed70a7;
padding-top: 20px;
padding-bottom: 40px;

  }
.gif1{ width:45%;
  
margin-right: 20px;
margin-top: 65px;

margin-bottom: 20px;
padding-bottom: 20px;


float:left;


}

.gif2 {width: 55%;}
.description {border-bottom: 3px solid #ed70a7;
padding-bottom: 50px;}

.direction {
width: 30%;
margin-left: 7px;


}


.changementdepage { 
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;



display: flex; 
             justify-content: space-between;

         }

.précédent {background: none;
border: none;
font-size: 15px;

}

.précédent a {text-decoration: none;
color: #ed70a7;}
.suivant {background: none;
border: none;
font-size: 15px;
}

.jeremy {width: 90%;
margin-left: 20px;
margin-top: 40px;
margin-bottom: 50px;}

blockquote { text-align: center; 
color: white;
background-color: #ed70a7 ;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 75px;
margin-bottom: 80px;
font-size: 25px;
font-family: millimetre regular;
line-height: 1.3em;}

.suivant a {text-decoration: none;
color: #ed70a7;}
img {width: 100%;
}


.retouraudessus {
  width: 20%;
  margin-bottom: 10px;
  margin-top: 10px;
border: none;
background:  none;


}
h1 { color:#ed70a7;
font-size: 23px;
margin-left: 20px;

padding-top: 20px;
padding-bottom: 10px;
font-family: millimetre bold;}

h2 {font-family: millimetre bold;
margin-left: 20px;
padding-top: 20px;}

h3 { font-family: millimetre regular; 
color: #ed70a7;
text-align: center;
font-size: 55px;
padding-top: 50px;}

h4 {font-family: millimetre regular;
color: #ed70a7;
margin-left: 25px;
margin-bottom: 50px;}

p { font-size: 18px; 
margin-left: 30px;
margin-right: 30px;
font-family: millimetre regular;
line-height: 1.5em;

}

footer{ padding-top: 10px;

padding-bottom: 10px;
margin-bottom: 0;

}


.input1{
   font-family: 'millimetre regular';
   width: 80%;
   height: 40px;
   font-size: 20px;
   margin-left: 30px;
   box-sizing: border-box;
   margin-bottom: 10px;
}

.input2{
   font-family: 'millimetre light';
   width: 80%;
   margin-left: 30px;
   height: 40px;
   font-size: 20px;
   box-sizing: border-box;
   margin-bottom: 10px;
}

.input3{
   font-family: 'millimetre bold';
   width: 80%;
   margin-left: 30px;
   height: 40px;
   font-size: 20px;
   box-sizing: border-box;
   margin-bottom: 10px;
}

.input4{
   font-family: 'millimetre extrablack';
   width: 80%;
   margin-left: 30px;
   height: 40px;
   font-size: 20px;
   box-sizing: border-box;
   margin-bottom: 10px;
}


.affiche { width: 50%; 
  float: right;
 padding-top: 40px;
  margin-left: 10px;

margin-top: 10px;
margin-right: 20px;}
.six {margin-top: 20px;
  margin-bottom: 30px;
  margin-top: 15px;
  padding-top: 10px;
  padding-bottom: 30px;



}

.titre {padding-bottom: 70px;
padding-top: 40px;}
.autocollant { width: 60%; 

margin-left: 80px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;}

.sept { margin-bottom: 10px;
  padding-bottom: 20px;


  float: right;
 }

  .huit {padding-bottom: 50px;
  margin-top: 20px;}   


 .sticker { border-top: 3px solid #fe019a;
border-bottom: 3px solid #fe019a; }


.livrederecettes2 {width: 80%;
margin-left: 30px;
margin-top: 30px;}
.livrederecettes {width: 55%;
  margin-right: 15px;
  margin-top: 25px;
  margin-left: 15px;
  margin-bottom: 30px;
float: right;}

.dix {margin-top: 40px;}

.neuf {padding-top: 10px;
padding-bottom: 70px;
padding-top: 25px;}

.cercles {width: 30%;
  padding-bottom: 110px;
  padding-right: 10px;
float: left;
padding-top: 70px;
}

.pcercles {margin-right: 5px;}
.glyphe2 {float: right;
width: 45%;
margin-right: 20px;
margin-left: 30px;
padding-top: 80px;
padding-bottom: 20px;}

.cinqbis {padding-top: 55px;
padding-bottom: 50px;}

.cinq3 {padding-top: 40px;}



    /* Vos règles CSS pour les écrans plus grand que 550px ici */
}
}

.global{
 
 max-width : 550px;

}


    }