@charset "utf-8";
/* CSS Document */
/*---------- articleS ----------*/
.descriptif-articles { /*---------- dans la liste d'articles ----------*/
  width: 80%;
  display: block;
  margin: 0 auto;
  padding: 60px 0 0 0;
  text-align: center;
}
.descriptif-articles > h1 {
	animation: none;
	padding-right: 0;
    border-right: none;
	width: auto;
}
.articles { /*---------- dans la liste d'articles ----------*/
  width: 100%;
  display: block;
  margin: 0 auto;
  gap: 40px;
}
.articles > .post {
	background: white;
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
	box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
}
.articles > .post > .post_header {
	padding: 10px 20px 20px 20px;
	margin: 0;
}
.articles > .post > .post_content {
	padding: 0 20px 20px 20px;
	margin: 0;
}
.articles > .post > .post_photo {
	position: relative;
}
.articles > .post > .post_photo:before {
	display:block;
	content: "";
	width:100%;
	height:100%;
	max-height:40px;
	position: absolute;
	bottom: 10px;
	background: url(../img/wave-white-thick.svg) no-repeat bottom center;
    background-size: 100%;
    margin: 100px 0 0 0;
    border: none;
    outline: none;
}
.articles > .post > .post_photo > a {
	padding: 0;
}
.articles > .post > .post_photo img {
	border-radius:0;
	margin-bottom: 0;
}
.articles > .post > .post_header h2 {
	padding:0;
	margin:0;
	text-align: left;
}
.article { /*---------- article blog ----------*/
  max-width: 1600px;
  padding: 40px;
  margin: 0 auto;
}
@media (min-width: 800px) {
  .article {
    width: 80%;
    display: block;
    padding: 0;
  }
}
.post {
  width: 85%;
  margin: 0 auto 80px auto;
}
@media (min-width: 800px) {
	.post_header {
	  margin: 0 10%;
	}
}
@media (min-width: 1200px) {
	.post_header {
	  margin: 0 20%;
	}
}
.post_header h1 {
  margin-bottom: 50px;
}
.post_header h2 {
  text-transform: none;
  font-size: 22px;
  line-height: 1.3em;
	letter-spacing: 0;
  text-align: left;
  margin: 0 0 10px 0;
}
@media (min-width: 800px) {
	.post_header h2 {
		font-size:28px;
	}
}
.post_header h2:after {
  display: none;
}
.post_header h2 a, .post_header h2 a:active, .post_header h2 a:link, .post_header h2 a:visited {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.post_photo {
  text-align: center;
}
.post_photo a, .post_photo a:active, .post_photo a:link, .post_photo a:visited {
  background: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.post_photo img {
  width: 100%;
  max-width: 800px;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  margin-bottom: 50px;
}
@media (min-width: 800px) {
.descriptif-articles {
    width: 66%;
    padding: 60px 120px 0 120px;
  }
  .articles {
    display: flex;
    flex-flow: row wrap;
    align-items: start;
    align-content: space-between;
    margin: 0 auto;
    padding: 60px 120px 0 120px;
    gap: 80px;
  }
  .post {
    width: 100%;
    max-width: 70%;
    flex-grow: 1;
    margin: 0 auto 80px auto;
  }
  .post_header h2 {
    text-align: center;
    padding: 0 50px;
  }
  .article .post_header h2 {
    text-align: left;
    padding: 0;
  }
  .post_photo img {
    -moz-border-radius: 0 50px;
    -webkit-border-radius: 0 50px;
    border-radius: 0 50px;
  }
}

	
@media (min-width: 1200px) {
	.post {
		max-width: 45%;
  }
}

@media (min-width: 1855px) {
	.post {
		max-width: 30%;
  }
}

.post_detail {
  font-size: .9em;
  font-style: italic;
}
.post_detail ul {
  margin: 0 0 5px 0;
}
.post_detail li.timestamp {
  margin: 0;
}
.post_detail li.timestamp:before {
  display: none;
}
.post_content {
  line-height: 1.7em;
}@media (min-width: 800px) {
	.post_content {
  		margin: 0 10%;
	}
}
@media (min-width: 1200px) {
	.post_content {
  		margin: 0 20%;
	}
}
.post_content h2 {
  margin-top: 50px;
  font-size: 2em;
  text-transform: none;
  letter-spacing: 0;
}
.post_content h2:after {
  width: 20px;
  margin: 10px 0 20px 0;
}
.post_content .intro {
  padding: 20px;
  border: solid 5px #fff;
  font-weight: bold;
	-webkit-border-radius: 20px 0 60px 0;
	-moz-border-radius: 20px 0 60px 0;
	border-radius: 20px 0 60px 0;
}
.post_content .intro > p:last-child {
  margin-bottom: 0;
}
.post_content em {
  font-style: normal;
  background: rgba(216, 192, 24, .25);
}
.post_nav {
  display: block;
  width: 100%;
}
.post_nav .btn {
  display: block;
}
.post_nav .suivant {
  text-align: right;
}