@charset "UTF-8";
/* CSS Document */
/*
1. GENERAL
2. STYLES TEXTE
3. CONTENU

*/
		
/*------------ 1. GENERAL ------------------*/
body {
  padding-top: 0px;
  font-family: 'Raleway', Arial, sans-serif; font-weight:400;
  font-size: 15px; color:black;
  margin-bottom: 60px;/* Margin bottom by footer height */
  /*background-image:url(../imgs/stripe_4.png); background-repeat:repeat;*/
  background-color:white;
  --MaCouleur: #d4ab49;/* Ma variable de couleur */
}

html {
  position: relative;
  min-height: 100%;
}


.footer {
  position: absolute; z-index:200;
  bottom: 0; width: 100%;
  height: 60px; /* fixed height of the footer*/
}
.margetop{
		margin-top:95px;
}
@media (max-width: 767px) {
	.margetop {margin-top:80px;
	}
}
.container {
  clear:both;
  position: relative;
  width: auto; max-width: 990px;
  padding: 0 15px;
  min-height:60px; /*hauteur footer*/
}
.containermax {
  position: relative;
  width: auto; max-width: 990px;
  margin-left: auto; margin-right: auto;
  background-color:white;
}
.container-fluid {
	position: relative; float:left; left:-15px; 
 	height:auto; width: auto; max-width: 990px;
	padding:0; marging:0; padding-bottom:20px; 
	text-align:left;
}
.container-center {
	position: relative;
	display: block;
	align-content: center; text-align: center;
	float: center;
	width: auto; height: auto;
	max-width: 990px;
	padding: 0px;
	padding-bottom: 20px;
	marging: auto;
	left: 0px;
}

#Contenu img{
		max-width: 100%;/* -> pour limiter la taille à la largeur du parent*/
    	height: auto;/* -> pour conserver le ratio, même si un attribut height est précisé dans le code HTML*/
    	width: auto;/* -> pour corriger un bug sur IE8 (eh oui, ils sont partout !)*/
    	box-sizing: border-box;/* -> pour limiter à 100% de la largeur, même si des paddings ou bordures sont appliquées à l'élément*/
}
.imgresponsive {
	max-width: 100%;
    height: auto; width: auto;
}
@media (max-width: 767px) {
	.nosmartphone {display:none!important;}
}


		
/*------------ 2. STYLES TEXTE ------------------*/
a, a:hover, a:focus, a:link, a:visited{color:black;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a {text-decoration:none;}
a {transition: color 0.2s linear 0s;}
a:hover{text-decoration:underline;}
h1, h2{ text-transform: uppercase;clear:both;font-family: 'Raleway', sans-serif;font-weight: 400;}
h3{ text-transform: uppercase;font-family: 'Raleway', sans-serif;font-weight: 400;}

h2{	font-size:20px;line-height:30px; background-color:black; color:white; padding-left:5px;border-bottom:1px solid black; margin-top:30px;}
h3{	font-size:20px;line-height:16px; padding-bottom:10px;border-bottom:1px solid #999999;}
u {color:var(--MaCouleur);}

.gris{	color:#999999;}
.lead {font-size: 20px;color:var(--MaCouleur);}
h1{ font-size:26px;line-height:normal; color:var(--MaCouleur);text-align: center;padding-bottom: 10px; }
.smalltext{font-size:0.9em;}
.container .text-muted {margin: 10px 0;}
.textdroite{ text-align:right; padding:0;}
.soustitre{ color:#666; font-size:16px;text-transform: uppercase; padding-top:-20px; padding-bottom:10px;font-family: 'Raleway', sans-serif;font-weight: 700;}
.presence{display: inline-block; height:auto; min-width:350px;}
.footer .text-muted, .footer .text-muted a {color:#999999; font-size:11px;border-top:1px solid #999999; line-height:20px;}
.back{font-size:12px;}
a:hover .back{color:var(--MaCouleur);text-decoration-color:var(--MaCouleur);}
.back a:hover {text-decoration-color:var(--MaCouleur);}

blockquote {
    border-left: 3px solid black;
    font-size: 16px; font-style:italic;
    margin-top: 40px; padding: 5px 20px;
}


/*------------ 3. CONTENU ------------------*/
#logo {
    position: absolute; float:left; left:15px; top: 10px;
    width:250px; height:auto; z-index:300;}

@media (max-width: 767px) {/*smartphone*/
	#logo {width: 190px; height:auto;}
}


.celluleportfolio{ 
	display:inline-bock; position:inherit;
	float:left;
  	min-width: 262px;
	text-align:center;
	margin-left: auto; margin-right: auto;
	padding:0 15px; margin-bottom:15px;
	width: 33.3333%;
	}
.celluleportfolio p, .celluleportfolio h2{ 
  	min-width: 262px;text-align:left;
	}
.celluleportfolio h2 { margin-top:10px; font-size:18px;}
.celluleportfolio P { margin-top:-5px; font-size:12px;}
.celluleportfolio img { display: inline; margin: 0px; padding:2px; border: 1px solid #999;}
.celluleportfolio a:hover img{ border:1px solid; border-color:var(--MaCouleur);}
.celluleportfolio a { display: block; position: relative; }
.celluleportfolio a:hover { text-decoration:none; color:white;}
.celluleportfolio h2 a { color:white; }
.celluleportfolio h2 a:hover { color:white; }
.celluleportfolio a:hover~h2, .celluleportfolio h2:hover { background-color: var(--MaCouleur);border-bottom-color: var(--MaCouleur) ;}


.celluleportfolio i{ 
	position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 20px;
    border-radius: 50%;
    font-size: 1.8em;
	color:white;
    /*box-shadow: 0 0 0 0.8em transparent;*/
    background: rgba(255,255,255,0.1);
	background:#000000;
    transform: translate3d(0, 0, 0);/* Make the font smoother for Chrome */
    /*transition: box-shadow .6s ease-in-out;*/
	}

@media (max-width: 920px) {
	.celluleportfolio { width: 50%;}	
}
@media (max-width: 610px) {
	.celluleportfolio { width: 100%; height:auto;padding-top:20px;}
	.celluleportfolio p{ padding-bottom:10px; }	
}

/*
.bandeau-top {
	height: auto;
	float:center; text-align:center;
	display:block; padding: auto;
  	width: auto; max-width: 960px;
  	margin-left: auto; margin-right: auto;
	border-bottom:1px solid #999999;
	margin-top:95px;
	}
.bandeau-top p{	border-top:1px solid #CCCCCC;}
@media (max-width: 767px) {
	.bandeau-top {margin-top:80px;
	}
}
*/

.imggauche{float:left; padding-right:15px; width:auto;}	
.imgmax{border:1px solid #CCCCCC;}	
#margegauche{display:inline-block; float:left; width:100%; padding-top: 10px;padding-bottom:20px;}
/*#accueilG{
	display:inline-block; float:left; width:100%;padding-bottom:20px;}*/

.droite{
	display:inline-block; position:relative; width:100%;
	clear:none;
	}
	
@media (min-width: 768px) {/*grand ecran uniquement*/
	#margegauche{
		width: 250px;
		height: auto;
		position: absolute; float: left; left:15px;top:70;
		z-index:101;	vertical-align: top; margin-right:15px;
		}
	.droite{
		width:100%;
		position: relative;
		z-index:100; padding-left:260px;
		padding-bottom:5px;
		}	
}
@media (min-width: 1280px) {
	#margegauche{
		left:50%;
		margin-left:-480px;
	}	
}

#gototop{font-size: 12px; color: black; float:right; padding-bottom:75px; padding-right:10px;}
#gototop a{text-decoration:none;color: #999999; transition: all 0.4s ease 0s;}
#gototop a:hover{text-decoration:none; color: black; }
@media (min-width: 990px) {
	#gototop{right:50%; margin-right:-490px;}
}
	
/*.lireplus{width:100%;}
a.btlireplus{cursor: pointer;}*/
 
.blocvignette {
    margin: 0px 5px;
    padding: 5px;
    border: 1px solid #fff;
    height: auto;
    width: auto; max-width:285px;
    float: left;
    text-align: center;
	color:#333; font-size:12px;
}
.blocvignette img, .projet img {
    display: inline;
    margin: 0px; padding:2px;
    border: 1px solid #ccc;
}
.blocvignette a:hover img{ border:1px solid black;}
.blocvignette a { display: block; position: relative;}

.choixportfolio{
	min-height:330px; text-align:left;
	margin: 0px 15px; padding: 0px; width:270px;
}
.choixportfolio a{ text-decoration:none;width:260px;}