/*----- PRINCIPAL ------*/
*{
	padding:0px;
	margin:0px;
}

body{
    font-family: 'Labrada', serif;
	background-color: #f3f3f3;
}
body#index{
	background-attachment: fixed;
	background-size:100%;
	background-image:url("index.jpg");
}
#recadrer{
	z-index:1;
	position:relative;
	width:50%;
	overflow:hidden;
	margin-left:25%;
	margin-right:25%;
	margin-top:5%;
}
.titreprincipal{
	position:absolute;
	top:67%;
	left:28%;
	color:white; 
	z-index:2;
	line-height: 1.2em;
}
.titreprincipal a{
	color:white;
}
.imgindex {
	position:absolute;
	z-index:1
}
.logoindex{
	position:absolute;
	z-index:2;
	margin-top:5%;
	margin-left:63%;
}
.logoindex2{
	position:absolute;
	z-index:2;
	margin-top:36%;
	margin-left:31%;
}
@media screen and (orientation: portrait){
body#index{
	background-attachment: fixed;
	background-size:100%;
	background-image:url("indexvertical.jpg");
}
#recadrer{
	z-index:1;
	position:relative;
	width:90%;
	overflow:hidden;
	margin-top:15%;
	margin-right:25px;
	margin-left:25px;
}
.titreprincipal{
	position:absolute;
	top:25%;
	left:20%;
	color:white; 
	z-index:2;
	line-height: 1.2em;
}
.titreprincipal a{
	color:white;
}
.imgindex {
	position:absolute;
	z-index:1
}
.logoindex{
	position:absolute;
	z-index:2;
	margin-top:20%;
	margin-left:75%;
}
.logoindex2{
	position:absolute;
	z-index:2;
	margin-top:63%;
	margin-left:31%;
}
  }
/*---Index2---*/

.titreindex{
	margin-left:50%;
	margin-top: 15%;
	font-size:1em;
}
.titreindex a{
	color:white;
}
.titreConstance{
	font-size:1.1em;
	margin-left:-3%;
}
.logo{
	z-index:99;
	position:relative;
    width:40%;
    height:40%;
    margin-left:50%;
}
@media only screen and (max-width: 600px){
.titreindex{
	margin-top:85%;
	margin-left:20%;
	font-size:1.2em;
}
.titreindex a{
	color:white;
}
.titreConstance{
	font-size:1.3em;
}
.logo{
	z-index:99;
	position:relative;
    width:50%;
    height:50%;
    margin-left:50%;
}
}

/*----- RANDOM ------*/
.random_1{
	z-index:1;
	bottom:0;
    height: 80%;
    width: 50%;
    position: absolute;
    overflow:none;
    opacity:0.6;
}
.random_2{
	z-index:1;
	bottom:0;
    height: 80%;
    width: 50%;
    left:50%;
    position: absolute;
    overflow:none;
    opacity:0.6;
}
.random_1:hover{
    opacity:0.9;
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}
.random_2:hover{
    opacity:0.9;
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}
/*-- LIENS --*/

a{
	color: black;
	text-decoration: none;
}

/*----- REFONTE ------*/
.refonte {
	background-color:white;
	width: 25%;
	margin:auto;
	margin-top: 10%;
	padding:10pt;
}
/*-- HEADER --*/
.Constance{
	font-size:20px;
}
.selected{
	text-decoration: underline;
}
.hoverhead{
	text-decoration: none;
}
.hoverhead:hover{
	text-decoration: underline;
}
.hoverheadindex{
	font-size:0.9em;
	text-decoration: none;
}
.hoverheadindex:hover{
	text-decoration: underline;
	text-decoration-color: white;
}
header{
	position: fixed;
	background-color: #f3f3f3;
	z-index:99;
	height:5%;
	width:100%;
	top:0;
	bottom:0;
	left:0;
	padding-top:10px;
	padding-left:35px;
	padding-bottom:15px;
	position: fixed;
	overflow: none;
}
#pageprincipale{
	position: fixed;
	background-color: #f3f3f3;
	z-index:99;
	height:5%;
	width:100%;
	top:0;
	bottom:0;
	left:0;
	padding-top:10px;
	padding-left:35px;
	padding-bottom:15px;
	position: fixed;
	overflow: none;
}
#pageprincipale a{
	color:black;
}

/*-- MENU --*/

.menu {
	z-index:98;
	width:15%;
	padding-left:20px;
	padding-top:1%;
	top:6%;
	bottom:0;
	left:0;
	position: fixed;
	overflow: none;
	background-color:#f3f3f3;
}
.menu-txt {
	color: black;
	margin-top:10px;
	padding-left:5px;
	font-size: 10pt;
	line-height: 20px;
}

/*--- VERSION TELEPHONE ---*/
@media screen and (orientation: portrait){

/*menu*/
.menu {
	z-index:98;
	width:20%;
	padding-left:5px;
	padding-top:1%;
	top:5%;
	bottom:0;
	left:0;
	position: fixed;
	overflow: none;
	background-color:#f3f3f3;
}
/*texte menu*/
.menu-txt {
    text-color: black;
    margin-top:10px;
    padding-right:5px;
    padding-left:5px;
    font-size: 15pt;
    line-height: 30px;
}
/*---header---*/
.Constance{
	font-size:34px;
}
.selected{
    font-size:30px;
	text-decoration: underline;
}
.hoverhead{
    font-size:30px;
	text-decoration: none;
}
.hoverhead:hover{
	text-decoration: underline;
}
.hoverheadindex{
	font-size:0.9em;
	text-decoration: none;
}
.hoverheadindex:hover{
	text-decoration: underline;
	text-decoration-color: white;
}
header{
	position: fixed;
	background-color: #f3f3f3;
	z-index:99;
	height:5%;
	width:100%;
	top:0;
	bottom:0;
	left:0;
	padding-top:10px;
	padding-left:35px;
	padding-bottom:15px;
	position: fixed;
	overflow: none;
}
#pageprincipale{
	background-color: #f3f3f3;
	z-index:99;
	height:3%;
	width:100%;
	top:0;
	bottom:0;
	left:0;
	padding-top:10px;
	padding-left:35px;
	padding-bottom:15px;
	position: fixed;
	overflow: none;
}
#pageprincipale a{
	color:black;
}
}

li {
	text-decoration: none;
	list-style-type: none;
  	padding-left:20px;
}
li:hover{
	text-decoration: underline;
}
/*-- GRILLES --*/
/*cette balise gère la taille des vignettes*/
.grille-principale{
	top:0;
	padding-top:10%;
	padding-left:30%;
	padding-right:20%;
}
.case {
	display: flex;
	position:relative;
	margin-bottom:10pt;
}

.image-grille img{
	display: flex;
}

.colonne{
	padding-left:15px;
}

.vignette{
	overflow: hidden;
	-webkit-filter: opacity(0.9) grayscale(20%);
	        filter: opacity(0.9) grayscale(20%);  
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}
.vignette:hover{
	overflow: hidden;
	-webkit-filter: opacity(0.3) grayscale(90%);
	        filter: opacity(0.3) grayscale(90%);
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}

/*ces balises gèrent le texte qui apparaît*/
.info{
	font-family: 'Labrada', serif;
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;     
	color:#fff;
	text-align:center;
	background:rgba(0,0,0,0.2);
	-webkit-filter:grayscale(0.6);
	        filter:grayscale(0.6);
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}

.info p{
	margin-top:100px;
	text-align:center;
	color:rgba(0,0,0,0);
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}
.survolvignette:hover .info p{
	color:rgba(0,0,0,1);
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}
.survolvignette .info b{
	font-size:20px;
	text-align:center;
	color:rgba(0,0,0,0);
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}
.survolvignette:hover .info b{
	font-size:20px;
	color:rgba(0,0,0,1);
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}
.survolvignette:hover .info{
	height:100%;
	background:rgba(250,250,250,0.6);
	-webkit-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}

/*--Feuillet bio--*/
body#info{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(250, 250, 250, 0.3)), url("adieu.jpg");
    background-attachment: fixed;
    background-size:100%;
    z-index:1;
}
.feuilletbio{
    margin-top:300px;
    background-color:#f3f3f3;
    position:relative;
    width:70%;
    padding-bottom:50px;
    padding-top:20px;
    z-index:10;
    color:black;
    margin-right:15%;
    margin-left:15%;
}
.bio{
    margin-top:100px;
    position:relative;
    width:60%;
    margin-left:10%;
    z-index:10;
    color:black;
    font-size:0.9em;
}
.bioen{
    color:#8b8b8b;;
    font-size:0.8em;
    text-align:left;
    position:relative;
    width:60%;
    margin-left:20%;
    z-index:10;
}
.contactflottant {
    color: black;
    background-color: #fff;
    margin-top:10%;
    margin-left:80%;    
    padding:20px;
    font-size: 0.9em;
    line-height: 20px;
    z-index:99;
    position:fixed;
}
@media screen and (orientation: portrait){
body#info{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(250, 250, 250, 0.3)), url("adieu2.jpg");
    background-attachment: fixed;
    background-size:100%;
    z-index:1;
}
.bio{
    margin-top:100px;
    position:relative;
    width:60%;
    margin-left:10%;
    z-index:10;
    color:black;
    font-size:1.7em;
}
.bioen{
    color:#8b8b8b;;
    font-size:1.6em;
    text-align:left;
    position:relative;
    width:60%;
    margin-left:20%;
    z-index:10;
}
.contactflottant {
    color: black;
    background-color: #fff;
    margin-top:10%;
    margin-left:70%;    
    padding:20px;
    font-size: 1.2em;
    line-height: 20px;
    z-index:99;
    position:fixed;
}
}