$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 "./footer"
@import "./posts"
@import "./print"
@import "./css-masonry"

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

.open-button, .close-button
  border-radius: 0
  border: 1px solid white
  padding: .2rem .5rem
  cursor: pointer

  &:hover
    color: white


.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

// 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
    @media screen and (max-width: $size-xs)
      padding: 1rem .5rem



  .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: black
      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: black
.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

#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

.obfuscate:before
  content: attr(data-param2)
  unicode-bidi: bidi-override
  direction: rtl

  &.at
    content: attr(data-param4) "\002E" attr(data-param3) "\0040" attr(data-param2)

details > summary
  cursor: pointer

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

#content .cards
  margin: 0 -1rem
  padding: 0
  list-style-type: none
  display: flex
  flex-wrap: wrap
  justify-content: center
  .card
    flex: 0 0 calc(100% * 3 / 12)
    background-color: #f0833c
    margin: 1rem
    padding: 1rem
    border-radius: 4px
    text-align: center
    display: flex
    align-items: center
    justify-content: center
    color: white

    h2
      text-transform: none
      padding: 0
      margin: 0
      font-size: 1.2rem

    &:hover
      box-shadow: none
      color: $vert
      background-color: white