@charset "UTF-8";
@import url(../fonts/stylesheet.css);
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  margin: 14px;
  font-size: 16px;
  font-family: "IBM Plex Serif";
  line-height: 1.22;
  overflow-x: hidden; }

body.night {
  background: #000;
  color: #FFF; }
  body.night .list-project_infos {
    color: #000; }
  body.night .list-projects_template .list-project_infos {
    color: #FFF; }
  body.night footer, body.night header .desktop-menu .desktop-menu_logo, body.night .languages, body.night header .nav {
    background: #000; }
  body.night p, body.night a, body.night li, body.night h1, body.night h2, body.night h3, body.night h4, body.night h5 {
    color: #FFF; }
  body.night header .mobile-menu_btn span {
    background: #FFF; }
  body.night .desktop-menu_logo figure, body.night .mobile-menu_logo_inner figure {
    -webkit-filter: invert(1);
    filter: invert(1); }
  body.night header .main-nav > ul > li {
    border-color: #FFF; }
  body.night .page_header {
    background: #000;
    color: #FFF;
    border-color: #FFF; }

ul, ol {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

a {
  color: #000;
  text-decoration: none; }

a:visited {
  color: #000; }

img {
  width: 100%; }

figure {
  margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Bw Gradual";
  font-weight: 100; }

h1 {
  margin-top: 0;
  font-size: 37px; }

p {
  margin: 20px 0;
  font-size: 0.95em;
  line-height: 1.3; }

p a {
  text-decoration: underline; }

h2 + p {
  margin-top: 0; }

p + h2 {
  margin-top: 40px; }

figure.portrait {
  width: 70%; }

figcaption p {
  margin: 5px 0px 20px 0px;
  font-size: 0.7em;
  color: #535353; }

.pswp {
  z-index: 12000; }
  .pswp .pswp__caption__center {
    text-align: center; }

header {
  width: 100%;
  max-width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #FFF;
  z-index: 10000;
  padding: 14px; }
  header.row {
    margin: 0; }
  header a {
    text-decoration: none; }
  header .mobile-menu {
    width: 100%;
    margin: 0; }
    header .mobile-menu .mobile-menu_wrapper {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 0;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end; }
  header .mobile-menu_title h1 {
    font-weight: 100;
    font-size: 30px;
    margin: 0;
    cursor: pointer;
    pointer-events: auto; }
  header .mobile-menu_logo .mobile-menu_logo_inner {
    width: 40px; }
  header .mobile-menu_btn {
    display: block;
    position: relative;
    margin: 7px 10px 0 0;
    cursor: pointer;
    height: 24px;
    width: 20px;
    pointer-events: auto; }
    header .mobile-menu_btn span {
      display: block;
      background: #000;
      height: 1px;
      width: 20px;
      position: absolute;
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease; }
    header .mobile-menu_btn span:nth-child(1) {
      top: 0px; }
    header .mobile-menu_btn span:nth-child(2) {
      top: 10px; }
    header .mobile-menu_btn span:nth-child(3) {
      top: 20px; }
    header .mobile-menu_btn .transparent {
      opacity: 0; }
    header .mobile-menu_btn .rotate-top {
      -webkit-transform: rotatez(50deg);
      -ms-transform: rotate(50deg);
      transform: rotatez(50deg);
      -webkit-transform-origin: 0%;
      left: 2px; }
    header .mobile-menu_btn .rotate-bottom {
      -webkit-transform: rotatez(-50deg);
      -ms-transform: rotate(-50deg);
      transform: rotatez(-50deg);
      -webkit-transform-origin: 15%;
      top: 13px !important; }
  header .nav {
    max-height: 0;
    overflow: hidden;
    background: #FFF;
    margin: 0;
    width: 100%;
    -webkit-transition: max-height 1s linear;
    -o-transition: max-height 1s linear;
    transition: max-height 1s linear; }
    header .nav.active {
      max-height: 100vh;
      overflow: auto; }
  header .main-nav {
    margin-top: 20px;
    padding: 0; }
    header .main-nav > ul > li {
      padding-top: 2px;
      padding-bottom: 2px;
      cursor: pointer;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-family: "Bw Gradual";
      font-size: 1.35em;
      text-align: right;
      border-top: 1px solid #000;
      padding-top: 10px;
      padding-bottom: 10px;
      text-transform: uppercase;
      -webkit-transition: text-align 0.3s linear;
      -o-transition: text-align 0.3s linear;
      transition: text-align 0.3s linear; }
      header .main-nav > ul > li:last-child {
        border-bottom: 1px solid #000; }
  header .main-nav_submenu {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: max-height 1s linear;
    -o-transition: max-height 1s linear;
    transition: max-height 1s linear;
    margin-top: 0; }
    header .main-nav_submenu > li {
      font-size: 0.55em;
      text-transform: uppercase;
      border: none;
      text-align: left;
      font-weight: 500;
      margin-bottom: 10px; }
      header .main-nav_submenu > li:before {
        content: "–"; }
      header .main-nav_submenu > li .main-nav_sub-submenu > li {
        text-transform: none;
        font-size: 1.3em;
        font-weight: 300; }
    header .main-nav_submenu.active {
      max-height: 3000px;
      -webkit-transition: all 1s linear;
      -o-transition: all 1s linear;
      transition: all 1s linear;
      margin-top: 20px; }
    header .main-nav_submenu a.active {
      color: #000; }
  header .header-right {
    pointer-events: auto;
    padding: 0; }

@media only screen and (min-width: 65em) {
  header {
    position: absolute;
    padding: 28px;
    background: transparent;
    z-index: 0; }
    header .nav {
      padding: 0;
      margin: 0; }
    header .mobile-menu_title h1 {
      margin-top: -10px;
      font-size: 37px; }
    header .header-right {
      position: fixed;
      right: 28px;
      top: 90px;
      margin: 0;
      width: 100%;
      padding-left: 0.6rem; }
    header .main-nav {
      margin-top: -5px;
      padding: 0;
      margin-bottom: 80px;
      padding-left: 32px;
      font-size: 1.1em; }
      header .main-nav ul > li {
        font-size: 1.1em;
        text-transform: inherit;
        text-align: left;
        border: none;
        padding: 4px 0px; }
        header .main-nav ul > li:last-child {
          border: none; }
        header .main-nav ul > li.active {
          font-weight: 500; }
          header .main-nav ul > li.active::before {
            content: "•";
            margin-right: 20px;
            margin-left: -32px; }
        header .main-nav ul > li:hover {
          font-weight: 500; }
          header .main-nav ul > li:hover::before {
            content: "•";
            margin-right: 20px;
            margin-left: -32px; }
    header .desktop-menu {
      padding: 0;
      width: 100%;
      margin: 0; }
      header .desktop-menu .desktop-menu_logo {
        padding: 0px;
        background: #FFF; }
        header .desktop-menu .desktop-menu_logo figure {
          width: 70px; }
        header .desktop-menu .desktop-menu_logo a {
          pointer-events: auto; }
      header .desktop-menu .desktop-menu_nav {
        padding: 0;
        margin: 0;
        position: fixed;
        left: calc(86.667% - 28px + 10px); } }

@media only screen and (min-width: 48em) and (max-width: 1210px) {
  header .mobile-menu_title h1 {
    font-size: 30px;
    margin-top: -2px; }
  header .desktop-menu .desktop-menu_logo figure {
    width: 60px; } }

@media only screen and (min-width: 100em) {
  header .mobile-menu_title h1 {
    font-size: 42px; } }

.list-projects {
  padding: 0; }
  .list-projects li {
    margin-bottom: 40px; }

.list-project_infos {
  font-family: "Bw Gradual";
  font-size: 1em;
  line-height: 1.4; }
  .list-project_infos::before {
    content: "—"; }

.no-figure {
  height: 220px;
  background: lightgrey;
  font-family: "Bw Gradual";
  padding: 10px;
  font-size: 80px;
  color: grey;
  text-align: center;
  overflow: hidden; }

@media only screen and (max-width: 48em) {
  .list-projects {
    margin: 0; } }

@media only screen and (min-width: 65em) {
  .list-projects li {
    width: calc(50% - 1rem); }
  .list-projects_selected li {
    width: calc(50% - 2rem); }
  .list-projects li {
    position: relative; }
  .list-project_infos {
    margin-bottom: 0;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFF;
    padding: 10px;
    -webkit-transition: opacity 0.2s ease, background 0.2s ease;
    -o-transition: opacity 0.2s ease, background 0.2s ease;
    transition: opacity 0.2s ease, background 0.2s ease; }
  .list-projects li:hover .list-project_infos {
    opacity: 1;
    background: white; } }

footer {
  width: 100%;
  max-width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #FFF;
  z-index: 10000;
  padding: 10px; }
  footer.row {
    margin: 0; }
  footer a {
    text-decoration: none; }
  footer .lower-left-text {
    font-size: 30px; }
  footer .lower-right-text {
    font-size: 28px; }
  footer .lower-right-text, footer .lower-left-text {
    font-family: "Bw Gradual";
    font-weight: 100; }
  footer .inner-footer {
    margin: 0; }
  footer .footer_right-part {
    padding: 0;
    padding-bottom: 3px;
    margin: 0; }

.languages {
  background: #FFF;
  pointer-events: auto;
  padding: 0; }
  .languages ul {
    position: relative; }
  .languages li {
    font-family: "Bw Gradual";
    text-transform: uppercase;
    font-size: 0.7em; }
    .languages li:hover {
      font-weight: bold; }
    .languages li:not(.active) {
      display: none;
      position: absolute;
      top: 8px;
      margin-left: 15px; }
    .languages li.active {
      display: block; }
      .languages li.active .select-btn {
        display: inline-block; }
    .languages li .select-btn {
      cursor: pointer;
      display: none;
      margin-right: 0; }

.widgets {
  padding: 0; }
  .widgets .row {
    margin: 0; }
  .widgets ul > li {
    margin-right: 5px; }

.social {
  position: relative; }
  .social .list-social-networks {
    position: absolute;
    bottom: 100%;
    display: none; }
    .social .list-social-networks li {
      margin-bottom: 10px; }

.icon::before {
  height: 1em;
  width: 1em;
  display: block;
  text-align: center;
  font-family: "fontawesome";
  font-size: 1em;
  font-weight: normal;
  cursor: pointer; }

.icon-mentions::before {
  content: '\f29c'; }

.icon-light::before {
  content: '\e800'; }

.icon-social::before {
  content: '\e801'; }

.icon-facebook::before {
  content: '\f09a'; }

.icon-vimeo::before {
  content: '\f27d'; }

.icon-linkedin::before {
  content: '\f0e1'; }

.icon-instagram::before {
  content: '\f16d'; }

.icon-youtube::before {
  content: '\f167'; }

.icon-twitter::before {
  content: '\f099'; }

@media only screen and (min-width: 65em) {
  footer {
    background: #FFF;
    padding: 28px; }
    footer > .row {
      margin: 0; }
    footer .footer_right-part {
      padding: 0;
      margin-left: 60%; }
    footer .lower-left-text {
      font-size: 37px;
      padding: 0;
      padding-left: 0px;
      line-height: 0.7; }
    footer .lower-right-text {
      position: absolute;
      right: -15px;
      bottom: 63px;
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
      width: 140px; }
      footer .lower-right-text p {
        margin: 0;
        text-align: left !important; }
  .languages li {
    font-size: 0.85em; }
    .languages li:not(.active) {
      top: 120%;
      margin-left: calc(15px + 17px); }
    .languages li .select-btn {
      margin-right: 15px; } }

@media only screen and (min-width: 48em) and (max-width: 1210px) {
  footer .lower-left-text {
    font-size: 30px; } }

@media only screen and (min-width: 100em) {
  footer .lower-left-text {
    font-size: 42px; } }

/* needs to correspond to piece.js */
.white {
  background-color: #f0f0f0;
  border: 1px solid #bdbdbd;
  -webkit-box-shadow: inset 0 0 1px 1px white;
  box-shadow: inset 0 0 1px 1px white; }

.blue {
  background-color: #3498db;
  border: 1px solid #196090;
  -webkit-box-shadow: inset 0 0 1px 1px #8bc4ea;
  box-shadow: inset 0 0 1px 1px #8bc4ea; }

.yellow {
  background-color: #f1c40f;
  border: 1px solid #927608;
  -webkit-box-shadow: inset 0 0 1px 1px #f7dc6f;
  box-shadow: inset 0 0 1px 1px #f7dc6f; }

.green {
  background-color: #2ecc71;
  border: 1px solid #1b7943;
  -webkit-box-shadow: inset 0 0 1px 1px #7ee2a8;
  box-shadow: inset 0 0 1px 1px #7ee2a8; }

.red {
  background-color: #e74c3c;
  border: 1px solid #a82315;
  -webkit-box-shadow: inset 0 0 1px 1px #f29f97;
  box-shadow: inset 0 0 1px 1px #f29f97; }

.grey {
  background-color: #95a5a6;
  border: 1px solid #617374;
  -webkit-box-shadow: inset 0 0 1px 1px #ccd4d5;
  box-shadow: inset 0 0 1px 1px #ccd4d5; }

.black {
  background-color: #34495e;
  border: 1px solid #10161c;
  -webkit-box-shadow: inset 0 0 1px 1px #587ca0;
  box-shadow: inset 0 0 1px 1px #587ca0; }

.purple {
  background-color: #9b59b6;
  border: 1px solid #623475;
  -webkit-box-shadow: inset 0 0 1px 1px #c6a0d5;
  box-shadow: inset 0 0 1px 1px #c6a0d5; }

.white {
  background-color: #ecf0f1;
  border: 1px solid #b1c2c6;
  -webkit-box-shadow: inset 0 0 1px 1px white;
  box-shadow: inset 0 0 1px 1px white; }

.orange {
  background-color: #e67e22;
  border: 1px solid #924d10;
  -webkit-box-shadow: inset 0 0 1px 1px #f0b37e;
  box-shadow: inset 0 0 1px 1px #f0b37e; }

.turquoise {
  background-color: #1abc9c;
  border: 1px solid #0e6252;
  -webkit-box-shadow: inset 0 0 1px 1px #55e7ca;
  box-shadow: inset 0 0 1px 1px #55e7ca; }

.tetris {
  margin-top: 40px; }

.event-counter {
  display: none; }

.score,
.level {
  z-index: 1;
  width: 202px;
  margin: 0 0 5px;
  font-family: "IBM Plex Mono"; }

.score:before {
  content: 'score: '; }

.level:before {
  content: 'level: '; }

.tetris-grid {
  width: 202px;
  height: 402px;
  border: 1px solid #000; }

.controls {
  font-family: "IBM Plex Mono";
  font-size: 0.8em; }

.preview-cells {
  width: 102px;
  height: 102px;
  margin-top: 20px;
  border: 1px solid #000; }

.cell {
  width: 20px;
  height: 20px;
  display: inline-block;
  float: left; }

.show-for-small-only {
  display: block; }

.show-for-small-only.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.hide-for-small-only {
  display: none; }

main {
  margin-bottom: 100px; }

main, aside {
  padding-top: 128px; }

body[data-template="home"] main {
  padding-top: 70px; }

.content-inner {
  padding: 0; }

aside p:first-child {
  margin-top: 0; }

.no-padding-top {
  padding-top: 0; }

.video {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0; }

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.page_header {
  position: fixed;
  width: calc(100% - (14px*2));
  max-width: 100%;
  left: 14px;
  top: 72px;
  background: #FFF;
  z-index: 1000;
  padding: 10px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  font-family: "Bw Gradual";
  font-size: 1.35em;
  text-transform: uppercase; }
  .page_header.row {
    margin: 0; }

.projet_text-projet .projet_text {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 1s linear;
  -o-transition: max-height 1s linear;
  transition: max-height 1s linear; }
  .projet_text-projet .projet_text h2 {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.8em;
    margin-top: 20px;
    margin-bottom: 10px; }
    .projet_text-projet .projet_text h2 + p {
      margin-top: 0; }
  .projet_text-projet .projet_text.active {
    max-height: 4000px; }

.actualites {
  padding: 0; }

.content-to-hide {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }
  .content-to-hide.active {
    max-height: 2000px;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }

article.actualite {
  padding-bottom: 40px;
  margin-top: 40px;
  border-bottom: 1px solid #000; }
  article.actualite:last-child {
    border: none; }
  article.actualite .see-more.active {
    display: none; }

.actualite_title {
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 0; }
  .actualite_title h2 {
    margin: 0;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.1em; }
  .actualite_title .actualite_date {
    font-family: "Bw Gradual";
    font-size: 0.9em; }

.see-more {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.8em;
  text-align: left;
  font-family: "Bw Gradual";
  cursor: pointer; }
  .see-more:before {
    content: ">"; }
  .see-more:hover {
    font-weight: 500; }

.filters {
  margin: 10px 0 0;
  font-family: "Bw Gradual";
  font-size: 0.85em;
  text-transform: uppercase;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2; }
  .filters li {
    margin-bottom: 5px;
    cursor: pointer; }
    .filters li::before {
      content: "⦿";
      margin-right: 0px; }
    .filters li.not-active::before {
      content: "◯"; }

aside.list-projects_text li {
  font-family: "Bw Gradual";
  font-weight: 300;
  font-size: 1.2em;
  margin-top: 5px; }
  aside.list-projects_text li .date-place {
    font-size: 0.7em; }
  aside.list-projects_text li:hover, aside.list-projects_text li.active {
    font-weight: 500; }
    aside.list-projects_text li:hover::before, aside.list-projects_text li.active::before {
      content: "–"; }

.list-projects_template {
  margin: 0; }
  .list-projects_template .date-place {
    font-size: 0.8em; }
  .list-projects_template li:hover .list-project_infos {
    background: transparent; }
  .list-projects_template .list-project_infos {
    position: relative;
    opacity: 1;
    padding-left: 0;
    background: transparent; }

.projet_images-gallery figure {
  margin: auto;
  margin-bottom: 20px; }

.projet_introduction-text p {
  font-size: 1.05em; }

.projet_infos-text {
  margin-top: 40px; }
  .projet_infos-text h2 {
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: normal;
    font-weight: 500;
    font-size: 0.8em; }
  .projet_infos-text p {
    font-size: 0.85em;
    font-family: "IBM Plex Mono"; }

.prev_nex-nav a {
  padding-left: 20px; }

.chapeau p {
  font-size: 1.1em; }

.agence_text-inner_main p:first-child {
  margin-top: 0px; }

.agence_text-inner_aside h3 {
  margin-top: 0;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.9em; }

.agence_text-inner_aside p + h3 {
  margin-top: 40px; }

.agence_text-inner_aside p {
  font-size: 0.85em; }

.agence_text-inner_main h2 {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.8em;
  margin-top: 20px;
  margin-bottom: 10px; }
  .agence_text-inner_main h2 + p {
    margin-top: 0; }

.agence_publi {
  margin-bottom: 400px; }
  .agence_publi h2 {
    font-size: 37px; }
  .agence_publi li {
    font-family: "Bw Gradual";
    position: relative;
    margin-bottom: 10px; }
    .agence_publi li a:hover {
      font-weight: 500; }
    .agence_publi li:before {
      content: "—"; }
    .agence_publi li a:hover + figure {
      opacity: 1; }
    .agence_publi li figure {
      width: 30%;
      vertical-align: top;
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0;
      pointer-events: none; }

.agence_equipe h2 {
  font-size: 37px; }

.agence_equipe li {
  margin-bottom: 40px;
  padding: 0 1rem; }
  .agence_equipe li h3 {
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.9em; }
  .agence_equipe li p {
    margin: 0; }
  .agence_equipe li .role::after {
    content: "—";
    display: block; }

@media only screen and (min-width: 65em) {
  body {
    margin-bottom: 100px;
    margin: 28px; }
  p {
    font-size: 0.9em;
    line-height: 1.3; }
  h1 {
    margin-bottom: 80px; }
  .show-for-small-only {
    display: none !important; }
  .hide-for-small-only {
    display: block; }
  .hide-for-small-only.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  main, body[data-template="home"] main {
    padding-top: 0px; }
  .content-inner {
    padding-right: 1rem;
    padding-left: 1rem; }
  .filters {
    margin: 50px 0;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1; }
    .filters li::before {
      margin-right: 15px; }
  .list-projects_template li {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    -webkit-transition: -webkit-filter 1s linear;
    transition: -webkit-filter 1s linear;
    -o-transition: filter 1s linear;
    transition: filter 1s linear;
    transition: filter 1s linear, -webkit-filter 1s linear; }
    .list-projects_template li:hover, .list-projects_template li.active {
      -webkit-filter: grayscale(0);
      filter: grayscale(0); }
  .cat-title {
    font-size: 1em;
    margin-top: 20px;
    text-transform: uppercase;
    text-align: left;
    font-weight: 500;
    font-family: "Bw Gradual"; }
    .cat-title:before {
      content: "–"; }
  .projet_main {
    margin-left: 0; }
  .projet_main h1:before {
    content: "— "; }
  .prev_nex-nav {
    text-align: center;
    font-family: "Bw Gradual"; }
    .prev_nex-nav a {
      padding-left: 10px;
      padding-right: 10px; }
  .actualites {
    padding: 0 1rem; }
  .chapeau p {
    font-size: 1.05em; } }