@import "../../themes/hugo-theme-lowtech/assets/styles/main"

// Couleur
$color-initial: #fff
$color-primary: #1d70b7
$color-secondary: #f29100
$color-tertiary: #f4f5f6
$color-quaternary: #d1d1d1
$color-quinary: #e1e1e1

@import "./header"
@import "./nav"
@import "./footer"
@import "./actu"

body
  margin: 0
  font-family: $font-family-serif2
  font-size: 18px
  color: hsla(0,0%,0%,0.8)

h1
  font-size: 2.5rem
  text-align: center
  margin: 3rem 0

h2
  font-size: 2rem
  margin-top: 4rem

h1, h2, h3
  font-family: $font-family-sans-serif7
  color: $color-primary
  overflow-wrap: anywhere

hr
    border: 0
    height: 2px
    margin: 2rem 0
    background-color: rgba($color-primary, 0.25)

.txt-center
  text-align: center

img
  display: block

blockquote
  border-left: 4px solid $color-primary
  margin-left: 0
  padding-left: 2rem

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

@mixin container
  max-width: $size-lg
  margin: 0 auto
  padding: 0 1rem

.container
  @include container

  img
    max-width: 100%

  &.small
    max-width: 680px
    line-height: 1.50

    h2
      line-height: 1.1

.cfa
  text-align: center
  padding: 2rem

  a, input
    padding: 1rem
    background-color: $color-primary
    color: white
    text-decoration: none
    border: 0
    font-size: 1.2rem

    &:hover
      background: $color-secondary

.infolettre
  input[type="text"], input[type="email"]
    border-radius: .3rem
    border: 2px solid $color-primary
    padding: .5rem
    margin-top: .5rem
    margin-bottom: .5rem

  .full
    input
      width: 45%
      @media screen and (max-width: 600px)
        width: calc(100% - 1rem - 4px)
      &+input
        float: right

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

.monitoring
  text-align: center
  border-collapse: collapse
  margin: 0 auto
  background: $color-primary
  color: white
  width: 100%
  border-top: 1px solid white

  .date
    background: white
    color: $color-primary
    font-size: .8rem
    padding: .4rem
    text-align: right
    font-style: italic


  td
    border: 1px solid white
    padding: 1rem

  th
    border-right: 1px solid white

  strong
    display: block

  @media screen and (max-width: 839px)
    margin-left: calc(-1rem + 1px)
    font-size: .8rem
    min-width: calc(100% + 2rem - 1px)
    max-width: calc(100% + 2rem - 1px)

    td
      padding: .5rem
// NAV

// #content
  // https://freefrontend.com/css-link-styles/
  // https://codepen.io/markmead/pen/drORWG
  // a
    // position: relative

    // &::after
    //   content: ""
    //   background: rgba($color-primary, 0.25)
    //   position: absolute
    //   left: 6px
    //   bottom: -6px
    //   width: calc(100% - 8px)
    //   height: calc(100% - 8px)
    //   z-index: -1
