.champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 360px;
    width: 100%;
}

.champ-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-strong);
    line-height: 1.3;
}

.champ-obligatoire {
    color: var(--accent);
    margin-left: 2px;
}

.champ-aide {
    font-size: var(--font-size-caption);
    color: var(--ink-muted);
    line-height: 1.4;
}

.champ-erreur-message {
    font-size: var(--font-size-caption);
    color: var(--danger);
    line-height: 1.4;
    display: none;
    align-items: center;
    gap: 6px;
}

.champ.champ-erreur .champ-erreur-message {
    display: flex;
}

.champ.champ-erreur .champ-erreur-message::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    padding-bottom: 1px;
}

.input,
.select,
.textarea {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--ink-soft);
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--ink-muted);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 110, 60, 0.18);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    background: var(--bg);
    color: var(--ink-muted);
    cursor: not-allowed;
}

.input.input-erreur,
.champ.champ-erreur .input,
.champ.champ-erreur .select,
.champ.champ-erreur .textarea {
    border-color: var(--danger);
}

.input.input-erreur:focus,
.champ.champ-erreur .input:focus,
.champ.champ-erreur .select:focus,
.champ.champ-erreur .textarea:focus {
    box-shadow: 0 0 0 3px rgba(178, 58, 46, 0.18);
}

.textarea {
    height: auto;
    min-height: 100px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.5;
}

.select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%235F6862' d='M2 4l4 4 4-4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.checkbox,
.radio {
    appearance: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast);
}

.checkbox {
    border-radius: 6px;
}

.radio {
    border-radius: 50%;
}

.checkbox:hover,
.radio:hover {
    border-color: var(--ink-muted);
}

.checkbox:focus-visible,
.radio:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.checkbox:checked,
.radio:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.checkbox:checked {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 7l3 3 5-6'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

.checkbox:indeterminate {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='M3 7h8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

.radio:checked {
    background-image: radial-gradient(circle, white 30%, transparent 35%);
}

.champ-inline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-body-sm);
    color: var(--ink);
    line-height: 1.4;
}

.switch {
    appearance: none;
    position: relative;
    width: 40px;
    height: 24px;
    background: var(--line-strong);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    flex-shrink: 0;
}

.switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--paper);
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-1);
}

.switch:checked {
    background: var(--accent);
}

.switch:checked::after {
    transform: translateX(16px);
}

.switch:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}