/* Formulaire de candidature ARKO : remplace Tally (2026-10-27).
   Même monde que le site : fond forêt, Inter, texte mint, CTA vert de la prod. */

:root {
  --forest: #06110C;
  --forest-deep: #030806;
  --card: #1E1E1E;
  --line: rgba(220, 232, 224, .14);
  --line-strong: rgba(220, 232, 224, .28);
  --mint: #DCE8E0;
  --ivory: #F2EDE4;
  --sage: #A3B5AA;
  --moss: #8A9C91;
  --green: #00D47E;
  --red: #E7574E;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--forest-deep); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; color: var(--mint);
  font: 400 1rem/1.5 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background: transparent;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(135deg, #030806 0%, #0C1A13 50%, #030806 100%); }
::selection { background: var(--mint); color: var(--forest); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
a { color: inherit; }

/* En-tête */
.top { position: sticky; top: 0; z-index: 10; background: rgba(3, 8, 6, .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); }
.top__in { max-width: 46rem; margin: 0 auto; padding: .9rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.top img { width: 1.75rem; height: auto; display: block; }
.top__title { font-size: .85rem; color: var(--sage); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__step { font-size: .8rem; color: var(--moss); font-variant-numeric: tabular-nums; }
.bar { height: 2px; background: var(--line); }
.bar span { display: block; height: 100%; width: 0; background: var(--green); transition: width .5s var(--ease); }

/* Contenu */
.main { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 6rem; }
.page { animation: in .5s var(--ease) both; }
@keyframes in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page { animation: none; } .bar span { transition: none; } }

h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 1.5rem; color: #fff; font-weight: 700; }
.intro p { margin: 0 0 1rem; color: var(--sage); line-height: 1.6; }
.intro h2, .heading { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--green);
  margin: 2.25rem 0 .9rem; font-weight: 600; }
.heading:first-child { margin-top: 0; }

/* Champs */
.field { margin: 0 0 2.25rem; }
.field__label { display: block; font-size: 1.15rem; line-height: 1.4; font-weight: 600; color: #fff; margin-bottom: .5rem; }
.field__label .req { color: var(--green); margin-left: .2rem; }
.field__label .opt { color: var(--moss); font-weight: 400; font-size: .85rem; margin-left: .35rem; }
.field__help { color: var(--sage); font-size: .95rem; line-height: 1.55; margin: 0 0 .75rem; }
.field__help + .field__help { margin-top: -.25rem; }

.input, .textarea {
  width: 100%; font: inherit; color: #fff; background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 12px; padding: .9rem 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--moss); }
.input:focus, .textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 212, 126, .15); }
.count { font-size: .75rem; color: var(--moss); text-align: right; margin-top: .35rem; font-variant-numeric: tabular-nums; }

/* Choix : de vraies cases et boutons radio, habillés */
.choices { display: grid; gap: .55rem; }
.choice { position: relative; display: flex; gap: .85rem; align-items: flex-start; padding: .85rem 1rem;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.choice:hover { border-color: rgba(0, 212, 126, .5); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__mark { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; border: 1.5px solid var(--sage);
  border-radius: 50%; display: grid; place-items: center; }
.choice--multi .choice__mark { border-radius: 5px; }
.choice__mark::after { content: ""; width: .55rem; height: .55rem; border-radius: inherit; background: var(--forest); opacity: 0; }
.choice input:checked ~ .choice__mark { background: var(--green); border-color: var(--green); }
.choice input:checked ~ .choice__mark::after { opacity: 1; }
.choice:has(input:checked) { border-color: var(--green); background: rgba(0, 212, 126, .07); }
.choice input:focus-visible ~ .choice__mark { outline: 2px solid var(--green); outline-offset: 3px; }
.choice__txt { line-height: 1.45; }

/* Fichier */
.file { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.file__name { color: var(--sage); font-size: .9rem; }

/* Erreurs */
.err { color: var(--red); font-size: .9rem; margin-top: .5rem; }
.field.is-invalid .input, .field.is-invalid .textarea, .field.is-invalid .choice { border-color: var(--red); }

/* Navigation */
.nav { display: flex; gap: .75rem; align-items: center; margin-top: 2.5rem; }
.btn { appearance: none; border: 0; cursor: pointer; font: 600 15px/1 "Inter", system-ui, sans-serif;
  padding: 1rem 1.6rem; border-radius: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease; }
.btn--go { background: linear-gradient(135deg, #00B368 0%, #009E5E 100%); color: #fff; }
.btn--go:hover { box-shadow: 0 8px 30px rgba(0, 158, 94, .25), 0 4px 12px rgba(0, 158, 94, .15); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--mint); border: 1px solid var(--line-strong); }
.btn--ghost:hover { background: rgba(220, 232, 224, .06); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.hint { color: var(--moss); font-size: .8rem; margin-left: auto; }
@media (max-width: 560px) { .hint { display: none; } .nav .btn--go { flex: 1; justify-content: center; } }

/* Bandeau de reprise et messages */
.notice { border: 1px solid rgba(0, 212, 126, .35); background: rgba(0, 212, 126, .06); border-radius: 12px;
  padding: 1rem 1.1rem; margin-bottom: 2rem; display: grid; gap: .75rem; }
.notice--err { border-color: rgba(231, 87, 78, .45); background: rgba(231, 87, 78, .07); }
.notice p { margin: 0; color: var(--mint); }
.notice__row { display: flex; flex-wrap: wrap; gap: .5rem; }

.postes { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.postes a { display: block; padding: 1rem 1.2rem; background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 12px; text-decoration: none; font-weight: 600; }
.postes a:hover { border-color: var(--green); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }