@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300;500&display=swap');

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

body, html {
    font-family: 'Palatino', serif;
    scroll-behavior: smooth;
}

section {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    text-align: center;
}

/* -------- BACKGROUNDS -------- */
.page1 {
    background-image: url('media/page1_background.jpeg');
    color: #b07b7b;
}

.page2 {
    background-image: url('media/page2_background.jpeg');
    color: #7b97b0;
}

/* -------- CONTENU -------- */
.content-box {
    background: rgba(255, 255, 255, 0.7);
    padding: 30px 15px;
    width: 100%;
}

/* -------- TYPO -------- */
.main_title {
    font-size: 48px;
    font-weight: 500;
}

.main_subtitle {
    font-size: 28px;
    font-family: 'Great Vibes', cursive;
    margin-bottom: 20px;
}

p {
    font-size: 18px;
    margin-bottom: 20px;
}

/* -------- COMPTE À REBOURS -------- */
.countdown-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.countdown-subcontainer {
    display: flex;
    gap: 15px;
}

.countdown-item {
    background: rgba(255, 255, 255, 0.3);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    width: 130px;
}

.countdown-item span {
    font-size: 36px;
    font-weight: 500;
}

.countdown-item small {
    font-size: 14px;
    text-transform: uppercase;
}

/* -------- RESPONSIVE (mobiles ≤ 768px) -------- */
@media (max-width: 768px) {
    .main_title {
        font-size: 32px;
    }

    .main_subtitle {
        font-size: 22px;
    }

    .content-box {
        padding: 30px 15px;
    }

    .countdown-container {
        flex-direction: column;
        gap: 15px;
    }

    .countdown-subcontainer {
        justify-content: center;
    }

    .countdown-item span {
        font-size: 28px;
    }

    .countdown-item small {
        font-size: 12px;
    }
}