/**************************************************************************************/
 /***  Reset de meyer | http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126  ***/
 /**************************************************************************************/
 /***                         License: none (public domain)                          ***/
 /**************************************************************************************/

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
/* ol, ul {
	list-style: none;
    } */
    blockquote, q {
       quotes: none;
   }
   blockquote:before, blockquote:after,
   q:before, q:after {
       content: '';
       content: none;
   }
   table {
       border-collapse: collapse;
       border-spacing: 0;
   }

   /*************************************************************************************/
   /***                   DECLARATION PROPRIETE GLOBALE DES PAGES                    ****/
   /*************************************************************************************/

   body * {
    box-sizing: border-box
}
.flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
h1, h2, h3 {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.3em;
}
body {
    background-color: #e1e1e1;
}
.website_bck {
    background: url(pictures/bck_website.jpg) repeat;
}
.wrapper {
    padding-top: 10em;
}
/*************************************************************************************/
/***                   DECLARATION PROPRIETE GLOBALE DES PAGES                    ****/
/*************************************************************************************/

header {
    flex-direction: column;
    align-items: center;
    margin: auto;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: white;
    -moz-box-shadow:    0px 0px 10px 0px #ccc;
    -webkit-box-shadow: 0px 0px 10px 0px #ccc;
    box-shadow:         0px 0px 10px 0px #ccc;
}
header img {
    width: 100%;
    height: 100%;
}
header nav {
    margin: auto;
}
header h1 {
    margin: 2em 0em;
}
header nav ul li {
    margin: 0em 1em;
}
header nav ul,
header nav ul li a {
    color: #000000;
    margin: auto;
    padding: 1em;
    list-style: none;
    width: 100%;
    border-radius: 5px 5px 0px 0px;
    text-decoration: none;
    justify-content: center;
    -webkit-justify-content: center;
    transition: all 250ms ease-in;
    text-transform: uppercase;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    text-align: center;
}
header nav ul li a:hover {
    color: #FFFFFF;
    background-color: #b01f65;
}
body,
.website,
.website article {
    margin: auto;
}

.website article {
    max-width: 80%;
    background-color: #FFFFFF;
    border-radius: 2em;
    padding-top: 3em;
    margin-top: 5em;
    -moz-box-shadow:    0px 0px 10px 0px #ccc;
    -webkit-box-shadow: 0px 0px 10px 0px #ccc;
    box-shadow:         0px 0px 10px 0px #ccc;
}

.website article img {
    max-width: 100%;
    max-height: 100%;
}
.website article h2 {
    font-size: 30px;
    text-transform: uppercase;
    text-align: center;
    padding: 3em 2em;
}

.website article .flexbox {
    width: 85%;
    margin: auto;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding: 1em 2em;
}
.website article figure {
    position: relative;
    padding: 2em;
}
.website article figure img {
    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 5px;
}
.website article figure figcaption {
    border-radius: 5px 5px 0px 0px;
    font-family: 'Quicksand', sans-serif;
    line-height: 2em;
    font-size: 1.2em;
    width: 80%;
    padding: 5%;
    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(-50%, 0%); /* décalage de 50% de sa propre taille */
    bottom: 1em;
    box-sizing: border-box;
    background-color: rgba(255,255,255,1);
}
.website article .description span {
    color: #424242;
    font-family: 'Orbitron', sans-serif;
}
.website article .flexbox p {
    color: #b01f65;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    font-size: 18px;
}
.website article .flexbox p span {
    font-weight: bold;
}
.website article .extrait {
    line-height: 150%;
    justify-content: center;
}
.website article .extrait p {
    margin: 0 1em;
}
.website article .information {
    margin: 3em 5em;
    padding: 1em 2em;
    width: 80%;
    font-size: 12px;
    display: inline-block;
}
.website article .information p {
    margin: 0.5em 0em;
}
.website article .information p span {
    font-weight: bold;
}
.website .print {
    display: none;
}