/* MOBILE ONLY car IE8 sans JS a déjà sa règle dans le Layout et qu'il ne comprends pas les médiasQueries */
@media screen and (max-width : 600px){


    /* MENU */
    header,
	#projectPage header,
	.projectPage header {
        height: 6rem;
    }
	
	/* Menu aside */
	.asideopen {
		margin-top: -13px;
	}
	
   /* #projectPage header,
    .projectPage header{ /* Modale */ /*
        /* height: 110px; */
		/* height: 7rem;
    }*/
	
	#mainContent .headtitle,
	#projectContent .headtitle {
		height: auto;
		margin-bottom: 0.5rem;
	}
	
	.subtitle,
	.subtitle p,
	.subtitle strong {
		line-height: 1.75rem;	
	}

    #projectPage #mainContent{
        padding-top: 0;
    }
	
	/* #projectPage #mainContent .headtitle {
		margin-bottom: 0;
		height: 50px;
	} */

    nav li.logo{
        display: none;
    }

	nav li {
        height: 85px:
	}
	
    nav li,
	nav li.nav-realisations {
        width: 30%;
    }
	
	nav li a span.icon {
		top: 12px;
	}

    nav li.facebook{
        width: 10%;
    }
	
	/* Titre */
	.arrow {
		/* display: none; */
		height: 40px;
		width: 40px;
		background-position: 0 center;
	}
	
	.arrow.rightArrow {
		width: 35px;
	}

    /* Fallback sans redimensionnement, le Nested ne se lance pas. */
    #projectsContainer .tile{
        display: inline-block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #projectsContainer .tile .hover{
        opacity: 1;
    }

    /* Contenu texte sur une seule ligne */
    .textAndPhoto div.text,
	#data .description,
    .textAndPhoto img {
        width: 100%;
        margin: 0 0 10px 0;
        padding-left: 10px;
        padding-right: 10px;
    }
	
	.textAndPhoto .headtitle {
		margin: 0;
		padding-left: 10px;
	}
	
	.textAndPhoto .headtitle span.arrow {
		width: 35px;
	}
	
	/* Projet (En bas y'a la même règle en (max-height: 800px) */
    #viewer{
        height: 250px;
    }
	
	/* Nagvigations entre projet */
	/* .project-navigation.inactive, */
	.project-navigation {
		display: none;
	}
}

/* Encore plus petit (nav surtout) */
@media screen and (max-width : 500px){
    body header nav li span.text{
        display: none;
    }
	
	nav li{
        height: 71px;
    }
	
	nav li a span.icon {
		top: 8px;
	}
	
	/* nav li:hover, */
    nav li.facebook:hover{
        height: 85px;
    }

    nav li.facebook{
		background-size: 15px 30px;
    }
}


/* Si l'écran est plus petit que la taille max du contenu */
@media screen and (max-width : 1100px){
	
    #diaporama li{
        height: 59px;
        width: 95px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
        margin-bottom: 0px;
    }
	
	/* Centrer l'icone de vidéo */
	#diaporama li.video img {
		position: relative;
		top: 50%;
		margin-top: -16px;

		max-height: 32px;
		max-width: 24px;
	}
}


@media screen and (max-width : 1300px){
	/* Menu aside */
	.fullpage .asideopen {
		left: auto;
		margin-left: auto;
		right: 4px;
	}
}










/* DESKTOP >600px */
@media screen and (min-width : 600px){

    /* Maincontent */
    #mainContent,
    #projectContent {
        margin: 0 auto;
        padding: 0;
    }

    #mainContent.fullpage article,
    #projectContent.fullpage article,
    .fullpage #data {
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }
	
	/* Headtitle */
	#home #mainContent .headtitle { /* J'ai enlevé le white-space après l'arrow, donc je place le titre au pixel près à hauteur des blocs catégories */
		margin-left: 8px;
	}

    /* === categories page d'accueil === */
    #categories{
        margin: 0;
        padding: 0;
    }

    #categories li{
        width: 280px;
        height: 280px;
        margin: 10px;
    }

    #categories .hover {
        width: 100.5%;
        height: 100%;
        padding: 1.5rem;
    }

    #categories li{
        background-size: 100% 100%;
        -webkit-transition: 300ms ease-out;
        transition: 300ms ease-out; /* COMPATIBILTE */
    }

    #categories li:hover{
        background-size: 105% 105%;
        -webkit-transition: 300ms ease-out;
        transition: 300ms ease-out; /* COMPATIBILTE */
    }

    /* === Highlights === */
    .highlights li{
        height: 360px;
        width: 23%;
        margin: 1%;
    }

    /* === Boutons Liens === */
    .fblink,
    .biglink {
        width: auto;
    }
	
	/* Blocs contact */
    .contact {
        padding: 0;
    }
	
	/* .contact li:first-child, */
	/* En mobile first (layout.css), :first-child élargissait le bloc */
    .contact li {
        width: 31%;
        margin-left: 1%;
        margin-right: 1%;
    }

    /* === Des histoires de full-page... === */
    .fullpage article.fullpage h2,
    .fullpage article.fullpage .content {
		padding-left: 18px; /* Fonctionne mieux que 10px avec les blocs contact qui ont 1% de marge */
		padding-right: 0;
	}
	
	
	.fullpage .headtitle {
		padding-right: 0;
		padding-left: 0;
	}

}

/* DESKTOP > 1100px ! */
@media screen and (min-width : 1100px){
	#data td {
		padding-right: 50px;
	}
	
}




/* Desktop Hauteur suffisante : on adapte la hauteur */

/* Desktop Catégories */
@media screen and (min-width : 1270px){
    #categories{
        text-align: left;
    }
}


/* Si l'écran est vraiment suffisement grand */
@media screen and (min-width : 1450px){
	
	
	/* Flèche "RETOUR" desktop
	.arrow{
		background-size: 69px 37px;
	}
	
	.navarrow{
		background-image: url('../img/icons/fleche-retour.png');
	} */

    .headtitle .arrow{
        width: 150px;
        background-position: 5px center;
    }

		.navarrow .backtxt {
			display: table;
			float: left;
			width: 50px;
			margin-left: 37px;
			height: 60px;
			
			-webkit-transition: margin-left 50ms ease-out;
			transition: margin-left 50ms ease-out;
		}
	
		.headtitle .navarrow:hover .backtxt,
		.headtitle .navarrow:focus .backtxt {
			margin-left: 32px;
			-webkit-transition: margin-left 50ms ease-out;
			transition: margin-left 50ms ease-out;
		}	
	
		.headtitle .navarrow:active .backtxt {
			margin-left: 27px;
			-webkit-transition: margin-left 50ms ease-out;
			transition: margin-left 50ms ease-out;
		}

			.navarrow .backtxtchild {
				display: table-cell;
				text-align: left;
				text-transform: uppercase;
				font-weight: 600;
				font-size: 10px;


				vertical-align: middle;

				color: #ff9244;
			}

	
    .headtitle .rightArrow{ 
        background-position: 100px center;
	}
	
    .headtitle,
	.fullpage .textAndPhoto .headtitle { /* Même en fullpage TextAndPhoto reste garde le même décalage */
        position: relative;
        left: -150px;
    }
	
	.fullpage .headtitle{
        left: -136px; /* Moins décaler pour aligner le titre sur le contenu en fullpage */
    }background-size: 20px;
	
	
	.textAndPhoto .headtitle h1 {
		margin-left: 10px; /* Redécalage car le contenu a 10px de marge */
	}
	
}


/* Entre les deux */
@media screen and (min-width: 600px) and (max-width : 1400px){
	/* === Bloc texte Version sans photo === */
	.textNoPhoto div.text {
		padding-left: 5%;
		padding-right: 5%;
	}
}





/* ============================ */
/* ======== MIN HEIGHT ======== */
/* ============================ */

@media screen and (max-height: 800px){
       #viewer{
        height: 250px;
    }
}