body { margin: 0px; padding: 0px;}
	
	#slideshow {  
        position: relative;  
        width: 640px;  
        height: 270px;  
        padding: 0px;  
        margin: 0px;  
        float: left;
		
		/* CSS3 effects */  
        
    }  
       
    /* avanced box-shadow 
     * tutorial @ 
     * http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow  
    */  
   
   
	
	/* gestion des dimensions et débordement du conteneur */  
#slideshow .container {  
    position: relative;  
    width: 640px;  
    height: 270px;  
    overflow: hidden;  
}  
      
/* on prévoit un petit espace gris pour la timeline */  
#slideshow .container:after {  
    position:absolute;  
    bottom: 0; left:0;  
    content: " ";  
    width: 100%;  
    height: 1px;  
    background: #999;  
}  
/*  
   le conteneur des slides 
   en largeur il fait 100% x le nombre de slides 
*/  
#slideshow .slider {  
    position: absolute;  
    left:0; top:0;  
    width: 1921px; /*j'ai passé la valeur de 400 à 300 -> vérifier que tout est toujours ok*/ 
    height: 270px; 
	overflow: hidden; 
}  
  
/* annulation des marges sur figure */  
#slideshow figure {  
    position:relative;  
    display:inline-block;  
    padding:0; margin:0;  
}  
/* petit effet de vignette sur les images */   
#slideshow figure:after {
    position: absolute;  
    display:block;  
    content: " ";  
    top:0; left:0;  
    width: 100%; height:100%;  
    /*box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;  GEStion effet de transparence, pas top sur une image blanche*/ 
}


/*FIN ETAPE 
###########
###########
###########
*/

    /* styles de nos légendes */  
    #slideshow figcaption {  
        position:absolute;  
        left:0; right:0; bottom: 5px;  
        padding-top: 20px;
		padding-left: 20px; 
		padding-right: 20px; 
		padding-bottom: 10px; 
        margin:0;   
        text-align: left;  
        letter-spacing: 0.05em;
		line-height: 0.05em;  
        word-spacing: 0.05em;  
        font-family: Arial;    
        background: rgba(220,220,220,0.7);  
        color: #555; 
		color: #FF3300; 
        
		
    }  
	
	#slideshow figcaption p {
		Color: #333;
		font-size : 12px;
		line-height: 14px;
		}
	
	
	/* fonction d'animation, n'oubliez pas de prefixer ! */  
	@keyframes slider {  
    0%, 28%, 100%   { left: 0 }  
    33%, 60%        { left: -100% }  
    66%, 95%        { left: -200% }  	
	}
	@-webkit-keyframes slider {  
    0%, 28%, 100%   { left: 0 }  
    33%, 60%        { left: -100% }  
    66%, 95%        { left: -200% }  	
	}
	@-moz-keyframes slider {  
    0%, 28%, 100%   { left: 0 }  
    33%, 60%        { left: -100% }  
    66%, 95%        { left: -200% }  	
	}  

/* fonction d'animation, n'oubliez pas de prefixer ! 
@keyframes slider {  
    0%, 20%, 100%   { left: 0 }  
    25%, 45%        { left: -100% }  
    50%, 70%        { left: -200% }  
    75%, 95%        { left: -300% }  
}
 */ 

/* complétez le sélecteur : */  
#slideshow .slider {  
    /* ... avec la propriété animation */  
    animation: slider 30s infinite; 
	-webkit-animation: slider 30s infinite;
	-moz-animation: slider 30s infinite; 
} 


    #timeline {  
        position: absolute;  
        background: #999;  
        bottom: 0px;  
        left: 0px;  
        height: 1px;  
        background: rgb(214,98,13);  
        background: rgba(214,98,13,.8);  
        width: 0;  
        /* fonction d'animation */  
        animation: timeliner 30s infinite;
		-webkit-animation: timeliner 30s infinite;
		-moz-animation: timeliner 30s infinite;    
    }  
	
	/* Animation de la barre de temps */
	@keyframes timeliner {  
    0%, 33%, 66%, 100% { width: 0;     }  
    28%, 61%, 90%      { width: 640px; }  
	} 
	@-webkit-keyframes timeliner{  
    0%, 33%, 66%, 100% { width: 0;     }  
    28%, 61%, 90%      { width: 640px; }  
	} 
	@-moz-keyframes timeliner{  
    0%, 33%, 66%, 100% { width: 0;     }  
    28%, 61%, 90%      { width: 640px; }  
	} 

	/* Animation du fond et texte */
	@keyframes figcaptionner {  
    0%, 28%, 33%, 61%, 66%, 95%, 100%                     { bottom: -95px;    }  
    5%, 23%, 38%, 56%, 71%, 90%       { bottom: 0px;      }  
	} 
	@-webkit-keyframes figcaptionner {  
    0%, 28%, 33%, 61%, 66%, 95%, 100%                     { bottom: -95px;    }  
    5%, 23%, 38%, 56%, 71%, 90%       { bottom: 0px;      }  
	} 
	@-moz-keyframes figcaptionner {  
    0%, 28%, 33%, 61%, 66%, 95%, 100%                     { bottom: -95px;    }  
    5%, 23%, 38%, 56%, 71%, 90%       { bottom: 0px;      }  
	} 

/* ajouter à l'élément : */  
#slideshow figcaption {  
    /* ... la propriété animation */  
    animation: figcaptionner 30s infinite;
	-webkit-animation: figcaptionner 30s infinite;
	-moz-animation: figcaptionner 30s infinite;   
} 


/* PLAY PAUSE*/
    .play_commands {  
        /* positionnement en haut à droite */   
        position: absolute;  
        top: 25px; right: 25px;  
        z-index: 10;  
        /* dimensionnement des icônes */  
        width: 22px;  
        height: 22px;  
        text-indent: -9999px;  
        border:0 none;  
        /* placez l'opacité à 1 si vous souhaitez voir les commandes */  
        opacity: 0;  
        /* préparation de transition sur opacicty et right */  
        transition: opacity 1s, right 1s;  
    }  
    /* on décale play légèrement sur la gauche */  
    .play { right: 55px; cursor: default; }  
       
    /* création de l'icône pause avec 2 pseudos éléments */  
    .pause:after,  
    .pause:before {  
        position: absolute;  
        display: block;  
        content: " ";  
        top:0;  
        width:38%;  
        height: 22px;  
        background: #fff;  
        background: rgba(255,255,255,0.5);  
    }  
    .pause:after { right:0; }  
    .pause:before { left:0; }  
       
    /* création de l'icône play avec des bordures */  
    .play {  
        width: 1px;   
        height: 1px;   
        /* les transparentes forment la flèche */  
        border-top: 10px solid transparent;  
        border-bottom: 10px solid transparent;  
        border-left: 20px solid #fff;   
        border-left: 20px solid rgba(255,255,255,0.5);   
        /* renseignez 1 pour voir l'icône de suite */  
        opacity: 0;  
    }  
       
    /* apparition du bouton pause au survole */  
    /* apparition des boutons au focus */  
    #slideshow:hover .pause,  
    .play_commands:focus {  
        opacity: 1;  
        outline: none;  
    }  
	
	/* stopper les animation */  
.sl_command:target ~ #slideshow .slider,  
.sl_command:target ~ #slideshow figcaption,  
.sl_command:target ~ #slideshow #timeline,  
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {  
    animation-play-state: paused;  
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
}  
   
/* redémarrer les animations */  
#sl_play:target ~ #slideshow .slider,  
#sl_play:target ~ #slideshow figcaption,  
#sl_play:target ~ #slideshow #timeline,  
#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {  
    animation-play-state: running;
	-moz-animation-play-state: running;
	-webkit-animation-play-state: running;  
}  
   
/* switch entre les boutons */  
.sl_command:target ~ #slideshow .pause      { opacity:0; }  
#sl_play:target ~ #slideshow:hover .pause,  
#sl_play:target ~ #slideshow .pause:focus   { opacity:1; }  
.sl_command:target ~ #slideshow .play       { opacity:1; right: 25px; cursor: pointer; }  
#sl_play:target ~ #slideshow .play          { opacity:0; right: 55px; cursor: default; }