.container
  max-width: $size-small
  margin: 0 auto
  padding: 1rem

  &.md
    max-width: 660px


header .container
    display: flex
    justify-content: space-between

main > section
  margin: 2rem auto


#menu ul
  list-style-type: none
  li
    display: inline
  img
    display: inline


#title
  margin: 4rem auto
  h1, h2
    text-align: center

  h1
    margin-bottom: 1rem

  h2
    font-size: 1rem
    margin: 0 3rem

.highlight
  display: inline-block
  color: white
  padding: .5rem
  margin: .5rem
  font-family: "blackout-midnight"
  transform: rotate(-2deg)
  background-color: var(--color-tertiary)
  border-radius: var(--border-radius)
  // text-shadow: 4px 3px 0 #7A7A7A, 2px 2px 2px rgba(206,89,55,0)

  &:hover
    background: var(--color-highlight)

#presentation
  display: flex
  justify-content: center
  flex-wrap: wrap

  section
    max-width: 16rem
    padding: 4rem 1rem 1rem

  article
    background: var(--color-dark-background-card)
    padding: 2rem 1rem
    text-align: center
    height: 10rem
    position: relative
    border-radius: var(--border-radius)
    margin-bottom: 1rem

    img
      position: absolute
      left: 0
      right: 0
      margin: -5rem auto

    h3
      padding-top: 1rem
      hyphens: auto
      word-break: break-word

#contact
  // border-radius: 34% 45% 45% 38% / 34% 77% 38% 88%
  // background: var(--color-dark-background-card)
  max-width: 36rem
  padding: 3rem
  text-align: center

  h3
    margin: 2rem 0

  p a
    font-size: 1.3rem
    padding: 1rem

#news
  display: flex
  justify-content: center
  flex-wrap: wrap

  #reflexions h3
    text-align: right

  .more
    display: block
    text-align: center

#info
  display: flex
  justify-content: center
  flex-wrap: wrap
  align-items: center
  section
    margin: 2rem auto

  margin-left: -1rem
  margin-right: -1rem

  .container
    text-align: center

  @media screen and (min-width: $size-small)
    margin-left: calc(-100vw / 2 + #{$size-small} / 2 - 1rem)
    margin-right: calc(-100vw / 2 + #{$size-small} / 2)

    #valeurs
      width: 50%

      .container
        // transform: rotate(2deg)
        float: right
        width: calc(#{$size-small/2} - 2rem
        padding: .5rem
    #me
      width: 50%

      .container
        padding: 2rem 0 2rem 2rem
        width: $size-small/2

  h3
    text-align: center
    margin: 2rem 0

  #valeurs
    background-color: var(--color-dark-background-card)

    // transform: rotate(-2deg)
    padding: 1rem

  #me
    .container
      text-align: center

      img
        margin: 0 auto

#valeurs
  .container
    display: flex
    align-items: strech

  h3
    display: block
    height: auto
    writing-mode: vertical-rl
    text-align: right
    position: relative
    padding: 0 .5rem
    margin: 2rem .5rem
    border-left: 3px dashed var(--color-white)
    // border-right: 2px solid var(--color-white)
    transform: rotate(180deg)

    @media screen and (max-width: 630px)
      padding-right: 0
      margin-right: 0


  ul.card
    display: flex
    justify-content: center
    flex-wrap: wrap

    li
      background: var(--color-dark-background-card)
      // border: 2px solid var(--color-white)
      position: relative
      margin: 2rem 1rem
      padding: 2rem 1rem 1rem
      width: calc(33% - 2rem)
      text-align: center
      display: flex
      align-items: center
      justify-content: center
      flex-direction: column
      border-radius: var(--border-radius)

      @media screen and (max-width: 770px)
        width: calc(50% - 2rem)

      @media screen and (max-width: 630px)
        width: 100%
        h4
          left: -1rem

      &:hover
        h4
          background-color: var(--color-highlight)
          transform: rotate(2deg)

      h4
        position: absolute
        top: -2rem
        transition-property: transform
        transition-duration: .2s
      p
        margin: 0


      img
        position: absolute
        background-color: white
        padding: .5rem
        border: 1px solid white
        left: -2rem
        top: -2rem

#me
  padding: 2rem
  text-align: center
  background-image: repeating-linear-gradient(-45deg,transparent,transparent 7px,var(--color-dark-background-card) 0, var(--color-dark-background-card) 10px)

  @media screen and (max-width: 630px)
    padding: 1rem

  .container
    padding-top: 3rem
    max-width: 660px
    background: var(--color-dark-background)

  img
    margin: 0 auto

  h3
    margin: 2rem auto

#partenaire
  ul
    li
      text-align: center
      padding: .5rem
  img
    height: 75px
    margin: 0 auto
    filter: grayscale(1)

  .container
      display: flex
      justify-content: space-between
      align-items: flex-start
  .right
    width: 75%