/**
 * Ergonomie tactile du formulaire de soumission.
 *
 * Deux defauts mesures le 2026-08-11 sur https://mitxoda.be/submit/ :
 *   - 22 champs de saisie sur 22 sous 16 px : Safari iOS zoome a chaque prise
 *     de focus, et l'artiste doit repincer pour continuer.
 *   - 28 cibles tactiles sur 43 sous 44 px.
 *
 * IMPORTANT : valeurs en px, jamais en rem. La racine du theme est a 10px,
 * donc 1rem = 10px et une correction en rem aggraverait le defaut.
 *
 * Ce fichier ne contient que de l'ergonomie tactile : aucune couleur, aucune
 * mise en page. Il se supprime sans autre effet que le retour aux defauts.
 */

/* --- 1. Zoom iOS : 16 px est un seuil strict, 15,9 px zoome encore. --- */

#tsf-multi-step-form input[type="text"],
#tsf-multi-step-form input[type="email"],
#tsf-multi-step-form input[type="tel"],
#tsf-multi-step-form input[type="url"],
#tsf-multi-step-form input[type="number"],
#tsf-multi-step-form input[type="search"],
#tsf-multi-step-form input[type="date"],
#tsf-multi-step-form input:not([type]),
#tsf-multi-step-form select,
#tsf-multi-step-form textarea {
    font-size: 16px;
}

/* --- 2. Cibles tactiles : 44 px de hauteur minimum. --- */

#tsf-multi-step-form input[type="text"],
#tsf-multi-step-form input[type="email"],
#tsf-multi-step-form input[type="tel"],
#tsf-multi-step-form input[type="url"],
#tsf-multi-step-form input[type="number"],
#tsf-multi-step-form input[type="search"],
#tsf-multi-step-form input[type="date"],
#tsf-multi-step-form input:not([type]),
#tsf-multi-step-form select {
    min-height: 44px;
}

#tsf-multi-step-form button,
#tsf-multi-step-form .tsf-btn {
    min-height: 44px;
}

/* Le selecteur generique ci-dessus ecrase la hauteur naturelle des petits
   boutons ronds (18 a 36px) sans toucher leur largeur : ils deviennent
   ovales, et pour .tsf-country-tag-remove (flex-item d'une pastille de
   pays), la pastille entiere gonfle avec lui (18px -> ~44px de haut,
   tsf-form-v2.css:1768). Le pays est obligatoire et souvent multi-valuee :
   un mur de pastilles difformes. Deux traitements :
   - .tsf-country-tag-remove : pas la place dans une pastille de 30px de
     haut, on l'exempte plutot que d'agrandir la pastille.
   - .tsf-day-picker-close, .tsf-month-calendar-close (32px,
     tsf-form-v2.css:2734/2848) et .tsf-month-nav (36px,
     tsf-form-v2.css:2827) sont dans des en-tetes ou la place existe : on les
     porte a 44x44 plutot que de laisser une hauteur 44 sur une largeur
     inchangee. */
#tsf-multi-step-form .tsf-country-tag-remove {
    min-height: 0;
}

#tsf-multi-step-form .tsf-day-picker-close,
#tsf-multi-step-form .tsf-month-calendar-close,
#tsf-multi-step-form .tsf-month-nav {
    min-height: 44px;
    min-width: 44px;
}

/* Les cases a cocher et boutons radio ne s'agrandissent pas eux-memes : c'est
   leur libelle cliquable qui doit offrir la surface tactile de 44px (regle
   ci-dessous). Liste explicite plutot que le selecteur generique `label`
   utilise avant : celui-ci capturait aussi les libelles-titres au-dessus des
   champs (.tsf-label, ex. "Track URL", "Email"), qu'il a fallu neutraliser
   au cas par cas a plusieurs reprises. Les cinq classes ci-dessous sont,
   verification faite dans includes/class-tsf-form-v2.php (recherche de tout
   `label` enveloppant un input[type=checkbox|radio]), les seules a jouer ce
   role dans ce formulaire :
     - .tsf-checkbox-label (pre_release, ligne ~392) et .tsf-radio-option
       (release_status x3 ligne ~413 ; et le radio "Instrumental?" genere en
       JS pour les pistes multiples, tsf-form-v2.js ~1221) : texte sur une
       seule ligne, la case reste centree verticalement.
     - .tsf-optin-label (newsletter artiste, ligne ~741), .tsf-not-released-
       label (track pas encore sorti, ligne ~279) et .tsf-label-optin-label
       (newsletter manager, ligne ~712) : texte sur deux ou trois lignes
       (`<strong>` + `<small>`), la case doit rester au sommet du texte et
       non au milieu du bloc. */
#tsf-multi-step-form .tsf-checkbox-label,
#tsf-multi-step-form .tsf-optin-label,
#tsf-multi-step-form .tsf-not-released-label,
#tsf-multi-step-form .tsf-label-optin-label,
#tsf-multi-step-form .tsf-radio-option {
    min-height: 44px;
}

#tsf-multi-step-form .tsf-checkbox-label,
#tsf-multi-step-form .tsf-radio-option {
    display: inline-flex;
    align-items: center;
}

#tsf-multi-step-form .tsf-optin-label,
#tsf-multi-step-form .tsf-not-released-label,
#tsf-multi-step-form .tsf-label-optin-label {
    display: flex;
    align-items: flex-start;
}

#tsf-multi-step-form input[type="checkbox"],
#tsf-multi-step-form input[type="radio"] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}