.form-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Sous-titre d'aide sous un titre de section/étape. */
.hint {
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: 1.2rem;
}

form legend,
form label {
    font-weight: 600;
    color: var(--text);
}

.field label,
.field legend {
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Champs sombres cohérents avec le thème (inputs, selects, textareas). */
.form-control,
.form-select,
.notes-area {
    background-color: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.form-control::placeholder {
    color: var(--text-faint);
}

.form-control:focus,
.form-select:focus,
.notes-area:focus {
    background-color: var(--surface-3);
    border-color: var(--gold);
    color: var(--text);
    box-shadow: 0 0 0 0.2rem var(--gold-soft);
}

/* Champs désactivés : rester dans le thème sombre.
   Bootstrap passe le fond en clair (--bs-secondary-bg) tout en gardant un
   texte clair → blanc sur blanc. On force un fond sombre atténué + texte muet. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.field input:disabled,
.field select:disabled {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted); /* WebKit grise le texte des disabled */
    opacity: 1;
    cursor: not-allowed;
}

/* Pastille d'unité des MoneyType (€, etc.) : même rendu sombre et même taille
   que les champs, sinon le span Bootstrap ressort plus grand et tout blanc.
   La page paiement appliquait ce correctif en local, il est désormais global. */
.input-group-text {
    background-color: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: .92rem;
}

.field input, .field select  {
    font-family: inherit;
    font-size: .92rem;
    color: var(--text);

    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .55rem .7rem;
}

.field input {
    background: var(--surface-3);
}

input + label {
    font-size: 0.85rem;
}

/* Contrôle segmenté (pilule) — voir twig:Form:Seg */
.seg {
    display: inline-flex;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.seg label {
    margin: 0;
    cursor: pointer;
}

.seg input {
    display: none;
}

.seg span {
    display: inline-block;
    padding: .35rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    color: var(--text-muted);
    transition: color .15s ease, background .15s ease;
}

.seg input:checked + span {
    color: var(--gold-strong);
    background: var(--gold-soft);
}

/* Variante boutons (choix piloté en JS) — voir twig:Form:SegButtons */
.seg-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: .82rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    cursor: pointer;
}

.seg-btn:hover {
    color: var(--text);
}

.seg-btn.active {
    background: var(--gold-soft);
    color: var(--gold-strong);
}

/* Mobile : le contrôle segmenté passe en pleine largeur, segments égaux
   (plus lisible et tapable au pouce). Vaut pour les 2 variantes : radio
   (.seg label / span) et boutons (.seg-btn). */
@media (max-width: 640px) {
    .seg { display: flex; width: 100%; }
    .seg label,
    .seg-btn { flex: 1 1 0; }
    .seg span { display: block; text-align: center; }
}

/** SWITCH **/
.form-switch .form-check-input {
    width: 3rem;
    height: 1.3rem;
}

legend.required::after,
label.required::after {
    content: " *";
    color: var(--gold);
}

input + label.required::after {
    display: none;
}

/** Textarea "notes" style */
.notes-wrapper {
    position: relative;
    width: 100%;
}

.notes-area {
    width: 100%;
    min-height: 200px;
    padding: 12px 40px 12px 12px;
    resize: vertical;
    font-size: 1rem;
    font-family: inherit;
}

.notes-wrapper .btnk {
    position: absolute;
    right: 8px;
    bottom: 8px;
    opacity: 0;
    transition: 0.2s ease-in-out;
}

.notes-wrapper:hover .btnk,
.notes-wrapper .btnk.show {
    opacity: 1;
}

select.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(233,239,243,0.7)'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    margin: .05rem 0 0.5rem 0;
}

.form-check-input:checked {
    background-color: var(--success);
    border-color: var(--success);
}

.form-check-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 0.2rem var(--gold-soft);
}

select option {
    color: #000; /* Fix lisibilité du menu natif sur certains navigateurs */
}

/** Radio button */
.inline-radio .form-check {
    display: inline-block;
}

.inline-radio .form-check:not(:first-child) {
    margin-left: 0.75rem;
}

/* =========================================================
   Formulaires sur mobile (< sm) : chaque champ occupe toute
   la largeur. Beaucoup de formulaires utilisent des colonnes
   Bootstrap sans base « col-12 » (.col, .col-6, .row-cols-2…)
   qui ne se replient donc jamais → champs écrasés sur mobile.
   On force le repli. Ciblé aux colonnes DANS un <form> pour ne
   pas toucher les grilles de contenu (cartes, listes).
   ========================================================= */
@media (max-width: 575.98px) {
    form .row > [class^="col"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}