*
{
  box-sizing: border-box; /* pour maîtriser width et flex-basis */
}

html {
  display: flex; flex-direction: column; /* correction bug IE de min-height non appliqué à body */
}

body.pageAccueil
{
	background-image: url("Images/785 Le Relecq-Kerhuon - La Fontaine ! Le Bourdonnec ! Le Relecq-Kerhuon.jpg"),
						url("Images/209 SAINT-MARC - Le Bois et le Tunnel du Vieux Saint-Marc ! LP ! Saint-Marc.jpg"),
						url("Images/470 Le Moulin-Blanc, près Brest ! Le Bourdonnec ! Le Moulin-Blanc.jpg"),
						url("Images/482 Poudrerie du Moulin-Blanc - Vue Générale ! Le Bourdonnec ! Le Moulin-Blanc.jpg"),
						url("Images/789 Le Relecq-Kerhuon - Entrée du Bourg ! Le Bourdonnec ! Le Relecq-Kerhuon.jpg"),
						url("Images/840 Lanvéoc - Maison Edouard ! Le Bourdonnec ! Lanvéoc.jpg"),
						linear-gradient(to right, rgba(230,250,250,1), white);
	background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
	background-position: 5% 10%, 5% 50%, 5% 90%, 95% 10%, 95% 50%, 95% 90%, 0px 0px;
	background-size: 10%, 10%, 10%, 10%, 10%, 10%, cover;
}

body.pageAccueil2
{
	background-image: linear-gradient(to right, rgba(230,250,250,1), white);
	background-attachment: fixed;
	background-repeat: repeat;
	background-position: 0px 0px;
	background-size: cover;
	
	display: flex; /* crée un contexte flex pour ses enfants */
	flex-direction: column; /* affichage vertical */
	padding: 0em;
}

.titre{
	display: flex; /* crée un contexte flex pour ses enfants */
}
.titremod{
	width: 70px;
	text-align: center; /* Centrage horizontal */
	height:50px;
	line-height:40px; /* Centrage vertical */
}
.titrenupo{
  width: 80px;
  text-align: center; /* Centrage horizontal */
  height:50px;
  line-height:40px; /* Centrage vertical */
}

.titrecoed{
	width: 110px;
	text-align: center; /* Centrage horizontal */
	height:50px;
	line-height:40px; /* Centrage vertical */
}

.titrephoto{
	//width: 200px;	width: 200px;
	text-align: center; /* Centrage horizontal */
	height:50px;
	line-height:40px;
}

.titreintitule {
  flex: 1; /* occupe la largeur restante */
 
  text-align: center; /* Centrage horizontal */
  height:50px;
  line-height:40px; /* Centrage vertical */
}



.wrapper {
	display: flex; /* crée un contexte flex pour ses enfants */
}

#vertical{
	text-align: center; /* Centrage horizontal */
	height: 200px;;
	}

#horizontal{
	text-align: center; /* Centrage horizontal */
	height: 130px;;
	}

.mod{
	width: 70px;
}

.nupo{
	width: 80px;
}

.coed{
	width: 110px;
}

.intitule{
	flex: 1; /* occupe la largeur restante */ 
}

.photo{
	display: flex;  /*permet de centrer la photo verticalement*/
	align-items: center;	/*permet de centrer la photo verticalement. Ces deux balises n'ont d'effet que si on crée un container avec flex*/
	justify-content: center /*permet de centrer les images verticales*/
}

img.displayed[title="horizontal"]{
	display: block;
	margin: auto;
}
img.displayed[title="vertical"]{
	display: block;
	margin: auto;
}

.photo img[title="horizontal"]:hover{
	position: relative;
	z-index: 4;
	width:600px;
	height:390px;
}

.photo img[title="vertical"]:hover{
	position: relative;
	z-index:4 ;
	width:390px;
	height:600px;
}

.conteneur
{
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 30vh;
}

.element{
	flex: 1;
	vertical-align: middle;
	text-align: center;
}

/*
input[type="file"] {
  height: 0;
  width: 0;
  overflow: hidden;
}

input[type="file"] + label2 {
  border: 1px solid rgba(0,0,0,.2);
  padding: 5px;
  background: lavender;
}
*/

Decoration  

body {
  margin: 0px;
  font-family: times, sans-serif;
}

footer{
	text-align: center; /* Centrage horizontal */
}

.mod, .titremod,
.nupo, .titrenupo,
.coed, .titrecoed,
.intitule, .titreintitule,
.photo, .titrephoto,
header
{
  border: 5px double #AAA;
}

p.cellule{
	display: table-cell;
	page-break-inside: avoid;
	text-align: center; /* Centrage horizontal */
	vertical-align: middle; /* Centrage vertical */
	
	border-top: 5px double #AAA; /* Bordures bas, gauche simples ; haut, droit doubles */
	border-right: 5px double #AAA;
	border-bottom: 5px double #AAA;
	border-left: 5px double #AAA;
}

@keyframes slidein {
  0%{
	color: black;
  }
  
  50%{
	color: red;
  }
  
  100%{
	color: white;
  }
}

#affichageInfo{
  animation : slidein ease-in infinite alternate 1s;
}

A.reponse :target{
	display: none;
}

A span{
	transform:scale(0) rotate(-12deg);
	opacity:0;
}

A:hover span{
	position:absolute; 
	/*margin-top:-90px;
	margin-left:90px;*/
	color:#09c;
	background:rgba(0,0,0,.9);
	padding:15px;
	border-radius:3px;
	box-shadow:0 0 2px rgba(0,0,0,.5);
	
	opacity:1;
	transform:scale(1) rotate(0);
	
	transition:all .25s;
}

H2 {
  width: auto; 
  padding: 10px; 
  border: 1px solid #333;
  border-radius: 10px;
  /* Animation */
  animation: ombre ease-in infinite alternate 1s;
}

@keyframes ombre {
  0% {
	box-shadow: 0 0 15px red;
  }
  100% {
	box-shadow: 0 0 15px white;
  }
}

DIV.clic :target {
	border-radius: 30px;
animation-play-state: paused;
display: none;
}
/*la différence entre synology et localhost*/

#message{
	display : none;
}

#erreur{
	display : none;
}

#MdP1, #MdP2 {
	border: 2px solid #dadada;
	border-radius: 7px;   
}

#MdP1:focus, #MdP2:focus {
	outline: none;
	border-color:black;
	box-shadow: 0 0 10px black;
	color : black;
}