/************
 * Couleurs *
 ************/
.couleurFond1 {
    background: rgba(230,230,230,0.5);
}
/********
 * body *
 *******/
body {
    font-family: Monospace;
    font-size: large;
}
/************
 * Main     * 
 ************/
body > main {
    margin: 10em 24% 10em 21%;
    padding: 1%;
}
main a {
    color: black;
    font-weight: bold;
    text-decoration: none;
}
main a:hover {
    text-decoration: underline;
}
main a:visited {
    color: black;
}
body > main > article > header a {
    color: rgba(50,0,50,1);
}
/***********
 * Header  *
 ***********/
body > header {
    position: fixed;
    top: 0;
    left: 0;
    height: 9em;
    width: 100%;
    z-index: 5;

    background: white;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0)) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) -o-linear-gradient(-90deg, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0)) repeat scroll 0 0;
}
h1 {
    position: fixed;
    z-index: 10;
    text-align: center;
}
h1 > span{
    display: inline-block;

    color: white;
    background-color: black;
    border-radius: 5px;
    padding: 4px 7px;
    margin: 0 5px 0 0;
}
@keyframes myAnim {
    0% {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
    }
    25% {
	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
    }
    50% {
	transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
    }
    70% {
	transform: rotate(10deg);
	-webkit-ransform: rotate(10deg);
    }
    90% {
	transform: rotate(8deg);
	-webkit-transform: rotate(8deg);
    }
    100% {
	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
    }
}
@-webkit-keyframes myAnim {
    0% {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
    }
    25% {
	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
    }
    50% {
	transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
    }
    70% {
	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
    }
    90% {
	transform: rotate(8deg);
	-webkit-transform: rotate(8deg);
    }
    100% {
	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
    }
}
.sousTitre {
    transform-origin: 20% 80%;
    -webkit-transform-origin: 20% 80%;

    animation: myAnim linear 1s forwards;
    -webkit-animation: myAnim linear 1s forwards;

    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
/***********
 * Article *
 ***********/
.blog {
    border: outset 2px;
    border-color: rgba(200,200,200,0.5);
    border-radius: 5px;
    background: rgba(245,245,245,1);
}
.blog > article:nth-child(odd) {
    background: rgba(200,200,200,0.5);
    border-radius: 5px;
}
.blog p {
    text-indent: 1.5em;
} 
article {
    padding: 5px 10px;
    margin: 1em 0 1em 0;
}
header > h2 {
    display: inline-block;
    width: 50%;
    margin: 5px 0;
}
header > time {
    float: right;
    font-style: italic;
    margin: 1em 0 0 0;
}
article > p {
    clear: both;
}
/***********
 * Footer **
 ***********/
body > footer {
    position: fixed;
    bottom: 1%;
    right: 1%;
    transform-origin: 4% 55%;
    -webkit-transform-origin: 4% 55%;
    transform: translate(16em,0) rotate(-90deg);
    -webkit-transform: translate(16em,0) rotate(-90deg);
}
body > footer a {
    color: black;
    text-decoration: none;
}
/***********
 * Figures *
 ***********/
article {
    counter-reset: figures;
}

figure {
    counter-increment: figures;
}

figure figcaption:before {
    content: 'Fig. ' counter(figures) ' - ';
}