/* ==========================================================
   MOT-LAMBDA — MOBILE INLINE GUESS INPUT V20
   Desktop inchangé.
   ========================================================== */

@media (
    max-width:
        700px
) {

    /*
    Le label reste dans le DOM pour les lecteurs d'écran,
    mais ne consomme plus une ligne de hauteur sur mobile.
    */
    #guess-form
    > label {
        position:
            absolute;

        width:
            1px;

        height:
            1px;

        padding:
            0;

        margin:
            -1px;

        overflow:
            hidden;

        clip:
            rect(
                0,
                0,
                0,
                0
            );

        white-space:
            nowrap;

        border:
            0;
    }


    .guess-line {
        position:
            relative;

        display:
            block
            !important;

        gap:
            0
            !important;
    }


    .guess-line input {
        display:
            block;

        width:
            100%;

        height:
            46px;

        box-sizing:
            border-box;

        padding:
            10px
            72px
            10px
            12px
            !important;

        border-width:
            2px;

        border-radius:
            5px
            !important;

        /*
        16 px évite le zoom automatique d'iOS quand le champ
        reçoit le focus.
        */
        font-size:
            16px;

        line-height:
            1.15;
    }


    .guess-line button {
        position:
            absolute;

        top:
            4px;

        right:
            4px;

        bottom:
            4px;

        z-index:
            2;

        display:
            inline-flex;

        width:
            60px;

        min-width:
            60px;

        height:
            auto;

        padding:
            0
            10px
            !important;

        border:
            0;

        border-radius:
            4px
            !important;

        align-items:
            center;

        justify-content:
            center;

        font-size:
            12px;

        font-weight:
            850;

        line-height:
            1;

        letter-spacing:
            0.02em;

        box-shadow:
            0
            2px
            7px
            rgba(
                0,
                0,
                0,
                0.14
            );
    }


    .guess-line button:hover:not(:disabled) {
        transform:
            none;
    }


    .guess-line button:active:not(:disabled) {
        transform:
            scale(
                0.97
            );
    }


    .guess-line button:disabled {
        opacity:
            0.48;
    }


    #guess-form {
        margin-bottom:
            0;
    }
}


@media (
    max-width:
        370px
) {

    .guess-line input {
        padding-right:
            66px
            !important;
    }


    .guess-line button {
        width:
            54px;

        min-width:
            54px;

        padding:
            0
            8px
            !important;
    }
}


@media (
    prefers-reduced-motion:
        reduce
) {

    .guess-line button {
        transition:
            none
            !important;
    }
}