/* ══════════════════════════════════════════════════════════════════════════
   #4692 (Kevin, 08/10) — la modale « Proposer un essai, un entretien ou une
   prise de poste » (`shared/steps/_propose_modal`).

   Origine : le bloc <style> de `app/views/mockups/shared/_propose_step_modal.html.erb`
   livré par Kevin sur le Drive le 08/10. Tailles, rayons, espacements, ombres
   et neutres repris tels quels. Trois écarts, et pourquoi :

   · tout est sous `#pstep` et chaque classe porte le préfixe `ps-` : la source
     nommait `.modal`, `.btn`, `.chip`, `.cal`, `.day`… et réglait `html,body`.
     Chargée sur toutes les pages (`stylesheet_link_tag :app`), elle aurait
     repeint l'application entière ;
   · les dorés passent par les jetons de `design_tokens.css` (garde-fou
     `design_system_test.rb`) : #FBF7EE, #F4EBD2, #E6D5A4 et #D0B87E y sont
     déjà, à l'identique ; le #8A6B2C du texte doré devient --gold-deep
     (#8A6B1F) et le dégradé #DDBB73 → #AE812F devient --gold-primary →
     --gold-500 ;
   · « choisi » se lit sur le champ coché (`:has(:checked)`) et non plus sur un
     `aria-pressed` posé par script : ce sont de vrais boutons radio.
   ══════════════════════════════════════════════════════════════════════════ */

#pstep{
  --ps-n-100:#F4F1EA; --ps-n-200:#E8E4DC; --ps-n-400:#A7A298; --ps-n-500:#7A766E;
  --ps-n-600:#5E5A52; --ps-n-700:#4A4640; --ps-n-900:#1A1614;
  --ps-gold-700:var(--gold-deep);
  --ps-gold-grad:linear-gradient(135deg,var(--gold-primary),var(--gold-500));
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
  background:rgba(20,18,14,.5); backdrop-filter:blur(3px);
  font-family:Geist,Inter,system-ui,sans-serif; color:var(--ps-n-900);
}
html.pstep-open{ overflow:hidden; }
#pstep, #pstep *{ box-sizing:border-box; }
#pstep [hidden]{ display:none !important; }
#pstep button{ font:inherit; cursor:pointer; }
#pstep :focus-visible{ outline:2px solid var(--ps-gold-700); outline-offset:2px; }
#pstep .ps-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

#pstep .ps-modal{ width:min(720px,100%); max-height:min(860px,calc(100vh - 48px)); max-height:min(860px,calc(100dvh - 40px));
  display:flex; flex-direction:column; background:#fff; border-radius:24px; overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
#pstep .ps-col{ display:flex; flex-direction:column; flex:1; min-height:0; margin:0; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
#pstep .ps-hd{ position:relative; display:flex; align-items:center; gap:12px; padding:20px 24px;
  background:radial-gradient(70% 140% at 100% 0%,#F6E9C4 0%,transparent 70%),linear-gradient(180deg,#FFFDF7,#FAF3E0);
  border-bottom:1px solid #EFE6D2; }
#pstep .ps-av{ flex-shrink:0; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(135deg,var(--gold-primary),var(--gold-600)); color:#fff; font-weight:800; font-size:18px;
  border:3px solid #fff; box-shadow:0 4px 12px rgba(44,44,44,.18); }
#pstep .ps-av img{ width:100%; height:100%; object-fit:cover; display:block; }
#pstep .ps-who{ min-width:0; }
#pstep .ps-hd small{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ps-gold-700); }
#pstep .ps-hd b{ display:block; font-size:19px; margin-top:2px; }
#pstep .ps-hd .ps-who span{ font-size:12.5px; color:var(--ps-n-600); }
#pstep .ps-back{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px 0 10px; border-radius:999px;
  border:1px solid #E9E3D5; background:rgba(255,255,255,.85); font-size:12px; font-weight:700; color:var(--ps-n-700);
  text-decoration:none; white-space:nowrap; transition:border-color .15s,background .15s; }
#pstep .ps-back:hover{ border-color:var(--gold-300); background:#fff; }
#pstep .ps-back svg{ width:14px; height:14px; }
#pstep .ps-x{ flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid #E9E3D5; background:#fff; color:#4A4640;
  display:grid; place-items:center; text-decoration:none; font-size:14px; }

/* ── Les deux temps ─────────────────────────────────────────────────────── */
#pstep .ps-steps{ display:flex; gap:8px; padding:14px 24px 0; }
#pstep .ps-steps button{ flex:1; display:flex; align-items:center; gap:9px; height:40px; padding:0 12px; border-radius:12px;
  border:1px solid var(--ps-n-200); background:#fff; color:var(--ps-n-500); font-size:12.5px; font-weight:700; text-align:left; }
#pstep .ps-steps button i{ font-style:normal; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; background:var(--ps-n-100); }
#pstep .ps-steps button.on{ border-color:var(--gold-300); background:var(--gold-50); color:var(--ps-gold-700); box-shadow:0 0 0 3px rgba(212,178,108,.16); }
#pstep .ps-steps button.on i{ background:var(--ps-gold-grad); color:#fff; }
#pstep .ps-steps button.done{ color:var(--ps-n-700); }
#pstep .ps-steps button.done i{ background:#1B7A4E; color:#fff; }

#pstep .ps-body{ flex:1; overflow:auto; padding:20px 24px; }
#pstep .ps-pane{ animation:ps-in .25s ease; }
@keyframes ps-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
#pstep h4{ margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ps-n-500); }
#pstep .ps-sec{ margin-bottom:22px; }

/* ── Cartes (type, modalité) ────────────────────────────────────────────── */
#pstep .ps-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
#pstep .ps-opt{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:14px; border-radius:16px;
  border:1px solid var(--ps-n-200); background:#fff; text-align:left; cursor:pointer; transition:transform .18s,box-shadow .18s,border-color .18s; }
#pstep .ps-opt:hover{ transform:translateY(-2px); border-color:var(--gold-300); box-shadow:0 8px 18px rgba(110,88,44,.1); }
#pstep .ps-opt .ps-ic{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--gold-50); color:var(--ps-gold-700); border:1px solid #EFE3C6; }
#pstep .ps-opt .ps-ic svg{ width:18px; height:18px; }
#pstep .ps-opt b{ font-size:14px; }
#pstep .ps-opt .ps-d{ font-size:11.5px; color:var(--ps-n-500); line-height:1.35; }
#pstep .ps-opt:has(:checked){ border-color:var(--gold-300); background:linear-gradient(180deg,#FFFEFB,#FBF3DC);
  box-shadow:0 0 0 3px rgba(212,178,108,.2),0 8px 18px rgba(110,88,44,.1); }
#pstep .ps-opt:has(:checked)::after{ content:""; position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:50%;
  background:#1B7A4E url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/12px no-repeat; }
/* #4864 : teintes par type (maquette du 08/10) : Entretien bleu, Essai vert, Prise de poste doré. */
#pstep .ps-opt.k-interview .ps-ic{ background:#E8F0FD; color:#2F5FA8; border-color:#CFE0F8; }
#pstep .ps-opt.k-trial .ps-ic{ background:#E6F4EC; color:#1B7A4E; border-color:#C6E3D2; }
#pstep .ps-opt.k-interview:has(:checked){ border-color:#86A9E3; background:linear-gradient(180deg,#FDFEFF,#EDF3FD);
  box-shadow:0 0 0 3px rgba(47,95,168,.14),0 8px 18px rgba(47,95,168,.1); }
#pstep .ps-opt.k-trial:has(:checked){ border-color:#7CC4A0; background:linear-gradient(180deg,#FDFFFE,#EBF6F0);
  box-shadow:0 0 0 3px rgba(27,122,78,.14),0 8px 18px rgba(27,122,78,.1); }
#pstep .ps-opt.k-interview:has(:checked)::after{ background-color:#2F5FA8; }
#pstep .ps-dt .ps-sec{ margin:16px 0 0; }
#pstep .ps-opt:has(:focus-visible), #pstep .ps-chip:has(:focus-visible){ outline:2px solid var(--ps-gold-700); outline-offset:2px; }
#pstep .ps-cards.ps-five{ grid-template-columns:repeat(4,1fr); gap:8px; }
#pstep .ps-opt.ps-brand{ align-items:center; text-align:center; padding:12px 6px; gap:8px; }
#pstep .ps-opt.ps-brand .ps-ic{ width:40px; height:40px; background:#fff; }
#pstep .ps-opt.ps-brand .ps-ic img{ width:24px; height:24px; display:block; }
#pstep .ps-opt.ps-brand b{ font-size:12px; }

/* ── Champs ─────────────────────────────────────────────────────────────── */
#pstep .ps-field{ display:block; width:100%; height:46px; padding:0 14px; border:1px solid var(--ps-n-200); border-radius:12px;
  font:inherit; font-size:13.5px; background:#fff; margin-top:8px; color:inherit; }
#pstep .ps-field:focus{ outline:0; border-color:var(--gold-300); box-shadow:0 0 0 3px var(--gold-100); }
#pstep textarea.ps-field{ height:100px; padding:12px 14px; resize:vertical; }
#pstep .ps-row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#pstep .ps-mf{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:0 14px; height:50px; border:1px solid var(--ps-n-200); border-radius:14px; background:#fff; min-width:0; }
#pstep .ps-mf:focus-within{ border-color:var(--gold-300); box-shadow:0 0 0 3px var(--gold-100); }
#pstep .ps-mf img{ width:22px; height:22px; flex-shrink:0; display:block; }
#pstep .ps-mf input{ flex:1; min-width:0; border:0; outline:0; font:inherit; font-size:13.5px; background:none; color:inherit; padding:0; box-shadow:none; }
#pstep .ps-mf a{ font-size:12px; font-weight:700; color:var(--ps-gold-700); white-space:nowrap; border:1px solid #EADFC8; border-radius:999px;
  padding:5px 11px; background:var(--gold-50); text-decoration:none; }
#pstep .ps-mf2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#pstep .ps-mnote{ margin:8px 2px 0; font-size:12px; color:var(--ps-n-500); }

/* ── Puces ──────────────────────────────────────────────────────────────── */
#pstep .ps-chips{ display:flex; flex-wrap:wrap; gap:8px; }
#pstep .ps-chip{ display:inline-flex; align-items:center; position:relative; height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--ps-n-200);
  background:#fff; font-size:12.5px; font-weight:600; color:var(--ps-n-700); cursor:pointer; transition:all .15s; }
#pstep .ps-chip:hover{ border-color:var(--gold-300); background:var(--gold-50); }
#pstep .ps-chip:has(:checked), #pstep .ps-chip[aria-pressed=true]{ border-color:var(--gold-300); background:#FBF3DC; color:var(--ps-gold-700); box-shadow:0 0 0 3px rgba(212,178,108,.18); }
#pstep .ps-chip small{ margin-left:6px; font-size:10px; font-weight:700; color:var(--ps-n-400); }
#pstep .ps-quick{ margin-bottom:14px; }

/* ── Calendrier et horaires ─────────────────────────────────────────────── */
#pstep .ps-dt{ display:grid; grid-template-columns:1.1fr 1fr; gap:18px; }
#pstep .ps-cal{ border:1px solid var(--ps-n-200); border-radius:16px; padding:14px; background:#FCFBF8; }
#pstep .ps-cal-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
#pstep .ps-cal-h b{ font-size:14px; text-transform:capitalize; }
#pstep .ps-cal-h button{ width:30px; height:30px; border-radius:50%; border:1px solid var(--ps-n-200); background:#fff; }
#pstep .ps-cal-h button:disabled{ opacity:.35; cursor:default; }
#pstep .ps-cal-g{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
#pstep .ps-cal-g em{ font-style:normal; font-size:10px; font-weight:800; color:var(--ps-n-400); padding:4px 0; }
#pstep .ps-day{ height:36px; border-radius:10px; border:1px solid transparent; background:none; font-size:13px; font-weight:700; color:var(--ps-n-900); padding:0; }
#pstep .ps-day:hover{ background:var(--gold-50); border-color:var(--gold-200); }
#pstep .ps-day.off{ color:#CFCAC0; pointer-events:none; font-weight:500; }
#pstep .ps-day.today{ border-color:var(--gold-300); }
#pstep .ps-day.sel{ background:var(--ps-gold-grad); color:#fff; box-shadow:0 4px 10px rgba(160,120,40,.3); }
#pstep .ps-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
#pstep .ps-slot{ height:40px; border-radius:12px; border:1px solid var(--ps-n-200); background:#fff; font-size:13px; font-weight:700; color:var(--ps-n-900); }
#pstep .ps-slot:hover{ border-color:var(--gold-300); background:var(--gold-50); }
#pstep .ps-slot:disabled{ color:#CFCAC0; background:#fff; border-color:var(--ps-n-100); cursor:default; }
#pstep .ps-slot[aria-pressed=true]{ background:#14182B; color:#fff; border-color:#14182B; box-shadow:0 6px 14px rgba(20,24,43,.25); }
#pstep .ps-slot-other{ font-size:12px; font-weight:600; color:var(--ps-n-600); }
#pstep .ps-free{ display:flex; gap:8px; align-items:center; margin-top:8px; }
#pstep .ps-free input{ flex:1; min-width:0; height:36px; padding:0 10px; border:1px solid var(--ps-n-200); border-radius:10px; font:inherit; font-size:13px; }
#pstep .ps-hint{ margin:8px 0 0; font-size:12px; color:var(--ps-n-500); }

/* ── Détails ────────────────────────────────────────────────────────────── */
#pstep .ps-dd{ border:1px solid var(--ps-n-200); border-radius:16px; background:#FCFBF8; overflow:visible; }
#pstep .ps-dd summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; font-weight:700; font-size:14px; }
#pstep .ps-dd summary::-webkit-details-marker{ display:none; }
#pstep .ps-dd .ps-cnt{ margin-left:auto; font-size:12px; font-weight:600; color:var(--ps-n-500); }
#pstep .ps-dd summary svg{ width:18px; height:18px; transition:transform .2s; }
#pstep .ps-dd[open] summary svg{ transform:rotate(180deg); }
#pstep .ps-in{ padding:4px 16px 16px; border-top:1px solid #EEE9DE; background:#fff; border-radius:0 0 16px 16px; }
#pstep .ps-in .ps-sec{ margin:14px 0 0; }
#pstep .ps-lim{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ps-n-600); cursor:pointer; }
#pstep .ps-deadline{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:10px; font-size:12.5px; color:var(--ps-n-600); }

/* ── Récapitulatif et pied ──────────────────────────────────────────────── */
/* #4864 (14/10) : le récapitulatif en grille de la maquette de Kevin du 08/10 (`.rcp`, `.rg`, `.kpill`, `.rwhere`). */
#pstep .ps-recap{ margin-top:14px; padding:14px 16px; border-radius:16px; border:1px solid #EFE6D2;
  background:linear-gradient(180deg,#FFFEFB,#FBF6E8); }
#pstep .ps-recap h5{ margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ps-gold-700); }
#pstep .ps-rg{ display:grid; grid-template-columns:1.3fr 1fr 1.2fr 1fr; gap:10px 14px; }
#pstep .ps-rg em{ display:block; font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ps-n-500); }
#pstep .ps-rg strong{ display:block; margin-top:3px; font-size:13.5px; color:var(--ps-n-900); }
#pstep .ps-kpill{ display:inline-flex; align-items:center; gap:6px; margin-top:3px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:#E8F0FD; color:#2F5FA8; }
#pstep .ps-kpill[data-kind="trial"]{ background:#E6F4EC; color:#1B7A4E; }
#pstep .ps-kpill[data-kind="onboarding"]{ background:var(--gold-50); color:var(--ps-gold-700); }
#pstep .ps-rwhere{ grid-column:1/-1; padding-top:10px; border-top:1px solid #EFE6D2; min-width:0; }
#pstep .ps-rwhere b{ display:block; font-size:13.5px; }
#pstep .ps-rwhere span{ display:block; font-size:12.5px; color:var(--ps-n-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:640px){
  #pstep .ps-rg{ grid-template-columns:1fr 1fr; }
  /* « Retour » et « Envoyer la proposition… » sur une rangée, le bouton doré prend le reste */
  #pstep .ps-ft{ flex-wrap:wrap; padding:12px 16px; }
  #pstep .ps-ft .ps-sum:empty{ display:none; }
  #pstep .ps-ft .ps-sum{ order:-1; flex:1 1 100%; }
  #pstep .ps-ft .ps-btn.ps-gold{ flex:1 1 auto; padding:0 14px; }
}
#pstep .ps-ft{ display:flex; align-items:center; gap:10px; padding:14px 24px; border-top:1px solid var(--ps-n-100); background:#fff; }
#pstep .ps-btn{ height:44px; padding:0 20px; border-radius:999px; border:1px solid var(--ps-n-200); background:#fff; font-weight:700; font-size:13.5px; color:var(--ps-n-900); }
#pstep .ps-btn:hover{ border-color:var(--gold-300); }
#pstep .ps-btn.ps-gold{ margin-left:auto; border:1px solid rgba(196,165,89,.55); color:var(--ps-n-900);
  background:linear-gradient(115deg,rgba(232,204,110,.85),rgba(245,232,190,.95) 50%,rgba(220,196,120,.85)); box-shadow:0 4px 12px rgba(160,120,40,.18); }
#pstep .ps-btn.ps-gold:hover{ box-shadow:0 8px 18px rgba(160,120,40,.28); transform:translateY(-1px); }
#pstep .ps-btn.ps-gold[disabled]{ opacity:.45; pointer-events:none; }
#pstep .ps-sum{ margin-right:auto; font-size:12px; color:var(--ps-n-500); }

/* Les refus du serveur (champ manquant, fil clos), sous le champ visé. */
#pstep .pe-err{ display:block; margin:6px 2px 0; font-size:11.5px; font-weight:600; color:var(--red, #B3261E); }
#pstep .ps-banner{ margin:0 0 14px; padding:10px 12px; border-radius:12px; background:#FDF1EF; }

@media (max-width:640px){
  #pstep{ padding:10px; }
  #pstep .ps-cards{ grid-template-columns:1fr; }
  #pstep .ps-cards.ps-five{ grid-template-columns:repeat(2,1fr); }
  #pstep .ps-dt{ grid-template-columns:1fr; }
  #pstep .ps-steps button span{ display:none; }
  #pstep .ps-hd{ padding:16px; }
  #pstep .ps-hd .ps-back{ display:none; }
  #pstep .ps-x{ margin-left:auto; }
  #pstep .ps-steps{ padding:12px 16px 0; }
  #pstep .ps-body{ padding:16px; }
  #pstep .ps-ft{ padding:12px 16px; flex-wrap:wrap; }
  #pstep .ps-sum{ order:-1; flex-basis:100%; margin:0; }
  #pstep .ps-mf2, #pstep .ps-row2{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  #pstep *{ transition:none !important; animation:none !important; }
}