/* ==========================================================================
   Styles pour les pages publiques de PeyeCash
   ========================================================================== */

/* Section Héros */
.hero {
    text-align: center;
    padding: 4rem 0;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero .lead {
    font-size: 1.2rem;
    color: var(--pico-h2-color);
    max-width: 70ch;
    margin: 0 auto 2rem auto;
}

.hero a[role="button"] {
    margin: 0.5rem;
}

/* Sections générales */
.section {
    padding: 3rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    margin-bottom: 0.5rem;
}

/* Icônes de fonctionnalités */
.icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* ==========================================================================
   Mobile Responsiveness
   ========================================================================== */
@media (max-width: 768px) {
    /* Priorité 3: Réduire les marges verticales */
    .hero {
        padding: 2rem 0;
    }
    .section {
        padding: 2rem 0;
    }

    /* Priorité 2: Réduire la taille du titre principal */
    .hero h1 {
        font-size: 1.8rem; /* Taille de police considérablement réduite */
        line-height: 1.3; /* Améliore la lisibilité des lignes */
    }
    .hero .lead {
        font-size: 1rem;
    }

    /* Priorité 3: Empiler les boutons CTA et améliorer le style */
    .hero a[role="button"] {
        display: block; /* Empile les boutons */
        width: 100%;
        margin-bottom: 0.75rem;
    }
    .hero a[role="button"].secondary {
        /* Assure que le bouton secondaire est visible */
        --pico-primary-background: transparent;
        --pico-primary-border: var(--pico-primary);
        --pico-primary-color: var(--pico-primary);
    }

    /* Ajustement de la navigation */
    /* Priorité 1: Cacher les liens de navigation */
    header nav .nav-links {
        display: none; /* Cacher les liens par défaut */
        flex-direction: column;
        align-items: flex-start; /* Aligner les liens à gauche */
        width: 100%;
        background-color: var(--pico-card-background-color);
        position: absolute;
        top: 60px; /* Hauteur de la barre de nav */
        left: 0;
        padding: 0.5rem 1rem 1rem 1rem;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    header nav .nav-links li {
        width: 100%;
    }

    header nav .nav-links li a {
        padding: 0.5rem 0;
        display: block;
    }

    header nav .nav-links.active {
        display: flex; /* Afficher quand le menu est ouvert */
    }

    /* Priorité 1: Afficher le bouton hamburger */
    header nav .mobile-menu-button {
        display: block; /* Afficher le bouton hamburger */
        margin-left: auto; /* Pousse le bouton à droite */
    }

    /* Cacher le bouton hamburger sur grand écran */
    @media (min-width: 769px) {
        header nav .mobile-menu-button {
            display: none;
        }
    }
}