body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
/* Espacement généreux pour les ordinateurs */
    padding: 100px 0;
}

.feature-icon {
    font-size: 2.5rem;
    color: #a881e6;
    margin-bottom: 1rem;
    transition: transform 0.3s;
}

.store-badge {
    max-width: 200px;
    height: auto;
    transition: transform 0.2s ease-in-out;
}

.store-badge:hover {
    transform: scale(1.05);
}

.brand-color {
    color: #a881e6 !important;
}

.custom-card {
    background-color: #212529;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar-logo {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

/* Augmente la zone cliquable des liens du menu */
.navbar-nav .nav-link {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/* ==================================================
MEDIA QUERIES (Pour Smartphones et Tablettes)
S'active uniquement si l'écran fait moins de 768px
================================================== */
@media (max-width: 768px) {
/* On réduit le gros espacement de la bannière sur mobile */
    .hero-section {
        padding: 60px 0;
    }

/* On réduit légèrement la taille du grand titre pour éviter qu'il prenne tout l'écran */
    .hero-section h1 {
        font-size: 2.2rem;
    }

/* On centre les liens du footer sur mobile pour que ce soit plus joli */
    footer .text-md-end {
        text-align: center !important;
        margin-top: 10px;
    }

/* On espace les liens RGPD/CGU pour qu'ils soient faciles à cliquer avec le doigt */
    footer a {
        display: inline-block;
        margin: 5px 10px;
    }
}