@charset "utf-8";
/* CSS Document */


body {
	background-image : url();
	background-color : black;
	background-repeat: repeat;
	background-position: right;
	width:95%;
	margin-right:2%;
	margin-left: 3%;
	padding: 0%;
	color: darkgrey;
	overflow: visible;
}

a:link {
	text-decoration: none;
	color: black;
}
a:visited {
	color: orange;
	background-color: inherit;
	text-decoration: none;
	outline:0;
	}
a :hover{
	color: orange;
	background-color: none;
	text-decoration: none;
	outline:0;
	}


/*............................pages des blog.................................................*/

/*GALERIES...............arrière plan tableau galerie................................................*/
.filtre {background: rgba(0,0,0,.9);
    filter: sepia(1) contrast(3) blur(1px);}
.left {
    float: left;
}
.box{
    float:left;
    margin-right:20px;
}
.clear{
    clear:both;
}

.image {
border-radius: 1px / 1px;
background-size: cover;
width: 180px;
height:180px;
display: block;
    margin-left: auto;
    margin-right: auto
}
.image1 {
background: rgba(120,0,0,.6);
filter: hue-rotate(175deg);
border-radius: 1px / 1px;
background-size: cover;
width: 180px;
height:140px;
display: block;
    margin-left: auto;
    margin-right: auto
}
.image2 {
background: rgba(120,0,0,.6);
filter: sepia(1) contrast(1) blur(0px);
border-radius: 1px / 1px;
background-size: cover;
width: 100px;
height:100px;
display: block;
    margin-left: auto;
    margin-right: auto
}
#tablegalerie {
    margin-top: 0%;
    margin-left:0%;
    margin-bottom: 30%;
    float: left;
    border-spacing : 11%;
    padding-top : 0%;
    background-color: none;
}
#tablegalerie td {
    background-color: none;
    font-family: sans-serif;
    border: 5%;
    height: 170px;
    width:10%;
}
#tablegaleriecat {
    
    margin-top: -4%;
    margin-left:-3%;
    float: left;
    border-spacing : 11%;
    padding : 0%;
    background-color: none;
}
#tablegaleriecat td {
    background-color: none;
    font-family: sans-serif;
    border: 5%;
    height: 170px;
    width:25%;
}
/*GALERIES...............boîte vignettes galerie................................................*/
#vignettesgalerie {
    border-left: 5px solid black;
        border-radius : 1px / 1px;
        font: grey;
        font-size:80%;
        color: black;
    	margin:8%;
    	line-height:120%;
    	padding : 0%;
    	float : left;
        font-family: sans-serif;
        border: 0px solid white;
        vertical-align: bottom;
        box-shadow: 0px 4px 4px grey;
        background-color: white;
}
#vignettesgalerieboutik {
    border-left: 5px solid black;
        border-radius : 1px / 1px;
        font: black;
        font-size:80%;
        color: black;
    	margin:11%;
    	line-height:120%;
    	padding : 0%;
    	float : left;
        font-family: sans-serif;
        border: 0px solid white;
        vertical-align: bottom;
        box-shadow: 0px 4px 4px grey;
        background-color: #f2f2f2;
}
#vignettes {
        border-radius : 1px / 1px;
        font: black;
        font-size:80%;
        color: black;
    	margin:12%;
    	margin-top:4%;
    	line-height:155%;
    	padding : 2%;
    	float : left;
        font-family: sans-serif;
        border-right: 1px solid;
        border-bottom: 1px solid;
        vertical-align: bottom;
        box-shadow: 7px 4px 4px grey;
        background-color: white;
}

#vignettesboutik {
        border-radius : 10px / 10px;
        font: black;
        font-size:80%;
        color: black;
        margin-right:2%;
    	margin:1%;
    	line-height:155%;
    	padding : 2%;
    	float : left;
        font-family: sans-serif;
        border-right: 1px solid;
        border-bottom: 1px solid;
        vertical-align: bottom;
        box-shadow: 3px 4px 4px grey;
        background-color: white;
}
#vignettes :td{
        align: top;
}


/*-----BLOG/GALERIES.........HORS PAGE INDEX & HORS DATES : ....................................................*/

#idarticles {
    margin-bottom:0%;
    text-align: left;
font-weight: bold;
color : orange;
font-size : 110%; 
}

#titrarticles { /*-COULEUR DE TITRE.............*/
 margin-bottom:0%;
 font-weight: bold;
font-family: sans-serif;
color :black;
font-size : 150%; 
padding: 1%;
}
#titrarticlescat { /*-COULEUR DE TITRE.............*/
margin-top: -4%;
margin-bottom:-3%;
font-weight: bold;
font-family: sans-serif;
color :black;
font-size : 175%; 
padding: 1%;
}
#titrarticles a:link{
    color: #865232;
}
#titrarticles a:visited{
    color: #865232;
}




#datarticles { /*-COULEUR DE DATEE.............*/
color : grey;
font-size : 90%; 
}
.comarticles { /*-COULEUR COMMENTAIRE.............*/
font-family: Georgia, serif;
line-height: 120%;
color : #646464;
font-size : 100%; 
}
#formarticles { /*-COULEUR FORMAT/DIMENSIONS.............*/
text-align : left;
border-radius : none;
color : red;
font-size : 110%; 
}
#formarticlesgalerie { /*-COULEUR FORMAT/DIMENSIONS.............*/
margin: 4%;
background-color: #DCDCDC;
padding-left : 4%;
padding-top : 3%;
text-align : left;
border-radius : none;
color : #777777;
font-size : 95%; 
}
#formarticlesgalerie a:link {
    color: #2F4F4F;
}
#formarticlesgalerie a:visited {
    color: grey;
}
#liensarticles { /*-COULEUR de fond/ARTICLES.............*/
border-radius : 20px / 20px;
color: black;
display: block;
margin-left: auto;
margin-right: auto;
padding:4%;
background-color:#E6E6E6;
font-size : 100%;
width: 80%;
}
#musiqarticles{ /*....???.............*/
float: left;
color : yellow;
font-size : 120%;
width: 80%;    
}

#prixarticles { /*....???.............*/
font-weight: bold;
color : #0B4C5F;
font-size : 125%; 
}

#lienshtdepage { /*....???.............*/
    color : orange;
    font-size : 100%; 
}
#formarticles {
background-color:#DCDCDC;
color: black;
display: block;
margin: 5%; 
padding:4%;
color: #0B4C5F;
font-size : 100%; 
}


#tabletitre{ /*....bandeau titre du haut.............*/
text-align: left;
background-image : url(../apicture/apictures/Esperans1.jpg);
width:81%;
background-repeat: no-repeat;
    height:120px;
    line-height:139%;
    padding-left:2%;
    overflow:hidden;
    background-color: none;

}
#tableseparatif{ /*....bandeau titre du haut.............*/
background-image : url(../apicture/apictures/Esperans.jpg);
width:81%;
background-repeat: no-repeat;
    height:12px;
    line-height:190%;
    padding-left:2%;
    overflow:hidden;
    background-color: none;

}
#tabletitre td {
    
    text-align : left;
    width: 20%;
    color: white;
    font-family: sans-serif;
}
#tabletitre a:link, a:visited {
	color: black;

}


#table1 { /*....bandeau navigation horizontale.............*/
    background-color: white;
    padding-bottom: 1%;
    padding-left: 0%;
    padding-right: 15%;
	overflow: none;
	border-right: visible;
	border-left: visible;
	line-height: 98%;
}
#table1 td {
    background-color: white;
    text-align : center;
    font-family: sans-serif;
    border: none;
    width:20%;
}
/*....*/

#tablemove { /*....bandeau du scroll............*/
    line-height:90%; 
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 15%;
	overflow: none;
	border-right: visible;
	border-left: visible;
}
#tablemove td {
    	
    	text-align : left;
        font-family: sans-serif;
        border: none;
        width:20%;
}


#encadrement { /*....COULEUR DE FOND ARTICLES DATES...........*/
   
    background-color: #d0d0d0 ; 
    padding: auto;
    overflow: none;
	border-right: 5%;
	border-left: 5%;
}
#encadrement td {
    	background-color: grey; 
    	width:150%;
    	text-align : left;
        font-family: sans-serif;
        border: none;
        
}








/*............................pages index.................................................*/


#idarticlesindex { /*-COULEUR DES ID .............*/
font-family: 'Lobster', Georgia, Times, sans-serif;
font-weight: white;
color : white;
font-size : 110%; 
}

#titrarticlesindex { /*-COULEUR DES TITRES .............*/
font-weight: bold;
font-family: 'Lobster', Georgia, Times, serif;
color : #0B2F3A;
font-size : 140%; 
}
#datarticlesindex {  /*-COULEUR DES DATES .............*/
color : white;
font-size : 60%; 
}
#comarticlesindex { /*-???? .............*/
color: red;
display: block;
margin-left: auto;
margin-right: auto;  
line-height: 120%;
font-size : 150%; 
}
#formarticlesindex {  /*-???? .............*/
color : red;
font-size : 75%; 
}
#liensarticlesindex { /*-COULEUR de fond/ARTICLES.............*/
border-radius : 20px / 20px;
background-color:#E6E6E6;
display: block;
margin-left: auto;
margin-right: auto; 
padding:4%;
color : red;
font-size : 120%;
width: 80%;
}
#musiqarticlesindex { /*-COULEUR de fond/ARTICLES.............*/
display: block;
margin-left: auto;
margin-right: auto;  
float: left;
color : black;
font-size : 110%;
width: 80%;    
}
#formarticlesindex { /*-COULEUR de fond/FORMAT.............*/
border-radius : 20px / 20px;
background-color:#F5ECCE;
color: black;
display: block;
margin: 5%; 
padding:4%;
color : #0B4C5F;
font-size : 130%; 
}

#lienshtdepageindex {
    
    vertical-align: auto;
    color :grey;
    font-size : 120%; 
    font-family: serif;
}









/*.............................................................................*/


/*............................boîte générale.............seulement les contours visible......................*/

.sidebardiapo {
	background-color: white;
	line-height:120%;
	font: white;
    height: 50px;

	
}

.sidebar0t {
	background-color: white;
	line-height:80%;
	font: white;
	border-left: 5px dotted black;
	border-right: 5px dotted black;
  	float: left;
	min-width:550px;
	font-family: sans-serif;
	text-align: right;
	font-size:100%;
	width: 100%;
	margin-top: -2%;
	margin-bottom:10%;	
	margin-left: 0%;
	margin-right: 3%;
	padding-right: 6%;
	padding-left:2%;
	overflow: hidden;
	border-right: visible;
	border-left: visible;
	
}

/*TOUTES LES PAGES.........boîte arrière-plan blog...............................*/

.sidebar1 {
	width : 90%;
	border: 0px dotted black;
	margin-left : 0%;
	min-width:570px;
	float: left;	
	font-family: sans-serif;
	text-align: center;
	font-size:108%;
	background-color #e5e5e5;
	margin-bottom:50%;
	overflow: none;
	padding-left: 1%;
	padding-bottom: 10%;
	border-right: visible;
	border-left: visible;
}

/*TOUTES LES PAGES-> Bandeau haut QSQC........................................*/

.sidebar1t {
	
	width : 120%;
	max-height: 20%;
	border: 0px dotted black;
	font: black;
	min-width:400px;
	float: left;	
	font-family: sans-serif;
	text-align: left;
	font-size:92%;
	margin-top: 0%;
	margin-left:-2%;
	margin-right:0%;
	margin-bottom:-1;
	padding-top:0%;
	padding-left:0%;
	padding-right: 2%;
	overflow: none;
	border-right: visible;
	border-left: visible;
}

.sidebara {
    border-radius : 20px / 20px;
    background-image: none;
	background-color: white;
	width :34%;
	min-width:500px;
	float: left;	
	font-family: sans-serif;
	text-align: left;
	font-size:110%;
	line-height:130%;
	margin-top: 0%;
	margin-left:3%;
	margin-right:0%;
	margin-bottom:-1%;
	padding-top:0%;
	padding-left:3%;
	padding-right: 15%;
	padding-bottom: 1.5%;
	overflow: hidden;
	border: none;
}

.sidebarcategories {
    border-radius : 20px / 20px;
	background-color: white;
	width :70%;
	min-width:500px;
	float: left;	
	font-family: sans-serif;
	text-align: left;
	font-size:110%;
	line-height:160%;
	margin-top: -2%;
	margin-left:3%;
	margin-right:0%;
	margin-bottom:30%;
	padding-top:0%;
	padding-left:5%;
	padding-right: 15%;
	padding-bottom: 1.5%;
	overflow: hidden;
	border: none;
}
.sidebarater {
    
    border-radius : 20px / 20px;
	background-color: orange;
	width : 50%;
	border: 0px dotted black;
	min-width:500px;
	float: left;	
	font-family: sans-serif;
	text-align: left;
	font-size:100%;
	margin-top: 2%;
	margin-left:2%;
	margin-right:2%;
	margin-bottom:-1%;
	padding-top:0%;
	padding-left:2%;
	padding-right: 0%;
	padding-bottom: 1%;
	overflow: none;
	border-right: visible;
	border-left: visible;
}


.button{
	border: dashed;
	float:right;
	margin-right:25%;
	height: 50px;
	}

/*--[index]--*/
.conteneurbox
{
	font-family: sans-serif;
	padding-left: 0%;
	float:left;
	width: 100%;
	max-width: 1500px;
	min-width: 200px;
	background-color: #fff;
	margin-left: 2%;
	margin-right: 0%; 
	overflow: visible; 
	margin-top: 0%;
}

.sidebar1i {
    border-radius : 2px / 2px;
	min-width:100px;
	line-height:133%;
	float: left;
	font-family: sans-serif;
	font: white;
	float: left;
	text-align: center;
	font-size:110%;
	width: 17%;
	background:white;
	overflow: hidden;
	margin-top: 0%;
	margin-right: 1%;
	padding-left: 0%;
	padding-right: 0%;
	padding-bottom:10%;
	border-left: 2px solid grey;
	border-left: visible;
}
.sidebar2i {
    border-radius : 20px / 20px;
	height:0%;
	min-width:100px;
	font-family: sans-serif;
	float: left;
	text-align: left;
	font-size:120%;
	width: 18%;
	background: #fff;
	overflow: hidden;
	padding-left: 1%;
	border-right: dotted black;
	border-left: visible;
}

.sidebarmove {
    line-height:160%;
    border-radius : 0px / 0px;
	background-color: white;
  	float: right;
	min-width:320px;
	position: fixed;
	font-family: sans-serif;
	text-align: center;
	font-size:92%;
	width: 20%;
	margin-top: -5%;
	margin-bottom:5%;
	margin-left: 18%;
	padding: 0%;
	padding-right : 0% ; 
	overflow: visible;
	box-shadow: 0px 4px 4px grey;


}


/*.............................................................................*/


h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* la suppression de la marge supérieure résout un problème où les marges sortent de leur div conteneur. La marge inférieure restante l'éloignera de tout élément qui suit. */
	padding-right: 2%;
	padding-left: 2%; /* l'ajout de la marge intérieure aux côtés des éléments à l'intérieur des divs, et non aux divs proprement dit, évite le recours à des calculs de modèle de boîte. Une autre méthode consiste à employer une div imbriquée avec marge intérieure latérale. */
	font-family: "Calibri", sans-serif;
	font-style: normal;
	font-weight: bold;
	margin-bottom: 2%;
	}
	figcaption
{
    padding-top: 0%;
    margin-bottom:0%;
    margin-left: 0%;
	text-align:left;
	font-family:"Times New Roman", Times, serif;
}
	
.h1s {
	font-size : 95%;
	text-align:left;
	padding: 0%;
	font-family:"Times New Roman", Times, serif;
	font: #FFF ;
}
.h1b {
	font-size : 100%;
	text-align:left;
	padding: 1%;
	font-family: Times, serif;
	font: #FFF ;
}

h20 {
	font-size: 3em;
	font: #000;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

hr {
    border: 2px solid black;
    border-top: 0px;
    color: black;
    overflow: visible;
    text-align: center;
    height: 5px;
    width: 100%;
    float: left;
}
hr.new1 {
    border: 2px solid black;
    border-top: 0px;
    color: grey;
    overflow: visible;
    text-align: center;
    height: 5px;
    width: 100%;
}


a img { /* ce sélecteur élimine la bordure bleue par défaut affichée dans certains navigateurs autour d'une image lorsque celle-ci est entourée d'un lien. */
	border: 2px;
}

/* ~~ La définition du style des liens de votre site doit respecter cet ordre, y compris le groupe de sélecteurs qui créent l'effet de survol. ~~ */







__


.content { margin-right: -1px; } /* cette marge négative de 1px peut être placée sur n'importe quelle colonne de cette mise en page, avec le même effet correcteur. */
ul.nav a { zoom: 2; }  /* la propriété de zoom donne à IE le déclencheur hasLayout requis pour corriger les espaces blancs supplémentaires entre les liens */