/* B2 tâche 014 — R17/AC17.1-17.2. Page candidature (design client). Styles
   dupliqués fidèlement du mockup /mockups/talent/candidature (INTERDIT d'y
   toucher), extraits ici pour respecter la règle zéro CSS inline. Scope
   .page-candidature. Ajouts en fin de fichier pour les états réels (upload Mux). */

.page-candidature{
  --brand-gold-main:var(--gold-500);
  --brand-gold-700:var(--gold-deep);
  --brand-gold-800:var(--gold-700);
  --brand-neutral-700:#1A1614;
  --brand-neutral-500:#6B6660;
  --brand-neutral-400:#9A938B;
  --brand-neutral-200:#E5E1DB;
  --gold-grad:var(--gold-fill);
}

/* ---- Bannière offre + déclencheur ---- */
.page-candidature .job-photo-wrap{ position:relative; background:#EDE7DA; }
@media (max-width:640px){
  .page-candidature .job-card-flex{ flex-direction:column; }
  .page-candidature .job-card-flex .w-40{ width:100%; height:150px; }
}

/* ==========================================================
   MODALE — fenêtre popup
   ========================================================== */
.page-candidature .modal-overlay{ display:none; position:fixed; inset:0; background:rgba(20,16,12,.5); z-index:1000; backdrop-filter:blur(4px); }
.page-candidature .modal-overlay.active{ display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; }
.page-candidature .modal-content{ background:#fff; border-radius:22px; width:100%; max-width:560px; box-shadow:0 20px 60px rgba(0,0,0,.3); position:relative; }
.page-candidature .modal-close{
  position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.85); border:1px solid var(--brand-neutral-200);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; color:var(--brand-neutral-700); transition:.2s;
}
.page-candidature .modal-close:hover{ background:var(--gold-grad); color:var(--on-gold); text-shadow:var(--on-gold-shadow); }

/* ---- En-tête modale ---- */
.page-candidature .pm-head{
  position:relative; overflow:hidden; padding:26px 26px 22px;
  background:linear-gradient(135deg,#FDFBF4 0%,#F8F0DC 42%,var(--gold-200) 100%);
  border-bottom:1px solid #E9DDBC; border-radius:22px 22px 0 0;
}
.page-candidature .pm-head::before{
  content:''; position:absolute; top:-80%; left:-15%; width:65%; height:260%;
  background:linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 100%);
  transform:rotate(10deg); pointer-events:none;
}
.page-candidature .pm-head::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 85% -20%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.page-candidature .pm-head > *{ position:relative; z-index:1; }
.page-candidature .pm-eyebrow{ font-size:10px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:var(--brand-gold-700); }
.page-candidature .pm-head-row{ display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-between; gap:20px; }
/* Retour client 06/08 — les deux colonnes (candidat / poste) tiennent sur UNE
   ligne comme la maquette : elles débordaient de 9px et repassaient dessous. */
.page-candidature .pm-head-col{ display:flex; flex-direction:column; gap:13px; min-width:0; }
/* Retour client 07/08 — « Voir l'annonce » et « Autres postes » se coupaient en
   deux lignes. `min-width:0` (ligne au-dessus) autorisait la colonne à passer
   sous la largeur de sa rangée de boutons : les deux pastilles étaient
   comprimées de ~5px et leur libellé se cassait. La colonne ne descend plus
   sous son min-content, et un libellé de pastille ne se coupe jamais. */
.page-candidature .pm-head-col-right{ align-items:flex-end; text-align:right; min-width:min-content; }
.page-candidature .pm-head-col-right .pm-eyebrow{ padding-right:42px; }
.page-candidature .pm-head-col-right .pm-head-id{ flex-direction:row-reverse; }
.page-candidature .pm-head-id{ display:flex; align-items:center; gap:12px; min-width:0; }
.page-candidature .pm-head-id .pm-mini-avatar{
  width:56px; height:56px; border:2px solid #fff;
  box-shadow:0 0 0 2px var(--gold-300), 0 4px 12px rgba(146,113,32,.28);
}
.page-candidature .pm-mini-avatar{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.page-candidature .pm-mini-avatar img{ width:100%; height:100%; object-fit:cover; }
.page-candidature .pm-mini-avatar.pm-mini-initials{ display:flex; align-items:center; justify-content:center; background:var(--gold-grad); color:var(--on-gold); text-shadow:var(--on-gold-shadow); font-weight:800; font-size:15px; }
.page-candidature .pm-mini-name{ font-size:16px; font-weight:800; letter-spacing:.2px; color:var(--brand-neutral-700); }
.page-candidature .pm-head-id-sub{
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:12px; color:var(--brand-gold-700); margin-top:2px;
}
.page-candidature .pm-head-links{ display:flex; gap:6px; margin-top:2px; }
.page-candidature .pm-head-link{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:99px; border:1px solid var(--gold-200); background:#fff;
  font-size:9.5px; font-weight:800; color:var(--brand-gold-700); transition:.16s;
  white-space:nowrap;
}
.page-candidature .pm-head-link:hover{ background:var(--gold-grad); color:var(--on-gold); text-shadow:var(--on-gold-shadow); border-color:transparent; }

/* ---- Corps du formulaire ---- */
.page-candidature .pm-form{ padding:22px 26px 24px; }
.page-candidature .pm-label-serif{
  font-family:'Playfair Display',serif; font-style:italic; font-weight:700;
  font-size:15px; color:#1A1614; margin-bottom:10px;
}
.page-candidature .pm-label-serif::after{
  content:''; display:block; width:52px; height:2px; margin-top:4px;
  background:linear-gradient(90deg,var(--brand-gold-main),var(--gold-200)); border-radius:2px;
}

/* Disponibilité (rangée de boutons) */
.page-candidature .pm-dept-block{
  border:1px solid var(--brand-neutral-200); border-radius:var(--r-md);
  padding:12px 13px; margin-bottom:20px;
  background:linear-gradient(105deg,#FCFBF8 0%,#FCFBF8 54%,#FFFFFF 57%,#FFFFFF 100%);
}
.page-candidature .pm-dept-row{ display:flex; flex-wrap:wrap; gap:6px; }
.page-candidature .pm-dept-btn{
  padding:6px 12px; border-radius:var(--r-pill); border:1px solid var(--brand-neutral-200);
  background:linear-gradient(180deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 46%),linear-gradient(180deg,#FFFFFF 0%,#FAFAF8 100%);
  color:var(--brand-neutral-700); font-size:11px; font-weight:700; white-space:nowrap; transition:all .18s ease;
}
.page-candidature .pm-dept-btn:hover{ border-color:var(--gold-primary); }
.page-candidature .pm-dept-btn.avail-now{ display:inline-flex; align-items:center; gap:6px; }
.page-candidature .pm-dept-btn.avail-now::before{
  content:''; width:7px; height:7px; border-radius:50%; background:#2EA35C;
  box-shadow:0 0 0 2.5px rgba(46,163,92,.18); flex-shrink:0;
}
.page-candidature .pm-dept-btn.avail-now.on{
  background:#E7F6EC; border-color:#7FC79A; color:var(--green); font-weight:800;
  box-shadow:0 2px 8px rgba(46,163,92,.22);
}
.page-candidature .pm-dept-btn.on{
  background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 46%),var(--gold-grad);
  border-color:transparent; color:var(--on-gold); text-shadow:var(--on-gold-shadow); box-shadow:0 2px 10px rgba(184,145,42,.32);
}

/* Date précise (input natif stylé, cf. écart documenté vs calendrier maquette) */
.page-candidature .avail-date-field{ position:relative; margin-top:10px; max-width:220px; }
.page-candidature .avail-date-input{
  width:100%; padding:9px 11px; border:1.5px solid var(--brand-neutral-200); border-radius:10px; background:#fff;
  font-family:'Geist',sans-serif; font-size:12.5px; font-weight:600; color:var(--brand-neutral-700); cursor:pointer; transition:.15s;
}
.page-candidature .avail-date-input:hover{ border-color:var(--brand-gold-main); }
.page-candidature .avail-date-input:focus{ outline:none; border-color:var(--brand-gold-main); box-shadow:0 0 0 3px rgba(196,165,89,.15); }

/* Messages standardisés */
.page-candidature .pm-tpl{
  display:flex; gap:12px; align-items:flex-start; width:100%; padding:13px 15px;
  border:1px solid var(--brand-neutral-200); border-radius:var(--r-md); cursor:pointer; background:#fff;
  margin-bottom:10px; text-align:left; transition:all .18s ease;
}
.page-candidature .pm-tpl:hover{ border-color:var(--gold-primary); }
.page-candidature .pm-tpl.on{
  border-color:var(--brand-neutral-200);
  background:linear-gradient(105deg,#FCFBF8 0%,#FCFBF8 54%,#FFFFFF 57%,#FFFFFF 100%);
}
.page-candidature .pm-radio{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--brand-neutral-200);
  flex-shrink:0; margin-top:2px; position:relative; transition:border-color .15s;
}
.page-candidature .pm-tpl.on .pm-radio{ border-color:var(--brand-gold-main); }
.page-candidature .pm-tpl.on .pm-radio::after{ content:''; position:absolute; inset:2.5px; border-radius:50%; background:var(--brand-gold-main); }
.page-candidature .pm-tpl-tag{ display:block; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; color:var(--brand-gold-700); margin-bottom:4px; }
.page-candidature .pm-tpl-txt{ font-size:13px; font-weight:400; color:var(--brand-neutral-700); line-height:1.55; }
.page-candidature .pm-tpl-txt b{ font-weight:700; }
.page-candidature .pm-custom-toggle{ display:inline-flex; align-items:center; gap:6px; margin:2px 0 12px; font-size:12px; font-weight:700; color:var(--brand-gold-700); background:none; border:none; cursor:pointer; }
.page-candidature .pm-custom-toggle:hover{ text-decoration:underline; }
.page-candidature .pm-custom-chev{ transition:transform .18s ease; }
.page-candidature .pm-custom-toggle.open .pm-custom-chev{ transform:rotate(180deg); }

/* Message libre */
.page-candidature .pm-tpl-free{ cursor:default; align-items:flex-start; }
.page-candidature .pm-tpl-free-body{ flex:1; min-width:0; }
.page-candidature .pm-free-textarea{
  width:100%; margin-top:7px; padding:9px 11px; border:1.5px solid var(--brand-neutral-200); border-radius:10px;
  font-family:'Geist',sans-serif; font-size:12.5px; color:var(--brand-neutral-700); background:#fff; resize:vertical; min-height:56px;
}
.page-candidature .pm-free-textarea::placeholder{ color:var(--brand-neutral-400); }
.page-candidature .pm-free-textarea:focus{ outline:none; border-color:var(--brand-gold-main); box-shadow:0 0 0 3px rgba(196,165,89,.15); }
.page-candidature .pm-free-meta{ display:flex; justify-content:flex-end; margin-top:4px; }
.page-candidature .pm-free-count{ font-size:10px; font-weight:700; color:var(--brand-neutral-400); }
.page-candidature .pm-free-count.limit{ color:#B23A2E; }
.page-candidature .pm-free-warn{
  display:flex; gap:8px; align-items:flex-start; margin-top:9px; padding:9px 12px; border-radius:10px;
  background:rgba(178,58,46,.07); border:1px solid rgba(178,58,46,.22);
  font-size:11px; font-weight:600; color:#B23A2E; line-height:1.55;
}
.page-candidature .pm-free-warn svg{ flex-shrink:0; margin-top:1px; }

/* #1850 / #1851 — Pitch vidéo SPECIFIQUE AU POSTE (distinct du pitch général) */
.page-candidature .pm-pitch{
  margin-top:2px; padding:14px; border-radius:14px;
  background:linear-gradient(180deg,#FFFDF8,var(--gold-50));
  border:1.5px solid rgba(184,145,42,.30);
}
.page-candidature .pm-pitch-intro{ display:flex; gap:10px; align-items:flex-start; }
.page-candidature .pm-pitch-ic{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(184,145,42,.28); color:var(--brand-gold-700);
}
.page-candidature .pm-pitch-title{ font-size:12.5px; font-weight:800; color:var(--brand-gold-800); }
.page-candidature .pm-pitch-sub{ font-size:11px; font-weight:500; color:var(--brand-neutral-500); line-height:1.55; margin-top:3px; }
.page-candidature .pm-pitch-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  flex:1 1 150px; padding:9px 14px; border-radius:99px; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--brand-gold-800);
  background:#fff; border:1.5px solid rgba(184,145,42,.35); transition:all .18s ease;
}
.page-candidature .pm-pitch-btn:hover{ border-color:var(--brand-gold-main); background:#FFFCF4; }
.page-candidature .pm-pitch-btn:disabled{ opacity:.5; cursor:not-allowed; }
.page-candidature .pm-pitch-btn svg{ flex-shrink:0; }
/* Le bloc d'upload commun (.vu) prend la place du bouton maison. */
.page-candidature .vu{ margin-top:12px; }
.page-candidature .pm-pitch-done[hidden]{ display:none; }
.page-candidature .pm-pitch-hint{
  font-size:10px; font-weight:500; color:var(--brand-neutral-400);
  line-height:1.55; margin-top:10px;
}
.page-candidature .pm-pitch-done{ display:flex; align-items:center; gap:10px; margin-top:12px; padding:9px 11px; border-radius:11px; background:#fff; border:1px solid rgba(184,145,42,.24); }
.page-candidature .pm-pitch-thumb{
  width:52px; height:36px; border-radius:7px; flex-shrink:0; position:relative;
  background:linear-gradient(135deg,#2C2C2C,#4A4640);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.page-candidature .pm-pitch-done-name{ font-size:11.5px; font-weight:700; color:var(--brand-neutral-700); }
.page-candidature .pm-pitch-done-meta{ font-size:10px; color:var(--brand-neutral-400); margin-top:1px; }
.page-candidature .pm-pitch-redo{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--brand-gold-800); background:none; border:none; cursor:pointer; text-decoration:underline; }

/* Pièces jointes */
.page-candidature .pm-attach-card{ display:flex; align-items:center; gap:8px; padding:8px 12px; }
.page-candidature .pm-attach-name{ font-size:12px; font-weight:700; color:var(--brand-neutral-700); }
.page-candidature .pm-attach-state{ margin-left:auto; font-size:9px; padding:1px 7px; }
.page-candidature .pm-attach-state.off{ background:#F0EEE9; color:#8A8378; }
.page-candidature .pm-switch{ display:inline-flex; cursor:pointer; flex-shrink:0; }
.page-candidature .pm-switch input{ position:absolute; opacity:0; width:0; height:0; }
.page-candidature .pm-switch-track{ position:relative; width:30px; height:17px; border-radius:99px; background:#D8D3CA; transition:background .18s ease; display:block; }
.page-candidature .pm-switch-thumb{ position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s ease; display:block; }
.page-candidature .pm-switch input:checked + .pm-switch-track{ background:#2EA35C; }
.page-candidature .pm-switch input:checked + .pm-switch-track .pm-switch-thumb{ transform:translateX(13px); }

/* Notes légales */
.page-candidature .pm-notes{ margin-top:12px; }
.page-candidature .pm-note{ font-size:9.5px; font-weight:500; color:var(--brand-neutral-400); line-height:1.5; text-align:center; }

/* État envoyé */
.page-candidature .pm-sent{ text-align:center; padding:36px 20px; }
.page-candidature .pm-sent-ic{
  width:52px; height:52px; border-radius:50%; background:#E7F6EC; border:1px solid rgba(29,122,70,.3);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--green);
}
/* B2 tâche 015 — variante « quota atteint » (AC17.5) : même pastille, teinte ambre. */
.page-candidature .pm-sent-ic-warn{ background:#FBF1DC; border-color:rgba(184,145,42,.35); color:var(--brand-gold-800); }
.page-candidature .pm-sent h3{ font-family:'Playfair Display',serif; font-size:21px; font-weight:700; color:var(--brand-neutral-700); margin-bottom:8px; }
.page-candidature .pm-sent p{ font-size:13.5px; color:var(--brand-neutral-500); line-height:1.6; max-width:400px; margin:0 auto 22px; }

/* Confirmation — canaux de notification + astuce (design Lovable) */
.page-candidature .pm-sent-notif{ max-width:400px; margin:0 auto 14px; padding:12px 14px; border:1px solid var(--brand-neutral-200); border-radius:var(--r-md); background:#FCFBF8; }
.page-candidature .pm-sent-notif-title{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--brand-neutral-500); margin-bottom:8px; }
.page-candidature .pm-sent-channels{ display:flex; gap:8px; justify-content:center; }
.page-candidature .pm-sent-ch{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; border:1px solid var(--brand-neutral-200); background:#fff; font-size:11px; font-weight:700; color:var(--brand-neutral-700); }
.page-candidature .pm-sent-tip{ display:flex; gap:8px; align-items:flex-start; text-align:left; max-width:400px; margin:0 auto 22px; padding:10px 12px; border-radius:11px; background:rgba(184,145,42,.08); border:1px solid rgba(184,145,42,.20); font-size:11.5px; color:var(--brand-neutral-700); line-height:1.55; }

/* #2876 — sortie de l'écran de confirmation : retour à Explorer (primaire),
   suivi de candidature (secondaire), et décompte du retour automatique. */
/* Retour Tatianna 18/08 (#3188) — les deux sorties sont maintenant deux CTA de
   meme format (.ds-btn-gold + .ds-btn-outline-gold, voir _sent.html.erb) : la
   rangee les pose cote a cote, Explorer a gauche et le suivi a droite, et
   .pm-sent-track (le lien souligne d'avant) n'existe plus.
   Le gap passe de 10 a 12 px : deux pilules qui se touchent presque se lisent
   comme un seul bloc. */
.page-candidature .pm-sent-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; }
.page-candidature .pm-sent-actions .ds-btn-gold,
.page-candidature .pm-sent-actions .ds-btn-outline-gold{ display:inline-flex; }
/* Retours Tatianna 18/08 (#3188) puis 21/08 (#3268) — « mettre un peu
   d'espacement entre ces 2 CTA et le "Retour auto" », puis « plus d'espacement
   pour le "Retour auto" comme en pj ».
   Elle l'a demandé DEUX FOIS parce que la premiere correction n'a jamais atteint
   l'ecran : `.page-candidature .pm-sent p` (0,2,1) est declaree plus haut dans
   CETTE feuille et le decompte EST un <p> de `.pm-sent`. Elle gagnait donc la
   cascade et imposait `margin:0 auto 22px` et 13,5 px. Marge haute reellement
   appliquee : 0 px, pour 22 px ecrits.
   Le selecteur nomme donc l'element (0,3,1) : il passe devant, quel que soit
   l'ordre des declarations. Et la valeur monte a 32 px, l'ecart de la piece
   jointe ramene a l'echelle du rendu. */
.page-candidature .pm-sent p.pm-sent-countdown{ font-size:11.5px; color:var(--brand-neutral-500); margin:32px auto 0; min-height:1.2em; }

@media (max-width:640px){
  .page-candidature .pm-head-row{ flex-direction:column; gap:16px; }
  .page-candidature .pm-head-col-right{ align-items:flex-start; text-align:left; }
  .page-candidature .pm-head-col-right .pm-eyebrow{ padding-right:0; }
  .page-candidature .pm-head-col-right .pm-head-id{ flex-direction:row; }
}

/* ---- Ajouts états réels (upload Mux) ---- */
.page-candidature .pm-pitch-disabled{ font-size:10.5px; font-weight:600; color:var(--brand-neutral-400); line-height:1.55; margin-top:10px; }
@keyframes pm-spin{ to{ transform:rotate(360deg); } }

/* Retour Loïc 10/08 — « Aucun » n'était qu'un constat : il ne disait pas où
   déposer son CV ni son pitch. Le badge devient un lien vers le profil. */
.page-candidature .pm-attach-add{ text-decoration:none; cursor:pointer; }
.page-candidature .pm-attach-add:hover{ background:var(--gold-100); color:var(--gold-700); }

/* Tracker 3219 — refus serveur du message de motivation (coordonnees en clair).
   L'avertissement a la frappe (.pm-free-warn) reste une alerte ; ceci est le
   refus, rendu dans la modale, formulaire intact : on corrige et on renvoie. */
.page-candidature .pm-refusal{
  display:flex; gap:9px; align-items:flex-start; margin-bottom:14px; padding:11px 13px; border-radius:10px;
  background:rgba(178,58,46,.07); border:1px solid rgba(178,58,46,.22); border-left:3px solid #B23A2E;
  font-size:12px; color:var(--brand-neutral-700); line-height:1.55;
}
.page-candidature .pm-refusal svg{ flex-shrink:0; margin-top:2px; color:#B23A2E; }
.page-candidature .pm-refusal b{ display:block; color:#B23A2E; margin-bottom:2px; }