@font-face {
  font-family: "Gotham";
  src: url("./../fonts/Gotham-Book.woff2") format("woff2"),
    url("./../fonts/Gotham-Book.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("./../fonts/Gotham-Bold.woff2") format("woff2"),
    url("./../fonts/Gotham-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: Gotham;
  color: #111f51;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

#backtotop {
  position: fixed;
  bottom: 1.5em;
  right: 1.5em;
  z-index: 10001;
  background: transparent url("./../images/backtotop.svg") center center
    no-repeat;
  width: 50px;
  height: 70px;
  border: 0;
  opacity: 0;
  transition: 0.4s;
}
#backtotop.active {
  opacity: 1;
}

/* HEADER / FOOTER */

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}
footer {
  position: relative;
}
header,
footer {
  background-color: #fff;
  text-align: center;
  font-weight: bold;
}
header * {
  transition: 0.4s;
}

header .container-logo,
footer .container-logo {
  position: relative;
  height: 80px;
}
header .logo,
footer .logo {
  height: 90px;
}
header .logo {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translate(-50%, 0px);
  height: 90px;
}
header.compress {
  background-color: rgba(255, 255, 255, 0.9);
}
header.compress .container-logo {
  height: 70px;
}
header.compress .logo {
  top: 5px;
  height: 60px;
}
footer .socials a {
  font-size: 2em;
  color: #111f51;
}
footer .socials a:hover {
  color: #ffc647;
}
/* HEADER */

header {
  background-color: #fff;
  text-align: center;
  font-weight: bold;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}
header * {
  transition: 0.4s;
}

header .container-logo {
  position: relative;
  height: 80px;
}

/* SECTION COMMON */

section {
  padding: 4em 0 4em 0;
}

section .section-title {
  text-align: center;
  padding-bottom: 2em;
}

section .section-title .subtitle {
  font-size: 1.125rem;
}

section hr {
  display: inline-block;
  width: 55%;
  height: 10px;
  background-color: #ffc647;
  align-items: center;
  border: 0;
  opacity: initial;
  margin: 3em 0;
}

section.color {
  background-color: #ffc647;
}

/* SECTION INTRO */

section.intro {
  padding: 10em 0 4em 0;
}

section.intro h1 {
  font-size: calc(2rem + 1.2vw);
}

section.intro .text {
  font-size: 1.125rem;
}

/* SECTION VIDEO */

section.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* SECTION PRODUITS */

section.nos-produits .carousel-products > div {
  text-align: center;
}

section.nos-produits .carousel-products > div img {
  max-width: 90%;
}

@media (min-width: 576px) {
  section.nos-produits .carousel-products > div img {
    max-height: 300px;
  }
}

section.nos-produits .carousel-products > div div.title {
  margin-top: 1em;
  font-size: 1.3em;
  font-weight: normal;
}

section.nos-produits .carousel-products > div div.title > p {
  font-size: 0.75em;
}

/* Cookie inline banner */
.cn-cookie-activate {
  display: flex;
  flex-direction: column;
  font-size: calc(0.9rem + 0.1vw) !important;
  background-color: #fff;
  padding: 0.6rem 1rem;
  margin: 1rem auto;
  border-radius: 1rem;
  border: 2px solid #111f51;
  justify-content: center;
  align-items: center;
}

@media (min-width: 481px) {
  .cn-cookie-activate {
    max-width: 90%;
    font-size: calc(0.9rem + 0.1vw) !important;
  }
}

@media (min-width: 791px) {
  .cn-cookie-activate {
    flex-direction: row;
    max-width: 80%;
  }
}

@media (min-width: 1025px) {
  .cn-cookie-activate {
    max-width: 60%;
  }
}

.cn-cookie-activate span {
  font-weight: bold;
}

.cn-cookie-activate .btn {
  color: #ffc647;
  background-color: #111f51;
  border-radius: 1rem;
  border: 2px solid transparent;
  padding: 0.8rem 0.6rem;
  margin: 1rem auto !important;
  text-decoration: none;
  min-width: auto;
  margin-left: 1rem;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out,
    border 0.2s ease-in-out;
}

.cn-cookie-activate .btn:hover {
  color: #111f51;
  background-color: #ffc647;
}

@media (min-width: 791px) {
  .cn-cookie-activate .btn {
    margin: 0 0 0 auto !important;
  }
}