/* Styles du formulaire de candidature */
.fld { display: block; margin-bottom: 4px; }
.fld > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.fld input, .fld textarea,
.fstep input[type="text"], .fstep input[type="number"], .fstep textarea {
  width: 100%; font-family: var(--body); font-size: 16px; color: var(--text);
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--paper); transition: border-color .18s, box-shadow .18s;
}
.fstep textarea { resize: vertical; }
.fld input:focus, .fstep input:focus, .fstep textarea:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(255,93,115,.14); background: #fff;
}
input[type="file"] { padding: 11px; background: #fff; }

/* options radio */
.opts { display: grid; gap: 12px; }
.opt {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 15px;
  background: var(--paper); transition: all .16s ease; font-size: 16px; font-weight: 500;
}
.opt:hover { border-color: var(--rose); transform: translateX(3px); }
.opt input { accent-color: var(--rose); width: 20px; height: 20px; }
.opt:has(input:checked) { border-color: var(--rose); background: rgba(255,93,115,.07); box-shadow: 0 0 0 3px rgba(255,93,115,.1); }

/* slider */
.slider__val { font-family: var(--mono); font-size: 22px; margin-top: 14px; text-align: center; }
.slider__val b { color: var(--rose-dp); font-size: 34px; }
.slider__legend { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 6px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--rose)); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--rose); cursor: pointer; box-shadow: 0 4px 12px rgba(227,62,88,.4); }
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--rose); cursor: pointer; }

/* réaction humoristique */
.reaction { margin-top: 18px; padding: 13px 16px; border-radius: 13px; background: rgba(232,176,75,.12); border: 1px solid rgba(232,176,75,.35); font-size: 15px; color: var(--gold-dp); animation: fade .35s; }

/* consent */
.check { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; color: var(--text); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--rose); flex-shrink: 0; margin-top: 2px; }

/* fstep transition */
.fstep { animation: stepIn .4s cubic-bezier(.2,.7,.2,1); }
@keyframes stepIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* overlay d'analyse */
#analyzeOverlay { position: fixed; inset: 0; z-index: 999; display: none; place-items: center;
  background: rgba(11,16,32,.92); backdrop-filter: blur(8px); }
#analyzeOverlay.show { display: grid; }
.analyze { text-align: center; color: #fff; max-width: 440px; padding: 24px; }
.analyze h3 { color: var(--gold); letter-spacing: .1em; margin-bottom: 20px; font-size: 18px; }
.analyze__ring { width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--rose); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#analyzeSteps { list-style: none; text-align: left; display: inline-block; font-size: 15px; }
#analyzeSteps li { color: #aab2d6; margin: 8px 0; opacity: 0; }
#analyzeSteps li.on { opacity: 1; color: #fff; }
#analyzeSteps li.on::before { content: "✓ "; color: #38e08b; }