<?php
require($_SERVER['DOCUMENT_ROOT'].'/espace_personnel/dev/inc/head.php');
?>

<style>

.page{position:absolute;width:100%}

/* MOBILE */
@media screen and (max-width: 400px) {
	#m		{margin:0 auto;width:320px;height:550px;background-image:url(img/m.png);}
	#m-m	{margin:0 auto;width:320px;height:477px;background-image:url(img/m-m.png);}
	#t		{display:none;}
	#t-m	{display:none;}
}

/* TABLET */

@media screen and (min-width: 401px) {
	#t		{margin:0 auto;width:768px;height:1025px;background-image:url(img/t.png);}
	#t-m	{margin:0 auto;width:768px;height:274px;background-image:url(img/t-m.png);}
	#m		{display:none;}
	#m-m	{display:none;}
}

</style>
	
</head>


<body>

<div class="page" style="z-index:10;">
	<div id="t" style="box-shadow:0 0 10px #888"></div>
</div>

<div class="page" id="t-m-p" style="z-index:20;padding-top:120px;">
	<div id="t-m" style="display:none"></div>
</div>

<div class="page" style="z-index:10;">
	<div id="m" style="box-shadow:0 0 10px #888"></div>
</div>

<div class="page" id="m-m-p"  style="z-index:20;padding-top:60px;">
	<div id="m-m" style="display:none"></div>
</div>



<?php
require($_SERVER['DOCUMENT_ROOT'].'/espace_personnel/dev/inc/end.php');
?>

<script>
	function t(){
		$('#t-m-p').click(function(){
			$('#t-m').slideToggle();
		});
	}

	function m(){
		$('#m-m-p').click(function(){
			$('#m-m').slideToggle();
		});
	}

	function tt(){
		$('#t-m-p').click(function(){
			$('#t-m').slideToggle();
		});
	}

	function mm(){
		$('#m-m-p').click(function(){
			$('#m-m').slideToggle();
		});
	}

	$(window).load(t(),m());
</script>
