@charset "utf-8";
/**
 *
 * Generic CSS for CakePHP
 *
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @package       app.webroot.css
 * @license       http://www.opensource.org/licenses/mit-license.php MIT License
 */


/** General Style Info **/

@font-face {
	font-family: 'aaarghnormal';
	src: url('/fonts/aaargh-webfont.eot');
	src: url('/fonts/aaargh-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/fonts/aaargh-webfont.woff2') format('woff2'),
		 url('/fonts/aaargh-webfont.woff') format('woff'),
		 url('/fonts/aaargh-webfont.ttf') format('truetype'),
		 url('/fonts/aaargh-webfont.svg#aaarghnormal') format('svg');
	font-weight: normal;
	font-style: normal;
}
body {color:#fff; font-family: 'aaarghnormal'; font-size:90%;  overflow-x: hidden; margin: 0;background-image:url("/img/fond-samia.jpg") ; 
-webkit-background-size: cover; 
background-size: cover; line-height:1.8em;text-align:justify}

#global {width:100%;height:100%;padding-top:7%}
#contenu {background-color:#171513;width:80%;   margin-bottom:50px;padding-bottom:0px;
	position: absolute;left: 50%; 
	margin-left: -40%;}
#diaporama {float:right;text-align:right;margin-top:-200px;margin-bottom:3em;width:65%;height:65%;overflow:hidden}
#diaporama img {width:85%}
#diaporama .home { width: 85%; height:65%;float: right;margin-top:10px;}
#presentation {float:left;width:100%;margin-top:10px;}			
.titre-presentation{text-align:right;font-style:normal;font-weight:normal;font-size:34px;width:100%;}
.voirlesphotos{text-align:right;font-style:normal;font-weight:normal;font-size:18px;margin-top:15px;width:100%;}
.voirlesphotos a{padding-left:30px;background-image:url("/img/voirlesphotos.png");background-position: left 0px top 0px; background-repeat:no-repeat}
.contenu-presentation{margin-top:100px;    margin-bottom: 50px;}
#actualite {float:left;width:100%;margin-top:2em;}
a {
	color: gray;
	text-decoration: none;
	font-weight: bold;
	transition: all 0.3s;
}

a:hover {
	color: lightgray;
	text-decoration:none;



}

ul, li {
	margin: 0 0px; line-height:1.2em
}

li {  vertical-align: middle;	list-style-type: none; margin:0 0 0.5em 0;				transition: all 0.3s;
}	


li:nth-child(even) {
	color: #2d2824;
}
#menu { float:left;$$padding-top:35px;  z-index: 2; position: absolute;text-align:left;font-size:1.4em;}
.stop_float {clear:both}
#titre{font-size:170%;  padding: 20px 20px 0 30px;width:50%}
#titre h1 {line-height:120%}
#titre h3 {margin-left:15px}
	
	


/* wrapper styles */
.wrapper {
  position: relative;
  min-height: 100vh;
}
/* small screens styles */
@media (max-width: 1200px) {
	#diaporama {margin-bottom:1em;width:65% !important;margin-top:-175px;height:1% !important}
		#diaporama .home {width:85%}
	#titre  {font-size:130% !important;padding-right: 0px;}
	#menu { font-size:1.2em; !important;}
	.wrapper {
	padding: 0.8rem !important}
	.tableaudemipage {position:relative !important;width:100% !important;float:left !important;margin-bottom:50px;}

	 .fancybox-wrap {width:90% !important}
	 
}

			
/* small screens styles */
@media (max-width: 1000px) {

	.sidebar {
	position: absolute;
	top: 0;
	width: 50vw;
	min-height: 100vh;
	}
	.wrapper {
	transform: translateX(0) translateZ(0);
	transition: transform .2s;
	will-change: transform;
		padding: 0.8rem !important
	}

	#diaporama {margin-top:0px;margin-bottom:0px;width:100% !important}
	#global {$$$padding-top:12% !important}
	#contenu {width:100%;margin:0px !important;left:0%;padding-top:0px;text-align:left;}
	#diaporama .home {width:100%}

	#diaporama img {width:100%}
	 #social-buttons {display:none}
	#menu {margin-top:260px;z-index: 0; font-size:1.3em;}
	ul {
		margin-left:-10px;
	}
	#titre {padding-bottom:0px;font-size:160% !important;} 


	/* Button deco */
	[class^="nav-button"] {
	display: block;
	z-index: 1;
	height: 3.5rem; width: 3.5rem;
	background-color: transparent;
	background-image:  linear-gradient(to right, #993300, #993300),
	  linear-gradient(to right, #993300, #993300),
	  linear-gradient(to right, #993300, #993300);
	background-position: center top, center, center bottom;
	background-repeat: no-repeat;
	background-size: 4rem 0.8rem;
	padding: 0;
	outline: 0;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color:rgba(0,0,0,0);

	}

	/* here's goes the push left effect */
	body:target .wrapper {
	transform: translateX(50vw);
	}
	.nav-button-close,
	body:target .nav-button-open {
	display: none;	
	}
	.nav-button-open,
	body:target .nav-button-close {
	display: block;
	margin-bottom:10px;
	position:fixed;
	top:0%;
	left:0%;
	z-index:999999;
	}

	.titre-presentation {line-height: 1em;}
	
	iframe { width:100%} /* pour les vidéos*/



} /* end of small screen media query */	


/* small screens styles */
@media (max-width: 320px) {

	#titre  {font-size:110% !important;padding-left: 15px;}
	.wrapper {	padding: 0.8rem !important}
	#global {padding-top:0px}

}

.wrapper {
  padding: 2rem;
  color: #fff;
  z-index: 1; position: relative;
}
.sidebar {
  padding-top: 1em;
  font-size:90%;

}
		
/* slideshow*/

.bx-controls {display:none}

/*fin slideshow*/



.fancybox img {
	-moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;	
	 /* width:100px; */
}

.fancybox img:hover {
 opacity:0.9;
-webkit-filter: brightness(1.4) hue-rotate(240deg);

}

/* #works contient tous les travaux, le margin-top est élevé pour ne pas apparaitre sous le menu flottant */

#works {
    margin-bottom: 40px;
    /*overflow: hidden;*/
    margin-top: 50px;
}

#works .work {
	/* Voici le overflow:hidden qui permet de cacher les triangles et de ne les voir apparaitre que lorsqu'ils sont dedans la div */
    overflow: hidden;

    border: 4px solid lightgray;
    cursor: pointer;
    position: relative;
   -moz-transition: all .6s; 
    -webkit-transition: all .5s; 
    -o-transition: all .6s; 
    transition: all .6s; 
	display: inline-block;
}

#works .work:hover {
 opacity:0.8
}

#works .work img {
    
}


#piedepage {
	font-size:65%;
	margin-right:5px;
	text-align:left;position: absolute;bottom: 0px;  left: 5px;
	z-index:9999;
	border-top:1px solid lightgray;
	height:20px;
}

#piedepage  div{
display:inline-block
}

#piedepage  div:after {
    content: " ◊ ";
}


.$$modif_page
{color:red; position:absolute;font-size:200%; top:0px;left:0px}
#$$$deconnexion
{color:white; position:absolute;font-size:150%; top:0px;right:0px}

.galleriePhotos {   line-height: 50%;}

th {
 background-color:gray;color:#fff;
 	font-size:120%;
}

table tr:nth-child(even) { /*pair*/
	background: lightblue;   
}

table tr td:nth-child(odd) { /*impair*/
border-bottom:0px solid lightgray
}

tr:hover {
 font-weight:bold;color:#374d57;cursor:pointer

}

td {
		text-align:center
}


td a:hover {
	color:#374d57;

}

.bx-viewport {height:100% !important}

.tableausansstyle {text-align:justify;background-color:#171513;padding:7px;color:white;}

.tableaudemipage {width:40%;position:absolute; top:33%}

/* Buttons and button links */
input[type=submit],
.actions ul li a,
.actions a {
	font-weight:normal;
	padding: 4px 8px;
	background: #dcdcdc;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#dcdcdc));
	background-image: -webkit-linear-gradient(top, #fefefe, #dcdcdc);
	background-image: -moz-linear-gradient(top, #fefefe, #dcdcdc);
	background-image: -ms-linear-gradient(top, #fefefe, #dcdcdc);
	background-image: -o-linear-gradient(top, #fefefe, #dcdcdc);
	background-image: linear-gradient(top, #fefefe, #dcdcdc);
	color:#333;
	border:1px solid #bbb;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-decoration: none;
	text-shadow: #fff 0px 1px 0px;
	min-width: 0;
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-user-select: none;
	user-select: none;
}
.actions ul li a:hover,
.actions a:hover {
	background: #ededed;
	border-color: #acacac;
	text-decoration: none;
}
input[type=submit]:active,
.actions ul li a:active,
.actions a:active {
	background: #eee;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#dfdfdf), to(#eee));
	background-image: -webkit-linear-gradient(top, #dfdfdf, #eee);
	background-image: -moz-linear-gradient(top, #dfdfdf, #eee);
	background-image: -ms-linear-gradient(top, #dfdfdf, #eee);
	background-image: -o-linear-gradient(top, #dfdfdf, #eee);
	background-image: linear-gradient(top, #dfdfdf, #eee);
	text-shadow: #eee 0px 1px 0px;
	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
	border-color: #aaa;
	text-decoration: none;
}

/* Fleche pour remonter en entete de page >>>>>>>*/
#back-top {
	position: fixed;
	bottom: 5px;
	right: 5px;
	z-index:99999;
}

#back-top a {
	width: 50px;
	display: block;
	text-align: center;
	font: 11px/75% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
 opacity:0.9;
-webkit-filter: brightness(1.4) hue-rotate(240deg);
}

/* arrow icon (span tag) */
#back-top span {
	 width: 50px;
	height: 50px; 
	display: block;
	margin-bottom: 7px;
	background: url(../img/up-arrow.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	/* background-color: #777; */
}

/* <<<<<< Fleche pour remonter en entete de page*/

#lien_facebook {float:right;margin:5px;background-color:blue;font-size:60%;padding:3px;padding-top:4px;border:1px solid #fff;line-height:1em;
background: rgba(47,0,235,1);
background: -moz-linear-gradient(top, rgba(47,0,235,1) 0%, rgba(21,0,155,1) 49%, rgba(20,0,153,1) 50%, rgba(45,0,245,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(47,0,235,1)), color-stop(49%, rgba(21,0,155,1)), color-stop(50%, rgba(20,0,153,1)), color-stop(100%, rgba(45,0,245,1)));
background: -webkit-linear-gradient(top, rgba(47,0,235,1) 0%, rgba(21,0,155,1) 49%, rgba(20,0,153,1) 50%, rgba(45,0,245,1) 100%);
background: -o-linear-gradient(top, rgba(47,0,235,1) 0%, rgba(21,0,155,1) 49%, rgba(20,0,153,1) 50%, rgba(45,0,245,1) 100%);
background: -ms-linear-gradient(top, rgba(47,0,235,1) 0%, rgba(21,0,155,1) 49%, rgba(20,0,153,1) 50%, rgba(45,0,245,1) 100%);
background: linear-gradient(to bottom, rgba(47,0,235,1) 0%, rgba(21,0,155,1) 49%, rgba(20,0,153,1) 50%, rgba(45,0,245,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f00eb', endColorstr='#2d00f5', GradientType=0 );}

#lien_facebook a {color:#fff}
#lien_facebook a:hover { opacity:0.9;
-webkit-filter: brightness(1.4) hue-rotate(240deg);}

#lien_vimeo {float:right; margin-right:6px;}