/*------------------------------intégration des FONTS-----------------------*/

@font-face {
    font-family: 'LatoBlackItalic';
    src: url('Lato-BlaIta-webfont.eot');
    src: url('Lato-BlaIta-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-BlaIta-webfont.woff') format('woff'),
         url('Lato-BlaIta-webfont.ttf') format('truetype'),
         url('Lato-BlaIta-webfont.svg#LatoBlackItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoBlack';
    src: url('Lato-Bla-webfont.eot');
    src: url('Lato-Bla-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-Bla-webfont.woff') format('woff'),
         url('Lato-Bla-webfont.ttf') format('truetype'),
         url('Lato-Bla-webfont.svg#LatoBlack') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoBoldItalic';
    src: url('Lato-BolIta-webfont.eot');
    src: url('Lato-BolIta-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-BolIta-webfont.woff') format('woff'),
         url('Lato-BolIta-webfont.ttf') format('truetype'),
         url('Lato-BolIta-webfont.svg#LatoBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoBold';
    src: url('Lato-Bol-webfont.eot');
    src: url('Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-Bol-webfont.woff') format('woff'),
         url('Lato-Bol-webfont.ttf') format('truetype'),
         url('Lato-Bol-webfont.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoItalic';
    src: url('Lato-RegIta-webfont.eot');
    src: url('Lato-RegIta-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-RegIta-webfont.woff') format('woff'),
         url('Lato-RegIta-webfont.ttf') format('truetype'),
         url('Lato-RegIta-webfont.svg#LatoItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoRegular';
    src: url('../fonts/Lato-Reg-webfont.eot');
    src: url('../fonts/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Lato-Reg-webfont.woff') format('woff'),
         url('../fonts/Lato-Reg-webfont.ttf') format('truetype'),
         url('../fonts/Lato-Reg-webfont.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoLightItalic';
    src: url('Lato-LigIta-webfont.eot');
    src: url('Lato-LigIta-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-LigIta-webfont.woff') format('woff'),
         url('Lato-LigIta-webfont.ttf') format('truetype'),
         url('Lato-LigIta-webfont.svg#LatoLightItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoLight';
    src: url('Lato-Lig-webfont.eot');
    src: url('Lato-Lig-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-Lig-webfont.woff') format('woff'),
         url('Lato-Lig-webfont.ttf') format('truetype'),
         url('Lato-Lig-webfont.svg#LatoLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoHairlineItalic';
    src: url('Lato-HaiIta-webfont.eot');
    src: url('Lato-HaiIta-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-HaiIta-webfont.woff') format('woff'),
         url('Lato-HaiIta-webfont.ttf') format('truetype'),
         url('Lato-HaiIta-webfont.svg#LatoHairlineItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoHairline';
    src: url('Lato-Hai-webfont.eot');
    src: url('Lato-Hai-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lato-Hai-webfont.woff') format('woff'),
         url('Lato-Hai-webfont.ttf') format('truetype'),
         url('Lato-Hai-webfont.svg#LatoHairline') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'galetteregular';
    src: url('../fonts/galette-med-webfont.eot');
    src: url('../fonts/galette-med-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/galette-med-webfont.woff') format('woff'),
         url('../fonts/galette-med-webfont.ttf') format('truetype'),
         url('../fonts/galette-med-webfont.svg#galetteregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*------------------------------Général-----------------------*/

body {
	background: #ff7260;
	font-size: 16px; 
}

.container {
	width: 1000px;
	padding-left: 48px;
	padding-right: 48px;
	background: white;
}

a { color: #4b4a49;}
.right {float: right;}
.left {float: left;}
.clear {clear: both;}


.langue, .logo_nav, .news, .flickr {
	padding: 0 ; /* suppression padding sur "row" bootstrap quand nécessaire */
}

/*--------------------------------------------------------------*/
/*                       TITRE DES SECTIONS                     */

#latest .zone_titre, 
#flux .news .zone_titre, 
#flux .flickr .zone_titre {
	position: relative;
	margin-bottom: 50px;
}

#latest .zone_titre .deco_h2, 
#flux .news .zone_titre .deco_h2, 
#flux .flickr .zone_titre .deco_h2 {
	height: 64px;
	border-bottom: 1px solid #cacaca;
}

#latest .bloc_titre {
	position: absolute;
	top : 30px;
	left : 30%;
	background: white;
}

#flux .news .bloc_titre {
	position: absolute;
	top : 30px;
	left : 35%;
	background: white;
}

#flux .flickr .bloc_titre {
	position: absolute;
	top : 30px;
	left : 18%;
	background: white;
}

#latest .sep_left, 
#flux .news .sep_left, 
#flux .flickr .sep_left  {
	background: url(../img/separateur.png) no-repeat left;
	background-position: 0 19px;
	width: 38px;
	height: 64px;
}

#latest .sep_right, 
#flux .news .sep_right, 
#flux .flickr .sep_right {
	background: url(../img/separateur.png) no-repeat right;
	background-position: -42px 19px;
	width: 38px;
	height: 64px;
}

#latest .bloc_titre, 
#flux .news .bloc_titre, 
#flux .flickr .bloc_titre {
	height: 58px;
}

#latest h2, 
#flux .news h2, 
#flux .flickr h2 {
	background: white;
	font-family: 'galetteregular';
	font-size: 17px;
	font-weight: bold;
	color: #4b4a49;
	margin: 0;
}

#latest h2 span, 
#flux .news h2 span, 
#flux .flickr h2 span  {
	font-size: 33px;
	text-transform: uppercase;
	margin-right: 20px;
	margin-left: 11px;
}



/*--------------------------------------------------------------*/
/*                       HEADER                                 */


/* >>> menu gestion de la langue */
.langue {
	font-size: 11px;
	text-align: left;
}

.langue > ul > li {
	font-family: 'LatoRegular';
	float: left;
	margin-left: 15px;
}

.langue > ul > li > a {
	display: block;
	padding: 19px 21px 9px 21px;
	background: #4b4a49;
	color: white;
}

.langue > ul > li > a:hover,
.langue > ul > li > a:focus,
.langue > ul > li > .actif {
	background: #ff7260;
    -moz-transition: all 700ms linear;
    -webkit-transition: all 700ms linear;
    -o-transition: all 700ms linear;
    transition: all 700ms linear;
    text-decoration: none;
}

.langue > ul > li > .actif {
	background: #ff7260;
}


/* >>> logo et nav principale */

.logo_nav {
	position: relative;
	padding-bottom: 26px;
	border-bottom: 1px solid #cacaca;
}

.logo_nav h1 {
	background: url(../img/logo.png) no-repeat left top;
	width: 85px;
	height: 97px;
	text-indent: -999px;
	margin : 0;
}

.logo_nav h1:hover {
	background-position: -83px 0;
}

.logo_nav > nav {
	position: relative;
	top : 68px;
	font-family: 'galetteregular';
	font-size: 18px;
}

.logo_nav > nav > ul > li {
	float: left;
	margin-left: 18px;
}

.logo_nav > nav > ul > li > a {
	display: block;
	padding-left: 47px;
	border-bottom: 1px solid #4b4a49;
}

.logo_nav > nav > ul > li > a:hover,
.logo_nav > nav > ul > li > a:focus,
.logo_nav > nav > ul > li > .actif {
	color: #ff7260;
	border-bottom: 1px solid #ff7260;
	text-decoration: none;
}

.logo_nav > nav > ul > li > .actif {
	color: #ff7260;
	padding-left: 26px;
	border-bottom: 1px solid #ff7260;
}

/*--------------------------------------------------------------*/
/*               FOOTER                                         */


footer, 
footer .container {
	background-color: #4b4a49;
	color: white;
	padding-top: 30px;
	font-family: 'galetteregular';
}

footer .word_footer {
	text-align: center;
	position: relative;
	margin-bottom: 20px;
}

footer .word_footer .big_text {
	font-size: 33px;
}

.orange {
	color: #ff7260;
}

.shadow { 	
	text-shadow: 2px 2px 2px black;
}

footer .word_footer .big_text .crochet {
	font-size: 88px;
}

footer .word_footer .medium_text {
	font-size: 18px;

}

footer .nav_footer {
	width: 666px;
	border: 1px dotted white;
	margin: 0 auto;
}

footer .nav_footer .column {
	margin: 20px;
}

footer .nav_footer .column:first-child {
	border-right: 1px dotted white;
}

footer .nav_footer .column p {
	text-transform: uppercase;
	font-size: 13px;
}

footer .nav_footer a{
	color: white;
	font-size: 12px;
}

footer .bloc_1 {
	
}



/*--------------------------------------------------------------*/
/*                      ACCROCHE                                */

#accroche {
	text-align: center;
}

#accroche p {
	font-size: 33px;
	padding: 54px 0px 54px 0px;
	font-family: 'galetteregular';
}

                     

/*--------------------------------------------------------------*/
/*                      INDEX : LATEST PROJECTS                */



#latest > ul > li > h3 {
	font-size: 14px;
	font-family: 'LatoRegular';
	text-transform: uppercase;
}

#latest > ul > li > a > img {
	margin-bottom: 10px;

}

#latest > ul > li > ul > li {
	float: left;
	margin-right: 10px;
}

#latest > ul > li > ul > li > a {
	display: block;
	padding: 2px 5px;
	font-size: 11px;
	background: #cacaca;
	color: white;
}

#latest > ul > li > ul > li > a:hover,
#latest > ul > li > ul > li > a:focus {
	background: #ff7260;
    -moz-transition: all 700ms linear;
    -webkit-transition: all 700ms linear;
    -o-transition: all 700ms linear;
    transition: all 700ms linear;
    text-decoration: none;
}

#latest .sep_bottom {
	padding-bottom: 20px;
	border-bottom: 1px solid #cacaca;
}

#latest .sep_middle {
	border-left: 1px solid #cacaca;
	border-right: 1px solid #cacaca;
}



/*--------------------------------------------------------------*/
/*                      INDEX : FRESH NEWS                */

#flux .column {
border-right: 1px solid #cacaca;
}

#flux .news p {
	font-size: 11px;
	font-family: 'LatoRegular';
}

#flux .news h3 {
	font-family: 'galetteregular';
	font-size: 21px;
}



/*--------------------------------------------------------------*/
/*                      INDEX : flickr               */

#flux .flickr ul {
	margin-left: 20px;
}

#flux .flickr li {
	float: left;
	margin-left: 14px;
	margin-bottom: 14px;
}

#flux .flickr li:hover {
	opacity: 0.5;
}