﻿

@font-face {
font-family: "ISOCPEUR PERSO";
	src: url("../fonts/isocpeur.eot?") format('embedded opentype'),
	url("../fonts/isocpeur.ttf") format('truetype'),
    url("../fonts/isocpeur.otf") format('opentype'),
    url("../fonts/isocpeur.woff") format('woff'),
	url("../fonts/isocpeur.svg#QuadrantaBold") format('svg');
/**/font-weight: normal;
/**/font-style: normal;
/**/
}	

@font-face {
font-family: "Euro Technic Extended";
	src: url("../fonts/Euro Technic Extended Regular.eot?") format('embedded opentype'),
	url("../fonts/Euro Technic Extended Regular.ttf") format('truetype'),
    url("../fonts/Euro Technic Extended Regular.otf") format('opentype'),
    url("../fonts/Euro Technic Extended Regular.woff") format('woff'),
	url("../fonts/Euro Technic Extended Regular.svg#QuadrantaBold") format('svg');
font-weight: normal;
font-style: normal;
}	

body {
    counter-reset: n1;
	position:absolute;
	/**/text-align:center;
	/**/width:100%;
	/**/margin: 0px 0px 0px 0px;
	/*border-top: 1px solid rgba(0, 0, 0, 0.9);
	/*border-right: 1px solid rgba(0, 0, 0, 0.9);
	/*border-bottom: 1px solid rgba(0, 0, 0, 0.9);
	/*border-left: 1px solid rgba(0, 0, 0, 0.9);
	/**/height:auto;
	/**/
}
.grand_titre {
    /**/font-family:"ISOCPEUR PERSO",Tahoma, Geneva,sans-serif;
	/*font-family:"ISOCPEUR",sans-serif;
	/*font-family: "Euro Technic Extended",Arial, Helvetica, sans-serif;
	/**/
	text-transform: uppercase;
    font-size: 25px;
    font-weight: lighter;
    letter-spacing: 4px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 -1px 1px rgba(130, 130, 130, 0.8);
	display:block;
	width:100%;
	margin: 10px 0 20px 0;
}

#article {
    background-color: rgba(224, 223, 223, 0.95);
	padding-left: 0px;
	margin:0 2% 0 2%;
	width:auto;
	display:block;
	/**/text-align:left;
	/**/position: absolute;
	/*position: relative;
	/**/min-height: 250px;
	/*position: absolute;
	/**/
}
#article:after{
content:"";
	border-top: 0px solid rgba(174, 174, 174, 0.84);
	border-right: 1px solid rgba(223, 223, 223, 0.9);
	border-bottom: 0px solid rgba(174, 174, 174, 0.84);
	border-left: 0px solid rgba(174, 174, 174, 0.84);
	/*border-top-left-radius:10px;*/
	/*border-bottom-left-radius:10px;*/
	height: calc(100% - 20px);
    left: calc(100% - 2px);
    position: absolute;
    display: inline-block;
    top: 10px;
    width: 1px;
	vertical-align: middle;
	/*padding:2% 0 2% 0;*/
	z-index:-10;
	box-shadow: 0px 0px 15px 5px rgba(120, 120, 120, 0.8);
}


#article .t1 {
    counter-reset: n2;
}
#article .t1 .titre:before {
    content: counter(n1, decimal) ". ";
    counter-increment: n1;
}
#article .t2 {
    counter-reset: n3;
}
#article .t2 .titre:before {
    content: counter(n1, decimal) "." counter(n2, decimal) ". ";
    counter-increment: n2;
}
#article .t3 {
    counter-reset: n4;
}
#article .t3 .titre:before {
    content: counter(n1, decimal) "." counter(n2, decimal) "." counter(n3, decimal) ". ";
    counter-increment: n3;
}

#article .titre {
    /*font-family: "Euro Technic Extended",Arial, Helvetica, sans-serif;
	/**/font-family:"ISOCPEUR PERSO",Tahoma, Geneva,sans-serif;
	/*font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	/*font-family:Tahoma, Geneva, sans-serif;
	/**/
    margin: 10px 0 5px 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 -1px 1px rgba(130, 130, 130, 0.8);
	font-size: 16px;
    letter-spacing: 2px;
	display: inline-block;
	height:1em;
}
/*
#article .titre:hover .lm {
	width: 130%;
	text-overflow:ellipsis;
	border-top: 0px solid rgba(120, 120, 120, 0.8);
	border-right: 1px solid rgba(120, 120, 120, 0.8);
	border-bottom: 0px solid rgba(120, 120, 120, 0.8);
	border-left: 1px solid rgba(120, 120, 120, 0.8);
	/*transition:width 1s ease 0s,height 1s ease 0s;
	/*white-space:nowrap;
	/*margin: 0px 0px 0px 0px;
	/*padding:0px 0px 0px 0px;
	/*
	/*color: rgba(0, 0, 0, 0.7);
	/*height:100%;
	/*opacity:1;
	/*white-space:normal;
	/*transition: width 1.5s ease 0s,white-space 0s ease 1.5s;
	/**/
}
#article .t1, .t2, .t3 {
    /*font-family: "ISOCPEUR PERSO","Century Gothic";
	/**/
    text-align: left;
	/*position:relative;*/
	top: auto;
}
#article .t1 {
    font-size: 20px;
    padding-left: 12px;
    z-index: 20;
}
#article .t2 {
    font-size: 18px;
    padding-left: 20px;
    z-index: 19;
}
#article .t2 .text {
    left: -20px;
}
#article .t3 {
    font-size: 16px;
    padding-left: 20px;
    z-index: 18;
}
#article .t3 .text {
    left: -40px;
}
#article .titre:hover  ~ .lm, #article .lm:hover {
	width: 130%;
	text-overflow:ellipsis;
	border-top: 0px solid rgba(120, 120, 120, 0.8);
	border-right: 1px solid rgba(120, 120, 120, 0.8);
	border-bottom: 0px solid rgba(120, 120, 120, 0.8);
	border-left: 1px solid rgba(120, 120, 120, 0.8);
	/*transition:width 1s ease 0s,height 1s ease 0s;
	/*white-space:nowrap;
	/*margin: 0px 0px 0px 0px;
	/*padding:0px 0px 0px 0px;
	/**/
	color: rgba(0, 0, 0, 0.7);
	height:100%;
	opacity:1;
	/**/white-space:normal;
	/*transition: width 1.5s ease 0s,white-space 0s ease 1.5s;
	/**/
}



#article .text , .lm{
	/*font-family: "ISOCPEUR PERSO",Arial, Helvetica, sans-serif;
	/**/font-family: "ISOCPEUR PERSO", sans-serif;
	/*background-color: rgba(156, 148, 148, 0.60);
	/**/background-color: none;
    font-size: 16px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: left;
     /**/position: static;
	 /*position: relative;
    /*border: 1px solid;
	/*left:100px;
	/**/display: inline-block;
	vertical-align:middle;
	width:auto;
	/*overflow-x: hidden;*/
    /*overflow-y: hidden; */
	height:0px;
	/*float:right;*/
	z-index:10;
	/**/
	/**/
}
#article .text:hover  ~ .lm{
	width: 130%;
	text-overflow:ellipsis;
	border-top: 0px solid rgba(120, 120, 120, 0.8);
	border-right: 1px solid rgba(120, 120, 120, 0.8);
	border-bottom: 0px solid rgba(120, 120, 120, 0.8);
	border-left: 1px solid rgba(120, 120, 120, 0.8);
	/*transition:width 1s ease 0s,height 1s ease 0s;
	/*white-space:nowrap;
	/*margin: 0px 0px 0px 0px;
	/*padding:0px 0px 0px 0px;
	/**/
	color: rgba(0, 0, 0, 0.7);
	height:100%;
	opacity:1;
	/**/white-space:normal;
	/*transition: width 1.5s ease 0s,white-space 0s ease 1.5s;
	/**/
}

/*
#article   .text:before {
    content: '';
    border-top: 8PX solid rgba(0, 0, 0, 0.00);
	border-left: 10px solid rgba(0, 0, 0, 0.60);
    border-bottom: 8px solid rgba(0, 0, 0, 0.0);
	border-right: 8px solid rgba(0,0,0,0.00);
	position:absolute;
	left:0px;
	vertical-align:middle;
}
*/
#article .text  p, .lm  p {
	/*font-family: "ISOCPEUR PERSO", sans-serif;
    /**/
	margin: 0px 40px 0px 40px;
	padding: 10px 0px 0px 0px;
	text-indent: 16px;
	text-align: justify;
	letter-spacing: 1px;
	/*
	/*-webkit-hyphens: auto;
	/**/-moz-hyphens: auto;
	/*-ms-hyphens: auto;
	/*-o-hyphens: auto;
	/*hyphens: auto;
	/**/
}

#article .text  p:first-letter, .lm  p:first-letter {
   font-weight:bold;
   text-transform: capitalize;
}
 #article .text  li , #article .lm li {
	/*font-family: "ISOCPEUR PERSO", sans-serif;
    /**/
	margin: 0px 40px 0px 20px;
	
}

#article  .text:after {
    content: "";
    border-top: 6px solid rgba(0, 0, 0, 0.00);
    width: 10px;
    height: 0px;
    background-color: rgba(255, 255, 255, 0.0);
    display: inline-block;
    position: relative;
    border-left: 6px solid rgba(0, 0, 0, 0.60);
    border-right: 6px solid rgba(0,0,0,0.0);
    border-bottom: 6px solid rgba(0, 0, 0, 0.0);
    left: -0px;
    vertical-align: middle;
    /*font-size: 10px;*/
    /*text-shadow: 10px -6px 0px rgba(0, 0, 0, 0.94);*/
    /*color: rgba(255, 255, 255, 0);*/
	top:-12px;
}
/*
#article .t1 .titre:after {
    content: ' En savoir plus...';
    border-top: 8PX solid rgba(0, 0, 0, 0.00);
    width: 145px;
    height: 0px;
    background-color: rgba(156, 148, 148, 0.60);
    display: inline-block;
    position: relative;
    border-left: 8px solid rgba(0, 0, 0, 0.60);
    border-right: 6px solid rgba(0,0,0,0.00);
    border-bottom: 8px solid rgba(0, 0, 0, 0.0);
    left: 3px;
    vertical-align: middle;
    font-size: 10px;
    text-shadow: 10px -6px 0px rgba(0, 0, 0, 0.94);
    color: rgba(255, 255, 255, 0);
}
*/
#article .lm {
    height: 100%;
	background-color:rgba(210, 209, 209, 0.6);
	border-top: 0px solid rgba(120, 120, 120, 0.8);
	border-right: 0px solid rgba(120, 120, 120, 0.8);
	border-bottom: 0px solid rgba(120, 120, 120, 0.8);
	border-left: 0px solid rgba(120, 120, 120, 0.8);
	border-top-right-radius:10px;
	border-top-left-radius:10px;
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
    display: inline-block;
    /**/position: absolute;
	/*position: fixed;
	/*position: relative;
	/**/
    left: 100%;
	top: 0px;
    vertical-align: middle;
    /*font-size: 10px;*/
    color: rgba(0, 0, 0, 0.7);
	text-overflow:ellipsis;
	overflow-x:hidden ; 
	overflow-y:visible ; 
	/*white-space:nowrap;
	/**/white-space:normal;
	text-align: justify;
	/*opacity:0.1;*/
	-webkit-transition:width 1.5s  0s, opacity 0.5s, border-left 1.5s,border-right 1.7s,white-space 0s 1.5s ;
	transition:width 1.5s  0s, opacity 0.5s, border-left 1.5s,border-right 1.7s,white-space 0s 1.5s ;
	/*padding:0px 0px 0px 0px;*/
	vertical-align:middle;
	
    line-height: 17px;
	opacity: 0.6;
	/*max-width:auto;*/
	/*max-height: 456px;*/
	 float: left;
	 /**/width:0%;
	 /*width:20%;
	 /**/margin-left:1px;
	 /**/-moz-hyphens: auto;
	 /**/
}

/*
#article   .lm:before {
    content: '';
    border-top: 8PX solid rgba(0, 0, 0, 0.00);
	border-left: 10px solid rgba(0, 0, 0, 0.60);
    border-bottom: 8px solid rgba(0, 0, 0, 0.0);
	border-right: 8px solid rgba(0,0,0,0.00);
	position:absolute;
	left:0px;
	vertical-align:middle;
	
}
*/
/*
#article .lm:hover {
background-color: rgba(156, 148, 148, 0.60);
width: calc(100% - 5px);
text-overflow:ellipsis;
transition:width 1s ease 0s,height 1s ease 0s;
white-space:nowrap;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 10px;
color: rgba(0, 0, 0, 0.7);
height:100%;
}
*/
#article .lm:active {
color: rgba(255, 255, 255, 0.7);
}
#article .titre img {
	height: 50px;
    opacity: 0.9;
    position: relative;
    vertical-align: middle;
	margin-right:20px;
}

#article .logo {
vertical-align:middle;
height: 1.5em;
opacity: 0.6;
}
#article a{
 color:rgba(0,0,0,0.8);
 text-decoration: none;
}
#en_construction{
	font-family: "Euro Technic Extended",Arial, Helvetica, sans-serif;
	margin: 15px 0 5px 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 -1px 1px rgba(130, 130, 130, 0.8);
	font-size: 12px;
    letter-spacing: 2px;
	display: inline-block;
	/*display:none;
	/**/
}
#en_construction:after{
	content: url(../Images/en_construction_NB.png);

}
