/* ------------------ Import fonts ------------------ */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  src: url("./fonts/Archivo/Archivo-VariableFont_wdth\,wght.ttf")
    format("truetype-variations");
  font-weight: 100 900;
}

@font-face {
  font-family: "Archivo";
  font-style: italic;
  src: url("./fonts/Archivo/Archivo-Italic-VariableFont_wdth\,wght.ttf")
    format("truetype-variations");
  font-weight: 100 900;
}

@font-face {
  font-family: "Village Plain";
  font-style: normal;
  src: url("./fonts/Village-FontZillion/Fonts/village\ plain.ttf")
    format("truetype-variations");
}

/* ------------------ Global -------------------- */

.navbar-brand {
  font-family: "Village Plain", "Segoe UI", sans-serif;
  font-size: 1.5rem;
}

@media (min-width: 992px) {
  .navbar-brand {
    font-size: 1.25rem;
  }
}

svg.mvf_svg {
  width: 20px;
  fill: var(--mvf-deep-green);
}

.hero {
  height: calc(100dvh - 199px);
}

@media (min-width: 992px) {
  .hero {
    height: calc(100dvh - 230px);
  }
}

.mvf-color {
  background-color: var(--mvf-deep-green);
}

button a {
  color: unset;
  text-decoration: none;
}

.wysiwyg p {
  margin: 0;
}

/* ------------------ Body -------------------- */

body {
  font-family: "Archivo", "Segoe UI", sans-serif;
}

/* ------------------ Header ------------------ */

header > nav {
  background-color: var(--mvf-deep-green);
  color: #fff;
}

header .navbar {
  padding: 15px 0;
}

header .navbar-nav {
  font-size: 1.25rem;
}

@media (min-width: 992px) {
  header .navbar-nav {
    font-size: 1rem;
  }
}

header .custom-logo-link {
  display: flex;
  width: 80px;
}

header .custom-logo {
  width: 100%;
  height: 100%;
}

header a {
  color: var(--mvf-deep-green);
}

ul#menu-header {
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  row-gap: 1rem;
}

/* ------------------ Home ------------------ */

.hero-home {
  background-image: url("https://wp2.hugohemon.fr/wp-content/uploads/irewolede-PvwdlXqo85k-unsplash.jpg");
  background-position: center;
  background-size: cover;
}

/* ------------------ Carousel ------------------ */

@media (max-height: 991px) {
  .stage h1 {
    font-size: calc(1rem + 1.5vw);
  }
}

.stage,
.ring,
.img {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  user-select: none;
}

.stage {
  overflow: hidden;
  background: #00000062;
}

.ring {
  pointer-events: none;
}

.img {
  pointer-events: auto;
}

.stage .carousel_container,
.stage svg {
  position: absolute;
}

.title_brand {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-stretch: 120%;
  font-weight: 531;
  color: #fff;
  font-size: 3, 625rem;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 0.083em;
  text-align: center;
  font-family: "Village Plain", "Segoe UI", sans-serif;
}

@media (min-width: 992px) {
  .title_brand {
    top: 15%;
  }
}

.carousel_container {
  perspective: 2000px;
  width: 250px; /* en accord avec width de l'.img  */
  height: 400px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.card_container {
  height: 100%;
  width: 100%;
  background-color: #ffffff59;
  padding: 10px;
  border-radius: 0.375rem;
  border: solid 2px #000;
}

.ring a.img {
  display: block;
  width: 250px;
  height: 400px;
  background-size: contain;
  background-position: center;
  background-repeat: repeat-x;
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0.375rem;
}

a.img .card {
  width: 100%;
  height: 100%;
  border: solid 2px #000;
  padding: 20px;
  border-spacing: 5px;
  background-color: #ffffff59;
}

.card img {
  min-height: 110px;
  object-fit: contain;
}

/* ------------------ Indicateur ------------------ */

.drag-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.6em 1em;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  width: 250px;
}

/* ------------------ Template carte ------------------ */

#carte.section-header {
  padding-top: 3rem;
  padding-bottom: 7rem;
}

@media (min-width: 992px) {
  #carte.section-header {
    padding-top: 5rem;
  }
}

#carte .nav-item button:not(.active) {
  color: #fff;
}

/* ------------------ Page carte ------------------ */

@media (min-width: 992px) and (min-height: 1120px) {
  .height-auto-viewport {
    height: calc(100vh - 230px);
    overflow: scroll;
  }
}