      	div { text-align: center;}

	#left { text-align: left;}
	#right { text-align: right;}
	#center  { text-align: center;}
	#nodepage { background-color: DodgerBlue; text-align: center;}

	
	h1 {text-align: left;  text-decoration: none;}
	h2 {text-align: right;  text-decoration: none;}
	h3 {text-align: center;  text-decoration: none;}
	h4 {text-align:center; font-size:16px; backgroundcolor:dodgerblue; text-decoration: none;}

.hero {
  position: relative;       /* nécessaire pour placer le lien par-dessus */
  display: inline-block;    /* la div prend la taille de l'image */
}

.hero img {
  display: block;           /* enlève les petits espaces autour de l'image */
  max-width: 100%;          /* pour que l'image s’adapte à la largeur de l’écran */
  height: auto;
}

.hero-link {
  position: absolute;       /* permet de placer le texte par-dessus */
  top: 50%;                 /* centré verticalement */
  left: 50%;                /* centré horizontalement */
  transform: translate(-50%, -50%); /* ajuste le centrage */
  color: white;             /* couleur du texte */
  font-size: 2rem;          /* taille du texte */
  font-weight: bold;
  text-decoration: none;    /* enlève le soulignement */
  background: rgba(0,0,0,0.5); /* petit fond transparent pour la lisibilité */
  padding: 10px 20px;
  border-radius: 8px;


 /* unvisited link */
a:link {
  color: #limegreen;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: limegreen;
  text-decoration: none;

}

/* mouse over link */
a:hover {
  color: limegreen;
  text-decoration: none;
}

/* selected link */
a:active {
  color: white;
  text-decoration: none;
} 

img
{
    max-width: 100%;
    min-width: 300px;
    height: auto;
}

body {

width: 100%;
max-width: 940px;
margin: auto;

}	

div.container {	

text-align: center;
background-color:white;


}


			