/* Page de destination de l'application iOS (/application, 06/10/2026) - mobile-first, testée de
   320px à 1440px. Réutilise les jetons de couleur/rayon d'animac-2026.css (--animac-vert,
   --animac-orange, --animac-radius-*) plutôt que d'en redéfinir. */

.app-ios-page {
    max-width: 860px;
    padding: 32px 16px 64px;
}

.app-hero {
    text-align: center;
    padding: 24px 0 32px;
}

    .app-hero h1 {
        font-size: 1.9rem;
        font-weight: 800;
        color: var(--animac-texte, #1F2A24);
        margin-bottom: 10px;
    }

.app-accroche {
    font-size: 1.1rem;
    color: var(--animac-texte-secondaire, #4E5A53);
    margin-bottom: 22px;
}

.app-bouton-telecharger {
    display: inline-block;
    min-height: 44px;
}

    .app-bouton-telecharger img {
        height: 44px;
        width: auto;
        display: block;
    }

/* Captures : défilement horizontal sur mobile (scroll-snap, pas de JS requis pour le défilement
   lui-même - application-ios.js ne fait que le tracking Matomo), grille statique à partir de
   768px. */
.app-captures {
    margin: 36px 0;
}

.app-captures-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

    .app-captures-scroll figure {
        flex: 0 0 auto;
        scroll-snap-align: start;
        width: 230px;
        margin: 0;
        text-align: center;
    }

    .app-captures-scroll img {
        width: 100%;
        height: auto;
        border-radius: var(--animac-radius-md, 16px);
        box-shadow: 0 10px 26px -14px rgba(20, 30, 20, 0.25);
    }

    .app-captures-scroll figcaption {
        margin-top: 10px;
        font-size: 0.85rem;
        color: var(--animac-texte-secondaire, #4E5A53);
    }

@media (min-width: 768px) {
    .app-captures-scroll {
        overflow-x: visible;
        justify-content: center;
    }

        .app-captures-scroll figure {
            width: 260px;
        }
}

.app-fonctionnalites, .app-difference, .app-faq {
    margin: 40px 0;
}

    .app-fonctionnalites h2, .app-difference h2, .app-faq h2 {
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--animac-texte, #1F2A24);
        margin-bottom: 16px;
    }

    .app-fonctionnalites ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .app-fonctionnalites li {
            position: relative;
            padding-left: 28px;
            color: var(--animac-texte, #1F2A24);
        }

            .app-fonctionnalites li::before {
                content: "\f00c";
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                color: var(--animac-vert, #2F7A4F);
                position: absolute;
                left: 0;
                top: 2px;
            }

.app-difference-item {
    margin-bottom: 20px;
}

    .app-difference-item h3 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--animac-vert-fonce, #1F5A38);
        margin-bottom: 6px;
    }

    .app-difference-item p {
        color: var(--animac-texte-secondaire, #4E5A53);
        margin: 0;
    }

.app-faq-item {
    border-bottom: 1px solid var(--animac-separateur, #EFEAE1);
    padding: 14px 0;
}

    .app-faq-item h3 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--animac-texte, #1F2A24);
        margin-bottom: 6px;
    }

    .app-faq-item p {
        color: var(--animac-texte-secondaire, #4E5A53);
        margin: 0;
    }

.app-footer-cta {
    text-align: center;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--animac-separateur, #EFEAE1);
}

.app-liens-internes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 22px;
}

    .app-liens-internes a {
        color: var(--animac-vert-fonce, #1F5A38);
        font-size: 0.9rem;
        text-decoration: underline;
    }