div,h1,h2,h3,h4,h5,h6,section,p,body{
    margin:0;
    padding:0;
    border:0;
}

*{
    box-sizing: border-box;/*border-box va  garder la meme taille du bloc meme si on ajoute de padding ou bien bordure*/
}
body{
    background-color:#f6f6f7;
}
.container{
    width:1024px;/*la taille de page */
    /*margin: 0 pour top et bottom et auto(automatique) pour left et right, automatique selon le reste de l'espace de la page selon la taillme que je l'ai mentionné dans width*/
    margin:0 auto;/*permet de centrer la page dans le nivigateur, creer des margins a gauche et a droite*/
    background-color:#f6f6f7;
    font-family:"Cormorant Garamond", serif;
}
header{
    text-align: center;
    width: 45%;
    margin:0 auto;
}
header h1{/*je vais selctionner les h1 qui se trouve a l'interieur de header*/
font-size:3em;
text-transform: uppercase;/*uppercase mettre tout le texte en majuscule*/
letter-spacing: 3px;/*il va ajouter de l'espacement entre les lettres*/
font-weight:500;/*pour changer l'epaisseur de l'ecriture*/
}

nav a{/**je vais selctinner toutes les balisesa qui se trouvent al'interieur de balise nav*/

color:#000;
text-decoration:none;
font-style: italic;
font-weight: bold;
}

.assiette img {
border-radius: 50%;
}
section{
    display: flex;
    align-items: center;
}
.text_assiette{
    width:40%;
    text-align: right;
    position: relative;
    right: 150px;
}
.text_assiette h2:first-child{/*on peut aussi utiliser comme selecteur .text_assiette h3*/
    font-style: italic;
}
.text_assiette p{/*je vais selectiooner tous les p qui se trouve a l'interieur  de text_assiette*/
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 13px;
}
section h3{
    text-transform: uppercase;
    font-size:2em;
    letter-spacing: 4px;
    font-weight: 500;
    border-bottom: 1px solid gray;
}
.salle p,.service p,.dressage p, .gout p{/*puisqu'on va appliquer le me style sur tous ces p on peut les regroupés ensemble avec vergule */
    margin-top:5px;
    font-weight: bold;
    font-style: italic;/*changer le style de texte en italic*/
    font-size: 16px;
    margin-bottom:20px;

}
.salle,.dressage,.service,.gout{
    margin-left:25px;
    margin-right: 25px;
}
.salle span,.service span,.dressage span,.gout span{
    background-color:#000;
    color:#fff;
    text-transform: uppercase;/*uppercase mettre en majuscule le texte*/
    letter-spacing: 2px;/*creer des espacements entre les lettres*/
    font-weight: bold;
    padding-left:5px;
    padding-right: 50px;/*creer un margin a droite*/
    margin-top:15px;/*creer un margin en haut*/
}
.salle span i,.service span i,.dressage span i,.gout span i{/*on peut appeler les i de 4 bloc en meme temps puisqu'il sagit de meme style a appliquer*/
    font-size: 9px;
     vertical-align: 2px;/*il va aligner le texte verticalement  sur l'hauteur*/

}
footer{
    text-align: center;
    width: 45%;
    margin:0 auto;
    margin-top: 4em;
}
.septime{
    font-size: 3em;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
}
footer p:nth-child(5){
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
}
.city_guide{
    text-transform: uppercase;
    position: relative;
    bottom: 5em;
    font-size: 16px;
    letter-spacing: 2px;

}
footer img{
    opacity:0.3;/*opacity changer le transparence de l'image, du bloc, du texte, la valuer varie entre 0 et 1*/
}
footer p{
    font-weight: bold;
}