/*VARIABLES SCSS*/
/*TAILLES DE BREAKPOINTS RESPONSIVE*/
/*TABLEAU DES TAILLES DE BREAKPOINTS RESPONSIVE*/
/*MARGINS DE BASE*/
/*PADDINGS DE BASE*/
/*TABLEAU DES TAILLES DE MARGES VERTICALES*/
/*TABLEAU DES TAILLES DE MARGES HORIZONTALES*/
/*TABLEAU DES TAILLES DE PADDINGS VERTICALES*/
/*TABLEAU DES TAILLES DE PADDINGS HORIZONTALES*/
/*GAPS*/
:root {
  --h-font: "Hanken Grotesk", sans-serif;
  --font: "Hanken Grotesk", sans-serif;
  --white:#fff;
  --primary:#222545;
  --primary-alt:#1a1c36;
  --secondary:#65BF90;
  --ternary:#EEE785;
  --ternary-hover:#cdc65a;
  --quaternary:#8d8fa2;
  --grey:#A8A8A8;
  --light-grey:#F8F8F8;
  --ui-grey:#d9d9d9;
  --error:#f58e8e;
  --warning:#ff9c62;
  --shadow-white:#cccbca;
  --gradient-secondary:linear-gradient(70deg, var(--secondary) 50%, #5ebe8cab 64%, transparent);
  --gradient-ternary:linear-gradient(70deg, #C6BC24 30%, #d3cc6ef7 60%, #9f9c69b5 80%, transparent);
  --solid-gradient-secondary:linear-gradient(70deg, var(--primary) 30%, var(--secondary) 87%);
  --solid-gradient-ternary:linear-gradient(70deg, var(--primary) 30%, #d3cc6e 87%);
  --brand-gradient:linear-gradient(0, #3dd786 50%, transparent);
  --dark-gradient:linear-gradient(360deg, rgba(0, 0, 0, 0.84) 0%, rgba(46, 46, 46, 0.55) 35%, rgba(46, 46, 46, 0.27) 60%, rgba(255, 255, 255, 0) 100%);
  --header-gradient-overlay:linear-gradient(90deg, #1f1f1f 0%, rgba(45, 45, 45, 0.9) 27%, rgba(56, 56, 56, 0.73) 53%, rgba(255, 255, 255, 0) 100%);
  --card-gradient-overlay:linear-gradient(0deg, #585858 10%, rgba(62, 62, 62, 0.7721682423) 27%, rgba(93, 93, 93, 0.55) 53%, rgba(255, 255, 255, 0) 100%);
  --vpd: 40px;
  --hpd: 15px;
  --navtop: 70px;
  --navtop-scroll: 40px;
  --rounded05: 3px;
  --rounded: 9px;
  --rounded2: 16px;
  --rounded3: clamp(35px, 2.5vw, 45px);
  --round: 1000px;
  --shadow-dark: 0px 15px 30px #00000040;
  --shadow-light: 0px 10px 45px #aaacb07a;
  --shadow-extralight: 5px 6px 30px #6172991a;
  --gap: max(6px, 0.75vw);
  --carousel-nav-btn: 65px;
  --inner-cont: calc(100% - var(--hpd) *2);
  --container-sm: 650px;
  --container-middle: 1100px;
  --container-md: max(calc(50vw - var(--hpd)), 650px);
  --container-lg: 1300px;
  --container-xl: 1600px;
  --ease:cubic-bezier(0.25, 0.1, 0.25, 1);
}
.h-font {
  font-family: "quiche-flare", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.container-sm {
  max-width: 650px;
}
.container-md {
  max-width: var(--container-md);
}
.container-lg {
  max-width: var(--container-lg);
}
.container-xl {
  max-width: var(--container-xl);
}
@media screen and (min-width: 992px) {
  :root {
    --vpd: 50px;
    --hpd: 25px;
    --rounded: 7px;
    --rounded2: 25px;
  }
  .c-fluid {
    max-width: 1750px;
    margin-right: auto;
    margin-left: auto;
  }
  .c-fluid-2 {
    max-width: 1500px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 1200px) {
  :root {
    --vpd: max(9vh, 90px);
    --hpd: 5vw;
  }
}
@media screen and (min-width: 1700px) {
  :root {
    --vpd: 100px;
    --hpd: 5vw;
  }
  :root {
    --container: 1280px !important;
  }
}