@font-face {
    font-family: 'Google Sans';
    src: url('/assets/fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    /* Plage de poids pour les polices variables */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    background: #131313;
    padding: 0px;
    margin: 0px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    color: #fff;
    font-family: 'Inter';
}

header.navbar {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: fit-content;
    background: linear-gradient(90deg, #13131388, #c8911699, #13131388);
    backdrop-filter: blur(4px);
    min-height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* vertical centering */
    align-items: center;
    /* horizontal centering */
    text-align: center;
    /* centers text */
    color: #ffde59;
    font-family: 'Google Sans';
    padding: 10px;
    font-size: 20px;
}

header.navbar a {
    text-decoration: none;
    color: #ffde59;
}

header.navbar img {
    max-height: 32px;
}

header.hero {
    height: calc(95vh - 50px);
    min-height: 400px;
    max-height: 1400px;
    background: linear-gradient(180deg, #c89116, #131313);

    display: flex;
    flex-direction: column;
    justify-content: center;
    /* vertical centering */
    align-items: center;
    /* horizontal centering */
    text-align: center;
    /* centers text */
}

header.hero h1 {
    font-family: 'Google Sans';
    color: #ffde59;
    font-size: 60px;
}

header.hero p {
    font-family: 'Inter';
}

.box {
    background: #262626;
    border: 1px solid #666666;
    border-radius: 24px;
    padding: 20px;
    margin: 40px 30px;
    box-shadow: #c89116 0px 0px 5px 1px;
}

.box h2 {
    font-family: 'Google Sans';
    color: #fff;
    margin-bottom: 5px;
    text-shadow: #c89116 0px 0px 3px;
    color: #ffde59;
}

.box img {
    border-radius: 24px;
    margin: 5px 0px;
    width: 100%;
    height: auto;
    border: 1px solid #666666;
}

.horizontal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* vertical centering */
    align-items: center;
    /* horizontal centering */
    text-align: center;
    /* centers text */
}

.price {
    font-size: 40px;
    font-family: 'Montserrat';
    font-weight: bold;
    margin: 5px 10px;
}

button,
.install {
    border-radius: 16px;
    min-height: 32px;
    height: auto;
    width: fit-content;
    padding: 5px 10px;
    font-family: 'Google Sans';
    background: #ffde59;
    color: #262626;
    box-shadow: #ffde59 0px 0px 3px 1px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin: 1px 5px;
    transition: all 0.3s ease;
    border: 1px solid #7777;
}
button:hover {
    background: #ffee69;
    /*animation: btn-hover 0.1s ease;*/
}
button:active {
    background: #c89116;
    /*animation: btn-active 0.1s ease;*/
}
@keyframes btn-hover {
    0% { background: #ffde59; }
    25% { background: linear-gradient(90deg, #ffee69, #ffde59, #ffde59, #ffde59); }
    50% { background: linear-gradient(90deg, #ffee69, #ffee69, #ffde59, #ffde59); }
    75% { background: linear-gradient(90deg, #ffee69, #ffee69, #ffee69, #ffde59); }
    100% { background: #ffee69; }
}
@keyframes btn-active {
    0% { background: #ffde59; }
    25% { background: linear-gradient(90deg, #c89116, #fffe69, #fffe69, #ffee69); }
    50% { background: linear-gradient(90deg, #c89116, #c89116, #ffde59, #ffde59); }
    75% { background: linear-gradient(90deg, #c89116, #c89116, #c89116, #ffde59); }
    100% { background: #c89116; }
}

button.btn-3d {
    position: absolute;
   border-radius: 6px 20px 6px 6px;
   border: 1px solid #7777;
   background: #11111188;
   color: #ffffff;
   backdrop-filter: blur(4px);
   box-shadow: none;
   translate: calc(100vw - 150px) 10px;
   transition: all 0.3s ease;
}
button.btn-3d:hover {
    background: #55555588;
    animation: btn-3dhover 0.1s ease;
}
@keyframes btn-3dhover {
    0% { background: #11111188; }
    25% { background: linear-gradient(90deg, #55555588, #11111188, #11111188, #11111188); }
    50% { background: linear-gradient(90deg, #55555588, #55555588, #11111188, #11111188); }
    75% { background: linear-gradient(90deg, #55555588, #55555588, #55555588, #11111188); }
    100% { background: #55555588; }
}

.steps {
    display: flex;
    transition: transform 0.3s ease;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.steps-wrapper {
    width: 100%;
    overflow: hidden;
    margin-top: calc(105vh + 50px);
    margin-bottom: calc(30vh - 50px);
}

.steps section {
    flex: 0 0 100%;
}