body{

		max-width: 100%;

		height: auto;

		padding: 0;

		margin: 0;

		background-color: #ffffff;

		overflow: auto;

		font-family: 'Roboto Slab', thin; 

		font-size: 1.3em;

		letter-spacing:medium;

		line-height: 2.3em;

		color: #382e2c;

		overflow: auto;
		
		
}

/* contenants */

.logo{

		position: fixed;

		top: 0%;

		max-width: 100%;

		height: auto;
	
		background-image: url('https://www.alainboeuffilms.com/images/logo-notre.jpg');
		
		background-repeat: no-repeat;
		
		background-attachment: fixed;
		
		background-position: center center;
		
		background-size: 624px 283px;

		z-index: -1;

		overflow-x: hidden;
}

.logo-film-musique{

		position: fixed;

		top: 0%;

		max-width: 100%;

		height: auto;
	
		background-image: url('https://www.alainboeuffilms.com/images/logo-alain-films.jpg');
		
		background-repeat: no-repeat;
		
		background-attachment: fixed;
		
		background-position: center center;
		
		background-size: 642px 340px;

		z-index: -1;

		overflow-x: hidden;
}




.logo-image{

		display: block;

		margin: auto;

		border: 0;


}

div#support{
		
		position: absolute;

		top: 680px;

		left: 0px;

		width: 100%;

		height: auto;

		padding: 0;

		display: block;

		margin:auto;

		position: center;

		text-align: center;

}

.fond-blanc{
		
		position: relative;

		top: 0px;

		width: 100%;

		height: auto;

		background-color:#ffffff;

		display: block;

		margin:auto;

		position: center;

		padding-bottom: 100px;


}

.fond-trans-jaune{

		width: 80%;

		height: auto;

		background-color:#faf6e3;

		display: block;

		margin:auto;

		position: center;

		padding-top: 20px;

}

.fond-trans-rouge{

		width: 80%;

		height: auto;

		background-color:#faf6ed;

		display: block;

		margin:auto;

		position: center;

		padding-top: 20px;

}

.fond-trans-bleu{

		width: 80%;

		height: auto;

		background-color:#eeeeff;

		display: block;

		margin:auto;

		position: center;

		padding-top: 20px;

}



.support-accent{


		width: 100%;

		height:auto;

		background-color: #ffffff;

		display:block;

		margin:auto;

		position: center;
		
}

.support-accent-noir{


		width: 100%;

		height:auto;

		background-color: #ffffff;

		padding-top:150px;

		padding-bottom:350px;

		text-align: center;
		
}

.support-sousmenu{

		width: 430px;

		height:auto;

		margin-top:100px;

		margin-bottom: 100px;

		background-color: #ffffff;
				
}


/* la structure de la barre de navigantion*/

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #e0a526;
  z-index:3;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #ffffff;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 20px;
  font-family: 'Special Elite', cursive;
}


ul.topnav li a:hover {background-color: #382e2c;}

ul.topnav li.icon {display: none;}


@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:992px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  } 
}

/* fin de la barre denavigation*/


/* tooltip et son texte */

.tooltip {
    position: relative;
    display: inline-block;
   
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: #E0A526;
    color: #382e2c;
	font-size: 0.7em;
	line-height: 1.2em;
	letter-spacing: 0.1em;
    text-align: center;
    border-radius: 6px;
    padding: 10px 0;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 15%;
    margin-left: -60px;
    
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/*add arrow bottom*/

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

/* fin de tooltip et texte*/


/* contenus des contenants */

.titre1{		
	
	font-family: 'Special Elite';

	font-size:2.2em;

	color: #382E2C;

	text-align: center;

	width: 100%;

	background-color: #ffffff;

	padding-top: 20px;

	padding-bottom: 10px;


}

.titre1-presentation{		
	
	font-family: 'Special Elite';

	font-size:2.2em;

	color: #382E2C;

	text-align: center;

	width: 100%;

	background-color: #ffffff;

	padding-top: 20px;

	padding-bottom: 100px;

}
	
.titre2jaune{
	
	font-family: 'Special Elite';

	font-size:1.8em;

	color: #E0A526;

	text-align: left;

	line-height: 2em;

	width: 100%;

	background-color: #ffffff;

	margin-top: 20px;

	padding-bottom: 100px;

	padding-top: 100px;
	
}

.titre2rouge{

	font-family: 'Special Elite';

	font-size:1.8em;

	color: #C5003E;

	text-align: left;

	line-height: 2em;

	width: 100%;

	background-color: #ffffff;

	margin-top: 20px;

	padding-bottom: 100px;

	padding-top: 100px;

}

.titre2bleu{

	font-family: 'Special Elite';

	font-size:1.8em;

	color: #6787B7;

	text-align: left;

	line-height: 2em;

	width: 100%;

	background-color: #ffffff;

	margin-top: 20px;

	padding-bottom: 100px;

	padding-top: 100px;

}

.titre3{

	font-family: 'Roboto', italic;

	font-weight: bold;

	color: #382E2C;

	font-size: 1.6em;

	letter-spacing:medium;

	line-height: 2em;

	text-align: center;

}

.titre4{

	font-family: 'Roboto';

	font-weight: bold;

	color: #6787B7;

	font-size: 0.8em;

	letter-spacing:medium;

	line-height: 1.2em;

	text-align: center;

}

.titre-docu{

	font-family: 'Special Elite';

	font-weight: bold;

	font-size:1.2em;

	color: #6787B7;

	text-align: left;


}

.para-accent{

	font-family:'Special Elite';

	font-size: 1.2em;

	font-weight: bold;

	color: #c5003e;

	text-align: center;

	margin-left: 10%;

	margin-right: 10%;

	padding-top:5%;

	padding-bottom:5%;

}

.para-accent-noir{

	width: 100%;

	display: inline-block;

	margin: auto;

	position: center;
	
	font-family:'Special Elite';

	font-size: 1em;

	color: #ffffff;

	background-color: #382e2c;

	text-align: center;

	padding-top:5px;

	padding-bottom:10px;

	letter-spacing:0.2em;

	}

:hover.anchres-para-accent-noir{

	color: #E0A526;
	
	text-decoration: none;


}

:hover.anchres-claires{

	color: #ffffff;
	
	text-decoration: none;


}

.redac{		

	text-align: center;

	margin-left: 10%;

	margin-right: 10%;

	margin-top: 0;

	margin-bottom: 0;

}

#redac-contact{		

	text-align: left;

	margin-left: 10%;

	margin-right: 10%;

	margin-top: 0;

	margin-bottom: 0;

}

.num-jaune{

	font-family:'Special Elite', cursive; 

	color:#ffffff; 

	font-size:2.3em; 

	text-decoration: underline;

	text-align: center;

	background-color: #e0a526; 

	padding-left: 123px;

	padding-top: 10px;

	padding-bottom:0;

}

.num-rouge{

	font-family:'Special Elite', cursive; 

	color:#ffffff; 

	font-size:2.3em; 

	text-decoration: underline;

	text-align: center;

	background-color: #C5003E; 

	padding-left:123px;

	padding-top: 10px;

	padding-bottom: 0;

}

.num-bleu{

	font-family:'Special Elite', cursive; 

	color:#ffffff; 

	font-size:2.3em; 

	text-decoration: underline;

	text-align: center;

	background-color: #6787B7; 

	padding-left: 123px;

	padding-top: 10px;

	padding-bottom: 0;

}


.sous-num-jaune{

	font-family:'Special Elite', cursive; 

	color:#ffffff; 

	font-size:2em; 

	text-decoration: underline;

	text-align: center;

	background-color: #e0a526; 

	padding:5px;

}

.sous-num-rouge{

	font-family:'Special Elite', cursive; 

	color:#ffffff; 

	font-size:2em; 

	text-decoration: underline;

	text-align: center;

	background-color: #c5003e; 

	padding:5px;

}

.sous-num-bleu{

	font-family:'Special Elite', cursive; 

	color:#ffffff; 

	font-size:2em; 

	text-decoration: underline;

	text-align: center;

	background-color: #6787B7; 

	padding:5px;

}

.sous-num-noir{

	font-family:'Special Elite', cursive; 

	color:#ffffff; 

	font-size:2em; 

	text-decoration: underline;

	text-align: center;

	background-color: #382E2C; 

	padding:5px;

}

.graphigauche{

	float: left;

	margin-right:5px;

}

.graphidroite{

	float: right;

	margin-left:5px;

}

.graph-sous-menu{

	font-family: 'Roboto';
	
	font-weight: bold;

	font-size: 1.3em;

	color: #382E2C;

	text-decoration: underline;

	padding:0;

	text-align: left;

	line-height:1.1em;

	list-style-type:none;

	display: inline;

}

.graph-sous-menu-droite{

	font-family: 'Roboto';

	font-weight: bold;

	font-size: 1.3em;

	color: #382E2C;

	text-decoration: underline;

	padding:0;

	text-align: right;

	line-height:1.3em;

	list-style-type:none;

	display: inline;

}

/* find de contenus */

/* autres */

.asterix{

	font-size: 0.8em;

}

.detailprix{

	font-weight: bold;

	color: #6787B7;

}

.blanco{

	background-color: #ffffff;

}



/* fin autres */



/* le pied de page */

footer{
		
	width:100%; height:auto; 
		
	background-color:#6787b7;

	line-height: 1.3em;

}

.nav-pied {

    display: inline-block;

    width: 300px;

    height: auto;

	

}

.nav-pied-fin {

    font-family: 'Roboto';
	
	font-size: 0.6em;
	
	text-align:center;

	line-height:2em; letter-spacing:0.1em;

	color:#ced9e8;

}

.listepied{

	font-family: 'Special Elite', cursive; color: #ced9e8;
	
	text-align:left; 

	font-size:smaller;
	
}

.sousrubrique{

	font-family: 'Roboto Slab', thin; letter-spacing:0.2em;

	font-size:0.7em; 

	color:#b8c8de;

	list-style:none;

	text-align:left;
	
}

a{

	color:inherit;

	text-decoration:none;

}

a:hover{

	text-decoration:underline;

	color:#c5003e;

}

a:active{

	color:#382e2c;
	
}

/* fin pied de page*/