@import url(https://fonts.googleapis.com/css?family=Rubik:400,400italic,700);
@import url(https://fonts.googleapis.com/css?family=Work+Sans:500,700);

/* -------------------------------------- */
/* NORMALISATION
/* -------------------------------------- */
* { box-sizing: border-box; }

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block; }
audio, canvas, progress, video {display: inline-block; vertical-align: baseline; }
audio:not([controls]) {display: none; height: 0; }
[hidden], template {display: none; }

sub, sup { line-height: 0; }

img { border: 0; }
svg:not(:root) { overflow: hidden; }

hr { box-sizing: content-box; height: 0; }

pre { overflow: auto; }
code, kbd, pre, samp {font-family: monospace, monospace; font-size: 1em; }

button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0; }
button {overflow: visible; }
button, select {text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] {cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0; }
input {line-height: normal; }
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto; }
input[type="search"] { -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; }
textarea {overflow: auto; }


/* ==================================================== */
/* DÉFINITIONS
/* ==================================================== */
@font-face {
    font-family: 'Work Sans Web';
    src: url('fonts/worksans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Work Sans Web';
    src: url('fonts/worksans-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* -------------------------------------- */
/* STYLES
/* -------------------------------------- */
html {
  background: #fff;

  font: 1em/1.5 'Work Sans Web', sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { padding: 1px 10%; position: relative; }
body.projet-visible { overflow: hidden; }

::-moz-selection { background: #0f0; }
::-webkit-selection { background: #0f0; }
::selection { background: #0f0; }

#fond {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
}

a {
  position: relative;
  z-index: 2;
  color: inherit;
  text-decoration: none;
}
a:before, a:after {
  content: '';
  position: absolute; 
  z-index: -1;
  color: #0f0;
  top: -0.1em; bottom: -0.1em;
}
a:before { 
  background: rgba(0,255,0,0.15);
  right: 0.25em; left: 0.25em;
}
a:after {
  background: currentColor;
  right: 100%; left: 100%;
  -webkit-transition: left 0.2s, right 0.1s 0.2s;  
  transition: left 0.2s, right 0.1s 0.2s;  
}
a:hover:after { 
  left: 0.25em; right: 0.25em;
  -webkit-transition: right 0.2s; 
  transition: right 0.2s; 
}
.lt-ie9 a:before { border-bottom: 2px solid; }

h1 { font-size: 3em; line-height: 1; }
h2 { 
  margin-top: 3em;
  font-size: 1em; 
  text-transform: uppercase; 
  letter-spacing: 0.1em; 
}

h1.placeholder {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;

  font-size: 1rem;
  font-weight: normal;
  text-align: center;
}

ol, ul { padding-left: 0; }
ul > li, ol > li { 
  list-style: none; 
  position: relative; 
  counter-increment: list; 
  margin: 1em 0;
}
ul > li:before, ol > li:before {
  display: inline-block;
  width: 3em;
  margin-left: -3.5em;
  padding-right: 0.5em;

  color: #aaa;
  text-align: right;
}
ul > li:before { content: '-'; }
ol > li:before { 
  content: counter(list) "."; 
  font-size: 0.7em;
  font-weight: bold;
}

.antispam { display: none; }

address { font-style: normal; }

body > header, footer {
  display: table-cell;
  width: 80vw;
  text-align: center;
  vertical-align: middle;

  font-size: 1.75em;
}
.lt-ie9 body > header, .lt-ie9 footer {
  display: block;
  padding: 10% 0;
}

body > header {
  margin-top: 1em;
  height: 90vh;
}

body > header > * {
  max-width: 22em;
  margin: 0 auto;
  text-align: left;
}
body > header h1 { 
  margin: -0.3em 0 -0.75em;

  font-size: 3em;
  text-align: center;
  line-height: 1;
}
body > header h1 img {
  width: 90%;
  width: auto;
  height: 1em;
}
body > header h1 + * { margin-top: 0; }

body > footer { 
  height: 70vh;
}

#liste-projets { 
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 0.833em;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#liste-projets:after { content: ''; display: block; clear: both; }
.lt-ie9 #liste-projets { margin-bottom: 10%; }

#liste-projets li {
  position: relative;
  display: block;
  float: left;
  width: 25%;
  margin: 3% 0;
}
#liste-projets li:before { display: none; }

#liste-projets a { display: block;  border: none;}
#liste-projets a:before, #liste-projets a:after { display: none; }

#liste-projets img {
  display: block;
  width: 100%;
  height: auto;
  background-color: #aaa;
  -webkit-transition: all 0.2s; 
  transition: all 0.2s;
}
#liste-projets a:hover img { background-color: #0f0; }

.projet {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100;
  padding: 0 10%;
  background: none;
  overflow-y: scroll;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale3D(10, 10, 1);
  -ms-transform: scale(10);
      transform: scale(10); /* IE9 */
  -ms-transform: scale3D(10, 10, 1);
      transform: scale3D(10, 10, 1);
  -moz-transform: none; /* Firefox fuckaille les transitions scale() */
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.loading .projet {
  -webkit-transition: none;
  transition: none;
}
.projet:target {
  visibility: visible;
  opacity: 1;
  background: #fff;
  -webkit-transform: none;
  -ms-transform: none;
      transform: none;
  -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.lt-ie9 .projet {
  position: static;
  opacity: 1;
  visibility: visible;
  overflow: auto;
  padding: 0 0 17%;
  border-bottom: 1px dashed rgb(200,200,200);
}
.lt-ie9 .projet:first-child {
  border-top: 1px dashed rgb(200,200,200);
}

.projet header {
  max-width: 34.5em;
  margin: 17% auto;
}

.projet h1 { 
  margin-bottom: 0; 
  font-size: 1.75em; 
}

.projet .meta { 
  margin: 0 0 1em;
  color: #999;
}

.projet img, .projet svg {
  display: block;
  width: 100%; max-width: 53.333em;
  height: auto;
  margin: -1px auto 0;
}
.lt-ie9 .projet img, .projet svg { width: auto; }

.projet-fermer {
  position: fixed;
  top: 1.5em; right: 1.5em;
  z-index: 200;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: none;

  color: inherit;
  text-indent: -1000%;
}
.projet-fermer::before, .projet-fermer::after {
  content: '';
  display: block;
  position: absolute;
  border: none;
  top: 24px; right: 0; left: 0;
  height: 2px;
  color: inherit;
  background: currentColor;
}
.projet-fermer::before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.projet-fermer::after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.projet-fermer:hover::before, .projet-fermer:hover::after { background: #0f0; right: 0; left: 0; }

.lt-ie9 .projet > footer, .lt-ie9 .projet-fermer { display: none; }

.projet > footer { padding: 17% 0; }
.projet > footer a { font-weight: bold; }

.message {
  display: block;
  border: 2px solid;
  margin: 2% -10%;
  padding: 1em;
  color: #f00;
}


/* ==================================================== */
/* Media queries
/* ==================================================== */
@media screen and (min-width: 75em) { /* 1200px @ 1em = 16px */
  html { font-size: 1.333vw; }
}

@media screen and (max-width: 53.125em) { /* 850px @ 1em = 16px */
  #liste-projets li { width: 33.333%; }
}

@media screen and (max-width: 40.625em) { /* 650px @ 1em = 16px */
  #liste-projets { margin: 0; }
  #liste-projets li { width: 50%; }
  html:before, html:after, body:before, body:after { display: none; }
  body > header, footer {
    padding: 5% 0;
    font-size: 1.5em;
  }
  .projet { padding-top: 7em }
  .projet header { position: static; }
}

@media screen and (max-width: 25em) { /* 400px @ 1em = 16px */
  #liste-projets li { width: 100%; }
  body > header, footer { font-size: 1.25em; }
}