/* =========================
   RESET GLOBAL
========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* =========================
   HTML / BODY
========================= */

html {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;

  font-family: "Roboto Slab", serif;
  color: #111;
  background-color: #fff;
  line-height: 1.7;
}

/* =========================
   MÉDIAS
========================= */

img,
picture,
video,
canvas,
svg,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   ÉVITE LES OVERFLOWS
========================= */

section,
div,
main,
article,
aside,
header,
footer,
nav {
  min-width: 0;
}

/* =========================
   TYPO
========================= */

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  font-size: 56px;
}

h2 {
  font-size: 42px;
}

p {
  font-size: 18px;
}

/* =========================
   RESPONSIVE
========================= */

@media screen and (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    position: relative;
  }

  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 32px;
  }

  p {
    font-size: 16px;
  }
}