@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
/*
	Landed by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
@import "libs/skel";

@include skel-breakpoints(
    (
      xlarge: '(max-width: 1680px)',
      large: '(max-width: 1280px)',
      medium: '(max-width: 980px)',
      small: '(max-width: 736px)',
      xsmall: '(max-width: 480px)'
    )
);

@include skel-layout(
    (
      reset: 'full',
      boxModel: 'border',
      conditionals: true,
      containers: 70em,
      breakpoints: (
        large: (containers: 90%,),
        medium: (containers: (100%, true),
        )
      )
    )
);

$size-wrapper-pad-tb: 4.5em;
$size-wrapper-pad-lr: 2.5em;

//-----------------------------------
// Basic 
//-----------------------------------

html, body {
  background: _palette(bg);
}

body, input, select, textarea {
  color:       _palette(fg);
  font-family: _font(family);
  font-size:   15pt;
  font-weight: _font(weight);
  line-height: 1.75em;
}

a {
  @include vendor('transition', ('border-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out'));
  border-bottom:   dotted 1px;
  color:           _palette(accent1);
  text-decoration: none;

  &:hover {
    color:               darken(_palette(accent1), 15%) !important;
    border-bottom-color: transparent;
  }
}

strong, b {
  color:       _palette(fg-bold);
  font-weight: _font(weight-bold);
}

em, i {
  font-style: italic;
}

p {
  margin: 0 0 _size(element-margin) 0;
}

h1, h2, h3, h4, h5, h6 {
  color:       _palette(fg-bold);
  font-weight: _font(weight-bold);
  line-height: 1em;
  margin:      0 0 (_size(element-margin) * 0.5) 0;

  a {
    color:  inherit;
    border: 0;
  }
}

h1 {
  font-size:      2em;
  line-height:    1.5em;
  letter-spacing: -0.025em;
}

h2 {
  font-size:      1.6em;
  line-height:    1.5em;
  letter-spacing: -0.025em;
}

h3 {
  font-size:   1.35em;
  line-height: 1.5em;
}

h4 {
  font-size:   1.1em;
  line-height: 1.5em;
}

h5 {
  font-size:   0.9em;
  line-height: 1.5em;
}

h6 {
  font-size:   0.7em;
  line-height: 1.5em;
}

sub {
  font-size: 0.8em;
  position:  relative;
  top:       0.5em;
}

sup {
  font-size: 0.8em;
  position:  relative;
  top:       -0.5em;
}

hr {
  border:        0;
  border-bottom: solid 1px _palette(border);
  margin:        (_size(element-margin) * 1.5) 0;

  &.major {
    margin: (_size(element-margin) * 2) 0;
  }
}

blockquote {
  border-left: solid 4px _palette(border);
  font-style:  italic;
  margin:      0 0 _size(element-margin) 0;
  padding:     0.5em 0 0.5em 2em;
}

code {
  background:    _palette(border-bg);
  border-radius: _size(border-radius);
  font-family:   _font(family-fixed);
  font-size:     0.9em;
  margin:        0 0.25em;
  padding:       0.25em 0.65em;
}

pre {
  -webkit-overflow-scrolling: touch;
  font-family:                _font(family-fixed);
  font-size:                  0.9em;
  margin:                     0 0 _size(element-margin) 0;

  code {
    display:     block;
    line-height: 1.75em;
    padding:     1em 1.5em;
    overflow-x:  auto;
  }
}

.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

//-----------------------------------
// Loader 
//-----------------------------------

// Spinner

@include keyframes('spinner-show') {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@include keyframes('spinner-hide') {
  0% {
    color:   _palette(fg-lighter);
    z-index: _misc(z-index-overlay) + 1;
    @include vendor('transform', 'scale(1) rotate(0deg)');
  }
  99% {
    color:   _palette(bg);
    z-index: _misc(z-index-overlay) + 1;
    @include vendor('transform', 'scale(0.5) rotate(360deg)');
  }
  100% {
    color:   _palette(bg);
    z-index: -1;
    @include vendor('transform', 'scale(0.5) rotate(360deg)');
  }
}

@include keyframes('spinner-rotate') {
  0% {
    @include vendor('transform', 'scale(1) rotate(0deg)');
  }
  100% {
    @include vendor('transform', 'scale(1) rotate(360deg)');
  }
}

// Overlay

@include keyframes('overlay-hide') {
  0% {
    opacity: 1;
    z-index: _misc(z-index-overlay);
  }
  15% {
    opacity: 1;
    z-index: _misc(z-index-overlay);
  }
  99% {
    opacity: 0;
    z-index: _misc(z-index-overlay);
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  body.landing:before {
    line-height: 2.025em;
  }
}

//-----------------------------------
// Section/Article 
//-----------------------------------

section, article {
  &.special {
    text-align: center;
  }
}

header {
  p {
    color:    _palette(fg-bold);
    position: relative;
    margin:   0 0 (_size(element-margin) * 0.75) 0;
  }

  h2 + p {
    font-size:   1.25em;
    margin-top:  (_size(element-margin) * -0.5);
    line-height: 1.75em;
  }

  h3 + p {
    font-size:   1.1em;
    margin-top:  (_size(element-margin) * -0.4);
    line-height: 1.75em;
  }

  h4 + p,
  h5 + p,
  h6 + p {
    font-size:   0.9em;
    margin-top:  (_size(element-margin) * -0.3);
    line-height: 1.5em;
  }

  &.major {
    margin:     0 0 (_size(element-margin) * 2) 0;
    text-align: center;

    &:after {
      background: _palette(accent1);
      content:    '';
      display:    inline-block;
      height:     2px;
      width:      100%;
    }
  }
}

body.sommaire header {
  margin:     0 0 (_size(element-margin) * 2) 0;
  text-align: center;
}

footer {
  &.major {
    margin: (_size(element-margin) * 2) 0 0 0;
  }
}

.container-portfolio {
  clear: both;
  padding-top: 1.5em;
	.tile a {
		text-indent: -9000em;
	}
}

//-----------------------------------
// Box 
//-----------------------------------

.box {
  border-radius: _size(border-radius);
  border:        solid 1px _palette(border);
  margin-bottom: _size(element-margin);
  padding:       1.5em;

  > :last-child,
  > :last-child > :last-child,
  > :last-child > :last-child > :last-child {
    margin-bottom: 0;
  }

  &.alt {
    border:        0;
    border-radius: 0;
    padding:       0;
  }
}

//-----------------------------------
// Image 
//-----------------------------------

img {
  width:  100%;
  height: auto;
}

.image, .spip_documents, .mediabox {
  border-radius: _size(border-radius);
  border:        0;
  display:       inline-block;
  position:      relative;
  overflow:      hidden;

  img {
    border-radius: _size(border-radius);
    display:       block;
  }

  &.spip_documents_left {
    float:  left;
    margin: 0 1.5em 1em 0;
    top:    0.25em;
  }

  &.spip_documents_right {
    float:  right;
    margin: 0 0 1em 1.5em;
    top:    0.25em;
  }

  @include breakpoint(medium) {
    &.spip_documents_left,
    &.spip_documents_right {
      max-width: 50%;
    }
  }

  @include breakpoint(small) {
    &.spip_documents_left,
    &.spip_documents_right {
      float:     none;
      margin:    0 0 1.5em 0;
      top:       0;
      max-width: none;
    }
  }

  &.fit {
    display: block;
    margin:  0 0 _size(element-margin) 0;
    width:   100%;

    img {
      width:  100%;
      height: auto;
    }
  }
}

//-----------------------------------
// List 
//-----------------------------------

ol {
  list-style: inside decimal;
  margin:     0 0 _size(element-margin) 0;

  li {
    padding-left: 0.25em;
  }
}

ul {
  list-style: inside square;
  //list-style-position: inside;
  margin:     0 0 _size(element-margin) 1.5em;

  li {
    padding-left: 0.5em;
  }

  ul {
    margin-bottom: 0;
  }

  &.alt {
    list-style:   none;
    padding-left: 0;

    li {
      border-top: solid 1px _palette(border);
      padding:    0.5em 0;

      &:first-child {
        border-top:  0;
        padding-top: 0;
      }
    }
  }
}

dl {
  margin: 0 0 _size(element-margin) 0;
}

//-----------------------------------
// Table 
//-----------------------------------

.table-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-x:                 auto;
}

table {
  margin: 0 0 _size(element-margin) 0;
  width:  100%;

  tbody {
    tr {
      border:       solid 1px _palette(border);
      border-left:  0;
      border-right: 0;

      &:nth-child(2n + 1) {
        background-color: _palette(border-bg);
      }
    }
  }

  td {
    padding: 0.75em 0.75em;
  }

  th {
    color:       _palette(fg-bold);
    font-size:   0.9em;
    font-weight: _font(weight-bold);
    padding:     0 0.75em 0.75em 0.75em;
    text-align:  left;
  }

  thead {
    border-bottom: solid 1px _palette(border);
  }

  tfoot {
    border-top: solid 1px _palette(border);
  }

  &.alt {
    border-collapse: separate;

    tbody {
      tr {
        td {
          border:            solid 1px _palette(border);
          border-left-width: 0;
          border-top-width:  0;

          &:first-child {
            border-left-width: 1px;
          }
        }

        &:first-child {
          td {
            border-top-width: 1px;
          }
        }
      }
    }

    thead {
      border-bottom: 0;
    }

    tfoot {
      border-top: 0;
    }
  }
}

//-----------------------------------
// Goto Next 
//-----------------------------------

.goto-next {
  border:      0;
  bottom:      0;
  display:     block;
  height:      5em;
  left:        50%;
  margin:      0 0 0 -5em;
  overflow:    hidden;
  position:    absolute;
  text-indent: 10em;
  white-space: nowrap;
  width:       10em;
  z-index:     1;

  &:before {
    background-image:    url('images/arrow.svg');
    background-position: center center;
    background-repeat:   no-repeat;
    background-size:     contain;
    content:             '';
    display:             block;
    height:              1.5em;
    left:                50%;
    margin:              -0.75em 0 0 -1em;
    position:            absolute;
    top:                 50%;
    width:               2em;
    z-index:             1;
  }
}

//-----------------------------------
// Spotlight 
//-----------------------------------

.spotlight {
  background-attachment: fixed;
  background-position:   center center;
  background-size:       cover;
  box-shadow:            0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
  height:                100vh;
  overflow:              hidden;
  position:              relative;

  // Force spotlights to stack in reverse order (needed for our box
  // shadows to overlap stuff in the right direction).
  @for $i from 1 through _misc(max-spotlight) {
    &:nth-last-of-type(#{$i}) {
      z-index: #{$i};
    }
  }

  &:before {
    //    background-image: url('images/overlay.png');
    content: '';
    display: block;
    height:  100%;
    left:    0;
    top:     0;
    width:   100%;
  }

  .image.main {
    display: none;

    img {
      position: relative;
    }
  }

  .content {
    @include vendor('transform', 'translate(0,0)');
    @include vendor('transition', 'transform 1s ease, opacity 1s ease');
    background:   _palette(bg-transparent);
    border-color: _palette(accent1);
    border-style: solid;
    opacity:      1;
    position:     absolute;
  }

  .goto-next {
    @include vendor('transform', 'translate(0,0)');
    @include vendor('transition', 'transform 0.75s ease, opacity 1s ease-in');
    @include vendor('transition-delay', '0.5s');
    opacity: 1;
  }

  &.top, &.bottom {
    .content {
      left:    0;
      padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 0.85) - _size(element-margin)) 0;
      width:   100%;
    }
  }

  &.top {
    .content {
      border-bottom-width: 0.35em;
      top:                 0;
    }
  }

  &.bottom {
    .content {
      border-top-width: 0.35em;
      bottom:           0;
    }
  }

  &.left, &.right {
    .content {
      height:  101%;
      padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
      top:     0;
      width:   28em;
    }
  }

  &.left {
    .content {
      border-right-width: 0.35em;
      left:               0;
    }
  }

  &.right {
    .content {
      border-left-width: 0.35em;
      right:             0;
    }
  }

  &.inactive {
    .content {
      opacity: 0;
    }

    .goto-next {
      @include vendor('transform', 'translate(0,1.5em)');
      opacity: 0;
    }

    &.top {
      .content {
        @include vendor('transform', 'translate(0,-5em)');
      }
    }

    &.bottom {
      .content {
        @include vendor('transform', 'translate(0,5em)');
      }
    }

    &.left {
      .content {
        @include vendor('transform', 'translate(-5em,0)');
      }
    }

    &.right {
      .content {
        @include vendor('transform', 'translate(5em,0)');
      }
    }
  }
}

body.is-touch {
  .spotlight {
    background-attachment: scroll;
  }
}

//-----------------------------------
// Wrapper 
//-----------------------------------

.wrapper {
  padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0;

  &.fade-down {
    > .container {
      @include vendor('transform', 'translate(0,0)');
      @include vendor('transition', 'transform 1s ease, opacity 1s ease');
      opacity: 1;
    }

    &.inactive {
      > .container {
        @include vendor('transform', 'translate(0,-1em)');
        opacity: 0;
      }
    }
  }

  &.fade-up {
    > .container {
      @include vendor('transform', 'translate(0,0)');
      @include vendor('transition', 'transform 1s ease, opacity 1s ease');
      opacity: 1;
    }

    &.inactive {
      > .container {
        @include vendor('transform', 'translate(0,1em)');
        opacity: 0;
      }
    }
  }

  &.fade {
    > .container {
      @include vendor('transition', 'opacity 1s ease');
      opacity: 1;
    }

    &.inactive {
      > .container {
        opacity: 0;
      }
    }
  }
}

.section-home {
  position: relative;
  height:   100vh;
  .container {
    text-align: center;
  }
}

//-----------------------------------
// Dropotron 
//-----------------------------------

.dropotron {
  background:    _palette(accent2-transparent);
  border-radius: _size(border-radius);
  box-shadow:    0 0.075em 0.35em 0 rgba(0, 0, 0, 0.125);
  list-style:    none;
  margin:        calc(-0.25em + 1px) 0 0 0;
  min-width:     12em;
  padding:       0.25em 0;

  > li {
    border-top: solid 1px rgba(255, 255, 255, 0.035);
    padding:    0;

    a, span {
      border:          0;
      color:           _palette(fg);
      display:         block;
      padding:         0.1em 1em;
      text-decoration: none;
    }

    &:first-child {
      border-top: 0;
    }

    &.active {
      > a, > span {
        color: _palette(accent1);
      }
    }
  }

  &.level-0 {
    font-size:  0.8em;
    margin-top: 1em;

    &:before {
      @include vendor('transform', 'rotate(45deg)');
      background: _palette(accent2);
      content:    '';
      display:    block;
      height:     1em;
      position:   absolute;
      right:      1.5em;
      top:        -0.5em;
      width:      1em;
    }
  }
}

//-----------------------------------
// Header 
//-----------------------------------

#page-wrapper {
  padding-top: 3.5em;
}

#header {
  background:  #303030;
  box-shadow:  0 0 0.25em 0 rgba(0, 0, 0, 0.25);
  cursor:      default;
  height:      3.5em;
  left:        0;
  line-height: 3.5em;
  position:    fixed;
  top:         0;
  width:       100%;
  z-index:     100;

  .logo-site {
    display:                flex;
    flex-direction:         column;
    -webkit-flex-direction: column;
    justify-content:        center;
    height:                 inherit;
    line-height:            inherit;
    margin:                 0;
    position:               absolute;
    top:                    0;
    left:                   1em;
    font-size:              100%;
    a {
      color:         white;
      border-bottom: none;
      height:        inherit;
      line-height:   inherit;
      max-height:    80%;
      img {
        max-height: 100%;
      }
    }
    img {
      width:      auto;
      max-height: 80%;
    }
    @include breakpoint(small) {
      display: none;
    }
  }

  nav {
    position: absolute;
    right:    1em;
    top:      0;

    ul {
      margin: 0;

      li {
        //position: relative;
        display:     inline-block;
        margin-left: 1em;

        a, span {
          border:      0;
          color:       inherit;
          display:     inline-block;
          height:      inherit;
          line-height: inherit;
          outline:     0;

          &.button {
            height:      2em;
            line-height: 2em;
            padding:     0 1.25em;
          }

          &:not(.button):before {
            margin-right: 0.5em;
          }
        }

        &.on {
          > a, > span {
            color: _palette(accent1);
          }
        }

        > ul {
          display: none;
        }
      }

    }

    & > ul > li.on > a {
      background-color: _palette(accent1);
      box-shadow:       none;
      border-radius:    4px;
      border:           none;
      color:            #FFFFFF !important;
      display:          inline-block;
      height:           2em;
      line-height:      2em;
      padding:          0 .5em;
      text-align:       center;
      text-decoration:  none;
      white-space:      nowrap;
      &:hover {
        background-color: lighten(_palette(accent1), 5);
      }
    }

  }
}

.dropotron > .on > a {
  color: _palette(accent1) !important;
}

body.landing {
  #page-wrapper {
    padding-top: 0;
  }

  //#header {
  //  background: transparent;
  //  box-shadow: none;
  //  position:   absolute;
  //}
}

//-----------------------------------
// Banner 
//-----------------------------------

#banner {
  background-attachment: fixed;
  background-color:      _palette(accent2);
  background-position:   center center;
  background-size:       cover;
  box-shadow:            0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
  min-height:            100vh;
  position:              relative;
  text-align:            center;
  z-index:               (_misc(max-spotlight) + 1);

  &:before {
    content:        '';
    display:        inline-block;
    height:         100vh;
    vertical-align: middle;
    width:          1%;
  }

  &:after {
    @include vendor('background-image', ('linear-gradient(top, #{_palette(bg-transparent)}, #{_palette(bg-transparent)})', 'url("images/overlay.png")'));
    content:  '';
    display:  block;
    height:   100%;
    left:     0;
    position: absolute;
    top:      0;
    width:    100%;
  }

  .content {
    display:        inline-block;
    margin-right:   1%;
    max-width:      95%;
    padding:        $size-wrapper-pad-tb;
    position:       relative;
    text-align:     center;
    vertical-align: middle;
    z-index:        1;

    header {
      display:        inline-block;
      vertical-align: middle;
      text-align:     right;
      max-width:      50%;
      @include breakpoint(medium) {
        max-width: 100%;
      }

      h2 {
        font-size: 2.5em;
        margin:    0;
      }

      p {
        margin: (_size(element-margin) * 0.25) 0 0 0;
        top:    0;
      }
    }

    .image {
      border-radius:  100%;
      display:        inline-block;
      height:         18em;
      margin-left:    3em;
      vertical-align: middle;
      width:          18em;

      img {
        border-radius: 100%;
        display:       block;
        width:         100%;
      }
    }
  }
}

body.is-touch {
  #banner {
    background-attachment: scroll;
  }
}

//-----------------------------------
// Portfolio 
//-----------------------------------

.portfolio {
  list-style: none;
  display:    flex;
  flex-wrap:  wrap;
  margin:     0 -1em;
  padding:    0;
  > * {
    padding: 0;
    margin:  1em;
  }
}

//-----------------------------------
// hierarchie 
//-----------------------------------

.hierarchie {
  display:   block;
  font-size: 0.8em;
  color:     rgba(255, 255, 255, 0.5);
  a, strong {
    color:           rgba(255, 255, 255, 0.5);
    text-decoration: none;
    border-bottom:   none;
  }
  .sep {
    display: inline-block;
    padding: 0.3em;
  }
  @include breakpoint(small) {
    display: none;
  }
}

//-----------------------------------
// Footer 
//-----------------------------------

#footer {
  background: _palette(accent2);
  padding:    $size-wrapper-pad-tb 0;
  text-align: center;

  ul {
    color:       _palette(fg-light);
    font-size:   0.9em;
    line-height: 1em;
    margin:      0;
    padding:     0;
    text-align:  center;

    li {
      border-left:  solid 1px _palette(border);
      display:      inline-block;
      list-style:   none;
      margin-left:  1.5em;
      padding-left: 1.5em;

      &:first-child {
        border-left:  0;
        margin-left:  0;
        padding-left: 0;
      }

      a {
        color: inherit;
      }
    }
  }

  .sociaux-list {
    margin-bottom: 2em;
    li {
      display:    inline-block;
      list-style: none;
      margin:     0 .5em;
      padding:    0;
      border:     none;
      a {
        color:  inherit;
        border: none;
      }
    }
    .socicon {
      @include vendor('transition', ('background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out'));
      font-size:  1.2em;
      padding:    0.3em;
      background: _palette(bg);
      &:hover {
        color:      _palette(bg);
        background: white;
      }
    }
  }

}

//-----------------------------------
// Main 
//-----------------------------------

#main {
  overflow: hidden;
}

//-----------------------------------
// XLarge 
//-----------------------------------

@include breakpoint(xlarge) {

  //-----------------------------------
  // Basic 
  //-----------------------------------

  body, input, select, textarea {
    font-size: 13pt;
  }

}

//-----------------------------------
// Large 
//-----------------------------------

@include breakpoint(large) {

  $size-wrapper-pad-tb: 4.5em;
  $size-wrapper-pad-lr: 2.5em;

  //-----------------------------------
  // Basic 
  //-----------------------------------

  body, input, select, textarea {
    font-size: 11.5pt;
  }

  //-----------------------------------
  // Spotlight 
  //-----------------------------------

  .spotlight {
    &.top {
      .content {
        padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 0.85) - _size(element-margin)) 0;
      }
    }

    &.bottom {
      .content {
        padding: ($size-wrapper-pad-tb * 0.85) 0 (($size-wrapper-pad-tb * 1.1) - _size(element-margin)) 0;
      }
    }

    &.left, &.right {
      .content {
        padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
        width:   25em;
      }
    }
  }

  //-----------------------------------
  // Wrapper 
  //-----------------------------------

  .wrapper {
    padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0;
  }

  //-----------------------------------
  // Dropotron 
  //-----------------------------------

  .dropotron {
    &.level-0 {
      font-size: 1em;
    }
  }

  //-----------------------------------
  // Banner 
  //-----------------------------------

  #banner {
    .content {
      padding: $size-wrapper-pad-tb;
    }
  }

  //-----------------------------------
  // Footer 
  //-----------------------------------

  #footer {
    padding: $size-wrapper-pad-tb 0;
  }

}

//-----------------------------------
// Medium 
//-----------------------------------

@include breakpoint(medium) {

  $size-wrapper-pad-tb: 4.5em;
  $size-wrapper-pad-lr: 2.5em;

  //-----------------------------------
  // Basic 
  //-----------------------------------

  body, input, select, textarea {
    font-size: 12pt;
  }

  //-----------------------------------
  // Spotlight 
  //-----------------------------------

  .spotlight {
    background-attachment: scroll;
    height:                auto;

    .image.main {
      display:    block;
      margin:     0;
      max-height: 40vh;
      overflow:   hidden;
    }

    .content {
      background-color: _palette(bg);
      border-width:     0 !important;
      border-top-width: 0.35em !important;
      bottom:           auto !important;
      left:             auto !important;
      padding:          $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
      position:         relative;
      right:            auto !important;
      text-align:       center;
      top:              auto !important;
      width:            100% !important;
    }

    .goto-next {
      display: none;
    }
  }
  .section-home {
    .goto-next {
      display: none;
    }
  }

  //-----------------------------------
  // Wrapper 
  //-----------------------------------

  .wrapper {
    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
  }

  //-----------------------------------
  // Banner 
  //-----------------------------------

  #banner {
    background-attachment: scroll;

    .goto-next {
      height: 7em;
    }

    .content {
      padding:    ($size-wrapper-pad-tb * 2) 0;
      text-align: center;

      header {
        display:    block;
        margin:     0 0 _size(element-margin) 0;
        text-align: center;
      }

      .image {
        margin: 0;
      }
    }
  }

  //-----------------------------------
  // Footer 
  //-----------------------------------

  #footer {
    padding: $size-wrapper-pad-tb 0;
  }

}

//-----------------------------------
// Small 
//-----------------------------------

#navPanel, #titleBar {
  display: none;
}

@include breakpoint(small) {

  $size-wrapper-pad-tb: 3.25em;
  $size-wrapper-pad-lr: 1.5em;

  //-----------------------------------
  // Basic 
  //-----------------------------------

  html, body {
    overflow-x: hidden;
  }

  body, input, select, textarea {
    font-size: 12pt;
  }

  h1 {
    font-size: 1.85em;
  }

  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.2em;
  }

  h4 {
    font-size: 1em;
  }

  //-----------------------------------
  // Section/Article 
  //-----------------------------------

  header {
    p {
      br {
        display: none;
      }
    }

    h1 + p {
      font-size: 1em;
    }

    h2 + p {
      font-size: 1em;
    }

    h3 + p {
      font-size: 1em;
    }

    h4 + p,
    h5 + p,
    h6 + p {
      font-size: 0.9em;
    }

    &.major {
      margin: 0 0 _size(element-margin) 0;
    }
  }

  //-----------------------------------
  // Goto Next 
  //-----------------------------------

  .goto-next {
    &:before {
      height: 0.8em;
      margin: -0.4em 0 0 -0.6em;
      width:  1.2em;
    }
  }

  //-----------------------------------
  // Spotlight 
  //-----------------------------------

  .spotlight {
    box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);

    .image.main {
      max-height: 60vh;
    }

    .content {
      border-top-width: 0.2em !important;
      padding:          $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
    }
  }

  //-----------------------------------
  // Wrapper 
  //-----------------------------------

  .wrapper {
    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
  }

  //-----------------------------------
  // Header 
  //-----------------------------------

  #header {
    display: none;
  }

  //-----------------------------------
  // Banner 
  //-----------------------------------

  #banner {
    box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
    min-height: calc(100vh - 44px);

    &:before {
      height: calc(100vh - 44px);
    }

    .content {
      padding: ($size-wrapper-pad-tb * 1.25) $size-wrapper-pad-lr ($size-wrapper-pad-tb * 1.5) $size-wrapper-pad-lr;

      header {
        h1, h2 {
          font-size: 1.5em;
        }
      }

      .image {
        height: 9em;
        width:  9em;
      }
    }
  }

  //-----------------------------------
  // Off-Canvas Navigation 
  //-----------------------------------

  #page-wrapper {
    @include vendor('backface-visibility', 'hidden');
    @include vendor('transition', 'transform #{_duration(navPanel)} ease');
    padding-bottom: 1px;
    padding-top:    44px !important;
  }

  #titleBar {
    @include vendor('backface-visibility', 'hidden');
    @include vendor('transition', 'transform #{_duration(navPanel)} ease');
    display:    block;
    height:     44px;
    left:       0;
    position:   fixed;
    top:        0;
    width:      100%;
    z-index:    _misc(z-index-base) + 1;
    background: _palette(accent2);
    box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);

    .title {
      color:       _palette(fg-bold);
      display:     block;
      font-weight: _font(weight-bold);
      height:      44px;
      line-height: 44px;
      text-align:  center;
      a {
        color:   inherit;
        border:  0;
        display: inline-block;
        img {
          width:      auto;
          max-height: 36px;
          margin-top: 4px;
        }
      }
    }

    .toggle {
      //@include icon;
      position: absolute;
      left:     0;
      top:      0;
      outline:  0;
      border:   0;
      height:   44px;
      width:    54px;

      &:before {
        content:    '';
        position:   absolute;
        display:    block;
        top:        13px;
        left:       19px;
        height:     18px;
        width:      16px;
        background: linear-gradient(to bottom,
          _palette(accent2-transparent) 0%, _palette(accent2-transparent) 20%,
          transparent 20%, transparent 40%,
          _palette(accent2-transparent) 40%, _palette(accent2-transparent) 60%,
          transparent 60%, transparent 80%,
          _palette(accent2-transparent) 80%, _palette(accent2-transparent) 100%);
      }
    }

    .img-logo {
      width:      auto;
      max-height: 44px;
      padding:    4px 0;
    }
  }

  #navPanel {
    @include vendor('backface-visibility', 'hidden');
    @include vendor('transform', 'translateX(#{_size(navPanel) * -1})');
    @include vendor('transition', ('transform #{_duration(navPanel)} ease'));
    display:    block;
    height:     100%;
    left:       0;
    overflow-y: auto;
    position:   fixed;
    top:        0;
    width:      _size(navPanel);
    z-index:    _misc(z-index-base) + 2;
    background: darken(_palette(bg), 2);
    padding:    0.75em 1.25em;

    .link {
      border:          0;
      border-top:      solid 1px transparentize(_palette(border), 0.25);
      color:           _palette(fg);
      display:         block;
      height:          3em;
      line-height:     3em;
      text-decoration: none;

      &:hover {
        color: inherit !important;
      }

      &:first-child {
        border-top: 0;
      }

      &.depth-0 {
        color:       _palette(fg-bold);
        font-weight: _font(weight-bold);
      }

      .indent-1 {
        display: inline-block;
        width:   1.25em;
      }
      .indent-2 {
        display: inline-block;
        width:   2.5em;
      }
      .indent-3 {
        display: inline-block;
        width:   3.75em;
      }
      .indent-4 {
        display: inline-block;
        width:   5em;
      }
      .indent-5 {
        display: inline-block;
        width:   6.25em;
      }
    }
  }

  body {
    &.navPanel-visible {
      #page-wrapper {
        @include vendor('transform', 'translateX(#{_size(navPanel)})');
      }

      #titleBar {
        @include vendor('transform', 'translateX(#{_size(navPanel)})');
      }

      #navPanel {
        @include vendor('transform', 'translateX(0)');
      }
    }
  }

  //-----------------------------------
  // Footer 
  //-----------------------------------

  #footer {
    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
  }

}

//-----------------------------------
// XSmall 
//-----------------------------------

@include breakpoint(xsmall) {

  $size-wrapper-pad-tb: 3em;
  $size-wrapper-pad-lr: 1.25em;

  //-----------------------------------
  // Basic 
  //-----------------------------------

  html, body {
    min-width: 320px;
  }

  body, input, select, textarea {
    font-size: 12pt;
  }

  //-----------------------------------
  // List 
  //-----------------------------------

  ul {
    &.actions {
      margin: 0 0 _size(element-margin) 0;

      li {
        display:    block;
        padding:    (_size(element-margin) * 0.5) 0 0 0;
        text-align: center;
        width:      100%;

        &:first-child {
          padding-top: 0;
        }

        > * {
          margin: 0 !important;
          width:  100%;
        }
      }

      &.small {
        li {
          padding: (_size(element-margin) * 0.25) 0 0 0;

          &:first-child {
            padding-top: 0;
          }
        }
      }
    }
  }

  //-----------------------------------
  // Button 
  //-----------------------------------

  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  .button {
    padding: 0;
  }

  //-----------------------------------
  // Spotlight 
  //-----------------------------------

  .spotlight {
    .image.main {
      max-height: 50vh;
    }

    .content {
      padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr !important;
    }
  }

  //-----------------------------------
  // Wrapper 
  //-----------------------------------

  .wrapper {
    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
  }

  //-----------------------------------
  // Banner 
  //-----------------------------------

  #banner {
    .content {
      padding: $size-wrapper-pad-tb ($size-wrapper-pad-lr * 1.25) ($size-wrapper-pad-tb * 1.75) ($size-wrapper-pad-lr * 1.25);
    }
  }

  //-----------------------------------
  // Footer 
  //-----------------------------------

  #footer {
    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;

    .copyright {
      line-height: inherit;

      li {
        border-left: 0;
        display:     block;
        margin:      0;
        padding:     0;
      }
    }
  }

}

//-----------------------------------
// * Hide only visually, but have it available for screen readers:
// * http: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
//-----------------------------------
.visuallyhidden {
  border:   0;
  clip:     rect(0 0 0 0);
  height:   1px;
  margin:   -1px;
  overflow: hidden;
  padding:  0;
  position: absolute;
  width:    1px;
}

//-----------------------------------
// * Extends the .visuallyhidden class to allow the element
// * to be focusable when navigated to via the keyboard:
// * https: //www.drupal.org/node/897638
//-----------------------------------
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip:     auto;
  height:   auto;
  margin:   0;
  overflow: visible;
  position: static;
  width:    auto;
}

//-----------------------------------
// * Faire un lien sur un bloc entier
//-----------------------------------
.block-link-parent {
  position: relative;
  .block-link {
    &:before {
      content:  "";
      position: absolute;
      bottom:   0;
      left:     0;
      right:    0;
      top:      0;
      z-index:  1000;
    }
  }
}

//-----------------------------------
// Tiles 
//-----------------------------------

.tiles {
  display:   flex;
  flex-wrap: wrap;
  margin:    -2.5em 0 0 -2.5em;

  .tile {
    transition:    transform 0.5s ease, opacity 0.5s ease;
    position:      relative;
    width:         calc(25% - 2.5em);
    margin:        0 0 2.5em 2.5em;
    border-radius: _size(border-radius);

    .picture {
      transition:    transform 0.5s ease;
      position:      relative;
      display:       block;
      width:         100%;
      border-radius: _size(border-radius);
      overflow:      hidden;
      & > div {
        background-size: cover;
        width:           300px;
        height:          200px;
      }
      img {
        display: block;
        width:   100%;
      }
      
    }

    & > a {
      display:                flex;
      -webkit-flex-direction: column;
      flex-direction:         column;
      align-items:            center;
      justify-content:        center;
      transition:             background-color 0.5s ease, transform 0.5s ease;
      position:               absolute;
      top:                    0;
      left:                   0;
      width:                  100%;
      height:                 100%;
      padding:                1em;
      border-radius:          4px;
      border-bottom:          0;
      color:                  #FFFFFF;
      text-align:             center;
      text-decoration:        none;
      z-index:                3;

      &:hover {
        color: #FFFFFF !important;
      }

      .title {
        font-size: 1.4em;
        margin:    0;
        opacity:    0.8;
      }

      .content {
        transition:  max-height 0.5s ease, opacity 0.5s ease;
        width:       100%;
        max-height:  0;
        line-height: 1.5;
        margin-top:  0.35em;
        opacity:     0;
        p {
          margin: 0;
        }
      }
      
      .title, .content {
        text-shadow: 0 0 5px rgba(0, 0, 0, 1);
      }
    }
  }
}

body:not(.is-touch) .tiles .tile:hover > .picture {
  -moz-transform:    scale(1.1);
  -webkit-transform: scale(1.1);
  -ms-transform:     scale(1.1);
  transform:         scale(1.1);
}

body:not(.is-touch) .tiles .tile:hover .content {
  max-height: 15em;
  opacity:    0.8;
}

* + .tiles {
  margin-top: 2em;
}

body.is-touch .tiles .tile .content {
  max-height: 15em;
  opacity:    1;
}

@include breakpoint(large) {

  .tiles {
    margin: -1.25em 0 0 -1.25em;
  }

  .tiles .tile {
    width:  calc(33.33333% - 1.25em);
    margin: 1.25em 0 0 1.25em;
  }

}

@include breakpoint(medium) {

  .tiles {
    margin: -2.5em 0 0 -2.5em;
  }

  .tiles .tile {
    width:  calc(50% - 2.5em);
    margin: 2.5em 0 0 2.5em;
  }

}

@include breakpoint(small) {

  .tiles {
    margin: -1.25em 0 0 -1.25em;
  }

  .tiles .tile {
    width:  calc(50% - 1.25em);
    margin: 1.25em 0 0 1.25em;
  }

  .tiles .tile:hover > .picture {
    -moz-transform:    scale(1.0);
    -webkit-transform: scale(1.0);
    -ms-transform:     scale(1.0);
    transform:         scale(1.0);
  }

}

@include breakpoint(xsmall) {

  .tiles {
    margin: 0;
  }

  .tiles .tile {
    width:  100%;
    margin: 1.25em 0 0 0;
  }

}

//-----------------------------------
// SPIP boutons admin 
//-----------------------------------

#spip-admin {
  top:   3.5em;
  right: 1em;
  a {
    font-size: 0.8em;
  }
}