/* Scss Document */
header {
    grid-area : header;
}
nav {
    grid-area : nav;
	background-image: url("../docs/fond/background_menu.jpg");
}
body{
	/*background-image: url("../docs/fond/background_chapitre.jpg");*/
	background-color: #FFFFC5;
	color: #6E2C00;
}

article1 {
    grid-area : article1;
}

article11 {
    grid-area : article11;
	padding-left: 10%;
	padding-right: 10%;
	overflow-y: auto;
    height: 1600px;
	font: normal 16px/20px Arial, Helvetica, sans-serif;

}

aside {
    grid-area : aside;
	background-color:#020202;
	background-size: 100%;
	background-image: url("../docs/Asside/oiseaux.png");
	background-repeat : repeat-y;
}
footer {
    grid-area : footer;
}

.page {
	background-color: #FFFFC5;
    display: grid;
    grid-template-columns: 3fr 4fr 4fr 4fr 2fr;
    grid-template-areas: "header header  header header header" 
		"nav article1 article1  article1 aside" 
		"nav article11 article11 article11 aside"
		"footer footer footer footer footer"
}

li {
    list-style: none;
    margin-left: 8px;
}

header {
    top: 0px;
    text-indent: 0px;
    background-repeat: no-repeat;
}
nav {
    font: normal 22px/20px Arial, Helvetica, sans-serif;
    color: #FFDE86;
	background-color: #926D3F;
    text-decoration: none;
    text-align: left;
}

a.menu {
    font: normal 22px/20px Arial, Helvetica, sans-serif;
    color: #FFDE86;
    text-align: left;
    text-transform: none;
    margin-left: 8px;
}
a.list {
    font: normal 14px/16px Arial, Helvetica, sans-serif;
    color: #DEB37E;
    text-decoration: none;
    text-align: left;
    margin-left: 8px;
}
img.menu {
    margin-left: 8px;
}

h1.menu {
    font: normal 22px/20px Arial, Helvetica, sans-serif;
    margin-top: 20px;
    margin-bottom: 6px;
    margin-left: 8px;
}
h2.menu {
    font: normal 14px/16px Arial, Helvetica, sans-serif;
    color: #DEB37E;
    text-decoration: none;
    text-align: left;
    margin-left: 8px;
}
h3.menu {
    font: bold 11px/14px Arial, Helvetica, sans-serif;
    color: #FFFFC5;
    text-decoration: none;
    margin-left: 8px;
}

li.article {
    font: normal 22px/20px Arial, Helvetica, sans-serif;
	color: #926D3F;
    margin-left: 8px;
}
	
h1.article {
    font: normal 22px/20px Arial, Helvetica, sans-serif;
	color: #926D3F;
    margin-left: 8px;
}
h2.article {
    font: normal 14px/16px Arial, Helvetica, sans-serif;
    color: #926D3F;
    text-decoration: none;
    text-align: left;
    margin-left: 8px;
}
h3.article {
    font: bold 11px/14px Arial, Helvetica, sans-serif;
    color: #926D3F;
    text-decoration: none;
    margin-left: 8px;
}

h2.article.vignette {
    font: normal 14px/16px Arial, Helvetica, sans-serif;
    color: #926D3F;
    text-decoration: none;
    text-align:center;
    margin-left: 8px;
}

.footer_container{
    width: 100%;
	 position: relative;
   }

.footer_gif{
    position: absolute;
    z-index: 2;
    margin-left: 85%;
    margin-top: 10px;
       
    }
 .footer_fond{
   	width: 100%;
    position: absolute;
    z-index: 1; 
}





.timeline{
  margin-top:20px;
  position:relative;
  
}
.btn{
background-color: #F7DC6F;
  padding:2px 15px;
  position:relative;
  border-radius:20px;
  border:1px solid #6E2C00;
  color: #6E2C00;
text-shadow:1px 1px 1px rgba(0,0,0,0.3); 
	justify-content: center;
	float: right;
	background: radial-gradient(#F7DC6F, #F1C40F);
}

.timeline:before{
  position:absolute;
  content:'';
  width:4px;
  height:calc(100% + 50px);
background: rgb(138,145,150);
background: -moz-linear-gradient(left, rgba(138,145,150,1) 0%, rgba(122,130,136,1) 60%, rgba(98,105,109,1) 100%);
background: -webkit-linear-gradient(left, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(98,105,109,1) 100%);
background: linear-gradient(to right, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(98,105,109,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a9196', endColorstr='#62696d',GradientType=1 );
  left:14px;
  top:5px;
  border-radius:4px;
}

.timeline-month{
  position:relative;
  padding:4px 15px 4px 35px;
  background-color: #926D3F;
  display:inline-block;
  width:auto;
  border-radius:40px;
  border:1px solid #17191B;
  border-right-color:black;
  margin-bottom:30px;
	color: #F7DC6F;
}

.timeline-month span{
  position:absolute;
  top:-1px;
  left:calc(100% - 10px);
  z-index:-1;
  white-space:nowrap;
  display:inline-block;
  background-color:#111;
  padding:4px 10px 4px 20px;
  border-top-right-radius:40px;
  border-bottom-right-radius:40px;
  border:1px solid black;
  box-sizing:border-box;
}

.timeline-month:before{
  position:absolute;
  content:'';
  width:20px;
  height:20px;
background: rgb(138,145,150);
background: -moz-linear-gradient(top, rgba(138,145,150,1) 0%, rgba(122,130,136,1) 60%, rgba(112,120,125,1) 100%);
background: -webkit-linear-gradient(top, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(112,120,125,1) 100%);
background: linear-gradient(to bottom, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(112,120,125,1) 100%);

  border-radius:100%;
  border:1px solid #17191B;
  left:5px;
}

.timeline-section{
  padding-left:35px;
  display:block;
  position:relative;
  margin-bottom:30px;
}

.timeline-date{
  margin-bottom:15px;
  padding:2px 15px;
  background-color: #926D3F;
  position:relative;
  display:inline-block;
  border-radius:20px;
  border:1px solid #17191B;
  color: #F7DC6F;
text-shadow:1px 1px 1px rgba(0,0,0,0.3);
}
.timeline-section:before{
  content:'';
  position:absolute;
  width:30px;
  height:1px;
  background-color:#444950;
  top:12px;
  left:20px;
}

.timeline-section:after{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  background:linear-gradient(to bottom, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(112,120,125,1) 100%);
  top:7px;
  left:11px;
  border:1px solid #17191B;
  border-radius:100%;
}

.timeline-section .col-sm-4{
  margin-bottom:15px;
}

.timeline-box{
  position:relative;
  
 background-color:#784212;
  border-radius:15px;
  border-top-left-radius:0px;
  border-bottom-right-radius:0px;
  border:1px solid #17191B;
  transition:all 0.3s ease;
  overflow:hidden;
}

.box-icon{
  position:absolute;
  right:5px;
  top:0px;
}

.box-title{
  padding:5px 15px;
  border-bottom: 1px solid #17191B;
	color: #F7DC6F;
	font: normal 16px/20px Arial, Helvetica, sans-serif;
}

.box-title i{
  margin-right:5px;
}

.box-content{
  padding:5px 15px;
  background-color: #926D3F;
}



.box-item{
  margin-bottom:5px;
display: flex;
}
div.box-item{
 margin-top: -10px;	
margin-bottom: -15px;	
}
p.box-item{
	text-align: justify;
	color:#F7DC6F;
  font-style:italic;
  font: normal 16px/30px Arial, Helvetica, sans-serif;
    margin-top: 15px;
    margin-bottom: 6px;
    margin-right: 20px;
	margin-left: 20px;
}

.box-footer{
 padding:5px 15px;
  border-top: 1px solid #17191B;
  background-color:#784212;
  text-align:right;
  font-style:italic;
	color: #F7DC6F;
}