/* ========================== */
/* ==== Règles générales ==== */
/* ========================== */

body{
    background-color: black;
	overflow-x: hidden; /* Pour éviter la barre de scroll. Risqué ? */
}

nav a,
#categories,
.fblink,
.biglink,
footer a {
    text-decoration: none;
}

img {
	color: white; /* Le alt est en blanc ! */
}

/* ========================== */
/* ========= Textes ========= */
/* ========================== */

h1,
h2,
h3,
h4,
p,
strong,
a,
span{
    color:white;
}

h1,
h2,
nav a,
.fblink,
.biglink {
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

p,
a,
strong,
span,
th,
td {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

b,
strong,
th {
    font-weight: 500;
}



/* ========================== */
/* ========= HEADER ========= */
/* ========================== */

nav li{
    background-color: #222;
    border-right: 1px solid #191919;
    border-bottom: 3px solid #555;

    -webkit-transition: border-bottom 100ms ease-out;
    transition: border-bottom 100ms ease-out;
}

nav li a,
nav li span {
    font-weight: 500;
}


/* Nav spéciaux */
nav li.facebook{
    background-color: #3b5998;
    background-image: url('../img/icons/fb.png');
    background-size: 21px 41px;
    background-repeat: no-repeat;
    background-position: center center;

    border-bottom: 3px solid #1f3460;
}

nav li.facebok:hover{
    border-bottom: 3px solid #1f3460;
}

nav li.logo{
    background-color: #1A1A1A;
    border-bottom: 3px solid #131313;
}

/* Page sélectionnée en général et sur les pages catégorie et projectPage */
nav li.selected,
#categorie nav li.nav-realisations,
[data-page="categorie"] nav li.nav-realisations,
#projectPage nav li.nav-realisations,
[data-page="projectPage"] nav li.nav-realisations {
    border-bottom: 3px solid #ff9244;
}


/* Hover */
nav li:hover:not(.logo):not(.selected):not(.facebook){
    border-bottom: 3px solid #ff9244;
}

nav li:hover {
    -webkit-transition: border-bottom 200ms ease-out;
    -webkit-transition: border-bottom  200ms ease-out;
    transition: border-bottom  200ms ease-out;
}

nav li.facebook:hover {
    -webkit-transition: height 200ms ease-out;
    -webkit-transition: height  200ms ease-out;
    transition: height  200ms ease-out;
}

/* nav li:hover ~ li.selected { /* Eteindre l'élément selectionné mais SEULEMENT LES SUIVANTS !
    border-bottom: 3px solid #555;
} */


/* Intérieur */
nav li a span.icon{
    background-color: rgba(255, 255, 255, 0.2); /* COMPATIBILITE : Non fonctionnel sur IE8 */
    -webkit-box-shadow: 0 0 0 15px transparent;
    box-shadow: 0 0 0 15px transparent;

    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;

	background-size: 35px 35px;
	background-position: center center;
	background-repeat: no-repeat;

    -webkit-transition: 400ms ease-out;
    transition: 400ms ease-out;
}

.icon-contact{
	background-image: url('../img/icons/contact.png');
}

.icon-agence{
	background-image: url('../img/icons/notre-agence.png');
}

.icon-realisations{
	background-image: url('../img/icons/realisations.png');
}

.icon-boite{
	background-image: url('../img/icons/boite-a-plans.png');
}

nav li:hover a span.icon:not(.selected) {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);

    -webkit-transition: 400ms ease-out;
    transition: 400ms ease-out;
}



/* ========================== */
/* ====== Main Content ====== */
/* ========================== */
.subtitle,
.subtitle p,
.subtitle strong {
    font-weight: 500;
}

.navarrow{
    background-image: url('../img/icons/fleche-back.png'); /* Mobile first, fleche-retour.png dans mediaqueries.css */
	cursor: pointer;
}

.navarrow .backtxt{
	display: none; /* Mobile first */
}

.rightArrow{
  background-image: url('../img/icons/fleche-right.png');

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}



/* ============================ */
/* == INFORMATIONS DE PROJET == */
/* ============================ */

#viewer {
	background-color: #050505;
}

#diaporama li{
    cursor: pointer;
	background-color: #EEE;
}

#diaporama li{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
    filter: alpha(opacity=35);
    -moz-opacity: 0.35;
    -khtml-opacity: 0.35;
    opacity: 0.35;
	
	-webkit-transition: all 50ms ease-out;
    transition: all 50ms ease-out;
}

#diaporama li.selected-view{
	border-bottom: 3px solid #ff9244;
}


#diaporama li.selected-view,
#diaporama li:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

#data td {
    font-weight: 300;
}

#data .description{
    font-weight: 300;
    line-height: 1.3rem;
}

/* ========= Navigation modale ========= */
.project-navigation {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
	
	background-color: #CCC;
	border-radius: 2px;
	
	cursor: pointer;	
	-webkit-transition: all 100ms ease-out;
	transition: all 100ms ease-out;
}

.project-navigation#previous-project {
	border-right: 3px solid #FFF;
}

.project-navigation#next-project {
	border-left: 3px solid #FFF;
}

	.project-navigation .text {
		color: black;
		text-transform: uppercase;
		font-weight: 500;
		font-size: 0.9rem;
		font-family: 'Montserrat', sans-serif;
	}

	.project-navigation .icon{
		background-size: 21px 41px;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.project-navigation#previous-project .icon{
		background-image: url('../img/icons/fleche-previous.png');
	}

	.project-navigation#next-project .icon{
		background-image: url('../img/icons/fleche-next.png');
	}



/* Les hover */
.project-navigation:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
	
	background-color: #ff9244;
	
	-webkit-transition: all 100ms ease-out;
	transition: all 100ms ease-out;
}

.project-navigation#previous-project:hover {
	border-right: 3px solid #ce5f0e;
}

.project-navigation#next-project:hover {
	border-left: 3px solid #ce5f0e;
}

/* La classe inactive */
.project-navigation.inactive{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);
    -moz-opacity: 0.1;
    -khtml-opacity: 0.1;
    opacity: 0.1;
	
	background-color: #EEE; /* Car sinon .project-navigation:hover met sa couleur */
	border: none !important;
}

/* .project-navigation.inactive:hover{
	background-color: #444;
} */


/* L'image de swipe */



/* ============================ */
/* ========= AGENCE =========== */
/* ============================ */
#map .infomap {
    padding: 0.3rem;
}

#map .infomap strong,
#map .infomap span {

}

#map .infomap strong{
    font-size: 1rem;
    color: #333;
}

#map .infomap span {
    font-weight: 400;
    font-size: 0.8rem;
    color: #555;
}


/* ========== CONTACT ========== */
	.contact p,
	.contact span {
		font-family: 'Montserrat', 'calibri', sans-serif;
		font-size: 1.2rem;
		font-weight: 500;
	}

	.contact .tel .hover{
		background-image: url('../img/icons/tel.png');
	}

	.contact .location .hover{
		background-image: url('../img/icons/location.png');
	}

	.contact .mail .hover{
		background-image: url('../img/icons/mail.png');
	}


/* ========================== */
/* ========= Footer ========= */
/* ========================== */

footer a,
footer span,
footer p {
    text-decoration: none;

    font-weight: 500;
    font-family: 'Montserrat', 'calibri', sans-serif;
    letter-spacing: -0.01rem; /* New style */

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
	
	-webkit-transition: 50ms ease-out;
	
	transition: 50ms ease-out;
}

footer span{
    text-transform: uppercase;
}

footer a:hover,
footer a:active {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
	
	-webkit-transition: 50ms ease-in;
	
	transition: 50ms ease-in;
}




/* =================================================================== */
/* =================================================================== */
/* ====================== Classes générales ========================== */
/* =================================================================== */
/* =================================================================== */

/* ==== Catégories ==== */
#categories a{
    text-decoration: none;
}

#categories li{
    background-color: #ff9244;
    background-size: 100% 100%; /* COMPATIBILITE : Devrait fonctionner partout sauf IE8 */
    -webkit-transition: 300ms ease-out;
    transition: 300ms ease-out; /* COMPATIBILTE */

    background-size: cover; /* Cover en mobile & IE8, Resize sur Desktop (Mediaqueries) */

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale');

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale')";
}

.hover {
    background-color: black;
    border-bottom: 0px solid #ff9244;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
	

    -webkit-transition: 150ms ease-in-out;
    transition: 150ms ease-in-out;
}

.tile .hover{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
	
	/* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)),to(rgba(0,0,0,1)));
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.hover:hover {
	/* En border-box, la bordure est à l'intérieur et remonte le contenu ! (voulu ici) */
    cursor: pointer;
    border-bottom: 4px solid #ff9244;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
	

    -webkit-transition: 200ms ease-out;
    transition: 200ms ease-out;
}


/* === Lien Facebook & autres gros lien === */
.fblink,
.biglink {
    position: relative;
    font-size: 1rem;
}

.fblink{
    background-color: #3b5998;
    border-bottom: 5px solid #1f3460;
}

.biglink{
    color: black;
    font-weight: 400;
    background-color: #ff9244;
    border-bottom: 5px solid #88462c;
}

.fblink:before {
    content: url('../img/icons/fb.svg');
}

.fblink:active,
.fblink:hover {
    background-color: #4261a3;
}

.fblink:active{
    border-bottom: 3px solid #1f3460;
    top: 2px;
}

.biglink:active{
    top: 2px;
    border-bottom: 3px solid #88462c;
}

/* === Projets Nested === */
.tile {
    background-color: #ff9244;
}