/* doc-project | projet/assets/css/product-configurator-v2/numeric-keypad.css | Styles scopes du clavier numerique personnalise du configurateur V2 avec panneau flottant premium positionne strictement sous le champ actif par JS, touches larges tactiles, actions Effacer OK, espace provisoire de scroll pcv2-keypad-scroll-spacer cree uniquement quand la place sous le champ est insuffisante puis retire a la fermeture, etat garde temporaire pcv2-keypad--guarded pendant l ouverture pour neutraliser les faux taps sans masquer le clavier, exception de caret visible pour les champs prefixes comme RAL, plus styles de champ appliques seulement lorsque le clavier personnalise est actif et couche top-layer forcee au-dessus des modales actives dont la modale d edition Validation. | Expose: pcv2-keypad, pcv2-keypad__grid, pcv2-keypad__button, pcv2-keypad-scroll-spacer, pcv2-keypad--guarded, pcv2-keypad--modal-layer, pcv2-keypad--validation-edit, pcv2-custom-keypad-enabled | Dépend de: product-configurator-v2/base.css | Impacte: affichage professionnel du clavier numerique V2 sur mobile tactile avec champ RAL prefixe lisible, sans bloquer la saisie native desktop, feedback discret pendant les 600ms de verrouillage initial, affichage force au-dessus des modales actives meme si elles creent une couche superieure, footer de modale validation non deplace par le keypad | Tables: aucune */
.pcv2-keypad[hidden]{
    display:none!important;
}

.pcv2-keypad{
    position:fixed;
    z-index:2147483000!important;
    display:grid;
    gap:10px;
    padding:12px;
    border:1px solid rgba(63,42,28,.2);
    border-radius:22px;
    background:
        radial-gradient(circle at top left,rgba(255,255,255,.95),rgba(255,255,255,0) 42%),
        linear-gradient(180deg,#fffaf4,#f1dfca);
    box-shadow:0 22px 58px rgba(20,14,10,.26),inset 0 1px 0 rgba(255,255,255,.82);
    color:#2e1e13;
    transform:translateY(4px) scale(.98);
    opacity:0;
    transition:opacity .14s ease,transform .14s ease;
    touch-action:manipulation;
    max-height:calc(100vh - 24px);
    overflow:auto;
    overscroll-behavior:contain;
}

.pcv2-keypad--validation-edit{
    z-index:2147483000!important;
}

.pcv2-keypad--modal-layer{
    z-index:2147483000!important;
}

body.pcv2-validation-edit-modal-is-open .pcv2-keypad--validation-edit{
    z-index:2147483000!important;
}

.pcv2-keypad--visible{
    transform:translateY(0) scale(1);
    opacity:1;
}

.pcv2-keypad-scroll-spacer{
    display:block;
    flex:0 0 auto;
    width:100%;
    height:0;
    min-height:0;
    pointer-events:none;
    visibility:hidden;
}

.pcv2-keypad--guarded .pcv2-keypad__button{
    cursor:default;
}

.pcv2-keypad__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.pcv2-keypad__actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.pcv2-keypad__button{
    min-height:48px;
    border:1px solid rgba(63,42,28,.22);
    border-radius:16px;
    background:linear-gradient(180deg,#fffefb,#f8ead8);
    color:#2e1e13;
    box-shadow:0 8px 18px rgba(63,42,28,.1),inset 0 1px 0 rgba(255,255,255,.78);
    font:inherit;
    font-size:1.1rem;
    font-weight:900;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.pcv2-keypad__button:active{
    transform:translateY(1px);
    box-shadow:0 4px 10px rgba(63,42,28,.12),inset 0 1px 0 rgba(255,255,255,.72);
}

.pcv2-keypad__button:focus-visible{
    outline:3px solid rgba(138,90,43,.35);
    outline-offset:2px;
}

.pcv2-keypad__button:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.pcv2-keypad__button--secondary{
    background:#fff;
    color:#6f4324;
}

.pcv2-keypad__button--primary{
    border-color:#3f2a1c;
    background:#3f2a1c;
    color:#fffaf4;
}

.pcv2-custom-keypad-enabled .pcv2-input[data-pcv2-keypad][data-pcv2-keypad-active="true"]{
    caret-color:transparent;
}

.pcv2-custom-keypad-enabled .pcv2-input[data-pcv2-keypad][data-pcv2-keypad-active="true"][data-pcv2-keypad-caret="visible"]{
    caret-color:auto;
}

.pcv2-custom-keypad-enabled .pcv2-input[data-pcv2-keypad][data-pcv2-keypad-active="true"]:focus{
    cursor:pointer;
}

@media (max-width:520px){
    .pcv2-keypad{
        border-radius:20px;
        padding:10px;
    }

    .pcv2-keypad__button{
        min-height:46px;
    }
}

@media (prefers-reduced-motion:reduce){
    .pcv2-keypad{
        transition:none;
    }
}