@import url('https://fonts.googleapis.com/css?family=Hind:300,600,700')
$bkg: #25252d
$header: #1d1e23
$action: #2e5cfd
$action-secondary: #ffcd05
$text: #eaeaea

a
  color: $action-secondary
  font-weight: 700
  text-decoration: none
  transition: color 250ms

  &:hover
    color: lighten($action-secondary, 10%)

  &.case-sensitive
    text-transform: none

label
  display: block
  margin: 1em 0
  max-width: 40em
  width: 80%

  input, select, textarea
    background: $bkg
    border: 1px solid
    color: $text
    display: block
    padding: 0.2em
    width: 100%

    &:focus
      border-color: $action-secondary

textarea
  height: 5em

input[type="submit"]
  background: $action
  border: 0
  color: $text
  cursor: pointer
  font-family: 'Hind', sans-serif
  outline: transparent
  padding: 1em 2em
  text-transform: uppercase
  transition: background 250ms
  width: auto

  &:hover
    background: lighten($action, 5%)

.nicEdit-panelContain, .nicEdit-pane
  color: black

  input[type="submit"]
    color: black

code
  background: $header
  border-bottom: 1px solid $action-secondary
  display: block
  padding: 2em

table
  border-collapse: collapse
  margin: 1em 0

  thead, tr:nth-child(even)
    background: $header

  td, th
    padding: 0.3em 1em

iframe
  background: $text
  border: 0
  height: 55em
  width: 100%

body
  background: $bkg
  color: $text
  display: flex
  flex-direction: column
  font-family: 'Hind', sans-serif
  font-size: .9em
  font-weight: 300
  margin: 0
  min-height: 100vh
  padding: 0

header
  background: $header
  box-sizing: border-box
  order: 1
  padding: 0 1em

.wrapper
  width: 100%
  max-width: 1200px
  margin: 0 auto
  box-sizing: border-box

.menu
  display: flex
  flex-direction: row
  justify-content: flex-start
  align-items: center
  padding: 0 1em
  min-height: 70px
  
  // Footer navigation
  &--footer
    background: $header
    box-sizing: border-box
    margin-top: 2em
    order: 4
  
  &__toggle
    order: 2
    text-align: right
    align-self: flex-start
    padding-top: 1em
    @media screen and (min-width: 840px)
      display: none

  &__checkbox
    display: none
    &:checked + .menu__list
      max-height: 84px
      overflow: hidden

  // ul element
  &__list
    flex: 1 1 100%
    display: flex
    flex-direction: column
    list-style: none
    margin: 0
    padding: 0
    max-height: 1000px
    transition: max-height .3s

    @media screen and (min-width: 840px)
      flex-direction: row
      justify-content: center
      align-items: center

    a
      color: $text
      display: block
      font-weight: 600
      text-decoration: none

    .active a
      color: $action-secondary

  &__item
    padding: 1em 0
    font-size: .8em
    text-transform: uppercase
    white-space: nowrap
    @media screen and (min-width: 840px)
      padding: 1em

    &--brand
      flex: 1 1 100%
      padding-left: 0 

    .brand
      flex: 1 1 100%
      display: flex
      flex-direction: row
      align-items: center
      font-size: 1.5em
      img 
        padding-right: 1em
      a
        font-weight: normal
        text-transform: none
        padding: 0

main
  box-sizing: border-box
  flex-grow: 1
  margin: 1em auto 0
  max-width: 1200px
  order: 3
  padding: 0 1em
  width: 100%

aside
  background: $header
  margin: 1em auto
  padding: 1em 2em
  width: 80%

footer
  ul
    display: flex
    justify-content: center
    list-style: none
    padding: 0

h1
  color: $action-secondary
  font-weight: 300
  margin: 2em auto
  max-width: 1200px

  &::after
    background: $action-secondary
    content: ''
    display: block
    height: 3px
    width: 30px

  abbr
    display: block

h2
  font-weight: 400

dd
  margin-left: 1em

  p:before
    content: '→ '
    display: inline

time
  display: block

#actualites main, #emplois main, #index-news
  box-sizing: border-box
  display: flex
  flex-wrap: wrap

  article
    background: lighten($bkg, 5%)
    border: 1px solid $bkg
    box-sizing: border-box
    flex: 1 50%
    padding: 2em
    word-wrap: break-word

    img
      max-width: 100%

    a
      color: $action-secondary
      font-size: .8em
      font-weight: 700
      text-decoration: none
      text-transform: uppercase
      transition: color 250ms

      &:hover
        color: lighten($action-secondary, 10%)

    h2
      flex: 1 100%

    article
      background: lighten($bkg, 5%)
      border: 1px solid $bkg
      box-sizing: border-box
      flex: 1 50%
      padding: 2em

      h2
        font-size: 1.2em
        font-weight: 600

@media screen and (max-width: 640px)
  #actualites main, #emplois main, #index-news
    article
      flex: 1 100%
      width: 100%