@font-face { /* Définition d'une nouvelle police nommée quigley */
    font-family: 'underwood';
    src: url('polices/underwood.eot');
	src: url('polices/underwood.eot?#iefix') format('embedded-opentype'),
        url('polices/underwood.woff') format('woff'),
        url('polices/underwood.ttf') format('truetype'),
        url('polices/underwood.svg#underwood') format('svg');
}

@font-face { /* Définition d'une nouvelle police nommée quigley */
    font-family: 'lobstertwo';
    src: url('polices/lobstertwo.eot');
	src: url('polices/lobstertwo.eot?#iefix') format('embedded-opentype'),
        url('polices/lobstertwo.woff') format('woff'),
        url('polices/lobstertwo.ttf') format('truetype'),
        url('polices/lobstertwo.svg#lobstertwo') format('svg');
}


body
{
	background: #000000;
	width:100%;
	height:100%;
	margin:auto;
}

.entete 
{
    position:absolute;
	width:60%;
	height:auto;
    overflow:hidden;
	left:20%;
}
.topentete
{
    position:absolute;
	top:0px;
    transition: top 0.7s;
}
.entete:hover .topentete
{
    top:-90px;
}

.sapropos 
{
    position:absolute;
    width:57px;
	height:57px;
    overflow:hidden;
	display:inline-block;
	z-index:12;
	left:5%;
	top:3%;
	text-indent:4px;
}
.stopapropos 
{
    position:absolute;
    left:0px;
	top:-2%;
	transition: left 0.7s;
	-moz-transition: left 0.7s;
	-webkit-transition: left 0.7s;
	-o-transition: left 0.7s;
}
.sapropos:hover .stopapropos 
{
    left:-60px;
}

.scompo
{
    position:absolute;
	width:57px;
	height:55px;
    overflow:hidden;
	display:inline-block;
	z-index:11;
	left:10%;
	top:3%;
}
.stopcompo
{
    position:absolute;
    left:0px;
	transition: left 0.7s;
	-moz-transition: left 0.7s;
	-webkit-transition: left 0.7s;
	-o-transition: left 0.7s;
}
.scompo:hover .stopcompo 
{
    left:-80px;
}

.sphoto
{
    position:absolute;
    width:57px;
	height:57px;
    overflow:hidden;
	display:inline-block;
	z-index:10;
	left:15%;
	top:3%;
	text-indent:4px;
}
.stopphoto
{
    position:absolute;
    left:0px;
	top:-2%;
	transition: left 0.7s;
	-moz-transition: left 0.7s;
	-webkit-transition: left 0.7s;
	-o-transition: left 0.7s;
}
.sphoto:hover .stopphoto 
{
    left:-60px;
}

.speint
{
    position:absolute;
    width:57px;
	height:57px;
    overflow:hidden;
	display:inline-block;
	z-index:9;
	left:20%;
	top:3%;
	text-indent:4px;
}
.stoppeint
{
    position:absolute;
    left:0px;
	top:-2%;
	transition: left 0.7s;
	-moz-transition: left 0.7s;
	-webkit-transition: left 0.7s;
	-o-transition: left 0.7s;
}
.speint:hover .stoppeint 
{
    left:-60px;
}

.sgraph
{
    position:absolute;
    width:57px;
	height:57px;
    overflow:hidden;
	display:inline-block;
	z-index:8;
	left:77%;
	top:3%;
	text-indent:4px;
}
.stopgraph
{
    position:absolute;
    left:0px;
	top:-2%;
	transition: left 0.7s;
	-moz-transition: left 0.7s;
	-webkit-transition: left 0.7s;
	-o-transition: left 0.7s;
}
.sgraph:hover .stopgraph 
{
    left:-60px;
}
	
.sdiaporama
{
    position:absolute;
    width:57px;
	height:57px;
    overflow:hidden;
	display:inline-block;
	z-index:7;
	left:82%;
	top:3%;
	text-indent:4px;
}
.stopdiaporama
{
    position:absolute;
    left:0px;
	top:-2%;
	transition: left 0.7s;
	-moz-transition: left 0.7s;
	-webkit-transition: left 0.7s;
	-o-transition: left 0.7s;
}
.sdiaporama:hover .stopdiaporama 
{
    left:-60px;
}

.sactu
{
    position:absolute;
    width:57px;
	height:57px;
    overflow:hidden;
	display:inline-block;
	z-index:6;
	left:87%;
	top:3%;
	text-indent:4px;
}
.stopactu
{
    position:absolute;
    left:0px;
	top:-2%;
	transition: left 0.7s;
	-moz-transition: left 0.7s;
	-webkit-transition: left 0.7s;
	-o-transition: left 0.7s;
}
.sactu:hover .stopactu 
{
    left:-60px;
}
	
.sinfo
{
    position:absolute;
    width:57px;
	height:57px;
    overflow:hidden;
	display:inline-block;
	z-index:5;
	left:92%;
	top:3%;
	text-indent:4px;
}
.stopinfo
{
    position:absolute;
    left:0px;
	top:-2%;
	transition: left 0.7s;
	-moz-transition: left 0.7s;
	-webkit-transition: left 0.7s;
	-o-transition: left 0.7s;
}
.sinfo:hover .stopinfo
{
    left:-60px;
}

.pied
{
	position:absolute;
	width:40%;
	height:auto;
	left:31%;
	bottom:0%;
}


.STREET
{
	position:absolute;
	left: 3%;
	top:23%;
	font-family: 'underwood', Arial, serif;
	font-size: 85%;
	text-align:center;
	color:#ffffff;
}

.message
{
	top:15%;
	position: absolute;
	left:38%;
	font-family: 'underwood', Arial, serif;
	font-size: 85%;
	color:#ffffff;
}


   #slideshow {  
		top:24%;
		position: absolute;
		left:35%;
	    width: 640px;  
        height: 310px;  
        padding: 15px;  
        margin: 0 auto 2em;  
        border: 1px solid #ddd;  
        background: #FFF;  
        background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
		background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);  
        background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD); 		
        border-radius: 10px 10px 10px 10px;  
        box-shadow: 0 0 3px rgba(0,0,0, 0.2);  
    }  
       
  
    #slideshow:before,  
    #slideshow:after {  
        position: absolute;  
        bottom:16px;  
        z-index: -10;  
        width: 50%;  
        height: 20px;  
        content: " ";  
        background: rgba(0,0,0,0.1);  
        border-radius: 50%;  
        box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);  
    }  
    #slideshow:before {  
        left:0;
        -webkit-transform: rotate(-4deg);  
        -moz-transform: rotate(-4deg);  		
        transform: rotate(-4deg);  
    }  
    #slideshow:after {  
        right:0;
        -webkit-transform: rotate(4deg);  
        -moz-transform: rotate(4deg); 		
        transform: rotate(4deg);  
    } 
    /* gestion des dimensions et débordement du conteneur */  
    #slideshow .container {  
        position:relative;  
        width: 640px;  
        height: 310px;  
        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: 2000%;  
        height: 310px;  
    }  
      
    /* 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;*/  
    } 
	
    /* styles de nos légendes */  
    #slideshow figcaption {  
        position:absolute;  
        left:0; right:0; bottom: 5px;  
        padding: 7px;  
        margin:0;  
        border-top: 1px solid rgb(225,225,225);  
        text-align:center;  
        letter-spacing: 0.05em;  
        word-spacing: 0.05em;  
        font-family: 'underwood', Times, serif;  
        background: #fff;  
        background: rgba(255,255,255,0.7);  
        color: #000000;  
        text-shadow: -1px -1px 0 rgba(255,255,255,0.3);  
    }   	
	
	    /* fonction d'animation, n'oubliez pas de prefixer ! */  
 
	@-moz-keyframes slider {
		0%, 2%, 100%			{ left: 0 }
		5%, 7%					{ left: -100% }
		10%, 12%				{ left: -200% }
		15%, 17%				{ left: -300% }
		20%, 22%				{ left: -400% }
		25%, 27%				{ left: -500% }
		30%, 32%				{ left: -600% }
		35%, 37%				{ left: -700% }
		40%, 42%				{ left: -800% }
		45%, 47%				{ left: -900% }
		50%, 52%				{ left: -1000% }
		55%, 57%				{ left: -1100% }
		60%, 62%				{ left: -1200% }
		65%, 67%				{ left: -1300% }
		70%, 72%				{ left: -1400% }
		75%, 77%				{ left: -1500% }
		80%, 82%				{ left: -1600% }
		85%, 87%				{ left: -1700% }
		90%, 92%				{ left: -1800% }
		95%, 97%				{ left: -1900% }
	}
	@keyframes slider {
		0%, 2%, 100%			{ left: 0 }
		5%, 7%					{ left: -100% }
		10%, 12%				{ left: -200% }
		15%, 17%				{ left: -300% }
		20%, 22%				{ left: -400% }
		25%, 27%				{ left: -500% }
		30%, 32%				{ left: -600% }
		35%, 37%				{ left: -700% }
		40%, 42%				{ left: -800% }
		45%, 47%				{ left: -900% }
		50%, 52%				{ left: -1000% }
		55%, 57%				{ left: -1100% }
		60%, 62%				{ left: -1200% }
		65%, 67%				{ left: -1300% }
		70%, 72%				{ left: -1400% }
		75%, 77%				{ left: -1500% }
		80%, 82%				{ left: -1600% }
		85%, 87%				{ left: -1700% }
		90%, 92%				{ left: -1800% }
		95%, 97%				{ left: -1900% }
	}
	
    /* complétez le sélecteur : */  
    #slideshow .slider {  
        /* ... avec la propriété animation */ 
		-moz-animation: slider 240s infinite;		
        animation: slider 240s infinite;
		-moz-animation-delay: 9s;  		
		animation-delay:  9s;
    }
	
	 #timeline {  
        position: absolute;  
        background: #999;  
        bottom: 15px;  
        left: 15px;  
        height: 2px;  
        background: rgb(214,98,13);  
        background: rgba(214,98,13,.8);  
        width: 0;  
        /* fonction d'animation */  
        -moz-animation: timeliner 240s infinite;  
		animation: timeliner 240s infinite;
		-moz-animation-delay: 9s;  		
		animation-delay:  9s;
    }

    @keyframes timeliner {  
        0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100% { width: 0;     }  
        2%, 7%, 12%, 17%, 22%, 27%, 32%, 37%, 42%, 47%, 52%, 57%, 62%, 67%, 72%, 77%, 82%, 87%, 92%, 97%      { width: 640px; }  
    }

	@-moz-keyframes timeliner {  
        0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100% { width: 0;     }  
        2%, 7%, 12%, 17%, 22%, 27%, 32%, 37%, 42%, 47%, 52%, 57%, 62%, 67%, 72%, 77%, 82%, 87%, 92%, 97%        { width: 640px; }  
    }
	
		/* ajouter à l'élément : */  

	@keyframes figcaptionner { 
  	    0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100% { bottom: -55px;     }  
        2%, 7%, 12%, 17%, 22%, 27%, 32%, 37%, 42%, 47%, 52%, 57%, 62%, 67%, 72%, 77%, 82%, 87%, 92%, 97%      { bottom: 5px; }  
    }
	
	@-moz-keyframes figcaptionner { 
  	    0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100% { bottom: -55px;     }  
        2%, 7%, 12%, 17%, 22%, 27%, 32%, 37%, 42%, 47%, 52%, 57%, 62%, 67%, 72%, 77%, 82%, 87%, 92%, 97%      { bottom: 5px; }  
    }
	
	#slideshow figcaption {  
		/* ... la propriété animation */
		-moz-animation: figcaptionner 240s infinite;  		
		animation: figcaptionner 240s infinite;
		-moz-animation-delay: 9s;  		
		animation-delay:  9s ;
		bottom:-55px;
			
	} 
	
    .play_commands {  
        /* positionnement en haut à droite */   
        position: absolute;  
        top: -30px; 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: 1;  
        /* préparation de transition sur opacicty et right */
		-moz-transition: opacity 1s, right 1s;		
        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: #000;  
        background: rgba(255,255,255, 1);  
    }  
    .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 #000;   
        border-left: 20px solid rgba(255,255,255, 1);   
        /* renseignez 1 pour voir l'icône de suite */  
        opacity: 1;  
    }  
       
    /* 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 {  
		-moz-animation-play-state: paused; 
		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 {  
		-moz-animation-play-state: running;
		animation-play-state: running;  
}  
   
	/* switch entre les boutons */  
	.sl_command:target ~ #slideshow .pause      { opacity:0.4; }  
	#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.4; right: 55px; cursor: default; }	
	

    #slideshow .commands {  
        position: absolute;  
        top: 90%;  
        padding: 3px 8px;  
        border-bottom:0;  
        font-size: 1.3em;  
        color: #aaa;  
        text-decoration:none;  
        background-color: #eee;
		background-image: -moz-linear-gradient(#fff,#ddd);  		
        background-image: linear-gradient(#fff,#ddd);
        text-shadow: 0 0 1px #aaa;  
        border-radius: 50%;  
        box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
    }  
       
    #slideshow .prev { left: -5%; }  
    #slideshow .next { right: -5%; }  
       
    #slideshow .commands { display:none; }  
    #slideshow .commands1 { display: block; }  

    #slideshow .c_slider {  
        position: absolute;  
        left:0; top:0;  
        width: 2000%;  
        height: 310px;  
        /* multiple background */  
        background: url(img/C3D.jpg) 0 0 no-repeat,  
                    url(img/CACOMME.jpg) 640px 0 no-repeat,  
                    url(img/CCLOWN.jpg) 1280px 0 no-repeat,  
                    url(img/CENCOR.jpg) 1920px 0 no-repeat,
				    url(img/CENUMERIC.jpg) 2560px 0 no-repeat,  
                    url(img/CEVANESCENCE.jpg) 3200px 0 no-repeat,  
                    url(img/CJOCONDE.jpg) 3840px 0 no-repeat,
					url(img/CJOKER.jpg) 4480px 0 no-repeat,  
                    url(img/CKNUMERIC.jpg) 5120px 0 no-repeat,  
                    url(img/CLEOSDREAM.jpg) 5760px 0 no-repeat,
					url(img/CLEPOISSON.jpg) 6400px 0 no-repeat,
					url(img/CNOMADES.jpg) 7040px 0 no-repeat,
					url(img/COTAMOT.jpg) 7680px 0 no-repeat,
					url(img/CPALISSADES.jpg) 8320px 0 no-repeat,
					url(img/CPERTURBATIONS.jpg) 8960px 0 no-repeat,
					url(img/CPSYCHE.jpg) 9600px 0 no-repeat,
					url(img/Csacreye.jpg) 10240px 0 no-repeat,
					url(img/CSWIFT.jpg) 10880px 0 no-repeat,
					url(img/CTUNNEL.jpg) 11520px 0 no-repeat,
					url(img/CVALSE.jpg) 12160px 0 no-repeat;
        -moz-transition: background 1s;
		transition: background 1s;  
    }  	
	
    /* on cache le slider */  
    .sl_i:target ~ #slideshow .slider                                   { visibility: hidden }  
    /* on planque la 1ère pastille (cf. bonux suivant) */  
    .sl_i:target ~ #slideshow .dots_commands li:first-child a:after     { display:none; }  
    /* pour afficher la 2ème pastille (cf. bonux suivant) */  
    .sl_i:target ~ #slideshow .dots_commands li:first-child a:before    { display:block; }  
       
    /* lorsque on cible le premier slider */  
    /* on cache tous les "précédent" et "suivant" */  
    #sl_i1:target ~ #slideshow .commands                                { display: none; }  
    /* on affiche seulement deux flèches */  
    #sl_i1:target ~ #slideshow .commands1                               { display: block; }  
    /* correspond au décalage des images */  
    #sl_i1:target ~ #slideshow .c_slider                                { background-position: 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0, 8320px 0, 8960px 0, 9600px 0, 10240px 0, 10880px 0, 11520px 0, 12160px 0; }  
    /* on place la pastille tout à gauche */  
    #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before   { left:0; }  
       
    /* même procédé lorsqu'on cible le second slide */  
    #sl_i2:target ~ #slideshow .commands                                { display: none; }  
    #sl_i2:target ~ #slideshow .commands2                               { display: block; }  
    #sl_i2:target ~ #slideshow .c_slider                                { background-position: -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0, 8320px 0, 8960px 0, 9600px 0, 10240px 0, 10880px 0, 11520px 0; }  
    #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before   { left:18px; }  
       
    /* puis le 3ème */  
    #sl_i3:target ~ #slideshow .commands                                { display: none; }  
    #sl_i3:target ~ #slideshow .commands3                               { display: block; }  
    #sl_i3:target ~ #slideshow .c_slider                                { background-position: -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0, 8320px 0, 8960px 0, 9600px 0, 10240px 0, 10880px 0; }  
    #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before   { left:36px; }  
       
    /* et enfin le 4ème */  
    #sl_i4:target ~ #slideshow .commands                                { display: none; }  
    #sl_i4:target ~ #slideshow .commands4                               { display: block; }  
    #sl_i4:target ~ #slideshow .c_slider                                { background-position: -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0, 8320px 0, 8960px 0, 9600px 0, 10240px 0; }  
    #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before   { left:54px; }  
	
    /* et enfin le 5ème */  
    #sl_i5:target ~ #slideshow .commands                                { display: none; }  
    #sl_i5:target ~ #slideshow .commands5                               { display: block; }  
    #sl_i5:target ~ #slideshow .c_slider                                { background-position: -2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0, 8320px 0, 8960px 0, 9600px 0; }  
    #sl_i5:target ~ #slideshow .dots_commands li:first-child a:before   { left:72px; } 

    /* et enfin le 6ème */  
    #sl_i6:target ~ #slideshow .commands                                { display: none; }  
    #sl_i6:target ~ #slideshow .commands6                               { display: block; }  
    #sl_i6:target ~ #slideshow .c_slider                                { background-position: -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0, 8320px 0, 8960px 0; }  
    #sl_i6:target ~ #slideshow .dots_commands li:first-child a:before   { left:90px; } 

    /* et enfin le 7ème */  
    #sl_i7:target ~ #slideshow .commands                                { display: none; }  
    #sl_i7:target ~ #slideshow .commands7                               { display: block; }  
    #sl_i7:target ~ #slideshow .c_slider                                { background-position: -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0, 8320px 0; }  
    #sl_i7:target ~ #slideshow .dots_commands li:first-child a:before   { left:108px; } 

    /* et enfin le 8ème */  
    #sl_i8:target ~ #slideshow .commands                                { display: none; }  
    #sl_i8:target ~ #slideshow .commands8                               { display: block; }  
    #sl_i8:target ~ #slideshow .c_slider                                { background-position: -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0, 7680px 0; }  
    #sl_i8:target ~ #slideshow .dots_commands li:first-child a:before   { left:126px; } 

    /* et enfin le 9ème */  
    #sl_i9:target ~ #slideshow .commands                                { display: none; }  
    #sl_i9:target ~ #slideshow .commands9                               { display: block; }  
    #sl_i9:target ~ #slideshow .c_slider                                { background-position: -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0, 7040px 0; }  
    #sl_i9:target ~ #slideshow .dots_commands li:first-child a:before   { left:144px; } 

    /* et enfin le 10ème */  
    #sl_i10:target ~ #slideshow .commands                                { display: none; }  
    #sl_i10:target ~ #slideshow .commands10                               { display: block; }
    #sl_i10:target ~ #slideshow .c_slider                                { background-position: -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0, 6400px 0; }  
    #sl_i10:target ~ #slideshow .dots_commands li:first-child a:before   { left:162px; }

    /* et enfin le 11ème */  
    #sl_i11:target ~ #slideshow .commands                                { display: none; }  
    #sl_i11:target ~ #slideshow .commands11                               { display: block; }
    #sl_i11:target ~ #slideshow .c_slider                                { background-position: -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0, 5760px 0; }  
    #sl_i11:target ~ #slideshow .dots_commands li:first-child a:before   { left:180px; }

    /* et enfin le 12ème */  
    #sl_i12:target ~ #slideshow .commands                                { display: none; }  
    #sl_i12:target ~ #slideshow .commands12                               { display: block; }
    #sl_i12:target ~ #slideshow .c_slider                                { background-position: -7040px 0, -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0, 5120px 0; }  
    #sl_i12:target ~ #slideshow .dots_commands li:first-child a:before   { left:198px; } 

    /* et enfin le 13ème */  
    #sl_i13:target ~ #slideshow .commands                                { display: none; }  
    #sl_i13:target ~ #slideshow .commands13                               { display: block; }
    #sl_i13:target ~ #slideshow .c_slider                                { background-position: -7680px 0, -7040px 0, -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0, 4480px 0; }  
    #sl_i13:target ~ #slideshow .dots_commands li:first-child a:before   { left:216px; } 

    /* et enfin le 14ème */  
    #sl_i14:target ~ #slideshow .commands                                { display: none; }  
    #sl_i14:target ~ #slideshow .commands14                               { display: block; }
    #sl_i14:target ~ #slideshow .c_slider                                { background-position: -8320px 0, -7680px 0, -7040px 0, -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0, 3840px 0; }  
    #sl_i14:target ~ #slideshow .dots_commands li:first-child a:before   { left:234px; } 

    /* et enfin le 15ème */  
    #sl_i15:target ~ #slideshow .commands                                { display: none; }  
    #sl_i15:target ~ #slideshow .commands15                               { display: block; }
    #sl_i15:target ~ #slideshow .c_slider                                { background-position: -8960px 0, -8320px 0, -7680px 0, -7040px 0, -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0, 3200px 0; }  
    #sl_i15:target ~ #slideshow .dots_commands li:first-child a:before   { left:252px; } 

    /* et enfin le 16ème */  
    #sl_i16:target ~ #slideshow .commands                                { display: none; }  
    #sl_i16:target ~ #slideshow .commands16                               { display: block; }
    #sl_i16:target ~ #slideshow .c_slider                                { background-position: -9600px 0, -8960px 0, -8320px 0, -7680px 0, -7040px 0, -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0, 2560px 0; }  
    #sl_i16:target ~ #slideshow .dots_commands li:first-child a:before   { left:270px; } 

    /* et enfin le 17ème */  
    #sl_i17:target ~ #slideshow .commands                                { display: none; }  
    #sl_i17:target ~ #slideshow .commands17                               { display: block; }
    #sl_i17:target ~ #slideshow .c_slider                                { background-position: -10240px 0, -9600px 0, -8960px 0, -8320px 0, -7680px 0, -7040px 0, -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0, 1920px 0; }  
    #sl_i17:target ~ #slideshow .dots_commands li:first-child a:before   { left:288px; } 

    /* et enfin le 18ème */  
    #sl_i18:target ~ #slideshow .commands                                { display: none; }  
    #sl_i18:target ~ #slideshow .commands18                               { display: block; }
    #sl_i18:target ~ #slideshow .c_slider                                { background-position: -10880px 0, -10240px 0, -9600px 0, -8960px 0, -8320px 0, -7680px 0, -7040px 0, -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0, 1280px 0; }  
    #sl_i18:target ~ #slideshow .dots_commands li:first-child a:before   { left:306px; } 

    /* et enfin le 19ème */  
    #sl_i19:target ~ #slideshow .commands                                { display: none; }  
    #sl_i19:target ~ #slideshow .commands19                               { display: block; }
    #sl_i19:target ~ #slideshow .c_slider                                { background-position: -11520px 0, -10880px 0, -10240px 0, -9600px 0, -8960px 0, -8320px 0, -7680px 0, -7040px 0, -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0, 640px 0; }  
    #sl_i19:target ~ #slideshow .dots_commands li:first-child a:before   { left:324px; } 

    /* et enfin le 20ème */  
    #sl_i20:target ~ #slideshow .commands                                { display: none; }  
    #sl_i20:target ~ #slideshow .commands20                               { display: block; }
    #sl_i20:target ~ #slideshow .c_slider                                { background-position: -12160px 0, -11520px 0, -10880px 0, -10240px 0, -9600px 0, -8960px 0, -8320px 0, -7680px 0, -7040px 0, -6400px 0, -5760px 0, -5120px 0, -4480px 0, -3840px 0, -3200px 0,-2560px 0, -1920px 0, -1280px 0, -640px 0, 0 0; }  
    #sl_i20:target ~ #slideshow .dots_commands li:first-child a:before   { left:342px; }  	

   .dots_commands  {  
        padding:0;  
        margin:35px 0 0;  
        text-align: center;  
    }  
    .dots_commands li {  
        display: inline;  
        padding:0; margin:0;  
    }  
    .dots_commands a {  
        position: relative;  
        display: inline-block;  
        height:8px; width: 8px;  
        margin: 0 5px;  
        text-indent: -9999px;  
        background: #fff;  
       
        border-radius: 50%;  
        box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;  
    }  

    .dots_commands li:first-child a { 
		z-index: 25;
	}  
	
    /* quelques styles au focus */  
    .dots_commands a:focus {   
        outline: none;  
        background: orange;  
    } 

   
	/* c'est parti pour l'animation ! */  
	@keyframes dotser {  
		0%, 100%    { opacity: 1; left: 0;  }
         
		2%         { opacity: 1; left: 0;      }  
		3%         { opacity: 0; left: 0;      }  
		4%         { opacity: 0; left: 18px;   }  
		5%         { opacity: 1; left: 18px;   }  
         
		7%         { opacity: 1; left: 18px;   }  
		8%         { opacity: 0; left: 18px;   }  
		9%         { opacity: 0; left: 36px;   }  
		10%         { opacity: 1; left: 36px;   }  
         
		12%         { opacity: 1; left: 36px;   }  
		13%         { opacity: 0; left: 36px;   }  
		14%         { opacity: 0; left: 54px;   }  
		15%         { opacity: 1; left: 54px;   }  

		17%         { opacity: 1; left: 54px;   }  
		18%         { opacity: 0; left: 54px;   }  
		19%         { opacity: 0; left: 72px;   }  
		20%         { opacity: 1; left: 72px;   }

		22%         { opacity: 1; left: 72px;   }  
		23%         { opacity: 0; left: 72px;   }  
		24%         { opacity: 0; left: 90px;   }  
		25%         { opacity: 1; left: 90px;   }

		27%         { opacity: 1; left: 90px;   }  
		28%         { opacity: 0; left: 90px;   }  
		29%         { opacity: 0; left: 108px;   }  
		30%         { opacity: 1; left: 108px;   }

		32%         { opacity: 1; left: 108px;   }  
		33%         { opacity: 0; left: 108px;   }  
		34%         { opacity: 0; left: 126px;   }  
		35%         { opacity: 1; left: 126px;   }

		37%         { opacity: 1; left: 126px;   }  
		38%         { opacity: 0; left: 126px;   }  
		39%         { opacity: 0; left: 144px;   }  
		40%         { opacity: 1; left: 144px;   }

		42%         { opacity: 1; left: 144px;   }  
		43%         { opacity: 0; left: 144px;   }  
		44%         { opacity: 0; left: 162px;   }  
		45%         { opacity: 1; left: 162px;   }
		
		47%         { opacity: 1; left: 162px;   }  
		48%         { opacity: 0; left: 162px;   }
		49%         { opacity: 0; left: 180px;   }
		50%         { opacity: 1; left: 180px;   }

		52%         { opacity: 1; left: 180px;   }  
		53%         { opacity: 0; left: 180px;   }
		54%         { opacity: 0; left: 198px;   }
		55%         { opacity: 1; left: 198px;   }
		
		57%         { opacity: 1; left: 198px;   }  
		58%         { opacity: 0; left: 198px;   }
		59%         { opacity: 0; left: 216px;   }
		60%         { opacity: 1; left: 216px;   }
		
		62%         { opacity: 1; left: 216px;   }  
		63%         { opacity: 0; left: 216px;   }
		64%         { opacity: 0; left: 234px;   }
		65%         { opacity: 1; left: 234px;   }
		
		67%         { opacity: 1; left: 234px;   }  
		68%         { opacity: 0; left: 234px;   }
		69%         { opacity: 0; left: 252px;   }
		70%         { opacity: 1; left: 252px;   }
		
		72%         { opacity: 1; left: 252px;   }  
		73%         { opacity: 0; left: 252px;   }
		74%         { opacity: 0; left: 270px;   }
		75%         { opacity: 1; left: 270px;   }

		77%         { opacity: 1; left: 270px;   }  
		78%         { opacity: 0; left: 270px;   }
		79%         { opacity: 0; left: 288px;   }
		80%         { opacity: 1; left: 288px;   }

		82%         { opacity: 1; left: 288px;   }  
		83%         { opacity: 0; left: 288px;   }
		84%         { opacity: 0; left: 306px;   }
		85%         { opacity: 1; left: 306px;   }

		87%         { opacity: 1; left: 306px;   }  
		88%         { opacity: 0; left: 306px;   }
		89%         { opacity: 0; left: 324px;   }
		90%         { opacity: 1; left: 324px;   }
		
		92%         { opacity: 1; left: 324px;   }  
		93%         { opacity: 0; left: 324px;   }
		94%         { opacity: 0; left: 342px;   }
		95%         { opacity: 1; left: 342px;   }

		97%         { opacity: 1; left: 342px;   }  
		98%         { opacity: 0; left: 342px;   }
		99%         { opacity: 0; left: 0;  }  
	}

	@-moz-keyframes dotser {  
		0%, 100%    { opacity: 1; left: 0;  }
         
		2%         { opacity: 1; left: 0;      }  
		3%         { opacity: 0; left: 0;      }  
		4%         { opacity: 0; left: 18px;   }  
		5%         { opacity: 1; left: 18px;   }  
         
		7%         { opacity: 1; left: 18px;   }  
		8%         { opacity: 0; left: 18px;   }  
		9%         { opacity: 0; left: 36px;   }  
		10%         { opacity: 1; left: 36px;   }  
         
		12%         { opacity: 1; left: 36px;   }  
		13%         { opacity: 0; left: 36px;   }  
		14%         { opacity: 0; left: 54px;   }  
		15%         { opacity: 1; left: 54px;   }  

		17%         { opacity: 1; left: 54px;   }  
		18%         { opacity: 0; left: 54px;   }  
		19%         { opacity: 0; left: 72px;   }  
		20%         { opacity: 1; left: 72px;   }

		22%         { opacity: 1; left: 72px;   }  
		23%         { opacity: 0; left: 72px;   }  
		24%         { opacity: 0; left: 90px;   }  
		25%         { opacity: 1; left: 90px;   }

		27%         { opacity: 1; left: 90px;   }  
		28%         { opacity: 0; left: 90px;   }  
		29%         { opacity: 0; left: 108px;   }  
		30%         { opacity: 1; left: 108px;   }

		32%         { opacity: 1; left: 108px;   }  
		33%         { opacity: 0; left: 108px;   }  
		34%         { opacity: 0; left: 126px;   }  
		35%         { opacity: 1; left: 126px;   }

		37%         { opacity: 1; left: 126px;   }  
		38%         { opacity: 0; left: 126px;   }  
		39%         { opacity: 0; left: 144px;   }  
		40%         { opacity: 1; left: 144px;   }

		42%         { opacity: 1; left: 144px;   }  
		43%         { opacity: 0; left: 144px;   }  
		44%         { opacity: 0; left: 162px;   }  
		45%         { opacity: 1; left: 162px;   }
		
		47%         { opacity: 1; left: 162px;   }  
		48%         { opacity: 0; left: 162px;   }
		49%         { opacity: 0; left: 180px;   }
		50%         { opacity: 1; left: 180px;   }

		52%         { opacity: 1; left: 180px;   }  
		53%         { opacity: 0; left: 180px;   }
		54%         { opacity: 0; left: 198px;   }
		55%         { opacity: 1; left: 198px;   }
		
		57%         { opacity: 1; left: 198px;   }  
		58%         { opacity: 0; left: 198px;   }
		59%         { opacity: 0; left: 216px;   }
		60%         { opacity: 1; left: 216px;   }
		
		62%         { opacity: 1; left: 216px;   }  
		63%         { opacity: 0; left: 216px;   }
		64%         { opacity: 0; left: 234px;   }
		65%         { opacity: 1; left: 234px;   }
		
		67%         { opacity: 1; left: 234px;   }  
		68%         { opacity: 0; left: 234px;   }
		69%         { opacity: 0; left: 252px;   }
		70%         { opacity: 1; left: 252px;   }
		
		72%         { opacity: 1; left: 252px;   }  
		73%         { opacity: 0; left: 252px;   }
		74%         { opacity: 0; left: 270px;   }
		75%         { opacity: 1; left: 270px;   }

		77%         { opacity: 1; left: 270px;   }  
		78%         { opacity: 0; left: 270px;   }
		79%         { opacity: 0; left: 288px;   }
		80%         { opacity: 1; left: 288px;   }

		82%         { opacity: 1; left: 288px;   }  
		83%         { opacity: 0; left: 288px;   }
		84%         { opacity: 0; left: 306px;   }
		85%         { opacity: 1; left: 306px;   }

		87%         { opacity: 1; left: 306px;   }  
		88%         { opacity: 0; left: 306px;   }
		89%         { opacity: 0; left: 324px;   }
		90%         { opacity: 1; left: 324px;   }
		
		92%         { opacity: 1; left: 324px;   }  
		93%         { opacity: 0; left: 324px;   }
		94%         { opacity: 0; left: 342px;   }
		95%         { opacity: 1; left: 342px;   }

		97%         { opacity: 1; left: 342px;   }  
		98%         { opacity: 0; left: 342px;   }
		99%         { opacity: 0; left: 0;  }    
	}

	
	/* on style after et before, on utilisera les deux */  
	.dots_commands li:first-child a:after,  
	.dots_commands li:first-child a:before {  
		position: absolute;  
		top: 0; left: 0;  
		content: " ";  
		width: 8px; height: 8px;  
		background: #a44040;  
		z-index:20;  
		border-radius: 50%;  
		box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;  
	}  

	/* on anime "after" */  
	.dots_commands li:first-child a:after {
		-moz-animation: dotser 240s infinite;	
		animation: dotser 240s infinite;
		-moz-animation-delay: 9s;  		
		animation-delay:  9s;
	}
		
	/* on cache "before", on l'utilise uniquement au clic (cf. bonux précédent) */  
	.dots_commands li:first-child a:before { display:none; }