// Couleur
$primary-color: #e72520
$bg-color: #f2f2f2

// Responsive breakpoints
$size-xs: 480px
$size-sm: 600px
$size-md: 840px
$size-lg: 960px
$size-xl: 1280px
$size-2x: 1440px

@import "./font"
@import "./grid"
@import "./card"

body
  margin: 0
  font-family: $font-family
  font-size: 13px

h2
  color: grey

a
  color: black
  text-decoration-color: $primary-color

  &:hover
    color: $primary-color

@mixin container
  max-width: $size-lg
  margin: 0 auto
  padding: 0 20px

.container
  @include container

.header
  position: fixed
  z-index: 3
  left: 0
  right: 0
  height: 90px
  overflow: hidden
  background-color: white

  .container
    display: flex
    height: 100%

  .accueil
    padding: 15px
    margin: 5px 5px 5px -15px

  .logo
    height: 50px

  .menu
    margin: auto
    margin-right: -20px

    a
      text-decoration-thickness: 3px
      text-underline-offset: 10px
      padding: 15px
      margin: 5px

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

    li
      display: inline


.ancre
  position: absolute
  top: -126px

@media (max-width: $size-md)
  .header
    height: 70px
    .container
      justify-content: space-between
      align-items: center
    .logo
      height: 30px

  .ancre
    top: -86px

@media (max-width: $size-sm - 1px)
  .header
    .menu
      text-align: right
      margin: 0
      a
        padding: 0
        margin: 0
        text-decoration-thickness: 1px
        text-underline-offset: 1px
      li
        display: block

.bg
  position: relative
  padding: 20px 0

  &.colored
    background-color: $bg-color

  @media (max-width: $size-md)
    padding: 10px 0

#content
  padding-top: 90px

.news
  display: flex
  flex-wrap: wrap
  align-items: center