/*pour page index*/

body, div, ul { margin: 0, padding:0;}


body 
{
	
	background-color: #000000;
	font-family: "Times new roman",Times,Arial; sans-serif;
	font-size: 18px;
    	font-style: italic;
}
	    /* Bloc centré pour l'ensemble de la page */

.global
{
	width: 950px;
	margin-left: auto;
	margin-right: auto;

	/*border:1px solid red;*/		
}


/* Bloc titre */
.entete
{
	
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom : 10px;
	height: 80px;
	padding:1px;
	background-color: #FFE4B5;
	  /* border:3px solid blue;*/

}
/* Bloc menu */
.blocmenu
{
	width: 650px;
	height: 80px;
	margin-top : 0px;
	margin-left : auto;
	margin-right : auto;
       
	
	 border:1px solid #FFE4B5;
}


 Bloc contenu 

.contenu
{
	height: 520px;
	border:1px solid yellow; 
} 
/*fin Bloc contenu */

<!-- ------------------------------------------------------------------------- -->
<!-- ---------------------------------------------------- -->

.d1{
    width: 576px;
    height: 300px;
    margin: 50px auto;
    box-shadow: 0px 15px 10px -5px #777;
    background-color: #EDEDED;
    background-size: contain;
    animation: fondu 100s ease-in-out infinite both;
}
.conteneur{
    max-width: 576px;
    margin: 50px auto;
}
.d2{
    width: 100%;
    height: 0px;
    padding-top: 75%;
    box-shadow: 0px 0px 10px #000000;
    background-color: #000000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: fondu 100s ease-in-out infinite both;
}
.d1:hover, .d2:hover{
    animation-play-state: paused;
}
@keyframes fondu{
    0%{background-image: url("../photos/IMG_1.jpeg");}
    5%{background-image: url("../photos/IMG_2.jpeg");}
    10%{background-image: url("../photos/IMG_3.jpeg");}
    15%{background-image: url("../photos/IMG_4.jpeg");}
    20%{background-image: url("../photos/IMG_5.jpeg");}
    25%{background-image: url("../photos/IMG_6.jpeg");}
    30%{background-image: url("../photos/IMG_7.jpeg");}
    35%{background-image: url("../photos/IMG_8.jpeg");}
    40%{background-image: url("../photos/IMG_9.jpeg");}
    45%{background-image: url("../photos/IMG_10.jpeg");}
    50%{background-image: url("../photos/IMG_11.jpeg");}
    55%{background-image: url("../photos/IMG_12.jpeg");}
    60%{background-image: url("../photos/IMG_13.jpeg");}
    65%{background-image: url("../photos/IMG_14.jpeg");}
    70%{background-image: url("../photos/IMG_15.jpeg");}
    75%{background-image: url("../photos/IMG_16.jpeg");}
    80%{background-image: url("../photos/IMG_17.jpeg");}
    85%{background-image: url("../photos/IMG_18.jpeg");}
    90%{background-image: url("../photos/IMG_19.jpeg");}
    95%{background-image: url("../photos/IMG_20.jpeg");}
    100%{background-image: url("../photos/IMG_21.jpeg");}


}
<!-- ------------------------------------------------------------------------- -->

/* Bloc citations */
.pied
{
	clear: both;
	background-color: #FFE4B5;
	padding : 10px 10px 10px 10px;
	font -style: italic;
	font-size: 18px;
	text-align: center;
	color:#800000;
}


p
{	
	text-align:center;
	/* border:1px solid red;*/
	}
	
p.photo
{
	
	opacity:1.0;
	filter alpha: 100;
	/*border:1px solid green;*/
	
	

	}
p.texte
{
	font-style: italic;
	font-size: 20px;
	margin-top:120px;
	color:#8888FF;
	text-shadow:#FFFFFF 2px -2px 0;
		
	}

/* détail pour le menu de navigation */


#menu 
{
	
	
	}

#menu li 
{
	
	list-style-type: none;
}

#menu li  a, #menu li  a:visited
{
	background-color:transparent;
	display: block;
	float:left;
	line-height: 0px;
	margin: 15px;
	padding: 1px 2px 3px 3px;
	text-decoration: underline;
	font-family: "Times new roman",Times,Arial; sans-serif;
	font-size: 18px;
	font-weight: bold;
	color:#FFE4B5;
		
	}


h1 
{
	text-align: center;
	font-size: 32px;
	color:#800000;
	text-shadow:#800000 0px 0px 0px;
}
	
h3 
{
	
	font -style: italic;
	font-size: 18px;
	text-align: center;
	color:800000;
	
	
}