/*
Theme: light
*/
@import url(https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500;1,700&family=Roboto:wght@100;400;900&display=swap);
/* @import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;700&family=Roboto:wght@100;400;900&display=swap'); */
:root {
  --font-default: "Roboto", sans-serif;
  --font-headings: "Lora", serif;
  /* Transitions */
  --transition-pop: cubic-bezier(0.49, 0.22, 0.36, 1.65);
  --transition-sweep: cubic-bezier(0.32, -0.8, 1, 0.56);
  /* box-shadow */
  --shadow-color-rgb: 0, 0, 0;
  --shadow-offset: 0 0;
  --shadow-blur-radius: 1rem;
  --shadow-100: var(--shadow-offset) var(--shadow-blur-radius) rgba(var(--shadow-color-rgb), .14) var(--shadow-inset, );
  --shadow-200: var(--shadow-offset) var(--shadow-blur-radius) rgba(var(--shadow-color-rgb), .3) var(--shadow-inset, );
  --shadow-400: var(--shadow-offset) var(--shadow-blur-radius) rgba(var(--shadow-color-rgb), .5) var(--shadow-inset, );
  --shadow-600: var(--shadow-offset) var(--shadow-blur-radius) rgba(var(--shadow-color-rgb), .7) var(--shadow-inset, );
  /* border-radius */
  --border-radius-100: 4px;
  --border-radius-200: 6px;
  --border-radius-400: 8px;
  --border-radius-600: 12px;
  /* colors */
  --gray-100: #eee;
  --gray-200: #bbb;
  --gray-400: #aaa;
  --gray-600: #888;
  --gray-700: #555;
  --gray-800: #333;
  --clr-primary: #519cbc;
  --clr-secondary: #394752;
}

html, body {
  overflow-x: hidden;
}

/* Animations */
@keyframes smooth-appear {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
body {
  font-family: var(--font-default);
  padding-top: 220px;
}

img {
  max-width: 100%;
  height: auto;
}

#main-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#main-container #main {
  flex: 1;
}

.navbar-toggler {
  display: flex;
}
.navbar-toggler .navbar-btn-bar {
  background-color: var(--clr-primary);
  height: 4px;
}

.navbar-brand {
  font-family: var(--font-headings);
  font-size: 3em;
  color: var(--clr-secondary);
}

.navbar-header {
  width: 100%;
}

.homepage .header {
  margin-bottom: 0 !important;
}

#main-container .header {
  margin-bottom: 2rem;
  padding: 0 0 1rem;
  background-color: #fff;
  position: fixed;
  z-index: 1000;
  width: 100vw;
  top: 0;
  box-shadow: 0 0 6px 0px rgba(0, 0, 0, 0.2);
}
#main-container .header #top-nav {
  background-color: var(--gray-100);
}
#main-container .header #top-nav > .container {
  display: flex;
  justify-content: flex-end;
}
#main-container .header #top-nav > .container > * {
  margin-left: 1rem;
}
#main-container .header .navbar-brand {
  padding: 0;
  color: var(--clr-secondary);
}
#main-container .header .navbar {
  padding-bottom: 0;
}
#main-container .header #main-menu {
  margin: 0 -0.5rem;
}
#main-container .header #main-menu .nav-link.current {
  color: var(--clr-primary);
}
#main-container #main {
  flex: 1;
}
#main-container footer {
  background: var(--clr-primary);
  padding-bottom: 3em;
}
#main-container footer li {
  list-style: none;
}
#main-container footer .navbar-footer .nav-link {
  padding: 0;
}

h1, h2, h3, h4 {
  color: var(--clr-primary);
  font-family: var(--font-headings);
  font-weight: 500;
}

h1 {
  font-size: 2.8em;
}

h2 {
  font-size: 2.2em;
}

h4 {
  font-size: 1.2em;
}

a:hover {
  color: inherit;
}

.tags {
  font-size: 0.85em;
  padding: 0.2em 0;
}
.tags .fa {
  margin-right: 0.2em;
}
.tags [rel=tag] {
  color: var(--clr-primary);
}

.tpl-posts-connexes,
.tpl-3-actus {
  padding-top: 2em;
}
.tpl-posts-connexes h3,
.tpl-3-actus h3 {
  color: var(--clr-primary);
  margin-bottom: 0;
}
.tpl-posts-connexes .tags p,
.tpl-3-actus .tags p {
  margin-bottom: 0;
}
.tpl-posts-connexes [itemprop=description],
.tpl-3-actus [itemprop=description] {
  margin-top: 1em;
}

/* Cards */
.card {
  position: relative;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-100);
  border-radius: var(--border-radius-200);
  overflow: hidden;
  transition: all 0.4s;
}
.card .card-img-top {
  padding-top: 66%;
  background-size: cover;
}
.card .card-link {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-indent: -200vw;
  overflow: hidden;
}

/* Carousel */
.carousel-caption {
  font-size: 3em;
  line-height: 0.8em;
  padding: 1.5em;
}
.carousel-caption .caption-title {
  font-family: "Russo One", sans-serif;
  color: var(--clr-secondary) !important;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.carousel-caption .caption-title small {
  font-size: 0.5em;
  text-transform: uppercase;
  font-family: "Alata", sans-serif;
}
.carousel-caption p {
  font-size: 0.35em;
  line-height: 1.36;
}
.carousel-caption.blanc .caption-title {
  color: #fff !important;
}
.carousel-caption.brand-primary .caption-title {
  color: var(--clr-primary) !important;
}
.carousel-caption.dark .caption-title {
  color: var(--clr-secondary) !important;
}
.carousel-caption.noir .caption-title {
  color: #000 !important;
}

.carousel-control-next, .carousel-control-prev {
  z-index: 100;
}