@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


/* ----- General Settings ----- */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Work-sans', sans-serif;
	font-weight: 300;
	font-size: 100%;
}

red-text {
	/* color: #BB1800; */
	color: #b84300;
}

b {
	font-weight: 500;
}

a, a:visited {
	/*color: #c14420;*/
	color: #0076BA;
	text-underline-offset: 4px;
}

a#titre {
	/* color: #BB1800; */
	color: #b84300;
}

ul#side a {
	font-weight: 500;
}

a:hover {
	color: #000;
	transition:  color 0.5s;
}

h1 {
	font-size: 2em;
	font-weight: 500;
}

h1, h2, h3 {
	/* color: #BB1800; */
	color: #b84300;
	font-weight: 500;
}

h2, h3 {
	margin-top: 1em;
}

p, li {
	line-height: 1.6em;
	color: #666666;
	text-align: justify;
	margin: 0.5em;
	margin-left: 0em;
}
/*
#presentation_texte {
	float: left;
}*/

#photo_tete {
	display: block;
  	margin: auto;
	margin-top: 1em;
	border: #666666 2px solid;
	width: 20%;
	height: auto;
	min-width: 170px;
}

hr {
	border-top: 3px solid #0076BA;
}

/* ----- Main Settings ----- */

header {
	height: 10vw;
	display: block;
	width: 100vw;
	border-bottom: #0076BA 5px solid;
	/* background-color: rgb(0, 118, 186); */
}

header > img {
	width: 100vw;
	filter : brightness(110%);
	height: 100%;
}

main {
	display: flex;
/*	background-color: #99c0ff;*/
	width: 90vw;
	min-width: none;
	margin: auto;
}


/* ----- Menu ----- */

aside {
/*	background-color: #99ffd1;
	width: 25vw;*/
	margin-right: 2em;
}

aside h1 a {
	text-decoration: none;
}

aside ul {
	list-style-type: none;
	padding-left: 0;
}

aside ul li {
	list-style-type: none;
	line-height: 1.5em;
	text-align: center;
	font-weight: bold;
}

aside ul li a, aside ul li a:visited {
	text-decoration: none;
	color: #0076BA;
}

aside ul li a:hover {
	color: #000;
	transition:  color 0.5s;
}

/* ----- Contents ----- */

div#content {
/*	background-color: #c5ff99;*/
/*	padding: 1em;*/
	width: 80vw;
	margin-top: 19px;
}

.d1 {
	/* filter: sepia(100%) hue-rotate(180deg); */
	width: 14%;
	height: auto;
	margin-right: 4%;
	margin-left: 4%;
	min-width: 30px;
}


.sidebar {
	margin-top: 35px;
	border: none;
	width: 20vw;
	min-width: 125px;
	min-height: 700px;
}

.grid-container {
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
	display: grid;
	grid: auto / 100%;
	grid-gap: 1px;
	padding: 0px;
	background-color: #666666;
  }
  
  .grid-container > .topic {
	text-align: center;
	padding: 30px 0;
	background-color: white;
  }

  .topic > p {
	width: 80%;
	margin: auto;
	text-align: justify;
  }

  .topic > img {
	border: 2px #666666 solid;
  }

  .topic h2{
	text-align: left;
	width: 80%;
	margin-left: 10%;
  }

  .headtopic{
	width: 80vw;
	margin-top: 19px;
	display: block;
  }


  @media only screen and (min-width: 981px) {
	.grid-container {
	  grid-template-columns: 50% 50%;
	  grid-gap: 1px;
	}

	#photo_tete {
		float: right;
		margin-left: 2em;
	}
  }

  .buttonArticle::before {
	content: "\1F4DC  ";
  }

  .button, .button:visited {
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		border: solid  1px #0076BA;
		-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
		background: white;
		padding: 8px 12px;
		text-decoration: none;
		margin: 0.5em;
		white-space: nowrap;
		line-height: 3;
  }

  .button:hover {
	border: solid 2px black;
	transition: border 0.5s;
  }

.button img {
	margin-bottom: -10px;
	margin-right: 5px;
	width:30px;
	height:auto
}