@font-face {
    font-family: '1942_report1942_report';
    src: url('../fonts/1942/1942-webfont.eot');
    src: url('../fonts/1942/1942-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/1942/1942-webfont.woff') format('woff'),
         url('../fonts/1942/1942-webfont.ttf') format('truetype'),
         url('../fonts/1942/1942-webfont.svg#1942_report1942_report') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'AbhayaLibre-Regular-webfont';
    src: url('../fonts/abhaya/AbhayaLibre-Regular-webfont.eot');
    src: url('../fonts/abhaya/AbhayaLibre-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/abhaya/AbhayaLibre-Regular-webfont.woff') format('woff'),
         url('../fonts/abhaya/AbhayaLibre-Regular-webfont.ttf') format('truetype'),
         url('../fonts/abhaya/AbhayaLibre-Regular-webfont.svg#AbhayaLibre-Regular-webfontAbhayaLibre-Regular-webfont') format('svg');
    font-weight: normal;
    font-style: normal;

}
body 
{
	background-image: url("../img/background/gray_3.jpg");
	background-attachment: fixed; /* Le fond restera fixe */ 
	background-color: gray; /* Le fond de la page sera noir */
	color: black;
	margin:25px;
}

nav.polaroid 
{
  text-align: center;
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

nav.container 
{
  text-align: center;
  padding: 10px 20px;
}
h1 /* Utilisation de la police qu'on vient de définir sur les titres */
{
	background-image: url("../img/background/gray_2.jpg");
	padding: 10px;
	text-align: center;
    /* font-family: '1942_report1942_report', Arial, serif;  */
    border: 2px black outset;
    box-shadow: 6px 6px 6px hwb(240 60% 39%);
    color: black;
    
}
h1:hover {
    box-shadow: 0 0 2px 1px hwb(240 60% 39%);
}
h2 /* Utilisation de la police qu'on vient de définir sur les titres */
{
	text-align: center;
	background-image: url("../img/background/gray_2.jpg");
	padding: 10px;
	border: 2px black outset;
	box-shadow: 6px 6px 6px hwb(240 60% 39%);
  color: black;
    
}

h2:hover {
    box-shadow: 0 0 2px 1px rgba(154, 156, 156, 0.5);
}
h4 /* Utilisation de la police qu'on vient de définir sur les titres */
{
	text-align: center;
	background-image: url("../img/background/gray_2.jpg");
	padding: 10px;
	border: 2px black outset;
	box-shadow: 6px 6px 6px gray;
    
}
h4:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
ul
{
	/* text-align: center; */
	/*list-style-position: inside;*/
   list-style-type: none;
	padding: 10px;
	
}
/*ul:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}*/
#lm
{
	text-align: center;
}
#u1
{
  text-align: center;
   padding-left: 20px;
}
#u2
{
  text-align: center;
   padding-left: 20px;
}
#u3
{
  text-align: center;
   padding-left: 20px;
}
#u4
{
  text-align: center;
   padding-left: 20px;
}
p
{
	background-image: url("../img/background/gray_2.jpg");
	text-align: center;
	padding: 10px;
    color: black;
    font-size: 18px;
    border: 2px black outset;
    box-shadow: 6px 6px 6px rgb(101, 101, 102);
    
}
p:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
nav
{
	display: block;
    margin: auto;
	max-width: 100%;
    height: auto;
}
/*img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}*/
em
{
    color: red;
}
/*
a[title="Cliquez ici"]
{

}


*/

a:hover 
{
   font-weight: bold;
}
.salutations
{
    color: brown;
}
/*
.nom_prenom
{
	font-size: 40px;
	color: gray;
}
 * 
 */
footer
{
    text-align: middle;
    color: black ;

}
.container {
  position: relative;
  width: 50%;
}
#conteneur
{
	 display: flex;
	 /* flex-direction: column; */
	 flex-wrap: nowrap;
	 justify-content: space-around;
	 align-items: center;
	 
}
.element
{
    margin: auto;
}

.image {
	display: block;
    margin: auto;
	max-width: 25%;
    height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: black;
  overflow: hidden;
  width: 75%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
mark
{
    /* La couleur de fond prend le pas sur celle de toute la page */
    background-color: red;
    color: black;
}
#contenu{
  text-align: center;
}
#compt{
	text-align: center;
}
.image {
    transition: transform 0.3s ease;
  }
.image:hover {
    transform: scale(1.24);
  }
  body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background: linear-gradient(190deg, rgb(119, 111, 111), #485f91);
    color: #fff;
    padding: 2rem 1rem;
    text-align: center;
  } 
  section {
    background-color: #b7bac4;
    margin: 2rem auto;
    max-width: 1000px;
    padding: 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 8px;
  }