/* CSS Document */

@font-face {font-family : "compagnon"; font-style: normal; src : url("../webfonts/Compagnon-Roman.woff") ;}
@font-face {font-family : "compagnon-italic"; font-style: italic; src : url("../webfonts/Compagnon-Italic.woff") ;}
@font-face {font-family : "compagnon-medium"; font-style: medium; src : url("../webfonts/compagnon-medium.woff") ;}



 



















h1{
    font-family: 'compagnon';
	font-size: 12px;
    color:black;
    line-height: 1.4;
	margin: 20px;
    top: 40px;
    position: relative;
    max-width: 600px;
    min-width: 200px;

    }

.infosSMALL { display:none;}



a:link{color: black;}
a:visited{color: black;}
a:hover{color:#027F4F;}



.recherches{

    display: inline-flex;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 140px;
}


body {cursor:crosshair; background-color: #F8F8FF;} 
h1 a:hover {cursor:crosshair; }

.texte a:hover {cursor:pointer; }

/*
body{
	overflow-y: hidden;
}


/* Articles */
.articles{
font-family: 'compagnon';
font-size: 12px;
line-height: 1.3;
    
position:absolute;
width: 95vw;
padding-bottom: 150px;
margin-top:100px;


}






	/* Métas - indications */

		.metas {
		position: relative;
		justify-content: center;
		font-size: 14px;
		line-height: 30px;
		color: #000;
		white-space: nowrap;
		border-top-style:dotted;
		border-top-width: thin;
            border-top-color: cornflowerblue;
        margin-right: 10px;
        padding-top:4px;
            width: 95vw;

		}

		.metasBIS {
        position: relative;
		justify-content: center;
		font-size: 13px;
		line-height: 30px;
		color: #000;
		white-space: nowrap;

		border-top-width: thin;
        width:800px;  
            padding-top:3px;
            
            width: 95vw;
		}

		.metas div {display:inline-block; max-width: 95vw; position:inherit ;  }
        .metasBIS div {display:inline-block; font-family: 'compagnon'; color:cornflowerblue; max-width: 95vw; }

.date {width:5vw; color:darkgray;}
.categorie {width: 15vw; color:darkgray;}
.partenaire {width: 20vw ; font-family: 'compagnon-italic';}
.description {width: 50vw;}


		.metas:hover{color:#8A2BE2;}




	/* Contenu des articles */
.contenu{
	text-align:left;
    max-width: 90vw;
}

.texte{
	/*position:static;*/
	max-width: 500px;
    padding-top: 40px;
    padding-bottom: 40px;
    color:darkgray;
	}



	/* Images dans les articles */

    

.images{

	overflow-y: hidden;
	display:flex;
    position: relative;

    cursor:;
    margin-left: vw;
    padding-bottom: 10px;
}


.imagescontenu {height: 350px; padding-right: 8px;}




.videomobile{
	margin-left: 20px;	
}















/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

	/* scrollbar 

::-webkit-scrollbar { width:20px; }
::-webkit-scrollbar-track { background-image: linear-gradient(to right, bisque, aquamarine); }
::-webkit-scrollbar-thumb { background-color:rgba(255, 255, 255, 1); }
::-webkit-scrollbar-button { background-color:#6075FF; }
::-webkit-scrollbar-corner { background-color:aquamarine; }
*/




::-webkit-scrollbar { width: 5px; height: 8px; padding-bottom: 10px;}
::-webkit-scrollbar-track { background-color:lightgray; }
::-webkit-scrollbar-thumb { background-color:darkgray; }
::-webkit-scrollbar-button { background-color: whitesmoke; }
::-webkit-scrollbar-corner { background-color:white; }



.infos {
    position: fixed;
    display: inline-block;
    font-family: 'compagnon';
    color: cornflowerblue;
	font-size: 13px;
    top: 5px;
    background-color: white;
    }


#info1 {left: 25px; color: cornflowerblue}
#info2 {left: 25vw;}
#info3 {left: 50vw;}
#info4 {right:15px;}




/**
p{
    font-family: 'compagnon-medium';
    font-size: 14px;
    margin-left: 40px;
    margin-top: 50px;
}

**/




/** info-bulle !!!!! **/
 
 
.metas span
{
  display:none;
 
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background:white; 
}
 
 
.metas span img
{
  text-align: center;
  margin:0px 0px -8px 0px;
  width: 200px;
    border-radius:6px;
}
 

.metas:hover span{
    display:block;
    float: right;
    right: 30px;
    top: 40px;
    position: fixed;
  z-index:1000;
  border:1px solid #8A2BE2;
  overflow:hidden;
  padding:8px;
}



#info1 span
{
  display:none;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:cornflowerblue;
  background:white; 
}
 
 
#info1:hover span{
    display:block;
    margin-left: 0px;
    margin-top: 30px;
    position: fixed;
  z-index:2000;
  background-color: white;
  width:320px;
   height:auto;
  border:1px solid cornflowerblue;
  overflow:hidden;
  padding:8px;
}


 
#info2 span
{
  display:none;
 
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:cornflowerblue;
  background:white; 
}
 
 
#info2:hover span{
    display:block;

    margin-left: 0px;
margin-top: 30px;
    position: fixed;   
  z-index:2000;
  background-color: white;
  width:320px;
  height:auto;
  border:1px solid cornflowerblue;

  overflow:hidden;
  padding:8px;
}

#info3 span{
  display:none; 
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:cornflowerblue;
  background:white; 
}
 
 
#info3:hover span{
    display:block;
    margin-left: 0px;
    margin-top: 30px;
    position: fixed;
  z-index:2000;
  background-color: white;
  width:320px;
  height:auto;
  border:1px solid cornflowerblue;
    color:cornflowerblue;
  overflow:hidden;
  padding:8px;
}







   /* Responsive petit écran */

@media only screen and (max-width: 600px) {

    body {position:absolute; left: 0; right: 0;}    
.h1{
    max-width: 90vw;
    position: absolute;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    }
    
.recherches{

    margin-right: 0px;
    margin-left: 10px;
    display:contents;
    width : 80vw;

}

    .metasBIS {display: none; }
    
.metas:hover span{display:none;}  
    
.metas {

		font-size: 16px;
		line-height: 20px;
		display:contents;
        width:80vw;
        white-space:normal;
    margin-right:10px;
		}

.date {width:90vw; padding-bottom: 20px; }
.categorie {width:90vw; font-family: 'compagnon';}
    .date, .categorie {color:#c2d9ff; font-size: 14px;}
.partenaire {width:90vw; font-family: 'compagnon'}
.description {width:90vw;  font-family: 'compagnon-medium'; border-top-style:dotted; border-top-width:thin; padding-top: 2px; }
    
    
		.metas div{
			flex-wrap:wrap; 
    width: 100%;}
    
    .images img {height: 320px; width: 100%; height: auto;}
    .images {width: 90vw; margin-left: 0; display:block;}
    

    .infosSMALL{
        position:relative;
        display:block;
        color: cornflowerblue;
        width:80vw;
        font-family: 'compagnon';
    color: cornflowerblue;
	font-size: 13px;
    top: 5px;
}
    
    .infos{position:absolute; display: block;}
    #info1{ left: 5px; }
    #info2{ left: 40vw; display: none;}
    #info3{ display:none;left: 50vw;}
    #info4 {display: none;}
 
    #info1:hover span{ left: 20px; max-width: 80vw ; height: 85vh;}
    #info2:hover span{ left: 20px; max-width: 80vw ; height: 85vh;}}
    #info3:hover span{ left: 20px; max-width: 70vw ;}
    
    
}

 /* FIN responsive petit écran */