/* COULEURS */
:root {
    --color-primary: #9641D7;
    --color-secondary: radial-gradient(1000px 500px at 10% 20%, #AB53CC 0%, #4B3691 50%, #000752 100%), #000752;
}

/* Base (desktop) */
header#header {
    background-color: var(--color-primary);
    padding: 40px;
}

header#header #hero-banner {
    background: var(--color-secondary);
    padding: 80px 40px;
}

/* Listes */
#page ul {
    list-style: disc inside;
}

/* ===================== */
/* 📱 Tablette */
@media (max-width: 1024px) {
    header#header {
        padding: 30px;
    }

    header#header #hero-banner {
        padding: 60px 30px;
        background: radial-gradient(600px 300px at 20% 30%, #AB53CC 0%, #4B3691 60%, #000752 100%);
    }
}

/* ===================== */
/* 📱 Mobile */
@media (max-width: 768px) {
    header#header {
        padding: 20px;
    }

    header#header #hero-banner {
        padding: 40px 20px;

        /* Gradient plus léger pour mobile */
        background: radial-gradient(400px 200px at 50% 30%, #AB53CC 0%, #4B3691 70%, #000752 100%);
    }

    #page ul {
        font-size: 14px;
    }
}