/* ==================================== General ====================================*/
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-underline-offset: 0.4rem;
}

h1,
h2,
h3,
h4,
a,
button,
input {
    font-size: unset;
    font-weight: unset;
}

body {
    font-size: 100%;
}

a {
    color: black;
    text-decoration: none;
}

img {
    width: 100%;
}

ul {
    list-style: none;
    gap: 3px;
}

li {
    margin-bottom: 16px;
    break-inside: avoid;
}

*:focus {
    outline: none;
}

/* ==================================== Height/Width ====================================*/
.max-w-def {
    width: 100%;
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
}

.w-100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.w-auto {
    width: auto;
}

.h-100 {
    height: 100%;
}

.h-50 {
    height: 50%;
}

.h-auto {
    height: auto;
}


/* ==================================== Padding/Margin ====================================*/
.px-7vw {
    padding-left: 8vw;
    padding-right: 8vw;
}

.py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.pt-30 {
    padding-top: 30px;
}

.pb-30 {
    padding-bottom: 30px;
}

/* ==================================== Object Fit ====================================*/
.fit-contain {
    object-fit: contain;
}

.fit-cover {
    object-fit: cover;
}

/* ==================================== Flex ====================================*/

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-justify-start {
    justify-content: start;
}

.flex-justify-center {
    justify-content: center;
}

.flex-justify-end {
    justify-content: end;
}

.flex-justify-between {
    justify-content: space-between;
}

.flex-justify-around {
    justify-content: space-around;
}

.flex-align-center {
    align-items: center;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-30-20 {
    gap: 30px 20px;
}

/* ==================================== Font ====================================*/

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

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

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

.text-nowrap {
    text-wrap: nowrap;
}

.font-primary-title {
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 900;
    font-size: 3rem;
}

.font-primary-subtitle {
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    font-size: 2.3rem;
}

.font-primary-other {
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
}

.font-secondary-title {
    font-family: "Inter";
    font-size: 1.6rem;
    font-weight: 600;

}

.font-secondary-text {
    font-family: "Inter";
    font-size: 1.3rem;
    font-weight: 350;
}

.font-secondary-subtext {
    font-family: "Inter";
    font-size: 0.9rem;
    font-weight: 350;
}

b {
    font-weight: 500;
}

.font-black {
    font-weight: 900;
}

@media (max-width: 1080px) {
    .font-primary-title {
        font-size: 2.1rem;
    }

    .font-primary-subtitle {
        font-size: 1.8rem;
    }

    .font-primary-other {
        font-size: 1rem;
    }

    .font-secondary-title {
        font-size: 1.4rem;
    }

    .font-secondary-text {
        font-size: 1rem;
    }

    .font-secondary-subtext {
        font-size: 0.8rem;
    }
}

.uppercase {
    text-transform: uppercase;
}

.gray_text {
    color: #767676;
}

.dark_gray_text {
    color: #6d6d6d;
}

.white_text {
    color: #FFFFFF;
}

.light_gray_text {
    color: #c3c3c3;
}

.black_text {
    color: #000000;
}

/* ==================================== Background ==================================== */
.bg-gray {
    background-color: #eaeaea;
}

.bg-black {
    background-color: black;
}

.bg-white {
    background-color: #F8F8F8;
}

/* ==================================== Border ==================================== */
.b-1 {
    border-width: 1px;
}

.b-4 {
    border-width: 4px;
}

.b-gray {
    border-color: #f6f6f6;
    border-style: solid;
}

.b-black {
    border-color: black;
    border-style: solid;
}

/* ==================================== Boutons / Liens ==================================== */
button {
    cursor: pointer;
    border: none;
    background-color: #fff0;
    font-size: 1rem;
}

.button_white {
    background-color: #FFFFFF;
    border: 2px solid #FFFFFF;
    padding: 13px 21px;
    height: fit-content;
    color: black;
    text-decoration: none;
}

.button_transparent_white {
    background-color: transparent;
    border: 2px solid #FFFFFF;
    padding: 13px 21px;
    height: fit-content;
    color: white;
    text-decoration: none;
}
/* Hover */
.button_transparent_white:hover {
    background-color: white;
    border: 2px solid white;
    color: black;
    transition: .3s;
}

.button_transparent_black {
    background-color: transparent;
    border: 2px solid #000000;
    padding: 13px 21px;
    height: fit-content;
    color: black;
    text-decoration: none;
}
/* Hover */
.button_transparent_black:hover {
    background-color: black;
    border: 2px solid black;
    color: white;
    transition: .3s;
}

.button_white_border {
    background-color: #FFFFFF;
    border: 2px solid #000000;
    padding: 13px 21px;
    height: fit-content;
    align-self: center;
    text-decoration: none;
}

.button_black {
    background-color: #000000;
    color: white;
    border: solid 2px #000000;
    padding: 13px 21px;
    height: fit-content;
    text-decoration: none;
}

.button_black_border {
    background-color: #000000;
    color: white;
    border: solid 2px #FFFFFF;
    padding: 13px 21px;
    height: fit-content;
    text-decoration: none;
}

.link_underline {
    text-decoration: underline;
    transition: .2s;
}

.link_nounderline {
    text-decoration: none;
}