@import "./variables"
// @import "./reset"
// @import "./html"
// @import "./menu"
@import "./spectre.css/spectre"
// @import "./header"
@import "../fonts/source-sans-pro"
@import "./header"
@import "./index"

/* Make images easier to work with */
img
  max-width: 100%
  display: block
  &.round
    border-radius: 100%

.maire
  img
    margin: 2rem auto

.person
  text-align: center
  width: 250px
  margin: 0 auto 2rem

body
  font-family: 'Source Sans Pro', sans-serif
  background-color: #f7f4f1

.card
  border: 0
  box-shadow: 0 .25rem 1rem rgba(48,55,66,.15)

.hero.hero-lg
  padding: 12rem 0

h1
  font-size: 3rem
  font-weight: 500
  line-height: 1
  text-align: center

.cover
  width: 100%
  height: 40vh
  object-fit: cover
  z-index: 2
  position: relative

.contenu
  background: white
  margin: 2rem auto
  padding: 2rem
  z-index: 3
  position: relative

  &.contenu-image
    margin-top: -4rem

.btn.jaune
  color: $jaune
  &:hover, &.active, &.focus
    color: darken($jaune, 10%)
  &.btn-primary
    background-color: $jaune
    border-color: $jaune
    color: black
    &:hover, &.active, &.focus
      background-color: darken($jaune, 10%)
      border-color: $jaune
.btn.rouge
  color: $rouge
  &:hover, &.active, &.focus
    color: darken($rouge, 10%)
  &.btn-primary
    background-color: $rouge
    border-color: $rouge
    color: white
    &:hover, &.active, &.focus
      background-color: darken($rouge, 10%)
      border-color: $rouge
.btn.vert
  color: $vert
  &:hover
    color: darken($vert, 10%)
  &:active
    color: darken($vert, 10%)
  &:focus
    color: darken($vert, 10%)
  &.btn-primary
    background-color: $vert
    border-color: $vert
    color: white
    &:hover, &.active, &.focus
      background-color: darken($vert, 10%)
      border-color: $vert
.btn.bleu
  color: $bleu
  &:hover
  &.active
  &.focus
    color: darken($bleu, 10%)
  &.btn-primary
    background-color: $bleu
    border-color: $bleu
    color: white
    &:hover, &.active, &.focus
      background-color: darken($bleu, 10%)
      border-color: $bleu

.footer
  margin: 2rem

  .card
    margin: 0 2rem

    button
      overflow-wrap: anywhere
      word-break: break-all
      white-space: normal
      user-select: inherit