:root {
	--header-bg-color: #667;
	--header-font-color: #dde;
	--nav-bg-color: #333;
	--nav-bg-color-hover: #111;
	--nav-bg-color-active: #4CAF50;
	--main-bg-color: #fff;
	--main-font-color: #000;
	--link-font-color: #4CAF50;
	--link-hover-font-color :#555;
	--footer-bg-color: #667;
	--footer-font-color: #dde;
	--shadow-color: red;
	--article-title-color:#e67e22;
	--article-subtitle-color:#888;


}
 /* Si le thème est sombre */
@media (prefers-color-scheme: dark) {
   :root {
		--header-bg-color: #667;
		--header-font-color: #ddd;
		--nav-bg-color: #333;
		--nav-bg-color-hover: #111;
		--nav-bg-color-active: #4CAF50;
		--main-bg-color: #000;
		--main-font-color: #ddd;
		--link-font-color: #4CAF50;
		--link-hover-font-color :#fff;
		--footer-bg-color: #667;
		--footer-font-color: #dde;
		--shadow-color: red;
		--article-title-color:#e67e22;
		--article-subtitle-color:#888;


	}
}




/* Webfont: Luciole */
@font-face {
    font-family: 'Luciole';
    src: url('Luciole_webfonts/Luciole-Regular/Luciole-Regular.eot'); /* IE9 Compat Modes */
    src: url('Luciole_webfonts/Luciole-Regular/Luciole-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Luciole_webfonts/Luciole-Regular/Luciole-Regular.woff') format('woff'), /* Modern Browsers */
         url('Luciole_webfonts/Luciole-Regular/Luciole-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('Luciole_webfonts/Luciole-Regular/Luciole-Regular.svg#Luciole-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Luciole Italic*/
@font-face {
    font-family: 'Luciole';
    src: url('Luciole_webfonts/Luciole-Italic/Luciole-Italic.eot'); /* IE9 Compat Modes */
    src: url('Luciole_webfonts/Luciole-Italic/Luciole-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Luciole_webfonts/Luciole-Italic/Luciole-Italic.woff') format('woff'), /* Modern Browsers */
         url('Luciole_webfonts/Luciole-Italic/Luciole-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('Luciole_webfonts/Luciole-Italic/Luciole-Italic.svg#Luciole-Italic') format('svg'); /* Legacy iOS */
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Luciole Bold */
@font-face {
    font-family: 'Luciole';
    src: url('Luciole_webfonts/Luciole-Bold/Luciole-Bold.eot'); /* IE9 Compat Modes */
    src: url('Luciole_webfonts/Luciole-Bold/Luciole-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Luciole_webfonts/Luciole-Bold/Luciole-Bold.woff') format('woff'), /* Modern Browsers */
         url('Luciole_webfonts/Luciole-Bold/Luciole-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
         url('Luciole_webfonts/Luciole-Bold/Luciole-Bold.svg#Luciole-Bold') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* Webfont: Luciole Bold Italic*/
@font-face {
    font-family: 'Luciole';
    src: url('Luciole_webfonts/Luciole-BoldItalic/Luciole-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('Luciole_webfonts/Luciole-BoldItalic/Luciole-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Luciole_webfonts/Luciole-BoldItalic/Luciole-BoldItalic.woff') format('woff'), /* Modern Browsers */
         url('Luciole_webfonts/Luciole-BoldItalic/Luciole-BoldItalic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('Luciole_webfonts/Luciole-BoldItalic/Luciole-BoldItalic.svg#Luciole-BoldItalic') format('svg'); /* Legacy iOS */
    font-style: italic;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

html, body{
	margin:0;
	padding:0;
	
}

html {
	font-size : 100%;
	scroll-behavior: smooth;
}



body{
	background-color:var(--main-bg-color);
	color:var(--main-font-color);

	min-height: 100vh;
	
	display: grid;
	grid-template-areas: 
		"header header"
		"nav main"
		"nav footer";
	
	grid-template-columns: 10em 1fr; 
	grid-template-rows: min-content auto min-content;



	font-family: Luciole, Arial, Helvetica, sans-serif;

}


/* ===== Header ===== */

body > header{
	grid-area: header;
	background-color: var(--header-bg-color);
	color: var(--header-font-color);

	display:grid;
	grid-template-areas: 'home . titre sous-titre feeds';
	grid-template-columns: 10em auto min-content auto 10em;

}


.home{
	grid-area: home;
	align-self: center;
	text-align : center;
}

.home img{
	width: 3em;
}

.titre{
	grid-area: titre;
	font-weight:bold;
	font-size: 2em;
	margin-top : 0.2em;
	margin-bottom : 0.2em;

}

.sous-titre{
	grid-area: sous-titre;
	margin-left : 1em;
	margin-top : 1.2em;
}

.feeds{
	grid-area: feeds;
	place-self: center;
	margin-top: 0.1em
}

.feeds a {
	margin: 0.2em 0.3em;
}



/* ===== Navigation ===== */
body > nav{
	grid-area: nav;
	background-color: var(--nav-bg-color);
}


nav > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  
}


nav > ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 0.8em 1em;
  text-decoration: none;
}


nav > ul li:hover {
  background-color: var(--nav-bg-color-hover);
}

.active {
  background-color: var(--nav-bg-color-active) !important ;
}

/* ===== main ===== */

main{
	grid-area: main;
	padding:0 1em;
}

main article{
	margin:1em auto 2em auto ;
	/* test toc*/
	/*max-width:70em;*/
	max-width:80em;
}

main a {
	color:var(--link-font-color);
	text-decoration:none;
}

a.external-link {

  background: url("/images/external-link.svg") no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}


main a:hover {
	color:var(--link-hover-font-color);
}

main article img{
	display: block;
	max-width:100%;
	margin:1em auto;
	border:0.1em solid var(--header-bg-color);
}

main article footer{
	text-align: right;
	font-family:mono;

}

article h1{
	color:var(--article-title-color);
	font-size:2em;
	margin: 0;
	
}

article h2{
	font-size:1.5em;
	margin-top: 2em;
	color:var(--article-title-color);

}

article h3{
	font-size:1.3em;
	margin-top: 2em;
	font-weight: normal;
	color:var(--article-title-color);

}

article h4{
	font-size:1.2em;
}

article.page header div{
	/*text-align:right;*/
	color:var(--article-subtitle-color);
}

/* ===== blocs spéciaux ===== */

.index_section_title{
	text-align:center;
	font-size:1.3em;
}

.note_preview header a{
	font-size:1.6em;
	color:var(--article-title-color);
}

.note_preview header a:hover{
	color:var(--main-font-color);
}
&
.blog_preview{
	display:grid;
	grid-template-areas: 
		'image description_header'
		'image description_content';
	grid-template-columns: 10em auto;
}

.blog_preview aside{
	grid-area: image;
	padding:0 1em 0 0;
	align-self: start;

}

.blog_preview aside img{
	max-width:100%;
	margin:0;
}

.blog_preview header{
	grid-area: description_header;

}
.blog_preview blog_summary{
	grid-area: description_content;

}
.blog_preview header a{
	font-size:1.6em;
	color:var(--article-title-color);
}

.blog_preview header a:hover{
	color:var(--main-font-color);

}
.blog_preview_date{
	color:var(--article-subtitle-color);
}


/* Infobox*/
:root{
	--success-border-color:#16771e;
	--succes-bg-color:#6dd676;
	--critique-border-color:#cf0d0d;
	--critique-bg-color:#d76666;
	--attention-border-color:#d44604;
	--attention-bg-color:#d66b39;
	--info-border-color:#0860a2;
	--info-bg-color:#50a4d8;
	--box-border-size:0.3em;
	--box-font-color:#000;
}

article aside{
	border-radius : 0.4em;
	padding-left : 1em;
	padding-right : 1em;
	color:var(--box-font-color);
}
article aside p.centre{
	text-align: center;
}
article aside.indice{
	border:var(--box-border-size) solid var(--info-border-color);
	background-color: var(--info-bg-color);

}

article aside.attention{
	border:var(--box-border-size) solid var(--attention-border-color);
	background-color: var(--attention-bg-color);
}

article aside.succes{
	border:var(--box-border-size) solid var(--success-border-color);
	background-color: var(--succes-bg-color);

}



/* ===== Pagination ===== */

main > nav {
	display: block;
		text-align:center;
}
.pagination {
	display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination li {
	display: inline;
}

.pagination > .disabled > a, .pagination > disabled >  span{
	color: #777;
	cursor: not-allowed;
	background-color: #fff;
	border-color: #ddd;
}
.pagination > li > a,  .pagination > li > span{
	position: relative;
	float: left;
	padding: 6px 12px;
	margin-left: -1px;
	line-height: 1.42857143;
	color: #337ab7;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ddd;
}

.pagination > li:first-child > a, .pagination > li:first-child > span{
	margin-left: 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.pagination > li:last-child > a, .pagination > li:last-child > span{
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

/* ===== footer ===== */

body > footer{
	grid-area: footer;
	background-color: var(--footer-bg-color);
	color: var(--footer-font-color);
	text-align : center;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

body > footer a {

	color:var(--link-font-color);
	text-decoration:none;
	font-weight:bold;
}


/* ===== figure ===== */
figure img{
	max-height: 35em;
}


/* ===== table des matières ===== */
.tableau_article_index{
	display: flex;
	align-items : stretch;
}
.tableau_article_index article{
	max-width: 80em;
	margin-right: 2em;
}

.document-toc-container{
	margin-top: 0.2em;
}

.document-toc-heading{
	text-align: center;
	margin-top: 0.3em;
}

.document-toc{
	border: 0.2em solid var(--footer-bg-color);
	border-radius: 1em;
}

.document-toc ul{
	padding-left: 1em;
}

.toc{
	/*max-height: var(--max-height);*/
	margin-top: 1em;
    position: sticky;
    top: 1em;
	max-width: 20em;
	min-width: 13em;
	font-size: 0.9em;
}




/* =========SmartPhone========== */ 
@media (max-width: 1020px) {

	body{


		grid-template-areas: 
			"header"
			"nav"
			"main" 
			"footer";
		
		grid-template-columns: 1fr; 
		grid-template-rows: auto;

	}


	/* ===== Header ===== */

	body > header{

		grid-template-areas: 'home titre feeds' 
		'sous-titre sous-titre sous-titre';
		grid-template-columns: auto min-content auto;

	}

	.sous-titre{
		margin-left : 0;
		margin-top : 0;
		padding-bottom:0.2em;
		text-align:center;
	}


	.home img{
		width: 2.5em;
	}

	/* ====== Menu ===== */
	nav > ul li{
	  display: inline-block;
	}

	nav > ul li a{
	  display: inline-block;
	}
	
	/* ===== Contenu principal */
	main{
		padding:0;
	}

	main article img{
		max-width:100%;
	}


	.blog_preview{
		grid-template-areas: 
			'image' 
			'description_header'
			'description_content';
		grid-template-columns: auto;
	}

	.blog_preview header{
		margin-top:0.2em;
	}

	.blog_preview header a{
		font-size:1.4em;
	}

	.note_preview header a{
		font-size:1.4em;
	}

	.blog_preview aside img{
		margin:0 auto;
	}


	/* Table des matières*/
	.tableau_article_index article{
		margin-right: auto;
	}
	.toc-container{
		display: none;
	}

}