/***********************************************
					IMPORT DE FONT
***********************************************/
@font-face {
	/* Import Parchment */
	font-family: "Parchment";
	src:url("../../fonts/Parchment/Parchment.ttf");
}

@font-face {
	/* Import Papyrus */
	font-family: "Papyrus";
	src:url("../../fonts/Papyrus/PAPYRUS.TTF");
}
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);

/***********************************************
					GENERAL
***********************************************/
:root {
    /* --background-color:#e2e2eb; */
	--light-black : #0A0A0A;
	--dark-grey : #151515;
	--bootstrap-light-grey : #f8f9fa;
	--overload-bootstrap-blue : #c64b16;

	--bg: #48b379;
	 --white: #eee9dc;
 	--red: #f98262;
}

h1 {
	font-family: Papyrus;
}

.lien_personnalise, .lien_personnalise:hover, .lien_personnalise:visited{
	color:var(--overload-bootstrap-blue);
}

body {
	background-color:var(--dark-grey) !important;
	color:lightgray !important;
}
.contentPage {
	position: absolute;
	width:90vw;
	top:200px;
	left:5vw;
}

.nav-item a {
	color:var(--bootstrap-light-grey);
}
.border-card {
	border:solid 1px var(--bootstrap-light-grey);
	border-radius: .25rem;
}

#mentionsLegales {
	display:none;
}
/***********************************************
					ACCUEIL
***********************************************/
#carousel-accueil {
	position:relative;
	top:0;
	width: 100vw;
    height: 100vh;
}
.text-accueil { 
    border: solid 3px white;
    z-index: 50;
    position: absolute;
    width: 30%;
    height: 150px;
    margin-left: 55%;
    background-color: rgba(0,0,0,0.75);
    bottom: 50vh;
    right: 5vw;
	padding:40px;
}
/***********************************************
					PARTAGE
***********************************************/
#partage {
	position: absolute;
	right:50px;
}
/*
.boutonPartage {
	cursor:pointer;
}
#sousPartage {
	display:none;
	position:relative;
}
#sousPartage.affiche {
	display:block;
}
#sousPartage .boutonPartage {
	position: absolute;
}
#boutonFacebook {
	top: 10px;
}
#boutonInstagram {
	left: 40px;
	top: -10px;
}
#boutonCopy {
	bottom: 25px;
	left: 40px;
}
*/
/***********************************************
					HEADER
***********************************************/
.navbar-custom-color {
	background-color:var(--light-black) !important;
	color:white;
	width:100%;
	height:150px;
	position: fixed;
	left: 0;
	padding: 0;
	margin: 0;
	z-index: 1;
}
#header {
	z-index:2;
}
#header a,
#header a:visited {
	color:white;
	text-decoration: none;
}
#flamme {
	height: 150px;
	display: inline-block;
	position:fixed;
	z-index:-1;
}
#header h1 {
	display: inline-block;
}
.navbar-text img {
	height:60px;
	margin-right: 20px;
}
#sousTitre {
	position: absolute;
	bottom: -5px;
	left: 85px;
	font-size: 18pt;
	font-family: Papyrus;
}
#partageFacebook {
	position: fixed;
	top: 63px;
	right: 240px;
}
/*#blocFacebook {
	width: 390px;
	height: 170px;
	border: solid 1px red;
	background: white;
	position: fixed;
	top: 150px;
	z-index: 1;
	text-align: center;
	padding:20px;
	color:var(--light-black);
	right:50px;
	
}
#blocFacebook.hidden {
	top:-10px;
}*/
/*********************************************
					CAROUSEL
**********************************************/
#myCarousel .list-inline {
    white-space:nowrap;
    overflow-x:auto;
}

#myCarousel .carousel-indicators {
    position: static;
    left: initial;
    width: initial;
    margin-left: initial;
}

#myCarousel .carousel-indicators > li {
    width: initial;
    height: initial;
    text-indent: initial;
}

#myCarousel .carousel-indicators > li.active img {
    opacity: 0.7;
}
.carousel {
	/* position:fixed !important;
	top:-10vh; */

}
/*********************************************
					PRESENTATION
**********************************************/
.signature {
	float: right;
	width:50px;
	margin-right: 50px;
}

/*********************************************
					LISTES
**********************************************/
.card {
	background: var(--dark-grey);
	color: var(--bootstrap-light-grey);
	border: solid 1px;
	display:inline-block;
	margin:0 5px;
}
.custom-card {
	width: 35vw;
	margin:10px 30px;
}
.panel-title {
	margin-top:70px;
	padding:5px;
	border: 2px solid;
	border-image-source: linear-gradient(90deg, var(--bootstrap-light-grey),var(--dark-grey));
	border-image-slice: 1;
}
.panel-title.open {
	border-image-source: linear-gradient(270deg, var(--bootstrap-light-grey),var(--dark-grey));
}
.panel-title a {
	font-family: Papyrus;
	font-weight: bold;
	color:var(--bootstrap-light-grey);
}
.panel-title a:hover {
	text-decoration: none;
}
.fleche-accordeon {
	width:20px;
	float: right;
	transition-duration: 1s;
	margin:7px 0;
	transform: rotate(215deg);
}
.trigger.collapsed .fleche-accordeon {
	transform: rotate(0deg);
	transition-duration: 1s;
}


/*********************************************
					FICHE PROJET
**********************************************/
.form-control.custom {
	background-color: var(--dark-grey);
	color:var(--bootstrap-light-grey);
	border:none;
}



 /*********************************************
					FICHE AGENDA
**********************************************/

  /* The actual timeline (the vertical ruler) */
  .timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
  }
  
  /* The actual timeline (the vertical ruler) */
  .timeline::after {
	content: '';
	position: absolute;
	width: 6px;
	background-color: white;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -3px;
  }
  
  /* Container around content */
  .container-timeline {
	padding: 10px 40px;
	position: relative;
	background-color: inherit;
	width: 50%;
  }
  
  /* The circles on the timeline */
  .container-timeline::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 25px;
	right: -13px;
	background-color: white;
	border: 4px solid var(--overload-bootstrap-blue);
	top: 15px;
	border-radius: 50%;
	z-index: 1;
  }
  
  /* Place the container to the left */
  .left {
	left: 0;
  }
  
  /* Place the container to the right */
  .right {
	left: 50%;
  }
  
  /* Add arrows to the left container (pointing right) */
  .left::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	right: 30px;
	border: medium solid white;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent white;
  }
  
  /* Add arrows to the right container (pointing left) */
  .right::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid white;
	border-width: 10px 10px 10px 0;
	border-color: transparent white transparent transparent;
  }
  
  /* Fix the circle for containers on the right side */
  .right::after {
	left: -13px;
  }
  
  /* The actual content */
  .content-timeline {
	padding: 20px 30px;
	background-color: transparent;
	position: relative;
	border-radius: 6px;
	border:solid 1px var(--bootstrap-light-grey);
  }
  
  /* Media queries - Responsive timeline on screens less than 600px wide */
  @media screen and (max-width: 600px) {
	/* Place the timelime to the left */
	.timeline::after {
	left: 31px;
	}
	
	/* Full-width containers */
	.container-timeline {
	width: 100%;
	padding-left: 70px;
	padding-right: 25px;
	}
	
	/* Make sure that all arrows are pointing leftwards */
	.container-timeline::before {
	left: 60px;
	border: medium solid white;
	border-width: 10px 10px 10px 0;
	border-color: transparent white transparent transparent;
	}
  
	/* Make sure all circles are at the same spot */
	.left::after, .right::after {
	left: 15px;
	}
	
	/* Make all right containers behave like the left ones */
	.right {
	left: 0%;
	}
  }
 


/*********************************************
					FICHE ARTICLES
**********************************************/

.modalCustom {
	display:none;
	z-index: 2;
	position: relative;
	
}

.modalCustom.show {
	display:block;
	width: 80vw;
    height: 85vh;
    position: fixed;
    top: 10vh;
    left: 10vw;
}
#backgroundModal {
	display:none;
	z-index: 2;
	width:100%;
	height: 100%;
	position: fixed;
	top:0;
	left:0;
	background-color: rgba(0,0,0,0.8);
}
#backgroundModal.show {
	display:block;
}
.closeModal {
	position: fixed;
	top: 5vh;
	right: 5vw;
	cursor: pointer;
}

/*********************************************
					FOOTER
**********************************************/
#footer {
	position: absolute;
    bottom: 10px;
    left: 20px;
	z-index: 10;
}

/*********************************************
					404
**********************************************/
#imgPageErreur {
	width: 40vw;
	margin-left: 30vw;
	margin-top: 10vh;
	-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
	box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
}
#textePageErreur {
	font-family: Papyrus;
  	text-align: center;
}
#lienRetourPageErreur {
	font-family: Papyrus;
	color: #f8f9fa;
	border-radius: .25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	text-decoration: none;
	border: solid 1px #f8f9fa;
	width: 65px;
	padding: 2px 4px;
	margin-left: calc((100vw - 65px)/ 2);
}
#lienRetourPageErreur:hover {
	background-color: #f8f9fa;
	color: black;

}

/*********************************************
					MEDIA QUERIES
**********************************************/
@media screen and (max-device-width : 1140px) {
	#backgroundNavbarText {
		width:100%;
		height: calc(100vh - 150px);
		position: fixed;
		top: 150px;
		background-color: rgba(0,0,0,0.8);
		display: none;
	}
	#navbarText.collapse.show #backgroundNavbarText {
		display: block;
		z-index: -1;
	}
	#navbarText .navbar-nav{
		position: absolute;
		top:160px;
		left:20px;
	}
	#madeInFrance {
		display:none;
	}
}


@media screen and (max-device-width : 480px) {
  h1 {
    font-size:20pt;
  }
  .custom-card {
	  width:80%;
  }
  #mentionsLegales {
	display:block;
  } 
  #partage {
	  top:-30px;
	  right:30px;
  }
  .nav-tabs .nav-link.active {
	  border-radius: 0.25rem;
  }
}