/*********************************************************************/
/*
/* Powered by Patrick Joly - Contact : patrickjoly@free.fr */
/*
/*********************************************************************/
:root {
  --blanc: #ffffff;
  --clair: #c3dad7;
  --sombre: #21645b;
}

body {
	background: var(--blanc);
	color: var(--sombre);
	font-family: Arial Narrow, sans-serif;
	font-size: 1.2em;
	line-height: 1.5;
	margin: 0 auto;
	overflow: scroll;
	padding: 0;
}

/*********************************************************************/
/* styles - mobile first
/*********************************************************************/
/* page */
.page {
	display: grid;
	margin: 0 auto;
	grid-template-columns: 1fr;
	grid-gap: 10px;
	grid-template-areas:
		"header"
		"article-1"
		"article-2"
		"article-3"
		"article-4"
		"article-5"
		"article-6"		
		"article-7"		
		"article-8"
		"article-9"
		"article-10"
		"article-11"		
		"footer"
}

/* header */
header {
	grid-area: header;
	background: var(--clair);
	color: var(--blanc);	
	margin: 0;
	padding: 10px;
	text-align: center;
}

/* articles */
.article-1 {
	grid-area: article-1;
	background: var(--clair);
	margin: 0;
	padding: 10px;	
}

.article-2 {
	grid-area: article-2;
	background: var(--clair);
	margin: 0;
	padding: 10px;	
}

.article-3 {
	grid-area: article-3;
	background: var(--clair);
	margin: 0;
	padding: 10px;	
}

.article-4 {
	grid-area: article-4;
	background: var(--clair);
	margin: 0;
	padding: 10px;	
}

.article-5 {
	grid-area: article-5;
	background: var(--clair);
	margin: 0;
	padding: 10px;	
}

.article-6 {
	grid-area: article-6;
	background: var(--clair);
	margin: 0;
	padding: 10px;	
}

.article-7 {
	grid-area: article-7;
	background: var(--clair);
	margin: 0;
	padding: 10px;	
}

.article-8 {
	grid-area: article-8;
	background: var(--clair);
	margin: 0;
	padding: 10px;	
}

.article-9 {
	grid-area: article-9;
	background: var(--clair);
	margin: 0;
	padding: 10px;	
}

.article-10 {
	grid-area: article-10;
	background: var(--clair);
	margin: 0;
	padding: 10px;	
}

.article-11 {
	grid-area: article-11;
	background: var(--clair);
	margin: 0;
	padding: 10px;	
}

/* footer */
footer {
	grid-area: footer;
	background: var(--clair);
	margin: 0;
	padding: 10px;
	text-align: center;
}

/* images */
img {
	border-radius: 5px;	
    width: 100%;
}
/* bouton */
.bouton {
	background: var(--sombre);
	border: 1px solid var(--sombre);
	border-radius: 5px;	
	color: var(--blanc);
	display: inline-block;
	text-decoration: none;
	padding: 10px;
}

/* liens */
a {
	border-bottom: 1px solid #ffffff;
	color: #ffffff;
	text-decoration: none;
}

a:hover {
	border-bottom: 2px solid transparent;
}

/*********************************************************************/
/* styles - laptop / desktop
/*********************************************************************/
@media (min-width: 768px) {
.page {
	grid-template-columns: repeat(7, 1fr);
	grid-template-areas:
		"header header header header header header header"
		". article-1 article-1 article-4 article-7 article-7 ."
		". article-1 article-1 article-5 article-8 article-10 ."
		". article-2 article-2 article-2 article-8 article-11 ."
		". article-3 article-3 article-6 article-9 article-9 ."			
		"footer footer footer footer footer footer footer"
}
}