* {
	box-sizing: border-box; 
    
}

html {
	font-size: 62.5%; 
}

body {
	font-size: 1.6rem;
    
}



body {
	margin: 0;
	padding: 0;
	line-height: 1.5;
	font-family: sans-serif;
	color: #555;
	background-color: #eee;
}


h1 {
	font-size: 4rem;
	color: #DD5735;
}


h2 {
	font-size: 3.2rem;
	color: #333;
}



h3 {
	font-size: 2.4rem;
}


a {
	text-decoration: none;
	color: #DD5735;
}


a:hover {
	text-decoration: underline;
	color: #000;
}


main {
	padding: 2em;
}


article {
	background-color: #fff;
	padding: 1em;
}


.container {
	max-width: 1100px; 
	margin-left: auto; 
	margin-right: auto;
}




.header {
	padding: 1em;
	text-align: center;
	color: #999;
	background-color: #444;
}


.header h1 {
	margin: 0;
}

/* Le pied de page */
.footer {
	padding: 2em;
	text-align: center;
	color: #fff;
	background-color: #444;
}



.card,
.cards > * {
	padding: 2em;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.2);
}

.gutter > * {
	margin: 1em;
}


.parent {
	border: 1px dashed #DD5735;
}


.code {
	padding: 0.5em;
	font-family: Monaco, monospace;
	font-size: 14px;
	color: #000;
	background-color: #ddd;
	border: 1px solid #bbb;
}



.parent > article {
	width: 50%;
	display: inline-block;
}
.hack-css {
	font-size: 0;
}
.hack-css * {
	font-size: initial;
}
.valign * {
	vertical-align: top;
}