* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
}


body {
    min-height: 100vh;

    font-family: Arial, Helvetica, sans-serif;
    color: white;

    /* Scroll vertical autorisé */
    overflow-x: hidden;
    overflow-y: auto;

    background:
        linear-gradient(
            rgba(20, 17, 65, 0.88),
            rgba(30, 27, 80, 0.94)
        ),
        url("images/background.jpg");

    background-size: cover;
    background-position: center top;


}

bodys {
    min-height: 100vh;

    font-family: Arial, Helvetica, sans-serif;

    color: white;

    overflow-x: hidden;
    overflow-y: auto;
        background:
        linear-gradient(
            rgba(20, 17, 65, 0.88),
            rgba(30, 27, 80, 0.94)
        ),
        url("images/background.jpg");

    background-size: cover;

    /*
        Le déplacement du background
        se fait très lentement.
    */
    background-position: center top;

    animation: backgroundMove 100s linear infinite alternate;
}


    .main-button{
display:inline-block;
margin-top:20px;
background:#00D95C;
padding:22px 60px;
border-radius:50px;
color:#ffff;
font-weight:700;
font-size:24px;
text-decoration:none;
border:2px solid #fff;

transition:.3s;

animation:buttonClick 2s ease-in-out infinite;
}



.ritp span{
color:#27D3F5;
}


/* =========================
   BACKGROUND
========================= */

@keyframes backgroundMove {

    0% {
        background-position: center top;
    }

    100% {
        background-position: center bottom;
    }

}


/* =========================
   PAGE
========================= */

#page {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}



/* =========================
   HEADER
========================= */

.header {

    width: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 25px;

    padding: 20px 15px;

    text-align: center;
}

.logo {

    width: 65px;
    height: 65px;

    object-fit: contain;

}

.header h1 {

    font-size: clamp(24px, 5vw, 48px);

    font-weight: 900;

    letter-spacing: 1px;

}


/* =========================
   HERO
========================= */

.hero {

    width: min(900px, 94%);

    margin: auto;

    text-align: center;

    padding: 40px 10px 30px;
}


.hero h2 {

    font-size: clamp(24px, 5vw, 42px);

    line-height: 1.25;

    font-weight: 800;

    margin-bottom: 30px;

}


/* =========================
   PLATFORMS
========================= */

.platforms {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 35px;

}

.platform {

    padding: 13px 35px;

    border-radius: 50px;

    border: 2px solid;

    font-size: 20px;

    font-weight: 800;

    background: rgba(15, 15, 50, .45);

    backdrop-filter: blur(8px);

}

.blue {
    border-color: #2196ff;
    color: #2196ff;
}

.orange {
    border-color: #ff9d00;
    color: #ff9d00;
}


/* =========================
   PROMO BOX
========================= */

.promo-box {

    width: min(500px, 90%);

    margin: 20px auto 35px;

    padding: 20px;

    border-radius: 60px;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.18);

    box-shadow:
        0 10px 40px rgba(0,0,0,.25);

    font-size: 22px;

}

.promo-box strong {

    color: #ffd83d;
    box-shadow:0 0 30px #0087A1;

    font-size: 28px;

}

.circle {

    display: inline-block;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: #32d85b;

    vertical-align: middle;

    margin-right: 8px;

}

.whatsapp-container{
    position:relative;
    display:inline-block;
}




.cursor{
    position:absolute;
    left:50%;
    bottom:-60px;
    transform:translateX(-50%);
    font-size:34px;
    z-index:3;
    animation:cursorClick 2s ease-in-out infinite;
}


/* =========================
   DESCRIPTION
========================= */

.description {

    max-width: 750px;

    margin: auto;

}

.description p {

    font-size: clamp(20px, 4vw, 30px);

    font-weight: 700;

    line-height: 1.5;

}

.arrow {

    font-size: 20px;

    margin: 10px;

}


/* =========================
   MAIN BUTTON
========================= */

.main-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    width: min(700px, 90%);

    min-height: 130px;

    margin: 20px auto;

    padding: 20px 35px;

    border-radius: 100px;

    background: #20d663;

    color: white;

    text-decoration: none;

    font-size: clamp(24px, 4vw, 34px);

    font-weight: 900;

    box-shadow:

        0 0 0 20px rgba(32,214,99,.15),

        0 15px 40px rgba(0,0,0,.3);

    transition: transform .25s ease;

}

.main-button:hover {

    transform: scale(1.03);

}


/* =========================
   SEPARATOR
========================= */

.separator {

    height: 2px;

    width: 100%;

    background: rgba(255,255,255,.12);

    margin: 25px 0 70px;

}


/* =========================
   TICKETS
========================= */

.tickets-section {

    width: 100%;

    padding-bottom: 100px;

    overflow: hidden;

}

.tickets-section h2 {

    text-align: center;

    font-size: clamp(36px, 7vw, 70px);

    font-weight: 900;

}

.tickets-section h3 {

    text-align: center;

    font-size: clamp(40px, 8vw, 75px);

    color: #00f56a;

    text-shadow:

        0 0 10px rgba(0,255,100,.5),

        0 0 30px rgba(0,255,100,.25);

    margin-bottom: 70px;

}


/* =========================
   CARROUSEL
========================= */

.tickets-wrapper {

    width: 100%;

    overflow: hidden;

    margin: 35px 0;

}


/*
    Important :
    La piste fait beaucoup plus que
    la largeur de l'écran.
*/

.tickets-track {

    display: flex;

    width: max-content;

    gap: 28px;

}


/* =========================
   TICKET
========================= */

.ticket {

    width: clamp(280px, 42vw, 480px);

    flex-shrink: 0;

    padding: 8px;

    border-radius: 35px;

    overflow: hidden;

    background: rgba(0,0,0,.25);

    box-shadow:

        0 10px 40px rgba(0,0,0,.35);

}

.ticket img {

    width: 100%;

    display: block;

    border-radius: 25px;

}


/* =========================
   ANIMATION DROITE
========================= */

.track-right {

    animation:
        moveRight 35s linear infinite;

}


/* =========================
   ANIMATION GAUCHE
========================= */

.track-left {

    animation:
        moveLeft 35s linear infinite;

}


/*
    Déplacement ligne supérieure
*/

@keyframes moveRight {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }

}


/*
    Déplacement ligne inférieure
*/

@keyframes moveLeft {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .header {

        gap: 10px;

        padding-top: 15px;

    }

    .logo {

        width: 50px;
        height: 50px;

    }

    .platform {

        padding: 10px 25px;

        font-size: 17px;

    }

    .promo-box {

        font-size: 18px;

    }

    .promo-box strong {

        font-size: 23px;

    }

    .main-button {

        min-height: 105px;

    }

    .ticket {

        width: 310px;

    }

}

@keyframes buttonPulse{

    /* État normal */
    0%,55%,100%{
        background:#27D3F5;
        color:#111;
        box-shadow:0 0 30px #27D3F5;
        transform:scale(1);
    }

    /* Le curseur arrive */
    70%{
        background:#00ff66;
        box-shadow:
            0 0 15px #00ff66,
            0 0 35px #00ff66,
            0 0 60px #00ff66;
        transform:scale(1.05);
    }

    /* Petit effet de clic */
    80%{
        background:#0dff7a;
        transform:scale(.97);
    }

    /* Retour */
    90%{
        transform:scale(1.03);
    }
}



@keyframes cursorClick{

    0%{
        opacity:0;
        transform:translate(-50%,70px) scale(.8);
    }

    30%{
        opacity:1;
        transform:translate(-50%,-35px) scale(1);
    }

    /* Arrive sur le bouton */
    55%{
        transform:translate(-50%,-60px) scale(1);
    }

    /* Petit clic */
    60%{
        transform:translate(-50%,-52px) scale(.82);
    }

    /* Remonte légèrement */
    66%{
        transform:translate(-50%,-60px) scale(1);
    }

    85%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translate(-50%,70px) scale(.8);
    }

}



@keyframes buttonClick{

    /* État normal */
    0%,54%,100%{
        transform:scale(1);
        background:#00D95C;
        box-shadow:0 0 30px #20d663;
    }

    /* Le curseur touche le bouton */
    60%{
        transform:scale(.96);
        background:#20d663;
        box-shadow:
            0 0 15px #20d663,
            0 0 40px #20d663,
            0 0 80px #00D95C;
    }

    /* Rebond */
    68%{
        transform:scale(1.05);
    }

    76%{
        transform:scale(1);
    }

}