*{
    box-sizing: border-box;
}
img{
    width:100%;
}
/* pour initialiser toutes les  balises sut tous les nagigateurs */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure,figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
​    vertical-align: baseline;
    text-align: center;
}
​
.container{
    width: 1200px;
    margin:0 auto;
}
body{
    font-family: 'Caveat Brush', cursive;
}
.nav_bar{
    display: flex;
}
.nav_bar a{
    text-decoration: none;/*pour supprimer le soulaigenement sur les liens*/
    color:black;
}
.nav_bar li{
    list-style-type: none;
    margin-left:30px;
}
header{
    background-image:url("../img/planches.jpg");
    padding-bottom: 54px;
}
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left:30px;
    margin-right:30px;
}
.logo h1,.logo h3{/*selectionner h1 qui est sous la classe logo*/
    font-size: 45px;
    text-transform: uppercase;/*mettre en majuscule le texte du logo*/
    font-style: italic;
    letter-spacing: -2px;
}
h1 span,h3 span{  /*selectionner span qui est sous h1*/
  font-size: 27px;
  font-style: italic;
  position:relative;
  bottom: 11px;
  left: 5px;
​
}
/* les pseudo element permettent d'ajouter du contenu avant et apres un bloc, :before et :after */
h1 span::after,h3 span::after{/*on va ajouter un element apres la balise span*/
content:"-";
position:relative;
top: 12px;
right: 12px;
}
.trait{
    width:30px;
    height: 8px;
    background-color:#E53F6F ;
    margin:0 auto;
​
}
.triangle{
    display:inline-block;
     height: 0;
    width: 0;
    border-top: 120px solid rgba(229, 63, 111,0.7);
    border-left: 120px solid transparent;
    position: relative;
    /* left: 0px; */
    bottom: 134px;
   }
   .triangle  img{
       width: 250px;
   }
   .bloc_cerf{
    justify-content: center;
    display: flex;
    align-items: center;
    height: 500px;
    flex-direction: column;
    
   }
   
   .cerf{
       margin:0 auto;
   }
   .fleche{
       width:40px;
       height: 40px;
       display: inline-block;
       border-right:0.3em solid #E53F6F;
       border-top:0.3em solid #E53F6F;
       transform:rotate(125deg) skewY(20deg);
       /* position: relative;
       left:calc(50% - 20px); */
   }
   section{
       display: flex;
       align-items: center;
       margin-bottom:-5px;
   }
   .story{
       width: 40%;
       text-align: center;
       padding:35px;
   }
   h2,.text_rose{
       font-family: sans-serif;
   }
   .text_rose{
       color:#E53F6F;
       text-transform: uppercase;
       font-weight: bold;
       margin-top:15px;
   }
   .fare{
       width: 30%;
       text-align: center;
       padding:35px;
   }
   .soap{
       width: 70%;
   }
   h2{
       font-size: 40px;
       line-height: 50px;
       text-transform:uppercase;
   }
   .local{
       width: 40%;
       text-align: center;
       padding:35px;
   }
   .local p img,.fare p img{
       width: 100px;
   }
   .local_img{
       text-align: center;
   }
   .eggs{
       width: 100%;
   }
   footer .logo h3{
    font-size: 43px;
   }
   footer{
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       background-image: url("img/motif.jpg");
       padding:100px 50px 60px;/*100px pour(top,bottom) et 30px pour(left, right)*/
       
   }
   .footer_right{
       color:#E53F6F;
       font-size: 20px;
   }
   .footer_right i{
       margin-left:5px;
   }
   .footer_left .logo{
       margin-bottom:50px;
   }
   .footer_left div:nth-child(2){/*selectionner le 2 eme enfant du bloc footer_left*/
       font-weight: bold;
       margin-bottom:20px;
   }
   section .trait{/*seclectionner les classes trait que celles qui sont dans balises section*/
    border-radius: 10px;
    margin:20px auto;
   }
   .asperge{
    /* transform: scaleX(-1); on peut utiliser aussi scaleX avec valeur -1 pour ne pas augmenter la taille et juste changer le sens de l'image*/
    transform:rotateY(180deg);/*transformer l'image en rotation sur l'axe Y de 180 degre*/
   }