/* ---------------------------------------------------- */
/* -------------------- SOFT RESET -------------------- */
/* ---------------------------------------------------- */

ul{list-style-type:none;}

/* ---------------------------------------------------- */
/* -------------------- VARIABLES --------------------- */
/* ---------------------------------------------------- */

:root {

  /* ---------- Typographie ---------- */
  --font-system: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --font-title: 'Montserrat', sans-serif;

  /* ---------- Couleurs ---------- */

  --white: rgba(255,255,255,0.9);
  --blue: #465eff;
  --black: #000;
  --grey:rgba(255,255,255,0.5);
  --dark-grey:rgba(255,255,255,0.15);
  --saumon: #f4e1b9;
}

/* ---------------------------------------------------- */
/* ---------------------- THEME ----------------------- */
/* ---------------------------------------------------- */

body {
  color: rgba(255,255,255,0.9);
  color: var(--white);
  background-color: #000;
  background-color: var(--black);
}

h1,h2,h3,h4,h5,h6 {
  color: #465eff;
  color: var(--blue);
}

/* ---------------------------------------------------- */
/* -------------------- TYPOGRAPHY -------------------- */
/* ---------------------------------------------------- */

body {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--font-body);
  font-size: calc(14px + .25vw);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body form label,
body blockquote,
body dl,
body dt,
body figcaption,
body li,
body p,
body textarea {
  line-height: calc(1.5em + .2vw);
}

div,
p {
  overflow-wrap: break-word;
      word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

p {
  margin: calc(1em + .5vw) 0;
}

.text-italic {
  font-style: italic;
}

.text-bold {
  font-weight: 600;
}

.text-justify {
  text-align: justify;
}

/* ---------------------------------------------------- */
/* -------------------- TITRES ------------------------ */
/* ---------------------------------------------------- */

.h1,h1,
.h2,h2,
.h3,h3,
.h4,h4,
.h5,h5,
.h6,h6 {
  font-family: 'Montserrat', sans-serif;
  font-family: var(--font-title);
  line-height: 1.2;
  font-weight: 600;
}

.h1,h1 {
  font-size:calc(26px + 1.6vw);
}
.h2,h2 {
  font-size:calc(22px + 1.6vw);
}
.h3,h3 {
  font-size:calc(24px + .25vw);
}
.h4,h4 {
  font-size:calc(18px + .25vw);
}
.h5,h5 {
  font-size:calc(16px + .25vw);
}
 .h6,h6 {
  font-size:calc(14px + .25vw);
}

.section-title{
  position: relative;
}
.section-title:before{
  content:'';
  position: absolute;
  bottom:-15px;
  left:0;
  height:5px;
  width:50px;
  background-color: #465eff;
  background-color: var(--blue);
}

/* ---------------------------------------------------- */
/* ------------------- LIENS -------------------------- */
/* ---------------------------------------------------- */

a {
  text-decoration: none;
  -webkit-transition: all 0.4s;
          transition: all 0.4s;
}

a:hover,
a:focus {
  color: #465eff;
  color: var(--blue);
}

/* ---------------------------------------------------- */
/* -------------------- LAYOUT ------------------------ */
/* ---------------------------------------------------- */

.page-content {
  margin-bottom: 1em;
}

@media only screen and (min-width:48em) {
  .page-content {
    margin-bottom: 2em;
  }
}

@media only screen and (min-width: 60em){
  .page-header {
    position: fixed;
    width:calc(250px + .25vw);
    margin-top: 2em;
  }
  .page-content,
  .page-footer {
    width: auto;
    max-width: 60rem;
    margin-left: calc(300px + .25vw);
    margin-top: 2em;
  }
  .page-content {
    margin-bottom: 3em;
  }
}

/* ---------------------------------------------------- */
/* --------------------- PAGE ------------------------- */
/* ---------------------------------------------------- */

.page {
  padding: 1rem;
}
@media only screen and (min-width: 48em) {
  .page {
    padding: 1rem 1.25rem 0 1.25rem;
  }
}
@media only screen and (min-width: 64em) {
  .page {
    padding: 1rem 2rem 0 2rem;
  }
}

/* ---------------------------------------------------- */
/* ---------------------- LOGO ------------------------ */
/* ---------------------------------------------------- */

.site-title {
  margin: 0;
  text-transform: uppercase;
}

.site-title-link {
  color:rgba(255,255,255,.9);
  color: var(--white);
}
.site-subtitle {
  color:rgba(255,255,255,.5);
  color: var(--grey);
  text-transform: uppercase;
}

/* ---------------------------------------------------- */
/* -------------------- NAVIGATION -------------------- */
/* ---------------------------------------------------- */

.navigation-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  list-style-type: none;
}

.navigation-list-item {
  flex: 0 0 calc((100% / 2) - 5px);
  padding: 0.325em;
  text-align: center;
  background-color: rgba(255,255,255,0.15);
  background-color: var(--dark-grey);
  border-radius: 1px;
}

.navigation-link {
  display: block;
  font-family: 'montserratmedium', sans-serif;
  font-family: var(--font-title);
  color:rgba(255,255,255,0.9);
  color: var(--white);
}

@media only screen and (min-width:60em) {
  .navigation-list {
    flex-direction: column;
    margin-top: 2em;
  }
  .navigation-list-item {
    flex: 0 0 auto;
    padding: 0.325em 0;
    text-align: left;
    background-color: transparent;
    border-radius: 0;
  }
}