/* ============================================================
   MAES COACH LIFE — Formulaire Candidature Mentorat
   Utilise les tokens CSS de style.css (--sage, --clay, etc.)
   ============================================================ */

/* ——— Section conteneur ——— */
.cand-section-intro {
  max-width: 620px;
  margin: 0 auto 2.4rem;
  text-align: center;
}
.cand-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--ink-soft);
  font-style: italic;
}
.cand-trust svg { color: var(--sage); flex: 0 0 auto; }

/* ——— Card principale ——— */
.cand-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--line);
}

/* ——— En-tête / barre de progression ——— */
.cand-header {
  background: var(--paper-2);
  padding: 1.4rem 2rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.cand-step-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .7rem;
  flex-wrap: wrap;
  gap: .4rem;
}
.cand-step-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--ink-soft);
}
.cand-step-name {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--sage-deep);
}
.cand-progress {
  height: 5px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.cand-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sage) 0%, var(--clay) 100%);
  border-radius: 999px;
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
  will-change: width;
}

/* ——— Wrapper des étapes ——— */
.cand-body {
  padding: 2.2rem 2.5rem 1.5rem;
}

/* ——— Étape individuelle ——— */
.cand-step { display: none; }
.cand-step.active {
  display: block;
  animation: stepIn .32s cubic-bezier(.4, 0, .2, 1);
}
.cand-step.prev-exit {
  animation: stepOut .22s ease forwards;
}
@keyframes stepIn {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes stepIn-back {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes stepOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ——— Intro d'étape ——— */
.step-intro { margin-bottom: 1.8rem; }
.step-intro h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--ink);
  margin-bottom: .35rem;
}
.step-intro p { color: var(--ink-soft); font-size: .93rem; }

/* ——— Champs ——— */
.field { margin-bottom: 1.3rem; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.3rem;
}
.field > label,
.field-row .field > label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink);
  margin-bottom: .48rem;
}
.req { color: var(--clay); margin-left: .15em; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--ink);
  background: var(--paper);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 16%, transparent);
}
.field input.err { border-color: #c0392b; }
.field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}

/* ——— Radio cards ——— */
.radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: .55rem;
  margin-top: .4rem;
}
.radio-card { position: relative; cursor: pointer; }
.radio-card input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.rc-inner {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem .95rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all .16s;
  user-select: none;
}
.rc-dot {
  flex: 0 0 17px;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: all .16s;
}
.radio-card input:checked ~ .rc-inner {
  border-color: var(--sage);
  background: color-mix(in srgb, var(--sage) 9%, var(--paper));
  color: var(--sage-deep);
  font-weight: 600;
}
.radio-card input:checked ~ .rc-inner .rc-dot {
  border-color: var(--sage);
  background: var(--sage);
}
.radio-card input:checked ~ .rc-inner .rc-dot::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  display: block;
}
.radio-card:hover .rc-inner {
  border-color: color-mix(in srgb, var(--sage) 60%, transparent);
  background: color-mix(in srgb, var(--sage) 5%, var(--paper));
}

/* ——— Checkbox cards ——— */
.check-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: .55rem;
  margin-top: .4rem;
}
.check-card { position: relative; cursor: pointer; }
.check-card input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.cc-inner {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem .95rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all .16s;
  user-select: none;
}
.cc-box {
  flex: 0 0 17px;
  width: 17px; height: 17px;
  border-radius: 4px;
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: all .16s;
  font-size: .7rem;
  color: transparent;
}
.check-card input:checked ~ .cc-inner {
  border-color: var(--sage);
  background: color-mix(in srgb, var(--sage) 9%, var(--paper));
  color: var(--sage-deep);
  font-weight: 600;
}
.check-card input:checked ~ .cc-inner .cc-box {
  border-color: var(--sage);
  background: var(--sage);
  color: #fff;
}
.check-card:hover .cc-inner {
  border-color: color-mix(in srgb, var(--sage) 60%, transparent);
  background: color-mix(in srgb, var(--sage) 5%, var(--paper));
}

/* ——— Slider motivation ——— */
.slider-wrap { margin-top: .5rem; }
.cand-range {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  accent-color: var(--clay);
}
.cand-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--clay);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--clay) 45%, transparent);
  transition: transform .15s;
}
.cand-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.cand-range::-moz-range-thumb {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--clay);
  border: 3px solid #fff;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--clay) 45%, transparent);
  cursor: pointer;
}
.slider-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .9rem;
}
.slider-ends { font-size: .78rem; color: var(--ink-soft); }
.slider-val-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .05rem;
}
.slider-val {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--clay);
  line-height: 1;
}
.slider-val-label { font-size: .7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; }

/* ——— Erreur champ ——— */
.field-error {
  display: block;
  color: #c0392b;
  font-size: .8rem;
  margin-top: .35rem;
  font-weight: 500;
}
.radio-error {
  display: block;
  color: #c0392b;
  font-size: .8rem;
  margin-top: .45rem;
  font-weight: 500;
}

/* ——— Navigation ——— */
.cand-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 2.5rem 2rem;
  border-top: 1px solid var(--line);
  gap: 1rem;
  flex-wrap: wrap;
}
.cand-nav .spacer { flex: 1; }
#cand-next {
  min-width: 180px;
  justify-content: center;
}
#cand-next:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none !important;
}

/* ——— Confirmation ——— */
.cand-confirm {
  padding: 3.5rem 2.5rem;
  text-align: center;
}
.confirm-emoji {
  font-size: 3.8rem;
  display: block;
  margin-bottom: 1.2rem;
  animation: heartPop .55s cubic-bezier(.36,.07,.19,.97);
}
@keyframes heartPop {
  0%   { transform: scale(0) rotate(-10deg); }
  55%  { transform: scale(1.2) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
.cand-confirm h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--ink);
  margin-bottom: .9rem;
}
.cand-confirm p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 48ch;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
}
.confirm-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--sage-deep);
  border-bottom: 1.5px solid var(--clay);
  padding-bottom: 2px;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--font-body);
  transition: .18s;
}
.confirm-back:hover { color: var(--ink); }

/* ——— Responsive ——— */
@media (max-width: 680px) {
  .cand-header   { padding: 1.1rem 1.2rem 1rem; }
  .cand-body     { padding: 1.6rem 1.2rem 1rem; }
  .cand-nav      { padding: 1.2rem 1.2rem 1.6rem; }
  .cand-confirm  { padding: 2.5rem 1.2rem; }
  .field-row     { grid-template-columns: 1fr; }
  .radio-cards   { grid-template-columns: 1fr 1fr; }
  .check-cards   { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .radio-cards   { grid-template-columns: 1fr; }
  .check-cards   { grid-template-columns: 1fr; }
  #cand-next     { width: 100%; }
}