body	{
	padding: 0;
	margin: 0;	
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(/images/images/fond_sable.jpg);
	background-attachment: fixed;
}

p.texte	{
	font-size: 100%;	
	font-style: italic;
	text-align: justify;
}

p#date_photo	{
	text-align: left;
	font-size: 180%;
	position: fixed; top: 2%; left: 1.5%;
	float:right;'
}

p#grand_titre	{
	font-size: 250%;
	color: navy;
	/* font-style: italic; */
	text-align: center;
	font-weight: 800;
	text-shadow: 2px 2px 2px #d3d3d3;
}

p.annee	{
	display: block;
	float: left;
	margin-left: 2%;	
	margin-right: 1%;	
	font-size: 200%;
	color: navy;
	font-style: italic;
	font-weight: 800;
	line-height: 300%;
	text-align: left;
	text-shadow: 2px 2px 2px #d3d3d3;
}

h1	{
	font-size: 150%;
	color: navy;
	/* font-style: italic; */
	text-align: center;
	text-shadow: 2px 2px 2px #d3d3d3;
}

h2	{
	font-size: 150%;
	color: navy;
	font-style: italic;
}

h3	{
	text-align: left;
	font-size: 120%;
	color: black;
	/* line-height: 150%; */
}

div#bloc_haut	{
	/* background: rgba(0, 0, 102, 0.8); */
	/* border-style: solid; color: green; */
	display: block;
	width: 100%; max-height: 20%;
	position: fixed; top: 0%; left: 0%;
	margin: 1%; 
	text-align: center;	
	background-image: ./images/images/bandeau_galets_trou.png
}

div#bloc_gauche	{
	/* border-style: solid; color: navy; */
	display: block;
	position: fixed; top: 20%; left: 0%;
	padding: 1%;
	max-width: 21%; max-height: 80% ;
	overflow-x: auto;
	text-align: center;
}

div#bloc_centre	{
	border-style: solid; color: navy;
	border-left: solid;
	border-top: none;
	border-right: solid;
	border-bottom: none;
	padding-left: 1%;
	padding-right: 1%;
	display: block;
	position: fixed; top: 25%; left: 23%;
	max-width: 54%; height: 72% ;
	overflow-x: auto;
	vertical-align: middle;
	text-align: center;
}

div#bloc_droite	{
	/* background-color: white */
	border-style: solid; color: navy;
	border: none;
	border-top: none;
	border-right: none;
	border-bottom: none;
	display: block;
	position: fixed; top: 20%; left: 80%;
	width: 18%; max-height: 80% ;
	padding: 1%;
	overflow-x: auto;
	text-align: center;
}

div#bloc_boite	{
	background: white;
	border-style: solid; color: navy;
	border: solid;
	display: block;
	position: fixed; top: 15%; left: 25%;
	width: 45%; height: 65% ;
	padding: 1%;
	overflow-x: auto;
	/* text-align: center; */
}

div#photos	{
	display: block;
	/* border-style: solid; color: red; */
	background-color: black;
	padding: 0%;
	position: absolute; top: 0%; left: 0%;
	width: 100%;
	height: 100% ;
	overflow-x: auto;
	vertical-align: middle;
	text-align: center;
}

div#titres_tableau	{
	display: block;
	/* border-style: solid; color: red; */
	/* background-color:silver; */
	font-size: 150%;
	padding: 0%;
	vertical-align: middle;	
	position: absolute; top: 0%; left: 0%;
	width: 100%;
	height: 10% ;
}

div#tableau	{
	display: block;
	font-size: 1.5em;
	/* border-style: solid; color: red; */
	padding: 0%;
	position: absolute; top: 10%; left: 0%;
	width: 100%;
	height: 89% ;
	overflow-x: auto;
}

img.invisible	{
	visibility: hidden;	
}

img.photo	{
	display: block; 
	max-width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

img.coin_gauche	{
	position: absolute; top: 1%; left: 1%;
	float: left;
}

img.coin_gauche_fixe	{
	position: fixed; top: 1%; left: 1%;
	float: left;
}

img.coin_droite_fixe	{
	position: fixed; top: 1%; right: 1%;
	float: left;
}

img.bas_droite	{
	position: fixed; bottom: 1%; right: 1%;
	float: left;
}

img.milieu_droite	{
	position: fixed; bottom: 48%; right: 1%;
	float: left;
}

img.milieu_gauche	{
	position: fixed; bottom: 48%; left: 1%;
	float: right;
}

img.petit_ecran	{
	/* par défaut, invisible : ne sera pas affichée que sur petit écran (voir plus bas) */
	display: none;		
}

.tech	{ /* affichage des données techniques */
	font-family:"courier new", courrier;
	color: black;
	font-weight: 400;
	margin-left: 4%;
}

table.menus	{
	table-layout: fixed;	
	background: navy;
	color: white;	
	font-size: 200%;
	font-weight: bold;
	font-style: italic;
	line-height: 180%;
	text-align: center;
	vertical-align: middle;
}

table.icones	{
	table-layout: fixed;	
	line-height: 75%;
	text-align: center;
}

ul	{
	font-size: 150%;
	margin-left: 3%;
	line-height: 150%;
}

/* ---------------------------- Liens dans les pages ----------------------------*/
a.fort:link							{text-decoration: none; color: white;}
a.fort:visited						{color: white;}
a.fort:hover						{color: yellow; font-size: 110%;}
	
a.italique:link					{text-decoration: none;}
a.italique:visited				{text-decoration: none;}
a.italique:hover					{font-style: italic; font-weight: bold;}
	
a.discret:link						{text-decoration: none; color: navy;}
a.discret:visited					{text-decoration: none; color: navy;}
a.discret:hover					{text-decoration: none; color: navy;}
	
img.fort:hover						{transform: scale(1.2);}

img.coin_gauche:hover			{transform: scale(1.2);}
img.coin_gauche_fixe:hover		{transform: scale(1.2);}
img.bas_droite:hover				{transform: scale(1.2);}
img.milieu_droite:hover			{transform: scale(1.2);}		
img.milieu_gauche:hover			{transform: scale(1.2);}		
	

/* -------------------- restrictions pour les petits écrans --------------------- */
@media only screen and (max-device-width: 1280px) {
	body						{background-image: none; background-color: lavender;}
	h1							{font-size: 100%;}	
	p#grand_titre			{font-size: 150%;}
	p#date_photo			{font-size: 90%;}
	h2							{font-size: 80%;}
	h3							{font-size: 85%;}
	p.texte					{font-size: 110%;}
	div#bloc_haut			{display: none;}
	div#bloc_gauche		{position: fixed; top: 10%; height: 85% ;}
	div#bloc_centre		{position: fixed; top: 10%; height: 85% ;}
	div#bloc_droite		{position: fixed; top: 10%; height: 85% ;}
	div#bloc_boite			{position: fixed; top: 5%; left: 20%; height: 80% ; width: 60%;}
	table.menus				{font-size: 100%;}
	div#tableau				{font-size: 1em;}
	div#evenement			{display: none;}
	ul							{font-size: 100%;}
	img.petit_ecran		{display: inline-flex;}		/* Ne sera affichée que sur petit écran */


/*================================================================================*/

div#fete	{ /* conteneur date et fête */
	background-color: rgb(204, 204, 204); /* pour la compatibilité */
	/* background: rgba(255, 255, 255, 0.3); */
	background: rgba(204, 204, 204, 1);
	display: block;
	position: absolute; top: 16%; left: 17%;
	width: 26%; height:14%;
	padding-top: 0px; padding-right: 10px; padding-bottom:  0px; padding-left: 10px;
	overflow-x: auto;	
	resize: both;
	font-size: 125%;
	border-right-style: solid;
	border-color: black;
	border-right-width: 20px;
	z-index: -1;
}	

@keyframes apparition {	/* définition de l'animation "apparition" */
	from {
		/* position actuelle */
		} 
	to {
		background-color: black;
		}
}

@keyframes pellicule {	/* page d'accueil, définition de l'animation "defilement" */
/* photos réduites à 300 points en hauteur (Gimp) et assemblées dans un fichier .png (Koloupaint) */
	from {margin-left: 100%;} 	/* 0% : image visible, 100% : image à droite du conteneur, invisible (overflow: hidden) */
	to {margin-left: -460%;}	/* marge négative proportionnelle au nombre d'images à masquer */
}

img.defilement {	/* page d'accueil, paramétrage du style "defilement" */
	animation: pellicule 48s linear;			/* proportionnelle au nombre d'images (6 secondes par image) */
	animation-delay: 8s;
	animation-fill-mode: backwards;
	animation-direction: normal;				/* normal, ou alternate pour un va et vient */
	animation-iteration-count: infinite;
}

@keyframes disparition {	/* définition de l'animation "disparition" */
	from {}									/* situation actuelle */
	to {background-color: none;
		color:rgba(0, 0, 0, 0);}		/* enlève un fond éventuel */
}

p#dump {
	display: block;
	position: fixed; top: 3.5%; right: 21%;
	font-family:"courier new", courrier;
	font-size: 210%;
	font-weight: 600;
	color: rgb(0, 0, 102);
	text-align: justify;
	animation: disparition 3s linear;
	animation-delay: 8s;
	animation-fill-mode: forwards;
	z-index: 2;
}

/* input[type=checkbox]	{
	font-family:"courier new", courrier;
	font-weight: 800;
	font-size: 500%;
}
*/