/**
 * SDC FormFieldMobile — styles scoped.
 *
 * Pas d @layer, pas de !important, pas de Tailwind dans le Twig.
 *
 * Affichage groupe input + prefix : prefix collé visuellement à gauche
 * de l input, partagent une bordure unique pour effet "input group"
 * (sans utiliser :focus-within sur le wrapper car cela casse axe-core
 * sur certains lecteurs d ecran qui ne propagent pas le focus).
 *
 * Le prefix est aria-label="Indicatif France" et n est pas un control,
 * juste un texte informatif.
 */

.previensmoi-form-field-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--previensmoi-space-2);
  margin-bottom: var(--previensmoi-space-4);
  font-family: var(--previensmoi-font-sans);
  color: var(--previensmoi-color-ink-700);
}

.previensmoi-form-field-mobile__label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--previensmoi-space-1);
  font-size: var(--previensmoi-fontsize-base);
  font-weight: var(--previensmoi-fontweight-semibold);
  color: var(--previensmoi-color-ink-800);
  cursor: pointer;
}

.previensmoi-form-field-mobile__required-marker {
  color: var(--previensmoi-color-error-500);
  font-weight: var(--previensmoi-fontweight-bold);
}

.previensmoi-form-field-mobile__group {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 24rem;
  border: 2px solid var(--previensmoi-color-ink-300);
  border-radius: var(--previensmoi-radius-md);
  background-color: var(--previensmoi-color-paper-0);
  overflow: hidden;
  transition:
    border-color var(--previensmoi-motion-fast) var(--previensmoi-motion-easing);
}

.previensmoi-form-field-mobile__group:hover {
  border-color: var(--previensmoi-color-ink-500);
}

.previensmoi-form-field-mobile__group:focus-within {
  outline: var(--previensmoi-focus-ring-width) solid var(--previensmoi-focus-ring-color);
  outline-offset: var(--previensmoi-focus-ring-offset);
  border-color: var(--previensmoi-color-primary-600);
}

.previensmoi-form-field-mobile__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--previensmoi-space-3);
  background-color: var(--previensmoi-color-paper-100);
  border-right: 2px solid var(--previensmoi-color-ink-300);
  font-family: inherit;
  font-size: var(--previensmoi-fontsize-base);
  font-weight: var(--previensmoi-fontweight-semibold);
  color: var(--previensmoi-color-ink-700);
  user-select: none;
}

.previensmoi-form-field-mobile__input {
  flex: 1 1 auto;
  min-height: 2.75rem;
  padding: var(--previensmoi-space-2) var(--previensmoi-space-3);
  background-color: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--previensmoi-fontsize-base);
  color: var(--previensmoi-color-ink-800);
}

.previensmoi-form-field-mobile__input::placeholder {
  color: var(--previensmoi-color-ink-400);
  opacity: 1;
}

.previensmoi-form-field-mobile__input:focus-visible {
  outline: none; /* gere par .group:focus-within */
}

.previensmoi-form-field-mobile__input:disabled {
  background-color: var(--previensmoi-color-paper-100);
  color: var(--previensmoi-color-ink-500);
  cursor: not-allowed;
}

.previensmoi-form-field-mobile__help {
  margin: 0;
  font-size: var(--previensmoi-fontsize-sm);
  color: var(--previensmoi-color-ink-600);
}

.previensmoi-form-field-mobile__error {
  margin: 0;
  font-size: var(--previensmoi-fontsize-sm);
  font-weight: var(--previensmoi-fontweight-semibold);
  color: var(--previensmoi-color-error-500);
}

/* Etat error — bordure du groupe en rouge. */
.previensmoi-form-field-mobile--error .previensmoi-form-field-mobile__group {
  border-color: var(--previensmoi-color-error-500);
}

.previensmoi-form-field-mobile--error .previensmoi-form-field-mobile__group:focus-within {
  outline-color: var(--previensmoi-color-error-500);
  border-color: var(--previensmoi-color-error-500);
}

.previensmoi-form-field-mobile--error .previensmoi-form-field-mobile__prefix {
  border-right-color: var(--previensmoi-color-error-500);
}

/* Variante INT — pas de prefix visuel, input full width. */
.previensmoi-form-field-mobile--int .previensmoi-form-field-mobile__prefix {
  display: none;
}

/* Helper a11y. */
.previensmoi-form-field-mobile .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}