@font-face
 font-family: "subscriber"
 src: url("/fonts/subscriber.woff") format("woff")

h1, h2
  font-family: subscriber

h2
  text-transform: uppercase
  text-align: center

html, body
  min-height: 100%
  background-color: white
  padding: 0
  margin: 0

.container
  width: $content-width
  margin: 0 auto

@media screen and (max-width: 800px)
  .container
    width: inherit

.jaune
  h2
    color: $jaune
.rouge
  h2
    color: $rouge
.vert
  h2
    color: $vert
.bleu
  h2
    color: $bleu

@media screen and (max-width: 800px)
  .header .title
    z-index: 20000
    display: block
    top: 1rem
    position: absolute
    left: 0
    right: 0
    background: white

  .nav
    // display: none
    display: flex
    position: absolute
    top: 100px
    bottom: 0
    left: 0
    right: 0
    z-index: 1000
    background-color: white
    width: 100vw
    height: calc(100vh - 100px)
    justify-content: center
    align-items: center

    .menu
      margin: 0
      padding: 0
      list-style: none

      > li
        padding: .5rem 1rem
        text-align: center

        > a
          margin: 0 auto
          padding: .2rem
          color: red
          border: 2px solid red
          width: 200px
          display: block

        &.vert
          a
            color: $vert
            border-color: $vert
            background-color: scale-color($vert, $lightness: +50%)

        &.jaune
          a
            color: $jaune
            border-color: $jaune
            background-color: scale-color($jaune, $lightness: +50%)

        &.rouge
          a
            color: $rouge
            border-color: $rouge
            background-color: scale-color($rouge, $lightness: +50%)

        &.bleu
          a
            color: $bleu
            border-color: $bleu
            background-color: scale-color($bleu, $lightness: +50%)

    .sousmenu
      padding: 0
      li
        display: inline
        a
          background-color: white!important

  .header button
    display: block

@media screen and (min-width: 800px)
  .nav
    margin-bottom: 22px

    ul
      display: flex
      margin: 0
      padding: 0
      list-style: none

    ul.menu

      .sousmenu
        position: absolute
        display: none
        padding-top: 20px
        top: calc(100% - 18px)
        left: 0
        right: 0
        justify-content: space-around
        background-color: white

        &::before,
        &::after
          content: ""
          border-top: 1px $gris dashed
          height: 1px
          width: 100%
          position: absolute

        &::after
          bottom: -1px

        &::before
          top: 18px

        a
          border: 0
          color: $gris!important

      .sousmenu.active
        display: flex


      li
        margin: .2rem

        &:hover ul
          display: flex
          z-index: 20


        &:last-child
          margin-right: 0

      a
        padding: .5rem
        border: 2px solid white
        text-decoration: none
        font-size: 1rem
        color: white

        &:hover
          opacity: .8

      .vert
        a
          color: $vert
          border-color: $vert

      .jaune
        a
          color: $jaune
          border-color: $jaune

      .rouge
        a
          color: $rouge
          border-color: $rouge

      .bleu
        a
          color: $bleu
          border-color: $bleu

      .active
        a
          background-color: white
          border-style: dashed
          border-color: white!important

        &.jaune
          a
            color: $jaune
            border-bottom-color: $jaune

        &.rouge
          a
            color: $rouge
            border-bottom-color: $rouge

        &.vert
          a
            color: $vert
            border-bottom-color: $vert

        &.bleu
          a
            color: $bleu
            border-bottom-color: $bleu

#content
  width: 800px
  margin: 0 auto
  margin-bottom: 2rem

.footer
  background-color: #222
  color: white

  h4
    text-align: center

  .container
    padding: 2rem 0
    display: flex

    > div
      margin: 0 10px
      padding: 10px
      background-color: scale-color(#222, $lightness: +15%)

    div:first-child
      margin-left: 0

    div:last-child
      margin-right: 0

    .title
      height: 130px
      display: flex
      align-items: flex-end
      justify-content: center

.conseilmunicipal
  display: flex
  margin: 0 auto
  padding: 0 10px 10px
  list-style: none
  flex-wrap: wrap
  max-width: 1300px
  justify-content: space-around

  li
    width: 250px
    padding: 10px

    figcaption
      text-align: center

      h3
        margin: 10px 0
        font-size: 1em

      p
        margin: 0
        font-size: .8em
        line-height: 1em

img.round
  border-radius: 100%

img.paysage
  width: 100%
  height: 600px
  object-fit: cover