/* =========================================================
   FIX MOBILE HERO CARDUP x EVA
   Corrige l'affichage sur téléphone uniquement
========================================================= */

@media (max-width: 900px){

    /* Carte d'accueil mobile plus compacte */
    .hero.card{
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;

        padding: 28px 22px 34px !important;
        gap: 22px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Texte en haut */
    .hero.card > div:first-child{
        width: 100% !important;
        max-width: 100% !important;
        z-index: 2 !important;
    }

    /* Logo CardUp x EVA moins énorme sur mobile */
    .hero-logo-title{
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    .hero-cardup-logo{
        font-size: clamp(52px, 15vw, 78px) !important;
        line-height: 0.9 !important;
    }

    .hero-xeva{
        font-size: clamp(46px, 14vw, 70px) !important;
        line-height: 0.9 !important;
    }

    .hero.card h2{
        font-size: clamp(30px, 8vw, 46px) !important;
        line-height: 1.05 !important;
        margin-bottom: 14px !important;
    }

    .hero.card p{
        font-size: clamp(18px, 5vw, 28px) !important;
        line-height: 1.25 !important;
        margin-bottom: 20px !important;
    }

    .hero.card .actions{
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero.card .actions button{
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 18px !important;
        font-size: 1rem !important;
    }

    /* Image du portable bien placée sous le texte */
    .hero-phone-image{
        position: relative !important;
        right: auto !important;
        top: auto !important;

        display: block !important;
        width: 72% !important;
        max-width: 285px !important;
        max-height: 430px !important;

        transform: none !important;
        margin: 10px auto 0 auto !important;

        object-fit: contain !important;
        object-position: center center !important;
        z-index: 2 !important;
    }

    /* Ancien téléphone HTML toujours caché */
    .hero-phone,
    .phone-shell,
    .phone-screen{
        display: none !important;
        visibility: hidden !important;
    }
}