#presentation
  text-align: center
  position: relative

  &::before
    height: 8px
    width: 100%
    background: var(--color-highlight)
    content: ""
    position: absolute
    left: 0
    right: 0
    top: 18rem

#contact
  .cadre
    margin: 2rem 0
    display: inline-block
    line-height: 2
    a
      display: inline-block
      padding: 2rem
      margin: 2rem
      border: 8px solid var(--color-highlight)


    @media screen and (max-width: $size-small)
      border: 8px solid var(--color-highlight)

      a
        display: block
        border: none
        padding: .5rem 1rem
        margin: 0

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

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

  h3
    text-align: center
    margin: 2rem 0

#valeurs, #presentation
  .container
    &:first-child
      padding-bottom: 0
    &:last-child
      padding-top: 0

#partenaire
  ul
    display: flex
    justify-content: center
    align-items: flex-start
    width: 100%
    @media screen and (max-width: $size-small)
      flex-wrap: wrap
    li
      text-align: center
      padding: $size-space/2
  img
    height: 75px
    margin: 0 auto
    filter: grayscale(1)

    &:hover
      filter: grayscale(0)



#me .container
  align-items: center
  @media screen and (max-width: $size-small)
    flex-direction: column-reverse
    justify-content: center

  div
    width: 450px
    max-width: 100%

  svg
    width: 400px
    height: 400px
    @media screen and (max-width: $size-small)
      width: calc(200px + #{$size-space*2})
      height: calc(200px + #{$size-space*2})
      margin: 0 auto
      padding: $size-space