html {
	font-size:100%; /* pour utiliser taille de texte relative */
}

body {	
	height:100%;
	margin:0; padding:0; border:0;
}

#page {
	height:100%; max-height:100%; width:100%; overflow:hidden;
	position:absolute; margin:0; padding:0; border:0;
	background-image: url('img/sable.jpg');
	z-index: 0;
}

#fond {
	position: absolute;
	top:0; left:0; width: 100%;	height: 100%;
	z-index: 1;
}

#conteneur { /* permet l'apparition d'une scroll bar si contenu trop haut par rapport à la résolution */
	position: absolute;
	top:0; left:0; width: 100%;	height: 100%; overflow:auto;
	z-index: 2;
}

#contenu { /* positionne le contenu , définit largeur et hauteur fixes  */
	height:100%; max-height:535px; width:100%; max-width:1000px;
	position:relative; margin:auto; top:40px; 
	z-index: 3;
}

header {
	position:absolute; z-index: 20;
	margin:0; padding:0; border:0;
	top:0; left:0; width:15%;
	text-align:center;
}

#header_mobile {
	position:absolute; z-index: 20;
}
		
section {
	position:relative; z-index:10;
	height:100%; top:0;
	z-index: 4;
	width:60%; margin:auto;
	overflow:auto; /* add scroll bars as required */
	padding-left:5%; padding-right:5%; 
	font-family: "Times New Roman", "Arial"; color:black; text-align:center;
	background-image: url('img/blanc_transparent2-fs8.png');
	border-radius: 30px 0 0 30px;
	behavior: url(./PIE/PIE.htc); /* Effets CSS3 sous IE 6, 7, 8 thanks to http://css3pie.com */
}

nav{
	position:absolute; z-index: 20;
	margin:0; padding:0; border:0;
	top:34%; left:0; width:15%;
	text-align:left;
	background-image: url('img/blanc_transparent2-fs8.png');
	border-radius: 30px 0 0 30px;
	behavior: url(./PIE/PIE.htc); /* Effets CSS3 sous IE 6, 7, 8 thanks to http://css3pie.com */
}

ul{
	list-style-type:circle;
}

aside {
	position:absolute; z-index: 30;
	width:13%; right:0; top:0; padding:1%;
	background-image: url('img/blanc_transparent2-fs8.png');
	font-size:0.8em;
	border-radius: 0 30px 30px 0;
	behavior: url(./PIE/PIE.htc); /* Effets CSS3 sous IE 6, 7, 8 thanks to http://css3pie.com */
}

footer {
	position:absolute; z-index: 20;
	bottom:0; width:15%; 
	text-align:center; font-size:0.8em;
}

#merci {
	position:absolute; z-index: 20;
	bottom:0; width:11%; right:0; padding-right:2%; padding-left:2%;
	text-align:center; font-size:0.7em;
}

h1 {
	font-size:1.2em; height:100%;
}

h2 {
	font-family: "Monotype Corsiva", "Verdana", "Comic Sans MS", "Times New Roman";
	color:#CC3300;
	font-size:1.5em; font-weight:normal; text-align:center;
	border-bottom: 1px dotted #CC3300; padding-bottom:3px;		
}

table {
	width:100%;
	table-layout:fixed;
}

a { color:#CC3300;}
a:hover { color:#ffffff;}
a.cliquable img {
	opacity:0.6;
	filter:alpha(opacity=60);  /* pour IE */
}
a.cliquable:hover img {
	opacity:1;
	filter:alpha(opacity=100);  /* pour IE */
}

.fenetre{ width:100%; height:400px; box-shadow: 0 2px 10px 7px #532; behavior: url(./PIE/PIE.htc);}
.cache-cache { display:none;}

/* media queries pour adapter l'affichage de la page aux smartphones */
@media only all and (max-width:641px) {
	#contenu {top:0; max-height:100%;}
	header { display:none;}
	aside { display:none;}
	nav { display:none;}
	#merci { display:none;}
	footer { display:none;}
	section { width:90%; border-radius:0;}
	h2 { font-size:1em;}
	.cache-cache { display:block;}
	.desktop { display:none;}
	
}