/* 
    Created on : 19 déc. 2017, 17:55:13
    Author     : Rom1
*/

/* Header */

header
{
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: 'Trebuchet MS';
}

#logo
{
    display: flex;
    flex: 1;
}

#logo img
{
    width: 149px;
    height: 150px;
}

.titrePage
{
    font-size: 2.5em;
    color: black;
    font-family: 'Trebuchet MS';
    font-weight: bold;
    text-decoration: none;
}

.titreSite
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#entete
{
    display: flex;
    justify-content: space-between;
}

/* Navigation */

.menu ul
{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-right: 1em;
}

.menu li
{
    margin-right: 15px;
}

.menu a
{
    font-size: 1.3em;
    color: black;
    padding-bottom: 3px;
    text-decoration: none;
}

.menu a:hover
{
    color: #CB2C0C;
    border-bottom: solid black 1px;
}

#acceuil
{
    display: flex;
    margin-bottom: 20px;
    font-size: 1.4em;
}

#admin, #adminCo, #sug
{
    background-color: black;
    color: white;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
    font-size: 1.2em;
}

#admin, #adminCo
{
    border-radius: 15px 0px 0px 15px;
    padding-right: 1em;
    padding-left: 0.25em;
    padding-top: 0.35em;
}

#sug
{
    border-radius: 0px 0px 15px 15px;
    padding-right: 0.5em;
    padding-left: 0.5em;
    padding-top: 0.25em;
    height: 3em;
    margin-right: 15%;
    text-decoration: none;
    text-align: center;
}

#admin
{
    height: 3em;
}

#adminCo
{
    height: 4em;
}

/* Carroussel */

#slideshow
{
    background-color: black;
    position: relative;
    flex: 1;
    width: 100%;
    height: 18em;
    margin: 0 auto 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
#slideshow:before, #slideshow:after
{
    position: absolute;
    bottom:16px;
    z-index: -10;
    width: 50%;
    height: 20px;
    content: " ";
}

#slideshow:before
{
    left:0;
    transform: rotate(-4deg);
}

#slideshow:after
{
    right:0;
    transform: rotate(4deg);
}

/* gestion des dimensions et débordement du conteneur */
.container
{
    position:relative;
    width: 640px;
    height: 18em;
    overflow: hidden;
}
	
/* 
   le conteneur des slides
   en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider
{
	position: absolute;
	left:0; top:0;
	width: 400%;
	height: 18em;
}

/* annulation des marges sur figure */
#slideshow figure
{
	position:relative;
	display:inline-block;
	padding:0;
        margin:0;
}

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

/*
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;
}

.banniere
{
    height: 18em;
    width: 640px;
}