*{
    margin : 0;
    max-width: 1500px;
}
body{
    font-family : "Nunito";
    color: #414141;
    background-color : #f9f9f9;
}


/**********************************************
HEADER
*********************************************/
header{
    background-color : #00748D;
    padding: 1em 3em 0.2em 3em;
    font-family : "Fjalla One";
    color : #FFF;
    display : flex;
    justify-content : space-between;
}
.logo{
    display : flex;
    justify-content : flex-start;
}
.toolbar{
    font-family : "Fjalla One";
    display : flex;
    justify-content : flex-end;
    font-size : 20px;
}
a{
    text-decoration : none;
    color : #FFF;
    margin : 1em;
} 
.toolbar > a {
    margin : 1em;
}
/************************************
FOOTER
************************************/

footer {                           /**/
	padding: 1em;                  /**/
	text-align: center;            /**/ 
	color: #fff;                   /****FOOTER GRIS 3WA*/
	background-color: #444;        /**/  
}                                  /**/     
footer > img{                      /**/  
    height : :;                    /**/    
}
.reseaux{        /******icones reseaux sociaux*****/
    display : flex;
    justify-content: flex-end;
    font-size : 25px;
    
}
.footer{                    /***** Footer bleu ****/
    width : 100%;
    height : 4em;
    background-color :#00748D ;
    color : #FFF;
    font-family :"Fjalla One";
    display : flex;
    align-items : center;
    justify-content : space-between;
}


/************************
SOUS HEADER
************************/
.bg-header{
    background-image : url(images/bg-header.jpg);
    background-size : cover;
    background-position : center;
    padding:10em;
    display : flex;
    justify-content :center;
    
}

/********************************
ARTICLES
******************************/

.titre{
    text-align : center;
    background-color : #CB8606;
    font-family : "Fjalla One";
    font-size : 30px;
    text-transform : uppercase;
    color:#FFF;
    padding : 0.5em;
    margin-left : 20%;
    margin-right :20%;
    margin-bottom : 1em;
    display :block;
}
.titreP{
    text-align : center;
    font-family : "Fjalla One";
    font-size : 30px;
    text-transform : uppercase;
    color:#CB8606;
    padding : 1em;
    margin : auto;
    display :block;
}
.texte-header{
    text-align : center;
    color : #00748D;
    background-color : #FFF;
    font-size :20px;
    margin-left : 10%;
    margin-right :10%;
    display :block;
}
.presta{
    display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-items: center;
	gap : 10px;
	padding : 20px;
}

.presto {
    display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-items: center;
	gap : 10px;
	padding: 20px;
}
article > .carre { /**images page1**/
    height: 220px;
    width : 220px;
}

.presto> article{
    border : 3px solid #00748D;
}
h3{
    text-align : center;
    font-size :20px;
    color : #00748D;
    margin-top : 2em;
    margin-bottom : 2em;
}
actualite{
    display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.actu{
    width : 48%;
}
.temoignages{
    max-height : 20em;
    overflow: scroll;
}
.derniersTweets{
    max-height : 30em;
    overflow : hidden;
}
.cuisine article{
     display: grid;
    grid-template-columns : 1fr 1fr;
}
.cuisine img{
    display : flex;
    flex-direction : column;
}
.bureau article{
     display: grid;
    grid-template-columns : 1fr 1fr;
}
section {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 0 2rem;
}
.corps{
    display: grid;
    grid-template-columns : 3fr 1fr;
	grid-template-areas : 
	            "cuisine cuisine cuisine temoignages"
	            "bureau bureau bureau derniersTweets";
}
/****** ICONES *********/
.fas{
    font-size : 30px;
    background-color : #CB8606;
    color : #FFF;
    padding : 10px;
    display: inline-block;
    text-align: center;
    margin : auto;
}


/************BOUTON EN SAVOIR PLUS**********/
button{
    background-color : #00748D;
    color : #FFF;
    text-decoration : none;
    border : 1px solid #00748D;
    width : 75%;
    padding : 0.5em;
}
button:hover{
    color: #00748D;
    background-color : #FFF;
}

/***********Autres Spécificités**************/
.ocre{
    color :#CB8606;
}
.bleu{
    color : #00748D ;
}
cite{
    color : #00748D
}

/******************************************************************
 VERSION TABLETTE
***************************************************************** */

@media screen and (max-width: 1100px) {
    main{
        font-size : auto;
    }

	.presta {
		display : grid;
		grid-template-columns : 1fr 1fr;
}
    .presto {
		display : grid;
		grid-template-columns : 1fr 1fr;
}
    header{
    padding: 1em;
}
    .toolbar{
        display : grid;
        justify-content : flex-end;
}
    .logo{
        display : grid;
        justify-content : flex-start;
}
	}

/* *****************************************************************
 VERSION MOBILE
***************************************************************** */

@media screen and (max-width: 780px) {
	.presta {
		display : grid;
		grid-template-columns : 1fr;
}
    .presto {
		display : grid;
		grid-template-columns : 1fr;
}
    header{
    padding: 10px;

}
    .toolbar{
        display : grid;
        justify-content : flex-end;
}
    .logo{
        display : grid;
        justify-content : flex-start;
}
    a{
        margin : 10px;
}
	}










Intégration responsive en retrofitting / desktop first
Le contenu a un maximum de 1500px de large mais les fonds de couleur de l'entête et du pied de pge font toute la largeur de la fenêtre du navigateur quelque soit sa taille.
Les points de rupture :
- 1100px pour tablette
- 780px pour mobile
- petits mobiles 630px

COULEURS
- fond turquoise : #00748D
- jaune orangé : #CB8606
- fond gris clair: #f9f9f9
- texte : #414141

POLICES
- Par défaut : Nunito (Google fonts)
- Titres et nav : Fjalla One (Google fonts)

TAILLE DES POLICES
- par défaut : 18px
- titre du site : 20px
- menu : 20px
- titre de la page d'accueil : 30px et 20px
- titre des pages intérieures : 30px
- sous-titres : 25px
- titres articles : 20px
- textes colonne de droite : 16px
- auteurs : 14px

Les pictos des réseaux sociaux sont des Font Awesome