html { background:url(/css/images/backgroundindex.png) no-repeat center fixed;margin: 0; padding: 0;  -webkit-background-size: cover; /* pour anciens Chrome et Safari */ background-size: cover; /* version standardisée */ height: 100%;} 

body { width: 80%; margin-left: auto; margin-right: auto;}

hr { width: 80%; margin-top: -15px }

hr:hover { width: 80%; margin-top: -15px  color:white;}

h1 { font-family: Lighthouse, Arial; font-size: 150px; margin-left: 10%; margin-right: auto; margin-top: 15%; margin-bottom: 0px; color: white; }

h2 { font-family: Lighthouse, Arial; font-size: 50px;}

h3 { font-family: Lighthouse, Arial; font-size: 80px; }

a { font-family: Lighthouse, Arial; font-size: 80px; text-decoration: none; color: white; }
     
@font-face { font-family: "Lighthouse"; src: url('Lighthouse.ttf'); } 
 
#boite { margin-left: -8px; margin-right: -1px;}

.div1 { width: 24%; margin-right: 1%; float: left; text-align: center; color: white; }

.div2 { width: 24%; margin-right: 1%; float: left; text-align: center; color: white; }

.div3 { width: 24%; margin-right: 1%; float: left; text-align: center; color: white; }

.div4 { width: 24%; margin-right: 1%; float: left; text-align: center; color: white; }

.div1:hover {  background-image:linear-gradient( deeppink 35%, white 110%);  width: 24%; height: 50%; float: left; text-align: center; color: white; border-radius:0 50px; box-shadow: 1px 1px 200px deeppink; }

.div2:hover {  background-image:linear-gradient( deeppink 35%, white 110%);  width: 24%; height: 50%; float: left; text-align: center; color: white; border-radius:0 50px; box-shadow: 1px 1px 200px deeppink; }

.div3:hover {  background-image:linear-gradient( deeppink 35%, white 110%);  width: 24%; height: 50%; float: left; text-align: center; color: white; border-radius:0 50px; box-shadow: 1px 1px 200px deeppink; }

.div4:hover {  background-image:linear-gradient( deeppink 35%, white 110%);  width: 24%; height: 50%; float: left; text-align: center; color: white; border-radius:0 50px; box-shadow: 1px 1px 200px deeppink; }

.div1 a { font-family: Descrip; font-size: 10px; text-decoration: none; color: white; }

.div2 a { font-family: Descrip; font-size: 10px; text-decoration: none; color: white; }

.div3 a { font-family: Descrip; font-size: 10px; text-decoration: none; color: white; }

.div4 a { font-family: Descrip; font-size: 10px; text-decoration: none; color: white; }


p {
  height: 1%;
  padding-top:10%;
  line-height:0px;
  text-align:center; /* centrage horizontal */
  color: white;
  
}

span { 
  width:100px; /* largeur zone de texte */
  vertical-align:middle;
  display:inline-block;
  line-height:normal; /* on rétablit le line-height */
  text-align:left; /* ... et l'alignement du texte */
  
}

cite { font-family: Descrip, Arial; font-size: 30px; }

.div20 { width: 49%; float: left; text-align: center; color: white; padding-top: -50px;}

.div30 { width: 51%; float: left; text-align: center; color: white; }

.div20:hover {  background-image:linear-gradient( deeppink 35%, white 110%);  width: 49%; float: left; text-align: center; color: white; border-radius:0 50px; box-shadow: 1px 1px 200px deeppink; }

.div30:hover {  background-image:linear-gradient( deeppink 35%, white 110%);  width: 51%; float: left; text-align: center; color: white; border-radius:0 50px; box-shadow: 1px 1px 200px deeppink; }