/* ══════════════════════════════════════════════════════════════════════════
   CONSULTANT-RECRUITMENT-01 — Formulaire de candidature consultant.

   ══ AUTONOME, VOLONTAIREMENT ══
   Cette feuille ne dépend d'AUCUN CDN. Le site public charge Tailwind depuis
   un CDN ; le jour où il ne répond pas, un formulaire de huit étapes rendu en
   HTML brut est illisible et le candidat s'en va. Tout ce dont ce formulaire a
   besoin est ici, servi depuis notre domaine.

   ══ LA RÈGLE DES GRILLES ══
   Toute piste de grille est en `minmax(0, 1fr)`. `1fr` seul vaut
   `minmax(auto, 1fr)` : la piste refuse alors de descendre sous la largeur de
   son contenu, et un intitulé long fait déborder la page entière sur un
   téléphone. Cette ligne a coûté une soirée ailleurs dans ce produit.
   ══════════════════════════════════════════════════════════════════════════ */

.ca {
  --ca-green:   #0b3d2e;
  --ca-green2:  #14624a;
  --ca-gold:    #e9b949;
  --ca-sand:    #f7f4ec;
  --ca-ink:     #0f172a;
  --ca-muted:   #64748b;
  --ca-faint:   #94a3b8;
  --ca-line:    #e2e8f0;
  --ca-line2:   #f1f5f9;
  --ca-surface: #ffffff;
  --ca-ok:      #047857;
  --ca-ok-bg:   #ecfdf5;
  --ca-err:     #b91c1c;
  --ca-err-bg:  #fef2f2;
  --ca-warn:    #b45309;
  --ca-warn-bg: #fffbeb;
  --ca-radius:  14px;
  --ca-radius-sm: 10px;
  --ca-shadow:  0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .05);

  max-width: 760px;
  margin: 0 auto;
  padding: 22px 16px 64px;
  color: var(--ca-ink);
  font-size: 15px;
  line-height: 1.55;
  box-sizing: border-box;
}
.ca *, .ca *::before, .ca *::after { box-sizing: inherit; }
.ca img, .ca video { max-width: 100%; height: auto; }

@media (min-width: 768px) { .ca { padding: 34px 24px 80px; } }

/* ── En-tête ───────────────────────────────────────────────────────────── */
.ca-head { margin-bottom: 18px; }
.ca-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ca-green2); background: var(--ca-sand);
  padding: 5px 11px; border-radius: 999px; margin: 0 0 10px;
}
.ca-title { font-size: 24px; font-weight: 800; color: var(--ca-green); margin: 0 0 6px; line-height: 1.25; }
.ca-sub   { color: var(--ca-muted); margin: 0; }
@media (min-width: 768px) { .ca-title { font-size: 29px; } }

/* ── Frise d'étapes ────────────────────────────────────────────────────── */
.ca-steps { margin: 20px 0 22px; }
.ca-steps-count { font-size: 12px; font-weight: 700; color: var(--ca-muted); letter-spacing: .04em; }
.ca-bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.ca-bar  { height: 5px; border-radius: 999px; background: var(--ca-line); }
.ca-bar.is-done    { background: var(--ca-green2); }
.ca-bar.is-current { background: var(--ca-gold); }

/* Au-delà de 860 px, les étapes portent leur nom : sur un grand écran, une
   suite de barres muettes n'informe personne. */
.ca-chips { display: none; }
@media (min-width: 860px) {
  .ca-bars { display: none; }
  .ca-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .ca-chip {
    font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
    background: var(--ca-line2); color: var(--ca-muted); text-decoration: none;
    border: 1px solid transparent;
  }
  .ca-chip.is-done { background: #ecfdf5; color: var(--ca-ok); }
  .ca-chip.is-current { background: var(--ca-green); color: #fff; }
  .ca-chip.is-locked { opacity: .45; }
  a.ca-chip:hover { border-color: #bfe3d3; }
}

/* ── Carte ─────────────────────────────────────────────────────────────── */
.ca-card {
  background: var(--ca-surface); border: 1px solid var(--ca-line);
  border-radius: var(--ca-radius); box-shadow: var(--ca-shadow);
  padding: 18px 16px;
}
@media (min-width: 768px) { .ca-card { padding: 26px 26px; } }
.ca-card + .ca-card { margin-top: 16px; }
.ca-card h2 { font-size: 18px; font-weight: 800; color: var(--ca-green); margin: 0 0 4px; }
.ca-card h3 { font-size: 15px; font-weight: 700; color: var(--ca-ink); margin: 20px 0 8px; }
.ca-hint { color: var(--ca-muted); font-size: 14px; margin: 0 0 16px; }

/* ── Champs ────────────────────────────────────────────────────────────── */
.ca-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .ca-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ca-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ca-field--wide { grid-column: 1 / -1; }
.ca-field label { font-size: 13px; font-weight: 700; color: var(--ca-ink); }
.ca-field .ca-note { font-size: 12px; color: var(--ca-faint); }

.ca-input, .ca-select, .ca-textarea {
  width: 100%; min-width: 0; font: inherit; color: var(--ca-ink);
  background: #fff; border: 1px solid var(--ca-line); border-radius: var(--ca-radius-sm);
  padding: 11px 12px; min-height: 44px;
  -webkit-appearance: none; appearance: none;
}
.ca-select {
  /* La flèche est dessinée ici : un `appearance:none` sans repère visuel
     transforme la liste déroulante en champ texte à l'œil. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
  padding-right: 34px;
}
.ca-textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.ca-input:focus, .ca-select:focus, .ca-textarea:focus {
  outline: 2px solid var(--ca-green2); outline-offset: 1px; border-color: var(--ca-green2);
}

/* ── Cases à cocher en cartes ──────────────────────────────────────────── */
.ca-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
@media (min-width: 640px) { .ca-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ca-check {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 13px; border: 1px solid var(--ca-line); border-radius: var(--ca-radius-sm);
  background: #fff; cursor: pointer; min-width: 0;
}
.ca-check input { margin: 2px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--ca-green2); }
.ca-check span { min-width: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.ca-check:has(input:checked) { border-color: var(--ca-green2); background: #f0fdf9; }
.ca-check:has(input:focus-visible) { outline: 2px solid var(--ca-green2); outline-offset: 1px; }

/* ── Consentements ─────────────────────────────────────────────────────── */
.ca-consent {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px; border: 1px solid var(--ca-line); border-radius: var(--ca-radius-sm);
  background: var(--ca-sand); margin-top: 12px;
}
.ca-consent input { margin: 2px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--ca-green2); }
.ca-consent span { font-size: 13.5px; color: #334155; min-width: 0; }

/* ── Boutons ───────────────────────────────────────────────────────────── */
.ca-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 20px; border-radius: var(--ca-radius-sm);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; line-height: 1.2; text-align: center;
  -webkit-appearance: none; appearance: none;
}
.ca-btn--primary { background: var(--ca-green); color: #fff; }
.ca-btn--primary:hover { background: var(--ca-green2); }
.ca-btn--ghost { background: #fff; color: var(--ca-green); border-color: #bfe3d3; }
.ca-btn--ghost:hover { background: #f0fdf9; }
.ca-btn--send { background: var(--ca-gold); color: var(--ca-green); font-size: 16px; }
.ca-btn--send:hover { filter: brightness(.96); }
.ca-btn[disabled] { opacity: .55; cursor: not-allowed; }

.ca-actions {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ca-line2);
}
.ca-actions .ca-btn { flex: 1 1 auto; }
@media (min-width: 640px) { .ca-actions .ca-btn { flex: 0 0 auto; } }
.ca-actions__spacer { flex: 1 1 auto; }

/* ── Dépôt de fichiers ─────────────────────────────────────────────────── */
.ca-drop {
  border: 2px dashed #cbd5e1; border-radius: var(--ca-radius);
  padding: 22px 16px; text-align: center; background: #fbfdff;
  transition: border-color .12s ease, background .12s ease;
}
.ca-drop.is-over { border-color: var(--ca-green2); background: #f0fdf9; }
.ca-drop__title { font-weight: 700; margin: 0 0 4px; }
.ca-drop__hint  { font-size: 13px; color: var(--ca-muted); margin: 0 0 14px; }

.ca-files { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ca-file {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--ca-line); border-radius: var(--ca-radius-sm);
  background: #fff;
}
.ca-file__tag {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ca-green2); background: var(--ca-sand);
  padding: 3px 8px; border-radius: 999px;
}
.ca-file__main { min-width: 0; flex: 1 1 auto; }
.ca-file__name { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ca-file__meta { display: block; font-size: 12px; color: var(--ca-faint); }
.ca-file__del {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--ca-line);
  background: #fff; color: var(--ca-err); font-size: 17px; line-height: 1; cursor: pointer;
}
.ca-file__del:hover { background: var(--ca-err-bg); }

/* PLATFORM-DOCUMENT-PREVIEW-01 — « Voir » : même gabarit que « Retirer », pour
   que les deux commandes d'une ligne aient la même hauteur de frappe. 44 px de
   haut, la cible tactile minimale recommandée. */
.ca-file__see {
  flex: 0 0 auto; height: 34px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--ca-line); background: #fff; color: var(--ca-green2);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
}
.ca-file__see:hover { background: #f0fdf4; }
.ca-file__see[hidden] { display: none; }
.ca-file.is-busy { opacity: .55; }

.ca-progress { height: 4px; border-radius: 999px; background: var(--ca-line); overflow: hidden; margin-top: 8px; }
.ca-progress__fill { height: 100%; width: 0; background: var(--ca-green2); transition: width .15s linear; }

/* ── Notes ─────────────────────────────────────────────────────────────── */
.ca-note {
  border-radius: var(--ca-radius-sm); padding: 12px 14px; font-size: 14px;
  margin: 0 0 16px; border: 1px solid transparent;
}
.ca-note--ok   { background: var(--ca-ok-bg);   color: var(--ca-ok);   border-color: #a7f3d0; }
.ca-note--err  { background: var(--ca-err-bg);  color: var(--ca-err);  border-color: #fecaca; }
.ca-note--info { background: #eff6ff;           color: #1d4ed8;        border-color: #bfdbfe; }
.ca-note--warn { background: var(--ca-warn-bg); color: var(--ca-warn); border-color: #fde68a; }
.ca-note ul { margin: 6px 0 0; padding-left: 20px; }

/* ── Récapitulatif ─────────────────────────────────────────────────────── */
.ca-recap { margin: 0; display: grid; gap: 1px; background: var(--ca-line2); border-radius: var(--ca-radius-sm); overflow: hidden; }
.ca-recap-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  background: #fff; padding: 11px 13px;
}
@media (min-width: 560px) {
  .ca-recap-row { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 12px; align-items: baseline; }
}
.ca-recap-row dt { font-size: 13px; color: var(--ca-muted); margin: 0; }
.ca-recap-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ── Écran de fin / suivi ──────────────────────────────────────────────── */
.ca-done { text-align: center; padding: 8px 0 4px; }
.ca-done-icon {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ca-ok-bg); color: var(--ca-ok); font-size: 30px; font-weight: 700;
}
.ca-done h1 { font-size: 24px; font-weight: 800; color: var(--ca-ink); margin: 0 0 8px; }
.ca-done > p { color: var(--ca-muted); margin: 0 auto 20px; max-width: 46ch; }

.ca-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ca-timeline li {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: start;
  font-size: 14px;
}
.ca-timeline .ca-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ca-line); margin-top: 6px; }
.ca-timeline li.is-current .ca-dot { background: var(--ca-gold); }
.ca-timeline li.is-done .ca-dot { background: var(--ca-ok); }

.ca-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--ca-sand); color: var(--ca-green);
}

.ca-help { font-size: 13px; color: var(--ca-faint); }
.ca-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}