/* forms.css — champs, variantes, onglets (memes tokens que le FR). */
.kj-input{width:100%;min-height:var(--inputs-min-height);padding:0 var(--inputs-padding);font-family:var(--font-body--family);font-size:var(--inputs-font-size);color:var(--color-input-text);background:var(--color-input-background);border:var(--inputs-border-width) solid var(--color-input-border);border-radius:var(--inputs-border-radius);outline:none}
.kj-input:focus{border-color:var(--color-selected-input-border)}
textarea.kj-input{padding:var(--inputs-padding);min-height:90px;resize:vertical}

/* checkout : indicatif pays devant le téléphone (assets/js/checkout-phone.js) */
/* React réécrit className du wrapper : on cible via :has(> .kj-phone__code) (CHANGELOG #28). */
.kj-phone,:has(> .kj-phone__code){position:relative}
.kj-phone__code{position:absolute!important;left:1px;top:1px;width:92px;height:calc(var(--kj-input-h,50px) - 2px);margin:0;border:0;border-right:1px solid var(--color-border,#ddd);border-radius:0;background:transparent;padding:0 6px 0 12px;font:inherit;font-size:.875rem;color:inherit;cursor:pointer;z-index:2}
:has(> .kj-phone__code) > input[type="tel"]{padding-left:104px!important}
:has(> .kj-phone__code) > label{left:104px!important}
.kj-phone__help{margin:6px 0 0;font-size:var(--font-body--size-small,.78rem);opacity:.7}