.keypad {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin: 20px auto;
        width: 100%;
        max-width: 320px;
        /* même largeur que ton bloc OTP */
    }


    .keypad button {
        aspect-ratio: 1;
        font-size: 1.3rem;
        font-weight: 600;
        border: none;
        border-radius: 16px;
        background: linear-gradient(145deg, #f8f9fa, #e9ecef);
        box-shadow:
            4px 4px 8px rgba(0, 0, 0, 0.1),
            -4px -4px 8px rgba(255, 255, 255, 0.8);
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
    }

    .keypad button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: left 0.5s ease;
    }

    .keypad button:hover::before {
        left: 100%;
    }

    .keypad button:hover {
        transform: translateY(-2px);
        box-shadow:
            6px 6px 12px rgba(0, 0, 0, 0.15),
            -6px -6px 12px rgba(255, 255, 255, 0.9);
    }

    .keypad button:active {
        transform: translateY(1px);
        box-shadow:
            2px 2px 4px rgba(0, 0, 0, 0.2),
            -2px -2px 4px rgba(255, 255, 255, 0.6);
    }

    .keypad .special {
        background: linear-gradient(145deg, #F26522, #E55A1A);
        color: white;
        font-weight: 700;
    }

    .keypad .special:hover {
        background: linear-gradient(145deg, #E55A1A, #D44F12);
    }