/* TRASPAME v2 — formulaire moderne (s'ajoute à site.css) */
.mf { width: 100%; padding: 22px 6px; font-family: var(--sans); color: var(--text); text-align: left; }
.old-theme .mf .mf__title { margin: 0 0 4px; font: 700 clamp(22px, 3vw, 28px)/1.2 var(--serif); color: var(--navy); }
.old-theme .mf .mf__sub { margin: 0 0 18px; font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--muted); }
.old-theme .mf .mf__sub a, .old-theme .mf .mf__check a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Message du serveur (erreur / confirmation) */
.mf__msg { margin-bottom: 18px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.mf__msg .panel { margin: 0 !important; padding: 12px 14px; box-shadow: none !important; border: 0; border-radius: 12px !important; background: transparent; }
.mf__msg br { display: none; }
.mf__msg--err { background: #fdecea; border: 1px solid #f3b7b0; color: #8a1c10; }
.mf__msg--ok { background: #eaf6ec; border: 1px solid #bfe3c4; }
.mf__msg center { text-align: left; }

/* Étapes */
.old-theme .mf .mf__step { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--navy); }
.old-theme .mf .mf__step:first-of-type { margin-top: 0; }
.old-theme .mf .mf__step span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #fff; font-size: 12px; }

/* Grille de champs */
.mf__grid { display: grid; gap: 14px; }
@media (min-width: 560px) { .mf__grid { grid-template-columns: 1fr 1fr; } .mf__field--full { grid-column: 1 / -1; } }
.mf__field { min-width: 0; }
.mf__field label { display: block; margin: 0 0 6px; font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--navy-2); }

/* Champ avec icône */
.mf__input { position: relative; display: flex; align-items: center; background: #f6f8fb; border: 1.5px solid #dfe5ee; border-radius: 12px; transition: border-color .15s, background .15s, box-shadow .15s; }
.mf__input > svg { position: absolute; left: 13px; color: #8a97ab; pointer-events: none; transition: color .15s; }
.mf__input input { width: 100%; min-height: 48px; padding: 0 14px 0 42px; border: 0; background: transparent; outline: none; font: 400 15px var(--sans); color: var(--text); }
.mf__input input::placeholder { color: #a3adbd; }
.mf__input:hover { border-color: #b9c3d3; }
.mf__input:focus-within { background: #fff; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(224, 80, 20, .16); }
.mf__input:focus-within > svg { color: var(--gold); }
.mf__input.is-bad { border-color: #d63a2a; box-shadow: 0 0 0 4px rgba(214, 58, 42, .12); }
.mf__input:has(input:user-invalid) { border-color: #d63a2a; }
.mf__eye { position: absolute; right: 4px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: #8a97ab; border-radius: 10px; cursor: pointer; }
.mf__eye:hover { color: var(--text); background: rgba(20, 38, 64, .06); }
.mf__eye[aria-pressed="true"] { color: var(--gold); }
.mf__input input[type="password"], .mf__input input[data-pw] { padding-right: 48px; }

/* Aides */
.mf__hint { display: block; margin-top: 6px; min-height: 16px; font: 500 12px var(--sans); color: var(--muted); }
.mf__hint--err { color: #b02a1c; font-weight: 600; }
.mf__meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.mf__meter i { height: 4px; border-radius: 4px; background: #e1e6ee; transition: background .2s; }
.mf__meter[data-level="1"] i:nth-child(1) { background: #d63a2a; }
.mf__meter[data-level="2"] i:nth-child(-n+2) { background: #f0a020; }
.mf__meter[data-level="3"] i { background: #13851e; }

/* Case à cocher */
.mf__check { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 20px; font: 400 14px/1.5 var(--sans); color: var(--muted); cursor: pointer; }
.mf__check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mf__box { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid #b9c3d3; border-radius: 7px; background: #fff; transition: all .15s; display: grid; place-items: center; }
.mf__check input:checked + .mf__box { background: var(--gold); border-color: var(--gold); }
.mf__check input:checked + .mf__box::after { content: ""; width: 10px; height: 6px; margin-top: -2px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
.mf__check input:focus-visible + .mf__box { box-shadow: 0 0 0 4px rgba(224, 80, 20, .25); }
.mf__check.is-bad .mf__box { border-color: #d63a2a; }

/* Bouton */
.mf__submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #fff; font: 700 16px var(--sans); cursor: pointer; box-shadow: 0 10px 24px rgba(224, 80, 20, .28); transition: transform .15s, box-shadow .15s, opacity .15s; }
.mf__submit:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(224, 80, 20, .34); }
.mf__submit:active { transform: translateY(0); }
.mf__submit[disabled] { opacity: .65; cursor: wait; transform: none; }

@media (prefers-reduced-motion: reduce) { .mf__input, .mf__box, .mf__submit, .mf__meter i { transition: none; } }

/* Libellé de groupe (sexe, photo) */
.mf__lbl { display: block; margin: 0 0 6px; font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--navy-2); }

/* Choix Homme / Femme */
.mf__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: #f6f8fb; border: 1.5px solid #dfe5ee; border-radius: 12px; }
.mf__seg label { position: relative; margin: 0; cursor: pointer; }
.mf__seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mf__seg span { display: grid; place-items: center; min-height: 38px; border-radius: 9px; font: 600 14px var(--sans); color: var(--muted); transition: background .15s, color .15s, box-shadow .15s; }
.mf__seg label:hover span { color: var(--text); }
.mf__seg input:checked + span { background: #fff; color: var(--gold); box-shadow: 0 1px 4px rgba(20, 38, 64, .18); }
.mf__seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(224, 80, 20, .3); }
.mf__seg.is-bad { border-color: #d63a2a; }

/* Téléversement de la photo */
.mf__file, .mf__field .mf__file { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 14px; font-weight: 400; font-size: 14px; color: var(--text); border: 1.5px dashed #b9c3d3; border-radius: 12px; background: #f6f8fb; cursor: pointer; transition: border-color .15s, background .15s; }
.mf__file:hover, .mf__file:focus-within, .mf__field .mf__file:hover, .mf__field .mf__file:focus-within { border-color: var(--gold); background: #fff; }
.mf__file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mf__avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fdece4; color: var(--gold); overflow: hidden; background-size: cover; background-position: center; }
.mf__avatar.has-img svg { display: none; }
.mf__file-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mf__file-txt b { font: 600 14px var(--sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf__file-txt small { font: 400 12px var(--sans); color: var(--muted); }
.mf__file-btn { flex: none; padding: 8px 14px; border-radius: 9px; background: var(--navy-2); color: #fff; font: 600 13px var(--sans); }
.mf__file.is-bad, .mf__field .mf__file.is-bad { border-color: #d63a2a; }
@media (prefers-reduced-motion: reduce) { .mf__seg span, .mf__file { transition: none; } }

/* Lien « mot de passe oublié » sous le mot de passe */
.old-theme .mf .mf__forgot { margin: 10px 0 18px; text-align: right; font: 500 13px var(--sans); }
.old-theme .mf .mf__forgot a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Très petits écrans : on garde la place pour le nom du fichier (tout le bloc reste cliquable) */
@media (max-width: 400px) { .mf__file-btn { display: none; } .mf__file-txt small { white-space: nowrap; } }

.mf__submit.is-busy { opacity: .65; cursor: wait; pointer-events: none; }