* {
	box-sizing: border-box; /* On spécifie que la largeur (width) de chaque boîte comprend le padding et la bordure (par défaut, c'est seulement la largeur du contenu) */
}

html {
	font-size: 62.5%; /* 1rem = 10px (la formule est 10/16*100) la taille par défaut étant 16px */
}

body {
	font-size: 1.6rem; /* on remets la taille du texte par défaut pour le body à 16px en utilisant les rem comme unité) */
	font-family:var(--font-text);
	color:var(--color-text);
	background-color: var(--color-body);
	
}
.container{
	width:auto;
	max-width:var(--max-width);
	margin: 0 auto;
}
img{
	height:auto;
	width:100%;
}

header .logo p{
	
}
header .logo p:first-of-type{
	
	font-size: 3.2rem;
	
}
.flex{
	
	float:right;
}
.logo{
	display:flex;
}

header .logo img{
	width:6.4rem;
	filter: drop-shadow(var(--shadow-lg));
}

.button{
	display:inline-block;
	padding:0.5em;
	text-align:center;
	color:var(--color-main);
	background-color:var(--color-header);
}

header{
	background:url("images/header.jpg");
}

:root {
	--max-width: 1140px;
	--font-text:'Open sans' , sans-serif ;
	--font-title: 'Raleway', sans-serif ;
	--size-text:1.5rem;
	--size-title-1:3.6;
	--size-title-2:3.6;
	--size-title-3:2.4;
	--line-height : 2.0rem;
	--color-body:#eee;
	--color-main:#fff;
	--color-card:#eee;
	--color-tittle:#333;
	--color-text:#555;
	--color-link: #0c6588;
	--color-link-over: #111;
	--color-menu:#e2f7ff;
	--color-menu-link:#0c6588;
	--color-header:#0c6588;
	--color-header-title:#fff;
	--color-header-text:#e2f7ff;
	--color-header-link:#fff;
	--color-header-link-hover:#111;
	--color-footer:#333;
	--color-footer-title:#fff;
	--color-footer-text:#ddd;
	--color-footer-link:#eee;
	--color-footer-link-hover:#fff;
	--border-sm: 1px solid #eee;
	--border-md: 1px solid #ddd;
	--border-lg: 2px solid #ccc;
	--shadow-sm: 1px solid #eee;
	--shadow-md: 1px solid #ddd;
	--shadow-lg: 2px solid #ccc;
	
	
}