/* =====================================================
 * R6 — Recruiter Onboarding wizard (real app).
 * Pixel-perfect port of the canonical mockups:
 *   /mockups/recruiter/onboarding (pb-shell + rb- form)
 *   /mockups/recruiter/team        (rt-team-card rows)
 * No inline CSS — every rule lives here.
 * ===================================================== */

/* === Shell tokens === */
.pb-shell {
  --pb-bg: #FFFFFF;
  --pb-surface: #FFFFFF;
  --pb-surface-warm: #FBF8F1;
  --pb-border: #E5E5E5;
  --pb-border-soft: #EFEAE0;
  --pb-text: #0A0A0A;
  --pb-text-muted: #737373;
  --pb-text-dim: #A3A3A3;
  --pb-gold-main: #A38543;
  --pb-gold-deep: #5A4A25;
  --pb-grad: linear-gradient(99deg, #BD9733 0%, #E5D29F 25%, #E8CC6E 50%, #E5D29F 75%, #FFF4C2 100%);
  --pb-grad-dark: linear-gradient(135deg, #5A4A25 0%, #422D05 100%);
  --pb-radius: 12px;
  --pb-radius-sm: 8px;
  --pb-stepbar-h: 64px;
  font-family: 'Geist', system-ui, sans-serif;
  background: var(--pb-bg);
  color: var(--pb-text);
  min-height: 100vh;
}

/* === Sticky stepper === */
.pb-stepbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--pb-border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.pb-brand {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--pb-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pb-brand-logo { height: 24px; width: auto; }

.pb-steps {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: center;
}
.pb-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pb-step-num {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  border: 0;
  background: #F4F4F5;
  color: var(--pb-text-dim);
  text-decoration: none;
  cursor: pointer;
}
.pb-step-num.done { background: var(--pb-grad); color: #000; }
.pb-step-num.active { background: #000; color: #E8CC6E; box-shadow: 0 0 0 3px rgba(163,133,67,.18); }
.pb-step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--pb-text-muted);
  white-space: nowrap;
  text-decoration: none;
}
.pb-step-label.active { color: var(--pb-text); font-weight: 600; }
.pb-step-line {
  width: 36px;
  height: 1px;
  background: var(--pb-border);
  margin: 0 12px;
}
.pb-step-line.done { background: linear-gradient(90deg, var(--pb-gold-main), #E8CC6E); height: 2px; }

.pb-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pb-help-link {
  font-size: 13px;
  color: var(--pb-text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid var(--pb-border);
  transition: all .15s ease;
}
.pb-help-link:hover { border-color: var(--pb-gold-main); color: var(--pb-gold-main); }
.pb-exit {
  font-size: 13px;
  color: var(--pb-text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 9999px;
}
.pb-exit:hover { background: rgba(163,133,67,.06); color: var(--pb-gold-main); }

/* === Single-column layout === */
.pb-split {
  display: flex;
  justify-content: center;
  padding: 0 24px;
}
.pb-pane {
  padding: 18px 24px 24px;
  background: #FFFFFF;
}
.pb-pane-right {
  background: #FFFFFF;
  padding: 24px 32px 40px;
  font-size: 12px;
  max-width: 820px;
  width: 100%;
  /* Colonne centrée dans la page : marges auto (le `width:100%` fixe la base
     flex à 100%, donc justify-content seul ne recentrait pas). */
  margin-inline: auto;
}

/* ============ FORM (single column) ============ */
/* Demande produit : contenu de chaque step centré (diffère des mockups). On
   centre le texte + les blocs, en gardant les cartes/footer pleine largeur pour
   ne pas casser les champs et les grilles. */
.rb-form { display: flex; flex-direction: column; gap: 24px; max-width: 100%; align-items: center; text-align: center; }
.rb-step-panel.active { display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.rb-step-panel.active > *, .rb-form > * { width: 100%; }
.rb-form-head { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.rb-form-footer { justify-content: center; }
.rb-step-counter {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  color: #A38543; text-transform: uppercase;
}
.rb-step-title {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 22px; font-weight: 700; color: #0A0A0A; line-height: 1.15;
}
.rb-step-title em { font-style: italic; color: #A38543; font-weight: 400; }
.rb-step-sub { font-size: 12px; color: #737373; line-height: 1.5; }

.rb-section-card {
  background: #FFFFFF;
  border: 1px solid #EFEAE0;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.rb-section-card-title {
  font-size: 13px; font-weight: 700; color: #0A0A0A;
}
.rb-grid { display: grid; gap: 12px; }
.rb-grid.two { grid-template-columns: 1fr 1fr; }

.rb-field { display: flex; flex-direction: column; gap: 5px; }
.rb-field-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: #525252; text-transform: uppercase;
}
.rb-field-label .req { color: #BD9733; margin-left: 2px; }
.rb-field-label .opt { color: #A3A3A3; font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 4px; }
.rb-input,
.rb-textarea,
.rb-select {
  width: 100%;
  border: 1px solid #E5E0D4;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #0A0A0A;
  transition: border-color .15s ease, background .15s ease;
  box-sizing: border-box;
}
.rb-input:focus,
.rb-textarea:focus,
.rb-select:focus {
  outline: none;
  border-color: #BD9733;
  background: #FFFFFF;
}
.rb-textarea { min-height: 84px; resize: vertical; }
.rb-field-hint { font-size: 11px; color: #A3A3A3; line-height: 1.5; }

/* SIRET inline lookup row */
.rb-siret-row { display: flex; gap: 8px; align-items: stretch; }
.rb-siret-row .rb-input { flex: 1; }

/* ── SIRET — statut de vérification inline (succès / erreur / indisponible) ── */
.rb-siret-status {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--pb-radius-sm);
  border: 1px solid transparent;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
  animation: rb-siret-in 180ms ease-out;
}
.rb-siret-status.is-loading,
.rb-siret-status.is-success,
.rb-siret-status.is-error,
.rb-siret-status.is-warning { display: flex; }

@keyframes rb-siret-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rb-siret-status-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  position: relative;
}
.rb-siret-status-text { flex: 1; }

/* Loading : anneau qui tourne */
.rb-siret-status.is-loading {
  background: #FBF8F1;
  border-color: var(--pb-border-soft);
  color: var(--pb-text-muted);
}
.rb-siret-status.is-loading .rb-siret-status-icon {
  border: 2px solid #E5D29F;
  border-top-color: var(--pb-gold-main);
  animation: rb-siret-spin 700ms linear infinite;
}
@keyframes rb-siret-spin { to { transform: rotate(360deg); } }

/* Succès : vert + check */
.rb-siret-status.is-success {
  background: #F0FaF3;
  border-color: #BFE6CC;
  color: #1E6B3A;
}
.rb-siret-status.is-success .rb-siret-status-icon { background: #1E9E4B; }
.rb-siret-status.is-success .rb-siret-status-icon::after {
  content: "";
  position: absolute;
  left: 5px; top: 2.5px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Erreur (SIRET invalide / introuvable) : rouge + croix */
.rb-siret-status.is-error {
  background: #FDF2F2;
  border-color: #F3C9C9;
  color: #B22424;
}
.rb-siret-status.is-error .rb-siret-status-icon { background: #D33A3A; }
.rb-siret-status.is-error .rb-siret-status-icon::before,
.rb-siret-status.is-error .rb-siret-status-icon::after {
  content: "";
  position: absolute;
  left: 7px; top: 3.5px;
  width: 2px; height: 9px;
  background: #fff;
}
.rb-siret-status.is-error .rb-siret-status-icon::before { transform: rotate(45deg); }
.rb-siret-status.is-error .rb-siret-status-icon::after  { transform: rotate(-45deg); }

/* Indisponible (service / clé) : ambre + point d'exclamation */
.rb-siret-status.is-warning {
  background: #FEF8EC;
  border-color: #F2E0B0;
  color: #8A6411;
}
.rb-siret-status.is-warning .rb-siret-status-icon { background: #D69A1E; }
.rb-siret-status.is-warning .rb-siret-status-icon::before {
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 2px; height: 6px;
  background: #fff;
}
.rb-siret-status.is-warning .rb-siret-status-icon::after {
  content: "";
  position: absolute;
  left: 7px; top: 11px;
  width: 2px; height: 2px;
  background: #fff;
}

/* Bouton « Vérifier » en cours d'appel */
.ds-btn-outline.is-loading { opacity: .65; cursor: progress; }

/* Champ pré-rempli par le SIRET : flash doré bref */
.rb-input--filled {
  border-color: var(--pb-gold-main);
  box-shadow: 0 0 0 3px rgba(163, 133, 67, .18);
  transition: border-color .3s ease, box-shadow .3s ease;
}

/* ── SECTOR CARDS (Hospitality / Private) ── */
.rb-sector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rb-sector-card {
  position: relative;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 0;
}
.rb-sector-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.62) 100%);
  transition: background .2s ease;
}
.rb-sector-card:hover::before { background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.72) 100%); }
.rb-sector-card.is-selected {
  box-shadow: 0 0 0 3px #C9A84C, 0 0 0 5px rgba(201,168,76,0.25);
  border-color: transparent;
}
.rb-sector-card--hospitality { background-image: url('https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=600&q=80'); }
.rb-sector-card--private { background-image: url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=600&q=80'); }
.rb-sector-card-body {
  position: relative;
  z-index: 1;
  padding: 10px 14px 12px;
  width: 100%;
}
.rb-sector-card-title {
  font-size: 15px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  line-height: 1.2;
}
.rb-sector-card-sub {
  font-size: 10.5px; color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  margin-top: 2px; line-height: 1.4;
}

/* ── TYPE CHIPS ── */
.rb-type-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-type-chip {
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1.5px solid #E5E0D4;
  background: #FFFFFF;
  font-size: 12px; font-weight: 600;
  color: #525252;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  font-family: inherit;
}
.rb-type-chip:hover { border-color: #BD9733; color: #5A4A25; }
.rb-type-chip.is-selected {
  background: linear-gradient(99deg, #BD9733 0%, #E5D29F 25%, #E8CC6E 50%, #E5D29F 75%, #FFF4C2 100%);
  color: #000;
  border-color: transparent;
  font-weight: 700;
}
.rb-subsector { display: none; }
.rb-subsector.is-visible { display: block; }
.rb-sub-label { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #737373; margin-bottom: 8px; }

/* ── INTENT CARDS (Besoins) ── */
.rb-intent-cards { display: flex; flex-direction: column; gap: 12px; }
.rb-intent-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1.5px solid #E5E0D4;
  background: #FFFFFF;
  cursor: pointer;
  transition: all .15s ease;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.rb-intent-card:hover { border-color: #BD9733; background: #FDFAF3; }
.rb-intent-card.is-active {
  background: #FBF8F1;
  border-color: #C9A84C;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.14);
}
.rb-intent-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: #FBF4E0;
  border: 1.5px solid rgba(189,151,51,0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rb-intent-body { flex: 1; }
.rb-intent-title { font-size: 14px; font-weight: 600; color: #0A0A0A; margin-bottom: 2px; }
.rb-intent-sub { font-size: 11.5px; color: #737373; }
.rb-intent-arrow { color: #C9A84C; font-size: 16px; opacity: 0.7; }

/* ── Detail block revealed when a precise need is chosen ── */
.rb-besoin-detail { display: none; }
.rb-besoin-detail.is-visible { display: flex; flex-direction: column; gap: 14px; }

/* ── Pills ── */
.rb-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-pill {
  padding: 7px 14px;
  border-radius: 9999px;
  border: 1px solid #E5E0D4;
  background: #FFFFFF;
  font-size: 12px; font-weight: 600;
  color: #525252;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.rb-pill:hover { border-color: #BD9733; }
.rb-pill.is-selected,
.rb-pill:has(input:checked) {
  background: linear-gradient(99deg, #BD9733 0%, #E5D29F 25%, #E8CC6E 50%, #E5D29F 75%, #FFF4C2 100%);
  color: #000;
  border-color: transparent;
}

/* ── TEAM ROWS (rt-team-card port) ── */
.rb-team-list { display: flex; flex-direction: column; gap: 6px; }
.rb-team-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 3px rgba(0,0,0,.03), 0 4px 12px rgba(0,0,0,.02);
}
.rb-team-av {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,.92);
  background: linear-gradient(135deg, #5A4A25, #A38543);
  flex-shrink: 0;
}
.rb-team-info { flex: 1; }
.rb-team-info .rb-field + .rb-field { margin-top: 6px; }
.rb-team-name { font-size: 12px; font-weight: 700; color: #1a1a1a; }
.rb-team-role { font-size: 10px; color: #888; margin-top: 1px; }
.rb-team-remove {
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,.06);
  font-size: 14px; line-height: 1;
  color: #999; background: none; cursor: pointer;
  transition: all .12s;
}
.rb-team-remove:hover { border-color: #e88; color: #e44; }

.rb-team-add-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.rb-team-add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px;
  border-radius: 9999px;
  border: 1px dashed rgba(163,133,67,.35);
  font-size: 12px; font-weight: 600;
  color: #A38543; cursor: pointer;
  background: none; font-family: inherit;
}
.rb-team-add-btn:hover { border-color: #A38543; background: rgba(163,133,67,.04); }

/* ── FILE UPLOAD DROPS (Photos) ── */
.rb-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rb-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed #E5E0D4;
  border-radius: 12px;
  padding: 22px 16px;
  background: #FBF8F1;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.rb-drop:hover { border-color: #BD9733; background: #FDFAF3; }
.rb-drop-icon { font-size: 22px; color: #A38543; }
.rb-drop-title { font-size: 12px; font-weight: 600; color: #0A0A0A; }
.rb-drop-sub { font-size: 10px; color: #A3A3A3; }
.rb-drop-filename { font-size: 11px; color: #A38543; font-weight: 600; }

/* ── VIDEO ── */
.rb-video-block { display: flex; flex-direction: column; gap: 10px; }
.rb-video-status { font-size: 11px; color: #737373; }
.rb-video-status.error { color: #B45309; }

/* ── INFO / VALUE PROP ── */
.rb-info-card {
  display: flex; gap: 10px; align-items: flex-start;
  background: #FBF8F1;
  border: 1px solid #EFEAE0;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 12px; color: #4A4640; line-height: 1.55;
}
.rb-info-icon { flex-shrink: 0; }
.rb-info-card strong { color: #B8912A; font-weight: 600; }

/* ── VALIDATION (welcome) HERO — AC6.7 ── */
.rb-welcome-hero {
  background: #F9F6F0; border-radius: 12px;
  padding: 20px 20px 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  border: 1px solid #EFEAE0;
}
.rb-welcome-check {
  width: 52px; height: 52px; border-radius: 50%;
  background: #FFFFFF; border: 2px solid #C9A84C;
  display: flex; align-items: center; justify-content: center;
  color: #C9A84C;
}
.rb-welcome-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 20px; font-weight: 700; color: #0A0A0A;
}
.rb-welcome-meta { font-size: 12px; color: #737373; display: flex; gap: 8px; align-items: center; }
.rb-status-dot { color: #B45309; font-weight: 600; }
.rb-status-dot::before { content: '● '; color: #D97706; }
.rb-welcome-sub { text-align: center; }

/* ── Recap list ── */
.rb-recap { display: flex; flex-direction: column; gap: 8px; }
.rb-recap-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 8px 0; border-bottom: 1px solid #F1ECE0; }
.rb-recap-row:last-child { border-bottom: none; }
.rb-recap-key { color: #737373; }
.rb-recap-val { color: #0A0A0A; font-weight: 600; text-align: right; }

/* ── Form footer ── */
.rb-form-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 8px;
}
.rb-form-footer .spacer { flex: 1; }

/* Responsive */
@media (max-width: 900px) {
  .pb-split { padding: 0 12px; }
  .pb-pane-right { padding: 18px 16px; }
}
@media (max-width: 760px) {
  .pb-step-label { display: none; }
  .pb-step-line { width: 16px; margin: 0 6px; }
}
@media (max-width: 600px) {
  .rb-grid.two { grid-template-columns: 1fr; }
  .rb-sector-grid { grid-template-columns: 1fr; }
  .rb-upload-grid { grid-template-columns: 1fr; }
  .rb-team-add-row { grid-template-columns: 1fr; }
  /* Onboarding top bar: drop the (future) help link, hide the long exit label
     and tighten so logo + steps fit instead of overflowing on narrow screens. */
  .pb-help-link { display: none; }
  .pb-header-right { gap: 8px; }
  .pb-step-line { width: 8px; margin: 0 4px; }
  .pb-exit { font-size: 0; padding: 6px 8px; }
  .pb-exit::after { content: "Quitter"; font-size: 13px; }
}

/* ── Vérification email par code (OTP) — R6 ── */
.rb-otp-card { align-items: center; }
.rb-otp-row { display: flex; gap: 8px; justify-content: center; margin: 8px 0 4px; }
.rb-otp-box { width: 44px; height: 54px; border-radius: 10px; border: 1.5px solid #E5E0D4; background: #F9F6F0; font-family: 'Geist', system-ui, sans-serif; font-size: 22px; font-weight: 600; color: #0A0A0A; text-align: center; outline: none; transition: border-color .15s ease; }
.rb-otp-box:focus { border-color: #BD9733; background: #FBF8F0; }
.rb-otp-resend { font-size: 12px; color: #737373; text-align: center; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.rb-otp-resend-form { display: inline; }
.rb-otp-resend-link { background: none; border: none; padding: 0; color: #A38543; font-weight: 500; font-family: inherit; font-size: 12px; cursor: pointer; text-decoration: none; }
.rb-otp-resend-link:hover { text-decoration: underline; }