$vert: #04874b
$orange: #f0833c
$grey: #e5e5e5
$color-primary: black
$color-secondary: white

$size-xs: 480px
$size-sm: 600px
$size-md: 840px
$size-lg: 960px
$size-xl: 1280px

@import "./reset"
@import "./fonts"
@import "./header"
@import "./posts"
@import "./print"

body
  color: $color-primary
  background-color: $color-secondary

.md p
  img
    margin: 3rem auto
  &:first-child img
    margin: 0 auto 3rem
  &:last-child img
    margin: 3rem auto 0
  &:first-child:last-child img
    margin: 0 auto

.round
  border-radius: 100%

// CONTAINER

.icons
  width: 30px

.container
  max-width: $size-lg
  margin: 0 auto
  padding: 0 1rem
  @media screen and (max-width: $size-xs)
    padding: 0 .5rem

  &.md
    padding: 0 .5rem

// content

#content
  margin-top: -10vh
  min-height: 50vh

  @media screen and (max-width: $size-md)
    min-height: inherit

  a
    color: $color-primary

  > .container
    background-color: white
    padding: 1rem
    @media screen and (max-width: $size-sm)
      margin: 0
      padding: 1rem 0



  .infos
    display: flex
    @media screen and (max-width: $size-md)
      flex-direction: column
    .news, .opening
      min-height: 500px
      margin: 1rem

    .news
      width: 65%
      display: flex
      flex-direction: column
      @media screen and (max-width: $size-xl)
        width: 65%
      @media screen and (max-width: $size-md)
        width: 100%
        margin: 0

    .opening
      background: $orange
      width: 35%
      padding: 20px
      color: white
      background-image: url(/icons/horloge.svg)
      background-repeat: no-repeat
      background-position: center -50px
      background-size: 70%
      @media screen and (max-width: $size-xl)
        width: 35%
      @media screen and (max-width: $size-md)
        width: 100%
        margin: 0
        background-position-x: 120%
        background-size: 50%

      h2
        margin: 1rem 0

      h3
        margin: 1rem 0 .4rem
        text-transform: inherit

      p
        margin-top: 0

      p:last-child
        margin-bottom: 0

      a
        color: white
.news
  aside h2
    text-align: center
  > small
    display: block
    text-align: center

hr
  margin: 3rem auto
  border: 1px dashed $vert
  @media screen and (max-width: $size-xs)
    margin: 2rem auto
// FOOTER

.explain
  text-align: center
  font-size: .6rem
  background-color: $vert
  color: white

  a
    color: white

.footer
  background: $vert
  color: white
  padding: 2rem 0

  .icons
    height: 30px
    width: 30px
    margin: 1rem 0 .5rem .5rem

  a
    color: white
    display: inline-block

  .container
    display: flex
    @media screen and (max-width: $size-md)
      flex-wrap: wrap
      justify-content: center
    @media screen and (max-width: $size-sm)
      flex-direction: column

  .address
    text-align: right
  .logo
    width: 20%
    @media screen and (max-width: $size-md)
      order: -1
      width: 100%
    img
      margin: 0 auto 1rem
  .horaire,
  .address
    width: 40%
    padding: 1rem

    @media screen and (max-width: $size-sm)
      width: 100%
      text-align: center
      padding: 1rem 0 0

  h3
    font-size: 1.3rem
    margin: 0 0 .7rem
    font-weight: bold

  p
    margin: 0
    line-height: 1.1rem

#content .commissions
  h3, h4
    color: $vert

#content .conseilmunicipal
  display: flex
  flex-wrap: wrap
  justify-content: center

  .person
    margin: 1rem
    width: 250px
    text-align: center
    .card-image
      margin-bottom: 1rem

    h2
      color: $vert
      font-size: 1.1rem
      padding: 0
      margin: 0 0 .3rem

    h3
      font-size: 1rem
      padding: 0
      margin: 0

    .card-body
      font-size: .9rem


.md
  max-width: 645px
  margin-left: auto
  margin-right: auto