.button-home,
.home-container p {
    display: flex;
    animation: 1s ease-out monter
}

.button-home,
.home-container img,
.home-container p,
.play-button {
    animation: 1s ease-out monter
}

* {
    padding: 0;
    margin: 0
}

body {
    background-color: #000;
    scroll-behavior: smooth;
    font-family: "Lilita One", cursive
}

#home-index {
    height: 100vh;
    padding: 24vh 0 0 0 !important;
    color: #fff;
}

#background-video,
.gradient-mask,
.video-wrapper {
    position: absolute;
    left: 0;
    width: 100%
}

.video-wrapper {
    top: 0;
    height: 100%;
    overflow: hidden;
    z-index: -1
}

#background-video {
    top: 0;
    height: 120%;
    object-fit: cover;
    filter: brightness(.9);
    z-index: -1;
    transform: translateY(-10%)
}

.gradient-mask {
    bottom: 0;
    height: 30%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%);
    pointer-events: none
}

.home-container,
.play-button {
    text-align: center;
    position: relative
}

.home-container {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100vw
}

.home-container img {
    width: 60vw;
    max-width: 50%;
    height: auto;
    padding: 1rem;
    margin: 0;
    transition: width .3s;
    display: block;
    transform: translateY(0);
    flex-shrink: 0
}

.logo-e {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateY(8px)
}

.home-container p {
    font-size: 1.7rem;
    justify-content: center
}

.button-home {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 5%;
    position: relative;
    z-index: 10
}

.button-home button {
    padding: 10px 20px
}

:root {
    --glow-primary: rgba(56, 189, 248, 0.7);
    --neon-pink: rgba(236, 72, 153, 0.8);
    --neon-blue: rgba(143, 25, 158, 0.8)
}

.play-button {
    align-items: center;
    appearance: none;
    background: linear-gradient(90deg, #632eb9, #7b2cbf);
    border-radius: 2em;
    border-style: none;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    fill: currentcolor;
    font-size: 2rem;
    font-family: 'Lilita One', 'Exo 2', sans-serif;
    font-weight: 600;
    padding: .7em 2.5em;
    justify-content: center;
    letter-spacing: .05em;
    text-decoration: none;
    text-shadow: 0 2px 8px #7b2cbf, 0 0 4px #38bdf8;
    transition: background .3s, transform .2s, box-shadow .3s;
    user-select: none;
    touch-action: manipulation;
    will-change: transform, opacity;
    box-shadow: 0 0 18px var(--glow-primary), 0 0 8px var(--neon-pink);
    z-index: 2
}

.play-button:focus,
.play-button:hover {
    background: linear-gradient(90deg, #ec4899, #8f199e);
    transform: scale(1.07) translateY(-2px);
    box-shadow: 0 0 32px var(--neon-pink), 0 0 16px var(--neon-blue);
    outline: 0
}

/* Style pour le bouton SHOP sur la home */
.shop-button-home {
    align-items: center;
    appearance: none;
    background: #38bdf8;
    border-radius: 2em;
    border-style: none;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    fill: currentcolor;
    font-size: 2rem;
    font-family: 'Lilita One', 'Exo 2', sans-serif;
    font-weight: 600;
    padding: 0.32em 1.3em;
    justify-content: center;
    letter-spacing: .05em;
    text-decoration: none;
    text-shadow: 0 2px 8px #7b2cbf, 0 0 4px #38bdf8;
    transition: background .3s, transform .2s, box-shadow .3s, opacity 1s, transform 1s;
    user-select: none;
    touch-action: manipulation;
    will-change: transform, opacity;
    box-shadow: 0 0 18px #38bdf8cc, 0 0 8px #7b2cbfcc;
    z-index: 2;
    margin-left: 0 !important;
    min-height: 0;
    height: auto;
    opacity: 0;
    transform: translateY(50px);
    animation: monter 1s ease-out forwards;
    animation-delay: 0.2s
}

.shop-button-home:focus,
.shop-button-home:hover {
    background: #2563eb;
    color: #fff;
    transform: scale(1.07) translateY(-2px);
    box-shadow: 0 0 32px #38bdf8, 0 0 16px #7b2cbf;
    outline: 0
}

.shop-button-home img {
    height: 2.1em;
    width: auto;
    display: block;
    margin: 0 auto
}

.button-home .play-button img {
    height: 3em;
    width: auto;
    display: block;
    margin: 0 auto
}

@keyframes monter {
    from {
        opacity: 0;
        transform: translateY(50px)
    }

    to {
        opacity: 1;
        transform: translateY(-180px)
    }
}

@keyframes monter-vip {
    from {
        opacity: 0;
        transform: translateY(50px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fade-in-vip {
    opacity: 0;
    transform: translateY(50px);
    animation: monter-vip 1s ease-out forwards;
    animation-delay: 0.4s
}

.vip-btn-home-wrapper {
    z-index: 10;
    position: relative;
}

.vip-btn-shop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #fff;
    color: #f59e42;
    font-size: 2.1rem;
    font-family: 'Lilita One', Arial, sans-serif;
    font-weight: bold;
    border: 3px solid #facc15;
    border-radius: 18px;
    box-shadow: 0 4px 24px #facc1533, 0 0 8px #fbbf2433;
    padding: 22px 48px;
    margin: 32px auto 18px auto;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.4, 1.3, .6, 1), box-shadow .2s, background .2s;
    text-shadow: 0 2px 8px #fff8, 0 0 6px #facc15cc;
    letter-spacing: 2px;
    max-width: 520px
}

.vip-btn-shop:hover {
    transform: scale(1.04) rotate(-1deg) !important;
    box-shadow: 0 8px 32px #facc15cc, 0 0 16px #fbbf24cc !important;
    background: #f9fafb !important;
    z-index: 20
}

.vip-crown {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 0 8px #f59e42) drop-shadow(0 0 2px #fff);
    margin-right: 8px
}

.vip-btn-desc {
    display: block;
    font-size: 1.1rem;
    color: #b45309;
    font-family: Arial, sans-serif;
    font-weight: 500;
    margin-top: 4px;
    text-shadow: none
}

/* Remonter les éléments spécifiques sur mobile */
@media (max-width: 768px) {
    .home-container {
        transform: translateY(-80px) !important;
    }
    
    .button-home {
        transform: translateY(-80px) !important;
    }
    
    .become-vip-btn-wrapper {
        transform: translateY(-80px) !important;
    }
}