/*lire le fichier d'aide placé dans le répertoire themes*/
/*fichier css global*/

.cookies{
background: red;
border-radius: 15px;
display: block;
font-size: 13pt;
font-weight: bold;
height: 200px;
padding: 25px;
position: fixed;
right: 10px;
text-align: center;
top: 10px;
width: 200px;
z-index: 5;
}

.close{
background-image: url(images/close.gif);
float: right;
height: 21px;
left: 5%;
position: relative;
top: -10%;
width: 21px;
z-index: 5;
}

.body{
/*background-attachment: fixed;
background-repeat: repeat;
background-image: url('images/hexagone.gif');
background-repeat: xy;*/
}

/*ne pas modifier centre la page*/
.centerbody{
border-radius: 30px 50px 0 0;
min-height: 1100px;
padding-bottom: 55px;
margin-left:auto;
margin-right:auto;
width: 1000px;
position: relative;
z-index: 5;
}

.header{
background-position: center center;
background-repeat: no-repeat;
border-radius: 30px 50px 0 0;
height: 150px;
text-align: center;
vertical-align: middle;
z-index: 5;
}
.lumtemps{
background-color: black;
border-radius: 30px 50px 0px 0px;
height:150px;
opacity:0;
width:1000px;
z-index: 5;
}

.flou {background-image: radial-gradient(#FFF, #BCC);height: 10px; width: 10px; border-radius: 5000px; opacity: 0.4; position: fixed;float: left;display: none;}
.vague {background-image: radial-gradient(#FFF, #BCC);height: 10px; width: 10px; border-radius: 5000px; opacity: 0.8; position: fixed;float: left;display: none;}

.s1, .s2, .s3, .s4{
height: 40px;
width: 40px;
display: inline-block;
position: relative;
}

/* titre la ferme du petit mont déroulant*/
.tlfpm{
font-size: 32pt;
font-weight: bold;
}

/*ne pas modifier affiche la meteo*/
.tablemeteo{
background-color: transparent;
height: 150px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
position: relative;
top: -150px;
width: 1000px;
z-index: 6;
}
.tablemeteo a{
border: 0px;
text-align: left;
vertical-align: bottom;
}
.tablemeteo a:hover{
border-style: outset;
}
/*affiche les icon du bandeau*/
.iconheader{
position: relative;
top: -20px;
z-index: 5;
}

/*ne pas modifier cadre et emplacement du menu*/
nav{
display: unline-block;
float: left;
padding-top: 0px;
padding-bottom: 0px;
vertical-align: top;
width: 200px;
z-index: 5;
}

/*les menus*/
.m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .ma{
border-bottom-style: solid;
border-color: black;
border-radius: 0 20px 20px 0;
padding-bottom: 10px;
padding-left: 20px;
z-index: 5;
}
.m1 a, .m2 a, .m3 a, .m4 a, .m5 a, .m6 a, .m7 a, .m8 a, .m9 a, .ma a{
color: black;
font-size: 16pt;
font-weight: bold;
text-align: left;
text-decoration:none;
}
.m1:first-letter, .m2:first-letter, .m3:first-letter, .m4:first-letter, .m5:first-letter, .m6:first-letter, .m7:first-letter, .m8:first-letter, .m9:first-letter, .ma:first-letter{
text-transform : capitalize;
}
.m6 a , .m7 a{
color: blue;
}
.ma a{
color: red;
}
.ma {
border-radius: 20px 0 0 20px;
margin-left: 10px;
}

.m1 a:hover , .m2 a:hover, .m3 a:hover , .m4 a:hover, .m5 a:hover, .m8 a:hover .m9 a:hover{
color: #3B3B3B;
border-bottom-style: ridge;
}
.m6 a:hover, .m7 a:hover{
color: #4A71F3;
border-bottom-style: ridge;
}
.ma a:hover{
color: #FE2B6A;
border-bottom-style: ridge;
}
.m1:active, .m2:active, .m3:active, .m4:active, .m5:active, .m6:active, .m7:active, .m8:active, .m9:active, .ma:active{
border-bottom-style: groove;
}
/*les sous menus*/
.sm{
/*background-color : green;*/
border-width: 2px;
border-color: black;
padding-bottom: 5px;
padding-left: 30px;
z-index: 5;
}
.sm a{
color: black;
font-size: 12pt;
text-align: left;
text-decoration:none;
}
.sm:hover{
border-bottom-style: ridge;
text-decoration: blink;
}
.sm:active{
border-bottom-style: groove;
}
/*le menu réseaux sociaux*/
.ressoc{
width: 200px;
}
.facebook{
display: inline-block;
margin-left: 20%;
height: 50px;
width: 50px;
z-index: 10;
}
.twitter{
display: inline-block;
margin-right: 20%;
height: 50px;
width: 50px;
z-index: 10;
}

/*ne pas modifier affiche les news dans le menu*/
.popub{
border: 2px solid black;
border-radius: 20px;
display: unline-block;
height: 286px;
overflow: hidden;
text-decoration: none;
z-index: 5;
}
.bodypopub{
color: white;	/*couleur du texte des news du menu*/
display: unline-block;
font-size: 10pt;
overflow: hidden;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
text-align: justify;
text-decoration: none;
vertical-align: middle;
z-index: 5;
}
.bodypopub:first-letter{
text-transform: uppercase;
}
.titlepopub{
font-size: 14pt;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.titlepopub a{
color: white;	/*couleur du titre des news du menu*/
}
.titlepopub:first-letter{
text-transform: uppercase;
}

/*affiche l'inscription aux newsletter*/
.newsletter{
border: 1px solid black;
border-bottom: 5px solid black;
border-radius: 0 0 20px 20px;
font-size: 14pt;
font-weight: bold;
text-align: center;
z-index: 5;
}

/*ne pas modifier place le corp de la page*/
.selection{
display: unline-block;
margin-left: 210px;
vertical-align: top;
z-index: 5;
}

/*ne pas modifier c'est le pied de page*/
.footer{
border-radius: 0 0 50px 50px;
display: block;
float: left;
height: 150px;
margin-left:auto;
margin-right:auto;
text-align : center;
vertical-align: bottom;
width: 1000px;
z-index: 5;
}
.infofooter a{
font-size: 14pt;
font-weight: bold;
text-align: right;
text-decoration: none;
vertical-align: middle;
}
.copyright{
text-align: center;
text-decoration: none;
vertical-align: middle;
}

/*ne pas modifier affiche le viewer*/
.bottomviewer{
left: 0px;
background-color: transparent;
position: relative;
text-align: left;
vertical-align: bottom;
z-index: 5;
}
.textindex{
background-image: radial-gradient(#808080, #EFE);
border-radius: 35px;
display: inline-block;
margin-top: 10px;
padding: 10px;
text-align: justify;
vertical-align: top;
width: 480px;
}
.horaire{
background-image: radial-gradient(#9F8, #FFF);
border-radius: 35px;
display: inline-block;
margin-top: 10px;
padding: 10px;
text-align: justify;
vertical-align: top;
width: 260px;
margin-left: 5;
}
.viewernews{
background-image: radial-gradient(grey, white);
border-top: 2px solid;
border-left: 1px solid;
border-right: 3px solid;
border-bottom: 4px solid;
border-radius: 10px 10px 70px 5px;
display: block;
height: 202px;
overflow: hidden;
position: relative;
top: 0px;
text-align: left;
vertical-align: top;
max-width: 1000px;
z-index: 5;
margin-top: 10px;
min-width:700px;
}
.viewer{
border-radius: 30px;
overflow: hidden;
text-align: left;
z-index: 5;
}
.vw{
left: 0px;
height: 0px;
position: relative;
visibility: hidden;
top: -100px;
width: 40px;
z-index: 5;
}
.vw1{
height: 0px;
left: 0px;
position: relative;
opacity:0.6;
top: -100px;
width: 40px;
z-index: 6;
}
.vw1 a, .vw2 a, .vw3 a, .vw4 a, .vw5 a{
}
.vw1 a:hover, .vw2 a:hover, .vw3 a:hover, .vw4 a:hover, .vw5 a:hover{
}
.annonce{
display: inline-block;
padding: 5px;
vertical-align: middle;
width: 560px;
z-index: 5;
}

/*ne pas modifier affiche les cadres du corp de page*/
.cella{
background-image: radial-gradient(grey, white);
border-radius: 35px;
display: unline;
margin-top: 10px;
padding-bottom: 15px;
padding-top: 15px;
z-index: 5;
max-width: 1000px;
position: relative;
min-width:700px;
}
.cellna{
background-image: radial-gradient(grey, white);
border-radius: 35px;
display: unline;
margin-top: 10px;
opacity:0.8;
padding-bottom: 15px;
padding-top: 15px;	/*oppacité des cadres non actif*/
z-index: 5;
max-width: 1000px;
position: relative;
min-width:700px;
}
.cellcenter{
margin-left: auto;
margin-right: auto;
width:755px;
z-index: 5;
}
.animations{
color: black;
font-size: 24px;
font-weight: bold;
text-align: center;
z-index: 5;
}
.infoanimations{
color: black;
}
.cellcompl{
display: inline-block;
padding: 10px;
z-index: 5;
}
.celltitle{
font-size: 14pt;
font-weight: bold;
text-align: center;
width: 555px;
padding-bottom: 20px;
}
.celltitle a{
border-radius: 10px;
padding-left: 25px;
padding-right: 25px;
font-style: oblique;
text-decoration: none;
quotes: "“" "”";
}
.celltitle a::before {
content: open-quote;
}
.celltitle a::after {
content: close-quote;
position: relative;
top: 7px;
}
.celltitle:first-letter{
text-transform: uppercase;
}
.celltxt{
display: inline-block;
min-height: 207px;
text-align: center;
vertical-align: middle;
width: 555px;
z-index: 5;
color: black;
}
.cellimgpl{
display: inline-block;
vertical-align: top;
min-height: 200px;
z-index: 5;
}
.cellimg{
border-radius: 10px 10px 10px 10px;
cursor: pointer; 
display: inline-block;
height: 200px;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 200px;
z-index: 5;
}
.cellimg a{
color: white;
text-decoration: none;
}
.cellimg span{
display: none
}
.cellimg:hover span{
background-color: rgba(0, 0, 255, 0.7);
color: white;
display:block;
position:relative;
padding:5px;
text-align: justify;
top: -30px;
width:200px;
z-index: 6;
}
.cellimgl{
border: 1px solid;
border-radius: 100px 100px 20px 100px; 
cursor: pointer; 
display: block;
height: 200px;
overflow: hidden;
text-align: center;
vertical-align: top;
width: 200px;
z-index: 5;
}
.cellimgl a{
text-decoration: none;
color: white;
}
.cellimgl span{
display: none
}
.cellimgl:hover span{
display:block;
position:relative;
width:200px;
top: -100px;
background-color: rgba(0, 0, 255, 0.7);
text-align: justify;
padding:5px;
z-index: 20;
}
.cellimgr{
border: 1px solid;
border-radius: 100px 100px 100px 20px; 
cursor: pointer; 
display: block;
height: 200px;
overflow: hidden;
text-align: center;
vertical-align: top;
width: 200px;
z-index: 5;
}
.cellimgr a{
text-decoration: none;
color: white;
}
.cellimgr span{
display: none
}
.cellimgr:hover span{
display:block;
position:relative;
width:200px;
top: -100px;
background-color: rgba(0, 0, 255, 0.7);
text-align: justify;
padding:5px;
z-index: 20;
}
.picto{
display: inline-block;
float: left;
z-index: 5;
}

.menucab1{
background-color: #BBC;
border: 1px solid;
border-radius: 15px 15px 0 0;
cursor: pointer; 
display: inline-block;
padding: 5px;
z-index: 6;
position: relative;
}
.menucab2{
background-color: #BBC;
border: 1px solid;
border-radius: 15px 15px 0 0;
cursor: pointer; 
display: inline-block;
padding: 5px;
z-index: 6;
position: relative;
}
.menucab3{
background-color: #BBC;
border: 1px solid;
border-radius: 15px 15px 0 0;
cursor: pointer; 
display: inline-block;
padding: 5px;
z-index: 6;
position: relative;
}
.menucab4{
background-color: #BBC;
border: 1px solid;
border-radius: 15px 15px 0 0;
cursor: pointer; 
display: inline-block;
padding: 5px;
z-index: 6;
position: relative;
}
.textcabane, .prixcabane, .bulle, .gite{
display: block;
z-index: 5;
position: relative;
padding: 10px;
top: -1px;
background-color: #EEE;
border-top: 1px solid;
max-width: 1000px;
min-width: 700px
}
/*ne pas modifier affiche la popup de la méteo*/
.popupmeteo{
color: black;
height: 50px;
left: 60px;
position: relative;
visibility: hidden;
top: -40px;
width: 50px;
z-index: 5;
}

.tabinfcab{
display: block;
float : right;
}
.tabline{
}
.cellimgcab{
border: 2px solid green;
border-radius: 5px;
display: inline-block;
float: left;
height: 33px;
overflow: hidden;
text-align: center;
width: 32px;
z-index: 5;
}
.celltxtcab{
border: 2px solid green;
border-radius: 5px;
height: 33px;
display: inline-block;
width: 120px;
float: left;
z-index: 5;
}
.cellinfcab{
border: 2px solid green;
border-radius: 5px;
height: 33px;
display: inline-block;
width: 40px;
float: left;
z-index: 5;
}

.diapo{
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: 50%;
left: 50%;
margin-left:-375px;
margin-top: -250px;
min-height: 500px;
width: 750px;
z-index: 6;
}
.imgdiapo{
margin-top:20;
text-align: center;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
min-height: 200px;
width: 500px;
}
.exit{
float: right;
background-color: red;
height: 10px;
width: 10px;
}
.previmg ,.nextimg{
font-size: 24;
font-weight: bold;
float: left;
margin-left: 20%;
background-color: red;
border-right: 1px solid black;
border-bottom: 2px solid black;
border-radius: 20px 20px 20px 20px;
height: 30px;
width: 40px;
margin-top: 10px;
}
.nimgdiapo{
font-size: 24;
font-weight: bold;
border-right: 1px solid black;
border-bottom: 2px solid black;
border-radius: 20px 20px 20px 20px;
float: left;
margin-left: 20%;
background-color: white;
height: 30px;
width: 60px;
margin-top: 15px;
}
.menudiapo{
text-align: center;
display: inline;
height: 500px;
width: 100px;
z-index: 5;
}

img {
background-image: url("images/logo.gif");
}

.framelogin{

}

.bottom ,.bottomlogin{
border-radius: 5px;
border: solid;
width: 50px;
text-align: center;
float: right;
background: white;
}

.bottom:hover ,.bottomlogin:hover{
border: solid grey;
}

.bottomlogin{
top: -10px;
position: relative;
}

.text{
min-height: 25px;
text-align: right;
}

.input{
float: right;
width: 240px;
}

.notif{
display: none;
color: red;
text-align: center;
}

.register{
z-index:1;
background-color: white;
vertical-align: middle;
display: inline-block;
border: solid;
border-radius: 10px;
padding: 10px;
width: 425px;
}

.login{
z-index:2;
display: inline-block;
background-color: white;
border: medium solid;
border-radius: 10px;
padding: 10px;
Width: 290px;
vertical-align: Top;
}

.title{
color: orange;
font-size: 20px;
font-style: bold;
text-align: center;
border-bottom: solid;
border-radius: 10px;
margin: 10px;
}

.comptetxt{
font-weight: bold;
font-size: 16px;
}

iframe{
border: none;
height: 50px;
width: 100%;}

.mesinfos{
width: 45%;
background-color: white;
display: inline-block;
border: solid;
border-radius: 10px;
padding: 10px;
margin-right: 10px;
}

.mesmodif{
width: 45%;
background-color: white;
display: inline-block;
border: solid;
border-radius: 10px;
padding: 10px;
vertical-align: top;
}

.colum{
display: inline-block;
width: 35px;
height: 105px;
overflow: hidden;
border: 4px ridge #808080;
margin-left: 42px;
}

.casebandi{
position: relative;
display: block;
background-color: blue;
width: 35px;
height: 35px;
}

.tirette{
background-image: url(images/tirette.gif);
display: inline-block;
background-color:red;
width:29px;
height:94px;
position: relative;
top: -508;
left: -57;
z-index: 10;
}

.banman{
display: inline-block;
width: 400px;
height: 135px;
padding-left: 50px;
padding-top: 160px;
}

.banimg{
background-image: url("images/banman.gif");
display: inline-block;
width: 398px;
height: 318px;
position: relative;
top: -284px;
left: 0px;
}

.bbold{
font-weight: bold;
}
.bitalic{
font-style: italic;
}
.bundline{
text-decoration: underline;
}

.savec{
color: green;
}

.bottommenu{
background-image: radial-gradient(#0489B1, white);
border-radius: 10px;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
}

.resacab{
background-image: radial-gradient(#ab76d7, #ace4f3cc);
border-radius: 30px;
padding: 10px;
}

.alert{
background-color: red;
font-weight: bold;
border-radius: 15px;
padding: 5px;
}

.infocellcab{position: fixed; background-color: white;text-align: left; z-index: 10;}

.lecteurmois{display: block;}

.menumois{display: block;height: 40px;background-image: url("/themes/images/BarreMois.jpg");width: 290px;overflow: hidden;border-radius: 20px 20px 0 0;padding-left: 3px;}

.postmois{height:40px;width:40px;display:inline-block;float: left;top: 0;text-align: center;border-radius: 15px 0 0 0;line-height: 30px;font-size: 50px;font-weight: bold;font-family: Cursive;cursor: pointer;}

.mois{height:40px;width:208px;display:inline-block;float: left;top: 0;text-align: center;line-height: 36px;font-size: 25px;font-weight: bold;font-family: Cursive;}

.mois0, .mois1, .mois2, .mois3, .mois4, .mois5, .mois6, .mois7, .mois8, .mois9, .mois10, .mois11{}

.nextmois{height:40px;width:40px;display:inline-block;float: left;top: 0;text-align: center;border-radius: 0 15px 0 0;line-height: 30px;font-size: 50px;font-weight: bold;font-family: Cursive;cursor: pointer;}

.ligne{display: block;height: 42px;}

.casein{height:40px;width:40px;display:inline-block;border: 1px solid black;float: left;top: 0;opacity: 0.5;background-color: orange;border-radius: 5px 5px 5px 5px;line-height: 30px;Cursor: Not-Allowed;}

.caseact{height:40px;width:40px;display:inline-block;border: 1px solid black;float: left;top: 0;background-color: green;text-align: center;border-radius: 5px 5px 5px 5px;line-height: 30px;cursor: pointer;}

.case{height:40px;width:40px;display:inline-block;border: 1px solid black;float: left;top: 0;background-color: #C60;text-align: center;border-radius: 5px 5px 5px 5px;line-height: 30px;}

.casepast{height:40px;width:40px;display:inline-block;border: 1px solid black;float: left;top: 0;background-color: #F60;text-align: center;opacity: 0.5;border-radius: 5px 5px 5px 5px;Cursor: Not-Allowed;line-height: 30px;}

.textcab{height:25px;width:99px;display:inline-block;border: 1px solid black;background-color: orange;text-align: center;border-radius: 15px 15px 15px 15px;}

.textnuit{position: relative;display: inline-block;}

.textprix{background-color: #F5F;height:25px;width:99px;display:inline-block;border: 1px solid #F0F;text-align: center;border-radius: 15px 15px 15px 15px;}

.btres{border: 1px solid green;background-image: radial-gradient(#FFF, #0F0);height:25px;width:99px;display:inline-block;text-align: center;border-radius: 15px 15px 15px 15px;}

.btres:hover{border: 1px solid white;background-image: radial-gradient(#0F0, #FFF);}

.menu1{visibility: visible;}

.menu2{visibility: visible;}

.menu3{visibility: visible;}

.menu4{visibility: visible;}

.prix{text-align:center;display: inline-block; width: 400px;vertical-align: top;}

.alertinfo{background-color: rgb(255, 255, 255);background-color: rgba(255, 255, 255, 0.5);border-radius: 10px;padding: 5px;}

.cursor{
height: 50px;
width: 60px;
position: fixed;
top: 0;
left: 0;
display: none;
}

#slideshow { 
    position: relative; 
    width: 500px; 
    height: 375px; 
    padding: 15px; 
    margin: 0 auto 2em; 
    border: 1px solid #ddd; 
    background: #FFF; 
    /* CSS3 effects */ 
    background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD); 
    border-radius: 2px 2px 2px 2px; 
    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; 
    transform: rotate(-4deg); 
} 
#slideshow:after { 
    right:0; 
    transform: rotate(4deg); 
}
/* gestion des dimensions et débordement du conteneur */ 
#slideshow .container { 
    position:relative; 
    width: 500px; 
    height: 375px; 
    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: 500%; 
    height: 375px; 
} 
/* 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: 0px;
	padding: 20px;
	margin: 0;
	border-top: 1px solid rgb(225,225,225);
	text-align: center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
	font-size: small;
}
/* 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 32s infinite; 
}
#timeline { 
    position: absolute; 
    background: #999; 
    bottom: 15px; 
    left: 15px; 
    height: 1px; 
    background: rgb(214,98,13); 
    background: rgba(214,98,13,.8); 
    width: 0; 
    /* fonction d'animation */ 
    animation: timeliner 32s infinite; 
}
@keyframes timeliner { 
    0%, 25%, 50%, 75%, 100% { width: 0;     } 
    20%, 45%, 70%, 90%      { width: 500px; } 
}
@keyframes figcaptionner { 
    0%, 25%, 50%, 75%, 100%                     { bottom: -55px;    } 
    5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%       { bottom: 0px;      } 
}
/* ajouter à l'élément : */ 
#slideshow figcaption { 
    /* ... la propriété animation */ 
    animation: figcaptionner 32s infinite; 
}
.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-color: rgba(0,0,0,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(0,0,0,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; 
} 
    
/* 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; 
} 
    
/* 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; }
#slideshow .commands { 
    position: absolute; 
    top: 45%; 
    padding: 5px 13px; 
    border-bottom:0; 
    font-size: 1.3em; 
    color: #aaa; 
    text-decoration:none; 
    background-color: #eee; 
    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: -48px; } 
#slideshow .next { right: -48px; } 
    
#slideshow .commands { display:none; } 
#slideshow .commands1 { display: block; }
#slideshow .c_slider { 
    position: absolute; 
    left:0; top:0; 
    width: 400%; 
    height: 375px; 
    /* multiple background */ 
    background: url(img/dummy-500x375-1.jpg) 0 0 no-repeat, 
                url(img/dummy-500x375-2.jpg) 500px 0 no-repeat, 
                url(img/dummy-500x375-3.jpg) 1000px 0 no-repeat, 
                url(img/dummy-500x375-4.jpg) 1500px 0 no-repeat; 
    transition: background 1s; 
}
/* on cache le slider */ 
.sl_i:target ~ #slideshow .slider                                   { visibility: hidden } 

/* 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, 500px 0, 1000px 0, 1500px 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: -500px 0, 0 0, 500px 0, 1000px 0; } 
#sl_i2:target ~ #slideshow  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: -1000px 0, -500px 0, 0 0, 500px 0; } 
#sl_i3:target ~ #slideshow  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: -1500px 0, -1000px 0, -500px 0, 0 0; } 
#sl_i4:target ~ #slideshow  li:first-child a:before   { left:54px; }

/* c'est parti pour l'animation ! */ 
@keyframes dotser { 
    0%, 100%    { opacity: 1; left: 0;      } 
    
    20%         { opacity: 1; left: 0;      } 
    22%         { opacity: 0; left: 0;      } 
    23%         { opacity: 0; left: 18px;   } 
    25%         { opacity: 1; left: 18px;   } 
    
    45%         { opacity: 1; left: 18px;   } 
    47%         { opacity: 0; left: 18px;   } 
    48%         { opacity: 0; left: 36px;   } 
    50%         { opacity: 1; left: 36px;   } 
    
    70%         { opacity: 1; left: 36px;   } 
    72%         { opacity: 0; left: 36px;   } 
    73%         { opacity: 0; left: 54px;   } 
    75%         { opacity: 1; left: 54px;   } 
    
    95%         { opacity: 1; left: 54px;   } 
    97%         { opacity: 0; left: 54px;   } 
    98%         { opacity: 0; left: 0;  } 
}