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

body,
html {
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
}

body::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 2px, transparent 2px);
    background-size: 50px 50px;
    animation: floatBubbles 20s linear infinite;
    z-index: -1;
    pointer-events: none;
}

header h1 {
    font-family: 'Pacifico', cursive;
    font-size: 2.8rem;
    color: rgb(0, 119, 182);
    margin-bottom: 0.3rem;
}

@keyframes floatBubbles {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100px 100px;
    }
}

@media (max-width: 700px) {
    .card {
        max-width: 100%;
        height: auto;
        overflow: visible;
        /* ← allow content to show */
    }

    .forfait-card,
    .contact-card {
        overflow-y: visible;
        /* ← same */
    }

    .card-front {
        position: relative;
        height: auto;
        overflow-y: visible;
    }

    .card-back {
        position: absolute;
        height: auto;
        overflow-y: visible;
        inset: 0;
    }

    .forfait-card.flipped .card-front {
        display: none;
        pointer-events: none;
    }

    .forfait-card.flipped .card-back {
        position: relative;
        display: block;
        opacity: 1;
        transform: none;
        pointer-events: all;
        inset: unset;
    }

    .group-of-2 {
        flex-direction: column;
        /* stack them vertically */
        gap: 0.8rem;
    }

    .group-of-2 label {
        flex: unset;
        width: 100%;
    }

    .group-of-2 input {
        width: 90%;
        font-size: 1rem;
        /* reduce from 1.1rem */
    }

    /* reset the first group-of-2 special sizing too */
    .group-of-2:first-of-type label:first-child,
    .group-of-2:first-of-type label:last-child {
        flex: unset;
        width: 100%;
    }
}

@media (max-width: 525px) {
    .forfait li {
        padding-left: 1.2em;
    }

    .forfait li::before {
        left: 0;
    }
}