/* ==========================================================================
   vLiteRP — Candidature staff (V2), feuille propre à public/apply.php.
   Mobile d'abord : une colonne pleine largeur ; les écrans larges ajoutent la
   colonne d'aide à droite. S'appuie sur site.css (--neon, .card, .btn, .pill…).
   Sans JavaScript, toutes les étapes restent affichées l'une sous l'autre :
   seules les règles préfixées par .applyForm.js les replient.
   ========================================================================== */

/* Gouttière 16 px sur téléphone (site.css en met 14) */
@media (max-width:760px){
  main.page{padding-left:16px;padding-right:16px}
}

/* ---------- En-tête ---------- */
.apV2 .apHero h1{margin-top:.5rem}
.apLead{margin-top:10px;max-width:620px}
.apConds{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.apConds .pill{max-width:100%;color:rgba(255,255,255,.74);font-weight:600;line-height:1.35}
.apConds .pill>span:last-child{min-width:0;overflow-wrap:anywhere}
.apConds .pill b{color:var(--neon);font-weight:700}
.apConds .pill svg{width:14px;height:14px;flex-shrink:0;color:var(--neon)}
.apConds .pill.off{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.08)}
.apConds .pill.off b{color:var(--danger)}
.apV2 .alert{margin-top:14px}
.apV2 .alert>span:last-child{min-width:0;overflow-wrap:anywhere}
.apV2 .alert.warn b{color:var(--warn)}
.apV2 .alert.error b{color:var(--danger)}
.apV2 .alert .neon{text-shadow:none}
.apV2 .btn svg{width:15px;height:15px;flex-shrink:0}

/* ---------- Disposition : aide + formulaire ---------- */
.apLayout{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:14px;align-items:start}
.apMain{min-width:0}
.apLayout>.card,.apSide .card,.apSide .card + .card{margin-top:0}
.apSide{display:grid;gap:14px;min-width:0;order:2}
.apLayout.isForm .apSide{order:0}
.apMain{order:1}
.apHelpList{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.apHelpList li{display:flex;gap:10px;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.74)}
.apHelpList li:before{content:"";flex-shrink:0;width:6px;height:6px;margin-top:.55em;border-radius:50%;background:var(--neon);box-shadow:0 0 8px rgba(1,230,118,.5)}
.apHelpList b{color:#fff;font-weight:600}
.apHow .mini{margin-top:12px}
.apHow .mini a{color:var(--neon);text-decoration:underline;text-underline-offset:3px}
.apSideStatic{display:none}

/* ---------- Étapes : pastilles + barre de progression (JS uniquement) ---------- */
.apStepper{display:none;list-style:none;margin:0;padding:0;gap:4px}
.applyForm.js .apStepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.apStepper li{min-width:0}
.apStepper button{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;
  border:0;background:transparent;color:rgba(255,255,255,.42);font:inherit;cursor:pointer;border-radius:var(--radius-sm);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.apStepper button:not(:disabled):hover{background:rgba(1,230,118,.06);color:#fff}
.apStepper button:disabled{cursor:default;opacity:.5}
.apStepper .n{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
  font-family:var(--font-head);font-weight:700;font-size:.82rem;transition:.25s var(--ease);
}
.apStepper .t{max-width:100%;font-family:var(--font-head);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apStepper li.is-active button{color:#fff}
.apStepper li.is-active .n{border-color:var(--neon);background:rgba(1,230,118,.14);color:var(--neon);box-shadow:0 0 16px rgba(1,230,118,.3)}
.apStepper li.is-done .n{border-color:var(--neon);background:var(--neon);color:#04120a}
.apStepper li.is-done button{color:rgba(255,255,255,.7)}

.apProgress{display:none;height:4px;margin-top:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.applyForm.js .apProgress{display:block}
.apProgressFill{width:20%;height:100%;border-radius:999px;background:var(--neon);box-shadow:0 0 12px rgba(1,230,118,.5);transition:width .35s var(--ease)}
.apProgressTxt{display:none;margin:8px 0 0;font-family:var(--font-head);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.applyForm.js .apProgressTxt{display:block}

/* Brouillon local */
.apDraft{
  display:none;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:12px 0 0;padding:8px 10px;border-radius:var(--radius-sm);
  border:1px dashed rgba(1,230,118,.3);background:rgba(1,230,118,.05);font-size:.8rem;line-height:1.45;color:var(--muted);
}
.apDraft.show{display:flex}
.apDraft b{color:var(--neon);font-weight:700}
.apDraft .btn{margin-left:auto;padding:.4rem .7rem;font-size:.66rem}

/* ---------- Panneaux d'étape ---------- */
.apPanel{padding:22px 0 4px;border-top:1px solid var(--line-soft)}
.apPanel[data-step="1"]{border-top:0;padding-top:4px}
.applyForm.js .apPanel{display:none;border-top:0;padding-top:18px}
.applyForm.js .apPanel.is-active{display:block;animation:fadeUp .3s var(--ease) both}
.apPanelHead{display:flex;gap:12px;align-items:flex-start}
.apPanelHead>div{min-width:0}
.apPanelHead .num{flex-shrink:0;font-family:var(--font-head);font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:.04em;color:rgba(1,230,118,.4)}
.apPanelHead h2{font-size:1.2rem;text-transform:uppercase;letter-spacing:.06em}
.apPanelHead h2:focus{outline:none}
.apPanelHead .sub{margin-top:3px;font-size:.86rem}
.apPanelHead .optional{display:block;margin-top:4px;font-size:.78rem;line-height:1.5;color:var(--text-dim)}

/* ---------- Champs ---------- */
.apField{margin-top:18px;min-width:0}
.apField .q{
  display:flex;gap:.55rem;align-items:flex-start;margin:0 0 8px;
  font-family:var(--font-head);font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.45;color:rgba(255,255,255,.76);
}
.apField .q:before{content:"//";flex-shrink:0;color:rgba(1,230,118,.6);font-weight:700;letter-spacing:0}
.apField .req,.apReqNote .req,.apNoJs .req{color:var(--neon);text-shadow:0 0 12px rgba(1,230,118,.4)}
.apField input,.apField select,.apField textarea{margin:0;font-size:16px}
.apField textarea{min-height:120px}
.apField textarea.tall{min-height:160px}
.apFieldFoot{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-top:6px;font-size:.78rem;line-height:1.45;color:var(--text-dim)}
.apFieldFoot:has(.apHint:empty):has(.apCount:empty){display:none}
.apHint{min-width:0}
.apCount{flex-shrink:0;margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.apCount.short{color:var(--warn)}
.apCount.ok{color:var(--neon)}
.apMsg{margin:6px 0 0;font-size:.8rem;line-height:1.45;color:var(--danger)}
.apMsg.soft{color:var(--warn)}
.apMsg[hidden]{display:none}
.apField.is-invalid input,.apField.is-invalid select,.apField.is-invalid textarea{border-color:rgba(255,107,107,.6);box-shadow:0 0 0 3px rgba(255,107,107,.12)}
.apField.is-collapsed{display:none}
.apTwo{display:grid;grid-template-columns:minmax(0,1fr);gap:0 14px}
@media (min-width:600px){.apTwo{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Oui / Non */
.apField .toggle-row{margin-top:0}
.apField .toggle{flex:1 1 0;justify-content:center;margin:0;padding:.7rem 1.1rem;min-height:44px;color:rgba(255,255,255,.85);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.apField .toggle input{margin:0}
.apField .toggle.on{color:#fff}
@media (min-width:600px){.apField .toggle{flex:0 0 auto;min-width:110px}}

/* ---------- Disponibilités : une ligne par jour, créneaux en pastilles ---------- */
.apAvail{display:grid;gap:8px;margin-top:14px}
.apDay{min-width:0;padding:8px 10px 10px;border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:rgba(255,255,255,.02)}
.apDayName{margin:0 0 8px;font-family:var(--font-head);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.apSlots{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:6px}
.apSlot{position:relative;display:block;min-width:0;margin:0;font-family:var(--font-head);font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none;color:inherit}
.apSlot input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;z-index:1}
.apSlot span{
  display:flex;align-items:center;justify-content:center;min-height:42px;padding:6px 2px;
  border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.12);background:rgba(6,6,17,.5);
  color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.apSlot input:checked+span{border-color:rgba(1,230,118,.6);background:rgba(1,230,118,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(1,230,118,.3)}
.apSlot input:focus-visible+span{outline:2px solid rgba(1,230,118,.7);outline-offset:2px}
@media (hover:hover){.apSlot input:not(:checked):hover+span{border-color:rgba(1,230,118,.35);color:#fff}}
@media (min-width:761px){
  .apDay{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:10px;padding:8px 10px}
  .apDayName{margin:0}
  .apSlots{grid-template-columns:repeat(7,minmax(0,1fr))}
}
.apAvailTools{display:none;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.applyForm.js .apAvailTools{display:flex}
.apAvailCount{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:599px){
  .apAvailTools .btn{flex:1 1 100%;justify-content:center}
  .apAvailCount{width:100%;text-align:center}
}
@media (min-width:600px){.apAvailCount{margin-left:auto}}

/* ---------- Boutons d'étape ---------- */
.apNav{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.apNav .btn{flex:2 1 0;justify-content:center;min-height:46px}
.apNav [data-prev]{flex:1 1 0}
.apNav [data-next],.apNav [data-prev]{display:none}
.applyForm.js .apNav [data-next],.applyForm.js .apNav [data-prev]{display:inline-flex}
.apNav #applySubmit{flex:1 1 100%}
.applyForm.js .apNav #applySubmit{flex:2 1 0}
.apReqNote{display:flex;align-items:center;gap:.4rem;width:100%;font-size:.78rem;color:var(--text-dim)}
@media (max-width:599px){
  /* Dernière étape : « Envoyer » en premier, « Précédent » dessous */
  .applyForm.js .apPanel[data-step="5"] .apNav .btn{flex:1 1 100%}
  .applyForm.js .apPanel[data-step="5"] .apNav [data-prev]{order:2}
}
@media (min-width:600px){
  .apNav{justify-content:flex-end;align-items:center}
  .apNav .btn,.apNav [data-prev],.apNav #applySubmit,.applyForm.js .apNav #applySubmit{flex:0 0 auto;min-width:150px}
  .apNav [data-prev]{margin-right:auto}
  .apReqNote{width:auto;margin-right:auto}
}

/* ---------- Relecture ---------- */
.apSummary{display:grid;gap:12px;margin-top:16px}
.apSummary[hidden]{display:none}
.apSumGroup{min-width:0;padding:12px;border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:rgba(255,255,255,.02)}
.apSumHead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.apSumHead h3{min-width:0;font-size:.95rem;text-transform:uppercase;letter-spacing:.06em}
.apSumHead .btn.sm{flex-shrink:0;padding:.45rem .75rem;font-size:.68rem}
.apSummary dl{margin:10px 0 0;display:grid;gap:9px}
.apSummary dt{font-family:var(--font-head);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.apSummary dd{margin:3px 0 0;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.86);white-space:pre-wrap;overflow-wrap:anywhere}
.apSummary dd.empty{color:var(--text-dim);font-style:italic}
.apSummary dd.miss{color:var(--warn)}
.apSumSkip{margin:10px 0 0;font-size:.8rem;font-style:italic;color:var(--text-dim)}
.apSummary ul{margin:4px 0 0;padding-left:18px;white-space:normal}
.apSummary li{margin:3px 0}
.apNoJs{margin-top:12px}
.applyForm.js .apNoJs{display:none}
.apFinal{margin-top:18px;padding-top:4px}
.applyForm.js .apFinal{padding-top:16px;border-top:1px solid var(--line-soft)}
.apFinalHead{font-family:var(--font-head);font-size:.95rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.apFinalHead span{margin-left:6px;font-size:.66rem;font-weight:600;letter-spacing:.14em;color:var(--text-dim)}
.apThanks{margin-top:18px;font-size:.88rem;color:var(--muted)}
.apThanks .neon{text-shadow:none}

/* ---------- Cartes d'état (envoyée, déjà candidat, refusée, acceptée, fermées) ---------- */
.apState{margin-top:14px}
.apStateTop{display:flex;align-items:center;gap:12px}
.apStateIcon{
  width:44px;height:44px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;
  border:1px solid rgba(1,230,118,.35);background:rgba(1,230,118,.08);box-shadow:0 0 22px rgba(1,230,118,.18);
}
.apState.pending .apStateIcon{border-color:rgba(255,196,84,.4);background:rgba(255,196,84,.1);box-shadow:0 0 22px rgba(255,196,84,.14)}
.apState.refused .apStateIcon{border-color:rgba(255,107,107,.4);background:rgba(255,107,107,.1);box-shadow:0 0 22px rgba(255,107,107,.14)}
.apState.closed .apStateIcon{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);box-shadow:none}
.apState h2{margin-top:12px;overflow-wrap:anywhere}
.apState h2 .neon{text-shadow:none}
.apState .warnTxt{color:var(--warn)}
.apState .dangerTxt{color:var(--danger)}
.apAgo{display:inline-block;font-size:.62em;font-weight:600;letter-spacing:.06em;text-transform:none;color:var(--muted);vertical-align:middle}
.apState .sub{margin-top:10px;max-width:640px}
.apState .sub b{color:var(--text)}
.apState .hero-actions{margin-top:18px}
.apAfter{margin-top:12px}
.stepList{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.stepList li{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.72)}
.stepList li i{
  flex-shrink:0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);
  border:1px solid rgba(1,230,118,.35);background:rgba(1,230,118,.08);
  font-family:var(--font-head);font-style:normal;font-weight:700;font-size:.78rem;color:var(--neon);
}
.stepList li b{color:#fff;font-weight:600}
.apCool{max-width:640px;margin-top:14px;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--line-soft);background:rgba(255,255,255,.02)}
.apCoolHead{display:flex;justify-content:space-between;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.apCoolHead b{font-family:var(--font-head);font-size:1.05rem;letter-spacing:.03em;color:#fff}
.apCoolHead span{font-size:.82rem;color:var(--muted)}
.apCoolBar{height:6px;margin-top:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.apCoolFill{height:100%;border-radius:999px;background:var(--neon);box-shadow:0 0 12px rgba(1,230,118,.4)}
.apCoolTxt{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:.76rem;color:var(--text-dim);font-variant-numeric:tabular-nums}

/* ---------- Visiteur non connecté ---------- */
.apLock{text-align:center;padding:2rem 1.2rem}
.apLockIcon{
  width:60px;height:60px;margin:0 auto 1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  border:1px solid rgba(1,230,118,.35);background:rgba(1,230,118,.08);box-shadow:0 0 30px rgba(1,230,118,.22);
}
.apLock .kicker{justify-content:center}
.apLock h2{margin-top:.5rem;font-size:1.45rem;text-transform:uppercase;letter-spacing:.04em}
.apLock .sub{margin:.7rem auto 1.2rem;max-width:42ch}
.apLock .hero-actions{justify-content:center;margin-top:0}
.apPreview h2{margin-top:8px;font-size:1.15rem}
.apPreviewList{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.apPreviewList li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--line-soft);background:rgba(255,255,255,.02)}
.apPreviewList li i{flex-shrink:0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(1,230,118,.35);background:rgba(1,230,118,.08);font-family:var(--font-head);font-style:normal;font-weight:700;font-size:.76rem;color:var(--neon)}
.apPreviewList li>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.apPreviewList b{color:#fff;font-weight:600;font-size:.9rem}
.apPreviewList small{font-size:.8rem;color:var(--muted)}

/* ---------- Téléphone : boutons pleine largeur ---------- */
@media (max-width:760px){
  .apV2 .hero-actions{flex-direction:column}
  .apV2 .hero-actions .btn{width:100%;justify-content:center}
  .apLock{padding:1.6rem 1rem}
}
@media (max-width:519px){.apStepper .t{display:none}}

/* ---------- Écran large : colonne d'aide à droite, collante ---------- */
@media (min-width:981px){
  .apLayout{grid-template-columns:minmax(0,1fr) 300px}
  .apMain{grid-column:1;grid-row:1}
  .apSide,.apLayout.isForm .apSide{grid-column:2;grid-row:1;position:sticky;top:calc(var(--nav-h) + 16px)}
  .apSideStatic{display:block}
}