/* Pour N images : N-1 durée de 5% et N-1 avances de (100-durée)/(N-1)
   N=2 1 durée de 5% et 1 avance de (100-5)/1=95
   Soit A=28 et D=5
*/
@keyframes slidy2 {
  0% { left: 0%; }
  45% { left: 0%; }
  50% { left: -100%; }
  95% { left: -100%; }
  100% { left: -100%; }
  }

  div#slider2 { width: 90%; max-width: 500px; overflow: hidden; display: block; margin-left:auto; margin-right:auto;}
  div#slider2 figure img { width: 50%; float: left;}
  div#slider2 figure {
    position: relative;
    width: 200%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 10s slidy2 infinite;
  }



/* pour 5 images : 4 durée de 5% et avances de 80%/4=20% */
@keyframes slidy5 {
0% { left: 0%; }
25% { left: 0%; }
30% { left: -100%; }
55% { left: -100%; }
60% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

div#slider5 { width: 90%; max-width: 500px; overflow: hidden; display: block; margin-left:auto; margin-right:auto;}
div#slider5 figure img { width: 20%; float: left; }
div#slider5 figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy5 infinite;
}



/* Pour N images : N-1 durée de 5% et N-1 avances de (100-durée)/(N-1)
   N=7 6 durée de 5% et 6 avances de (100-30)/6=11.6
   Soit A=12 et D=5
*/
@keyframes slidy7 {
0% { left: 0%; }
12% { left: 0%; }
17% { left: -100%; }
29% { left: -100%; }
34% { left: -200%; }
46% { left: -200%; }
51% { left: -300%; }
63% { left: -300%; }
68% { left: -400%; }
80% { left: -400%; }
85% { left: -500%; }
97% { left: -500%; }
100% { left: -600%; }
}

div#slider7 { width: 90%; max-width: 500px; overflow: hidden; display: block; margin-left:auto; margin-right:auto;}
div#slider7 figure img { width: 14.28571%; float: left; }
div#slider7 figure {
  position: relative;
  width: 700%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 24s slidy7 infinite;
}

/* Pour N images : N-1 durée de 5% et N-1 avances de (100-durée)/(N-1)
   N=4 3 durée de 5% et 3 avances de (100-15)/3=28.33
   Soit A=28 et D=5
*/
@keyframes slidy4 {
0% { left: 0%; }
28% { left: 0%; }
33% { left: -100%; }
61% { left: -100%; }
66% { left: -200%; }
94% { left: -200%; }
100% { left: -300%; }
}

div#slider4 { width: 90%; max-width: 500px; overflow: hidden; display: block; margin-left:auto; margin-right:auto;}
div#slider4 figure img { width: 25%; float: left;}
div#slider4 figure {
  position: relative;
  width: 400%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 12s slidy4 infinite;
}

@keyframes slidy {
0% { left: 0%; }
28% { left: 0%; }
33% { left: -100%; }
61% { left: -100%; }
66% { left: -200%; }
94% { left: -200%; }
100% { left: -300%; }
}

div#slider { width: 290; height:194; overflow: hidden; display: block; margin-left:auto; margin-right:auto;}
div#slider figure img { width: 25%; float: left;}
div#slider figure {
  position: relative;
  width: 400%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 12s slidy infinite;
}



/*
#menu {
    position: fixed;
    right: 0;
    top: 50%;
    width: 8em;
    margin: -2.5em 0 0 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.2);
    color: white;
    font-weight: bold;
    font-size: large;
    text-align: left;
    border: solid rgba(246, 141, 76, 0.5);
    border-right: none;
    padding: 0.5em 0.5em 0.5em 2.5em;
    box-shadow: 0 1px 3px black;
    border-radius: 3em 0.5em 0.5em 3em;
}
*/
#menu {
    position: fixed;
    right: 0;
    bottom: 0;
	top: auto;
    width: 8em;
    margin: 0 0 0 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.2);
    color: white;
    font-weight: bold;
    font-size: large;
    text-align: left;
    border: solid rgba(246, 141, 76, 0.5);
    border-right: none;
    padding: 0.5em 0.5em 0.5em 2.5em;
    box-shadow: 0 1px 3px black;
    border-radius: 3em 0.5em 0.5em 3em;
}
#menu li {
    margin: 0;
}

#menu a {
    color: inherit;
}

#menu a:hover{
	color: rgb(246, 141, 76);
    text-decoration: none;
}

a {
	text-decoration: none;
}

table.cadre {
	width: 95%;
	max-width: 50em;
	border-style: solid;
	margin-left: auto;
	margin-right: auto;
}

table.cadre tr {
	vertical-align: middle;
	font-style: italic;
}

table.cadre td {
	border-style: ridge;
}

table.cadre p {
	margin:1em;
	margin-bottom:1em;
	text-align:justify;
}

p.cadre_bold {
	font-weight: bold;
}

p.cadre_green {
	color: #298A87;
}