/*
  Recruiter — « Ma Shortlist » (#2374).
  Reprise de la feuille de la maquette validée /mockups/recruiter/shortlist
  (refonte 15/07, allègement des filtres #1910), scopée .page-recruiter-shortlist
  comme elle. Les blocs propres à la maquette ne sont pas repris : boîte
  « Questions à trancher », poignée de glissement (l'ordre manuel se lit via le
  tri « Manuel », la poignée de réordonnancement arrive plus tard).
  Les ajouts de production sont regroupés en fin de fichier.
  Zéro CSS inline dans la vue.
*/

/* ═══ PAGE SHORTLIST (refonte maquette client 15/07) ═══ */
.page-recruiter-shortlist { box-sizing: border-box; }
.page-recruiter-shortlist *, .page-recruiter-shortlist *::before, .page-recruiter-shortlist *::after { box-sizing: border-box; }
.page-recruiter-shortlist { min-height: 100vh; background: #FFFFFF; font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; color: #2C2C2C; }
.page-recruiter-shortlist button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
.page-recruiter-shortlist a { text-decoration: none; color: inherit; }
.page-recruiter-shortlist ::-webkit-scrollbar { height: 7px; width: 7px; }
.page-recruiter-shortlist ::-webkit-scrollbar-thumb { background: var(--gold-300); border-radius: 4px; }
.page-recruiter-shortlist .ic { width: 16px; height: 16px; flex-shrink: 0; }
.page-recruiter-shortlist .ic-sm { width: 13px; height: 13px; flex-shrink: 0; }

.page-recruiter-shortlist .wrap { max-width: 1240px; margin: 0 auto; padding: 30px 26px 96px; }

/* ─── Titre ─── */
.page-recruiter-shortlist h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 32px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; color: #2C2C2C; }
/* inline-block + padding droit : sinon la dernière lettre en italique sort de la boîte de peinture du background-clip:text et se retrouve rognée */
.page-recruiter-shortlist h1 em { font-style: italic; font-weight: 600; display: inline-block; padding-right: .14em; margin-right: -.14em; background: var(--gold-text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.page-recruiter-shortlist .lead { font-size: 14px; color: #8A857A; margin-top: 8px; max-width: 720px; line-height: 1.5; }

.page-recruiter-shortlist .blk-lbl { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600); margin: 32px 0 12px; }
.page-recruiter-shortlist .lbl-hint { font-family: 'Geist', sans-serif; font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #A8A399; margin-left: 6px; }

/* ─── Etablissement + Pole (#1910, retour #2373) ───
   Les deux carrousels de vignettes photo etaient trop lourds. Remplaces par des
   rangees empilees "libelle + pastilles", meme logique que les filtres de la page
   Candidatures (.ra-fstack) pour garder les deux ecrans coherents. */
/* #2373 (Tatianna) / R8 (revue Loïc 06/08) : bandeau split 50/50, barre de
   recherche à gauche, facettes établissement/pôle à droite. */
/* #2629 (Tatianna) — « Établissement » et « Pôle de recrutement » étaient calés
   dans la colonne de droite du split : leurs libellés tombaient au milieu de la
   page alors que le titre, le sous-titre et la bande des dossiers partent tous
   du même axe. On empile la recherche puis les facettes, avec le retrait
   horizontal du reste de la page (32px, comme .page-header / .jobs-section),
   et un peu plus d'air sous le sous-titre. */
.page-recruiter-shortlist .filters-row { display: block; padding: 0 32px; margin-top: 30px; }
.page-recruiter-shortlist .filters-facets { min-width: 0; margin-top: 20px; }

/* Barre de recherche (calee sur .te-hero-search d'explorer, tokens partages) */
/* Empilee au-dessus des facettes (#2629) : on lui garde la demi-largeur du
   split precedent pour ne pas etirer le champ sur toute la page. */
.page-recruiter-shortlist .filters-search { min-width: 0; max-width: 594px; }
.page-recruiter-shortlist .prs-search {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 6px 6px 16px; background: #fff; border: 1px solid #E5E2DC; border-radius: 999px;
  box-shadow: 0 2px 14px rgba(44, 44, 44, .06); transition: border-color .15s, box-shadow .15s;
}
.page-recruiter-shortlist .prs-search:focus-within { border-color: var(--gold-200); box-shadow: 0 4px 18px rgba(163, 133, 67, .14); }
.page-recruiter-shortlist .prs-search > svg { width: 17px; height: 17px; color: #8A857A; flex-shrink: 0; }
.page-recruiter-shortlist .prs-search input[type="search"] {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13.5px; color: #2C2C2C; padding: 9px 0;
}
.page-recruiter-shortlist .prs-search input::placeholder { color: #8A857A; }
.page-recruiter-shortlist .prs-search button {
  flex-shrink: 0; height: 36px; padding: 0 20px; border: none; border-radius: 999px;
  background: var(--gold-fill); color: var(--on-gold); text-shadow: var(--on-gold-shadow);
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 8px rgba(163, 133, 67, .28); transition: filter .15s;
}
.page-recruiter-shortlist .prs-search button:hover { filter: brightness(1.04); }

/* #2629 — au-delà d'une rangée de pastilles (une Maison à plusieurs pôles), un
   libellé centré tombait au milieu de la pile : on l'ancre sur la première
   rangée. */
.page-recruiter-shortlist .fblock { display: flex; align-items: flex-start; gap: 14px; min-width: 0; position: relative; }
.page-recruiter-shortlist .fblock + .fblock { margin-top: 14px; }
.page-recruiter-shortlist .fblock .blk-lbl { margin: 0; min-width: 158px; flex-shrink: 0; padding-top: 8px; }
.page-recruiter-shortlist .poles { display: flex; gap: 8px; flex-wrap: wrap; overflow: visible; padding: 0; }
.page-recruiter-shortlist .pole {
  flex: 0 0 auto; width: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; border: 1px solid #E5E2DC; background: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: #4A4640;
  cursor: pointer; white-space: nowrap; transition: all .15s ease;
}
.page-recruiter-shortlist .pole:hover { border-color: var(--gold-300); background: var(--gold-50); }
.page-recruiter-shortlist .pole.on { border-color: var(--gold-400); background: var(--gold-50); color: var(--gold-800); font-weight: 600; }
.page-recruiter-shortlist .pole-n { font-size: 11px; font-weight: 600; color: #8A857A; }
.page-recruiter-shortlist .pole.on .pole-n { color: var(--gold-700); }

/* ─── Dossiers (postes ouverts / sourcing / non classe) ─── */
.page-recruiter-shortlist .postes-wrap { position: relative; }
.page-recruiter-shortlist .postes { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.page-recruiter-shortlist .poste { position: relative; flex: 0 0 128px; min-width: 128px; text-align: center; border: 1px solid #E5E2DC; border-radius: 12px; padding: 10px 9px; background: #fff; transition: all .15s ease; }
.page-recruiter-shortlist .poste:hover { border-color: var(--gold-300); }
.page-recruiter-shortlist .poste.on { border-color: var(--gold-400); background: var(--gold-50); box-shadow: 0 2px 10px rgba(163,133,67,.16); }
.page-recruiter-shortlist .poste .pt { font-size: 11.5px; font-weight: 600; }
.page-recruiter-shortlist .poste .pe { font-size: 9.5px; color: var(--gold-700); margin-top: 2px; }
/* #2630 — la phrase de la carte (« Sourcing hors annonce », « Le Castellet · … »)
   passe souvent sur deux lignes : l'icône se retrouvait centrée verticalement,
   décalée par rapport au début du texte. On l'ancre sur la première ligne. */
.page-recruiter-shortlist .poste .pm { margin-top: 6px; font-size: 9px; color: #8A857A; display: flex; align-items: flex-start; justify-content: center; gap: 4px; line-height: 1.35; }
.page-recruiter-shortlist .poste .pm > svg { margin-top: 0.5px; }
.page-recruiter-shortlist .poste .pc { margin-top: 7px; font-size: 9.5px; font-weight: 600; color: #4A4640; display: inline-flex; align-items: center; gap: 4px; background: #F4F2EE; border-radius: 999px; padding: 2px 8px; }
.page-recruiter-shortlist .poste .pc.pc-plain { background: transparent; padding-left: 0; padding-right: 0; }
.page-recruiter-shortlist .poste.allp { background: var(--gold-50); overflow: hidden; }
.page-recruiter-shortlist .poste.allp.on { background: var(--gold-50); }
.page-recruiter-shortlist .dtag { position: absolute; top: 8px; right: 8px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 7px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 5px; padding: 2px 5px; z-index: 2; }
/* #2630 — « environ 5 % d'espace en plus » entre le marqueur et le titre. */
.page-recruiter-shortlist .poste:not(.allp):not(.dossier-new) .pt { margin-top: 20px; }
.page-recruiter-shortlist .dtag-poste { color: var(--gold-700); background: var(--gold-50); border: 1px solid var(--gold-200); }
.page-recruiter-shortlist .dtag-chasse { color: #5B7A9B; background: #EEF2F6; border: 1px solid #C9D6E3; }
.page-recruiter-shortlist .dtag-unc { color: #B0432F; background: #FBF3E1; border: 1px solid var(--gold-200); }
.page-recruiter-shortlist .dossier-chasse { border-left: 3px solid #5B7A9B; }
.page-recruiter-shortlist .dossier-chasse.on { border-color: #5B7A9B; box-shadow: 0 2px 10px rgba(91,122,155,.18); }
/* #2630 — chaque nature de dossier se lit à sa ligne verticale : bleu sourcing,
   doré poste, terracotta non classé. */
.page-recruiter-shortlist .dossier-poste { border-left: 3px solid var(--gold-400); }
.page-recruiter-shortlist .dossier-poste.on { border-color: var(--gold-400); }
.page-recruiter-shortlist .dossier-unclassed { border-style: dashed; border-color: var(--gold-200); background: #FEFBF4; border-left: 3px solid #B0432F; }
.page-recruiter-shortlist .dossier-unclassed.on { border-left-color: #B0432F; }
.page-recruiter-shortlist .dossier-new { border-style: dashed; border-color: var(--gold-300); background: var(--gold-50); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.page-recruiter-shortlist .dossier-new:hover { background: var(--gold-100); }
.page-recruiter-shortlist .dn-plus { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--gold-300); display: grid; place-items: center; color: var(--gold-600); margin-bottom: 8px; }
.page-recruiter-shortlist .scroll-hint { position: absolute; top: calc(50% - 4px); right: 2px; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--gold-200); box-shadow: 0 2px 10px rgba(44,44,44,.14); display: grid; place-items: center; color: var(--gold-600); pointer-events: none; z-index: 3; animation: prsNudge 1.6s ease-in-out infinite; }
@keyframes prsNudge { 0%,100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(3px); } }
.page-recruiter-shortlist .postes-wrap::after { content: ""; position: absolute; top: 0; right: 0; width: 52px; height: 100%; background: linear-gradient(90deg, transparent, #FFFFFF); pointer-events: none; z-index: 1; }

/* ─── Toolbar (filtres + tri + export) ─── */
.page-recruiter-shortlist .toolbar { display: flex; align-items: center; gap: 12px; margin: 26px 0 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid #E5E2DC; border-radius: 14px; background: #fff; }
.page-recruiter-shortlist .fchips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-recruiter-shortlist .fcat { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #2C2C2C; }
.page-recruiter-shortlist .fcat::after { content: ':'; margin-left: 1px; color: #8A857A; }
.page-recruiter-shortlist .fchip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; font-size: 12.5px; font-weight: 600; color: #8A857A; background: #fff; border: 1px solid #E5E2DC; border-radius: 999px; transition: all .15s ease; }
.page-recruiter-shortlist .fchip:hover { border-color: var(--gold-300); color: var(--gold-700); }
.page-recruiter-shortlist .fchip.on { background: var(--gold-50); border-color: var(--gold-400); color: var(--gold-700); }
.page-recruiter-shortlist .fchip[data-val="perfect"].on { color: #1B7A4E; background: #EAF4EE; border-color: #BFE0CC; }
.page-recruiter-shortlist .fchip[data-val="strong"].on { color: #C0651F; background: #FBEFE2; border-color: #EBC9A6; }
.page-recruiter-shortlist .fchip[data-val="match"].on { color: var(--gold-500); background: var(--gold-50); border-color: var(--gold-200); }
.page-recruiter-shortlist .fsep { width: 1px; height: 20px; background: #E5E2DC; margin: 0 2px; }
.page-recruiter-shortlist .sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #8A857A; }
.page-recruiter-shortlist .sort-seg { display: inline-flex; background: #F4F2EE; border-radius: 999px; padding: 3px; }
.page-recruiter-shortlist .sort-seg button { font-size: 12.5px; font-weight: 600; color: #8A857A; padding: 6px 12px; border-radius: 999px; }
.page-recruiter-shortlist .sort-seg button.on { background: #fff; color: var(--gold-700); box-shadow: 0 1px 2px rgba(44,44,44,.05); }
.page-recruiter-shortlist .btn-export { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border: 1px solid #E5E2DC; border-radius: 999px; font-size: 13px; font-weight: 600; color: #4A4640; background: #fff; }
.page-recruiter-shortlist .btn-export:hover { border-color: var(--gold-300); color: var(--gold-700); }

/* ─── Liste shortlist ─── */
.page-recruiter-shortlist .clist { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.page-recruiter-shortlist .ccard { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; background: #fff; border: 1px solid #E5E2DC; border-radius: 14px; padding: 14px 18px; box-shadow: 0 1px 2px rgba(44,44,44,.05); transition: all .15s ease; position: relative; overflow: hidden; }
.page-recruiter-shortlist .ccard:hover { border-color: var(--gold-200); box-shadow: 0 4px 14px rgba(44,44,44,.07); }
.page-recruiter-shortlist .ccard.selected { border-color: var(--gold-400); background: var(--gold-50); }
.page-recruiter-shortlist .ccard.dragging { opacity: .5; border-style: dashed; }
.page-recruiter-shortlist .ccard.drag-over { border-color: var(--gold-400); box-shadow: 0 -2px 0 var(--gold-400); }
.page-recruiter-shortlist .checkbox { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #C9C5BC; display: grid; place-items: center; color: #fff; transition: all .15s ease; cursor: pointer; flex-shrink: 0; align-self: center; }
.page-recruiter-shortlist .checkbox svg { width: 12px; height: 12px; opacity: 0; }
.page-recruiter-shortlist .checkbox.checked { background: var(--gold-500); border-color: var(--gold-500); }
.page-recruiter-shortlist .checkbox.checked svg { opacity: 1; }
.page-recruiter-shortlist .cc-rank { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.page-recruiter-shortlist .cc-photo { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 15px; color: #fff; border: 2px solid #F4F2EE; overflow: hidden; }
/* Retour client B2 : vraies photos de talents (repli initiales si pas de photo) */
.page-recruiter-shortlist .cc-photo.has-photo,
.page-recruiter-shortlist .rsl-av.has-photo { background: #EDE7DA; padding: 0; overflow: hidden; }
.page-recruiter-shortlist .cc-photo.has-photo img,
.page-recruiter-shortlist .rsl-av.has-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.page-recruiter-shortlist .ph1 { background: linear-gradient(135deg, var(--gold-600), var(--gold-primary)); }
.page-recruiter-shortlist .ph2 { background: linear-gradient(135deg, #3d5a4a, #6e8f76); }
.page-recruiter-shortlist .ph3 { background: linear-gradient(135deg, var(--gold-700), var(--gold-400)); }
.page-recruiter-shortlist .ph4 { background: linear-gradient(135deg, #5B7A9B, #9db4c9); }
.page-recruiter-shortlist .ph5 { background: linear-gradient(135deg, #8a5a4a, #c69a86); }
.page-recruiter-shortlist .ph6 { background: linear-gradient(135deg, #6c5ab0, #a99ad6); }
.page-recruiter-shortlist .cc-badge-rank { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; color: var(--gold-700); }
.page-recruiter-shortlist .cc-badge-rank.top { color: #fff; text-shadow: var(--on-gold-shadow); background: linear-gradient(135deg, var(--gold-400), var(--gold-500) 50%, var(--gold-600)); border-radius: 999px; padding: 2px 9px; }

/* Audit 07/08 — fleches d'ordre manuel (tri « Manuel »). Deux boutons discrets
   sous la pastille de rang, visibles seulement quand ce tri est actif. */
.page-recruiter-shortlist .cc-move { display: flex; align-items: center; gap: 4px; }
.page-recruiter-shortlist .cc-move-form { display: inline-flex; margin: 0; }
.page-recruiter-shortlist .cc-move-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line-200, #e7e2d9); border-radius: 6px; background: #fff; color: var(--ink-500, #6b6459); cursor: pointer; transition: .15s; }
.page-recruiter-shortlist .cc-move-btn:hover { border-color: var(--gold-primary); color: var(--gold-600); }
.page-recruiter-shortlist .cc-move-btn svg { width: 12px; height: 12px; }
/* flex explicite (grow/shrink/basis) + display:block pour neutraliser un flex:1 1 0% hérité d'un ancien CSS compilé qui écrasait la largeur et alignait le nom et le poste sur une seule ligne */
.page-recruiter-shortlist .cc-info { flex: 0 0 200px; width: 200px; display: block; padding: 0; }
.page-recruiter-shortlist .cc-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* #2631 — pastille Verified officielle de la marque : marque T + dégradé doré +
   texte foncé, exactement comme .ts-card-vbadge (cards de recherche) et
   .page-recruiter-compare .verified (#1915). L'ancienne pastille locale (coche
   SVG, pilule 999px, doré maison) n'était pas la bonne. */
.page-recruiter-shortlist .vbadge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 5px; background: var(--gold-metal); font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #242424; line-height: 1; box-shadow: 0 1px 4px rgba(110,88,44,.28); }
.page-recruiter-shortlist .vbadge::before { content: ""; width: 9px; height: 11px; flex-shrink: 0; background: url("/images/verified-t.svg") no-repeat center/contain; }
.page-recruiter-shortlist .cc-poste-under { margin-top: 7px; display: flex; flex-direction: column; gap: 2px; }
.page-recruiter-shortlist .pa-lbl { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8A857A; }
.page-recruiter-shortlist .pa-val { font-size: 12.5px; font-weight: 600; color: #2C2C2C; }
.page-recruiter-shortlist .pa-sub { font-size: 11px; color: #8A857A; display: flex; align-items: center; gap: 4px; }

/* colonnes */
.page-recruiter-shortlist .cc-col { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; align-items: flex-start; height: 68px; justify-content: flex-start; }
.page-recruiter-shortlist .col-lbl { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8A857A; }
.page-recruiter-shortlist .col-val { font-size: 12.5px; font-weight: 600; color: #2C2C2C; }
.page-recruiter-shortlist .cc-dossiers-zone { flex: 1 1 136px; max-width: 220px; height: 68px; }
.page-recruiter-shortlist .cc-lieu { flex: 1 1 62px; max-width: 140px; }
.page-recruiter-shortlist .cc-dispo { flex: 1 1 82px; max-width: 160px; }
.page-recruiter-shortlist .cc-statut { flex: 1 1 122px; max-width: 200px; }
.page-recruiter-shortlist .cc-dispo .d-imm { color: #1B7A4E; }
.page-recruiter-shortlist .cc-match { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 108px; max-width: 190px; height: 68px; justify-content: flex-start; }
.page-recruiter-shortlist .mlbl { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8A857A; }
/* Le marqueur de match est rendu par le partial mockups/shared/_match_badge (niveau + pourcentage).
   L'ancien rendu local (.mtag + barre .mbar à largeur figée par niveau) a été retiré : il affichait
   une jauge qui ne correspondait pas au score réel du badge. */
.page-recruiter-shortlist .st-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.page-recruiter-shortlist .st-entretien { color: #1B7A4E; }
.page-recruiter-shortlist .st-contacte { color: #5B7A9B; }
.page-recruiter-shortlist .st-dispo { color: #1B7A4E; }
.page-recruiter-shortlist .st-nouveau { color: var(--gold-500); }
.page-recruiter-shortlist .sdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* zone dossiers dans la carte */
.page-recruiter-shortlist .cc-dossiers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page-recruiter-shortlist .dchip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 3px 4px 3px 9px; }
.page-recruiter-shortlist .dchip-poste { color: var(--gold-700); background: var(--gold-50); border: 1px solid var(--gold-200); }
.page-recruiter-shortlist .dchip-chasse { color: #5B7A9B; background: #EEF2F6; border: 1px solid #C9D6E3; }
.page-recruiter-shortlist .dchip-x { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; line-height: 1; color: inherit; opacity: .55; background: none; }
.page-recruiter-shortlist .dchip-x:hover { opacity: 1; background: rgba(0,0,0,.06); }
.page-recruiter-shortlist .dchip-add { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: #8A857A; border: 1px dashed #C9C5BC; border-radius: 999px; padding: 3px 9px; background: #fff; }
.page-recruiter-shortlist .dchip-add:hover { border-color: var(--gold-300); color: var(--gold-700); border-style: solid; }
.page-recruiter-shortlist .dchip-add svg { width: 11px; height: 11px; }

/* actions laterales */
.page-recruiter-shortlist .cc-side { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.page-recruiter-shortlist .cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; font-size: 11.5px; font-weight: 600; border-radius: 999px; transition: all .15s ease; white-space: nowrap; width: 104px; }
.page-recruiter-shortlist .cbtn.primary { background: var(--gold-fill); color: #fff; text-shadow: 0 1px 2px rgba(130,90,25,.35); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 3px 12px rgba(207,160,78,.3); }
.page-recruiter-shortlist .cbtn.primary:hover { transform: translateY(-1px); filter: brightness(1.04); }
.page-recruiter-shortlist .cbtn.ghost { background: #fff; border: 1px solid #E5E2DC; color: #4A4640; }
.page-recruiter-shortlist .cbtn.ghost:hover { border-color: var(--gold-300); color: var(--gold-700); }
.page-recruiter-shortlist .cbtn.danger { background: #fff; border: 1px solid #F0D9D1; color: #B0432F; }
.page-recruiter-shortlist .cbtn.danger:hover { background: #FBF4F1; }


/* ─── Note + boite d'arbitrage ─── */

/* ─── Barre comparer flottante (systeme Talents existant) ─── */
.page-recruiter-shortlist .rsl-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: linear-gradient(#fffdf8, #fffdf8) padding-box, var(--gold-metal) border-box; border: 1.5px solid transparent; color: #2C2C2C; border-radius: 999px; padding: 14px 22px; display: none; align-items: center; gap: 22px; box-shadow: 0 10px 32px rgba(163,133,67,.25); z-index: 200; }
.page-recruiter-shortlist .rsl-bar.visible { display: flex; }
.page-recruiter-shortlist .rsl-bar-info { display: flex; align-items: center; gap: 10px; }
/* pile de photos des Talents sélectionnés (avatars qui se chevauchent) */
.page-recruiter-shortlist .rsl-avatars { display: flex; align-items: center; }
.page-recruiter-shortlist .rsl-avatars:empty { display: none; }
.page-recruiter-shortlist .rsl-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; border: 2px solid #fffdf8; box-shadow: 0 1px 4px rgba(44,44,44,.18); margin-left: -11px; flex-shrink: 0; }
.page-recruiter-shortlist .rsl-av:first-child { margin-left: 0; }
.page-recruiter-shortlist .rsl-av-more { background: #F4F2EE; color: var(--gold-700); font-size: 11px; }
.page-recruiter-shortlist .rsl-bar-count { font-weight: 700; font-size: 18px; color: var(--gold-600); }
.page-recruiter-shortlist .rsl-bar-lbl { font-size: 14px; }
.page-recruiter-shortlist .rsl-bar-hint { font-size: 12px; color: #A8A399; }
.page-recruiter-shortlist .rsl-bar-actions { display: flex; align-items: center; gap: 14px; }
.page-recruiter-shortlist .rsl-bar-clear { color: #8A857A; font-size: 13px; font-weight: 600; text-decoration: underline; }
.page-recruiter-shortlist .rsl-bar-clear:hover { color: var(--gold-700); }
/* #2633 — le bouton portait un doré maison (110deg, un cran plus clair) que les
   autres CTA de l'app. On reprend le doré canonique du design system. */
.page-recruiter-shortlist .rsl-bar-go { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 34px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--on-gold); text-shadow: var(--on-gold-shadow); background: var(--gold-fill); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 14px rgba(207,160,78,.3); transition: all .15s ease; }
.page-recruiter-shortlist .rsl-bar-go:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }
.page-recruiter-shortlist .rsl-bar-go:disabled { opacity: .4; cursor: not-allowed; }

/* ─── Picker "ranger dans un dossier" ─── */
.page-recruiter-shortlist .dpicker { position: absolute; min-width: 250px; background: #fff; border: 1px solid #E5E2DC; border-radius: 12px; box-shadow: 0 12px 30px rgba(44,44,44,.16); padding: 6px; z-index: 210; display: none; }
.page-recruiter-shortlist .dpicker.show { display: block; }
.page-recruiter-shortlist .dp-title { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A857A; padding: 8px 10px 6px; }
.page-recruiter-shortlist .dp-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 12.5px; color: #4A4640; }
.page-recruiter-shortlist .dp-item:hover { background: var(--gold-50); color: var(--gold-700); }
.page-recruiter-shortlist .dp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.page-recruiter-shortlist .dp-dot.poste { background: var(--gold-500); }
.page-recruiter-shortlist .dp-dot.chasse { background: #5B7A9B; }
.page-recruiter-shortlist .dp-new { width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--gold-700); border-top: 1px solid #F4F2EE; margin-top: 4px; }
.page-recruiter-shortlist .dp-new:hover { background: var(--gold-50); }

@media (max-width: 900px) { .page-recruiter-shortlist .filters-row { padding: 0 18px; } .page-recruiter-shortlist .filters-search { max-width: none; } .page-recruiter-shortlist .fblock { flex-wrap: wrap; gap: 8px; } .page-recruiter-shortlist .fblock .blk-lbl { min-width: 0; flex: 1 1 100%; } }
@media (max-width: 1150px) { .page-recruiter-shortlist .cc-dossiers-zone, .page-recruiter-shortlist .cc-statut { display: none; } }
@media (max-width: 1000px) { .page-recruiter-shortlist .cc-side { flex-direction: row; width: 100%; margin-left: 0; justify-content: flex-end; border-top: 1px solid #F4F2EE; padding-top: 12px; } .page-recruiter-shortlist .cbtn { width: auto; } }

/* La maquette colorait la pastille de statut en style inline : ici en CSS. */
.page-recruiter-shortlist .st-veille { color: #8A857A; }
.page-recruiter-shortlist .st-entretien .sdot { background: #1B7A4E; }
.page-recruiter-shortlist .st-contacte .sdot { background: #5B7A9B; }
.page-recruiter-shortlist .st-dispo .sdot { background: #1B7A4E; }
.page-recruiter-shortlist .st-nouveau .sdot { background: var(--gold-500); }
.page-recruiter-shortlist .st-veille .sdot { background: #B8B2A6; }

/* Colonne Match : la maquette pose un badge Grille de Match, on garde la
   mention Brique 3 (aucun score IA hors recherche) au même gabarit. */
.page-recruiter-shortlist .cc-future { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--gold-600); background: #F6F1E4; border: 1px solid #E4DECF; border-radius: 100px; padding: 4px 10px; white-space: nowrap; }

/* ══════════════════════════════
   AJOUTS DE PRODUCTION
   (contrôles réels que la maquette simulait en JS de démo)
══════════════════════════════ */

/* Le lien de dossier remplace le <button> de la maquette. */
/* #2630 — les chips « 2 talents » / « 0 talent » sautaient d'une carte à l'autre
   dès qu'un titre passait sur deux lignes. Les cartes sont des colonnes de même
   hauteur (la bande est en flex) : le chip est poussé en bas par margin-top:auto,
   donc toujours sur la même ligne. */
.page-recruiter-shortlist a.poste,
.page-recruiter-shortlist span.poste { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.page-recruiter-shortlist .poste .pc { margin-top: auto; align-self: center; }
.page-recruiter-shortlist .poste .pm { margin-bottom: 8px; }

/* « Nouveau dossier » : <details> plutôt qu'une alerte de démo. */
.page-recruiter-shortlist details.dossier-new { padding: 0; }
.page-recruiter-shortlist details.dossier-new > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; padding: 14px 12px; }
.page-recruiter-shortlist details.dossier-new > summary::-webkit-details-marker { display: none; }
.page-recruiter-shortlist details.dossier-new[open] { min-width: 268px; }
.page-recruiter-shortlist .dn-form { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
.page-recruiter-shortlist .dn-input,
.page-recruiter-shortlist .dn-select { width: 100%; height: 32px; border: 1px solid #E4DECF; border-radius: 8px; padding: 0 9px; font-family: inherit; font-size: 12px; color: #2C2C2C; background: #fff; }
.page-recruiter-shortlist .dn-submit { height: 32px; border: none; border-radius: 8px; background: var(--gold-fill); color:var(--on-gold);text-shadow:var(--on-gold-shadow); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

/* Pastille de dossier : la croix est un vrai bouton de suppression. */
.page-recruiter-shortlist .dchip-x-form { display: inline; }
.page-recruiter-shortlist .dchip-x { border: none; background: none; padding: 0 0 0 4px; font-size: 13px; line-height: 1; color: inherit; opacity: .55; cursor: pointer; font-family: inherit; }
.page-recruiter-shortlist .dchip-x:hover { opacity: 1; }

/* « + Dossier » ouvre la liste des dossiers où ranger le talent. */
.page-recruiter-shortlist .dchip-add-wrap { position: relative; display: inline-block; }
.page-recruiter-shortlist .dchip-add-wrap > summary { list-style: none; cursor: pointer; }
.page-recruiter-shortlist .dchip-add-wrap > summary::-webkit-details-marker { display: none; }
.page-recruiter-shortlist .dchip-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 40; min-width: 190px; background: #fff; border: 1px solid #EDE8DC; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: 5px; }
.page-recruiter-shortlist .dchip-menu form { margin: 0; }
.page-recruiter-shortlist .dchip-menu-item { display: block; width: 100%; text-align: left; padding: 7px 9px; border: none; background: none; border-radius: 7px; font-family: inherit; font-size: 12px; color: #2C2C2C; cursor: pointer; }
.page-recruiter-shortlist .dchip-menu-item:hover { background: #FBF8F1; color: var(--gold-600); }

/* Ce qui attend la Brique 3 reste visible, grisé et annoté (colonne Match). */
.page-recruiter-shortlist .fchip-group.is-future { opacity: .5; }
.page-recruiter-shortlist .fchip-group.is-future .fchip { cursor: not-allowed; }
.page-recruiter-shortlist .fchip-b3 { font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-600); background: #F6F1E4; border: 1px solid #E4DECF; border-radius: 100px; padding: 3px 7px; }
.page-recruiter-shortlist .seg-future { padding: 6px 12px; font-size: 12px; color: #B8B2A6; cursor: not-allowed; }
.page-recruiter-shortlist .sort-seg a { padding: 6px 12px; font-size: 12px; font-weight: 600; color: #6B6560; border-radius: 100px; text-decoration: none; }
.page-recruiter-shortlist .sort-seg a.on { background: #fff; color: var(--gold-600); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* La barre porte un groupe de plus que la maquette (« Vérifiés », critère
   R2-9.10) et la mention Brique 3 : on resserre les espacements pour qu'elle
   tienne sur une ligne comme la maquette. */
.page-recruiter-shortlist .toolbar { gap: 8px; }
.page-recruiter-shortlist .fchips { gap: 6px; }

/* #1582 / #1613 — un CTA doré porte un texte blanc. La feuille de la maquette
   posait un doré foncé sur le bouton « Comparer » et le bouton de création. */
.page-recruiter-shortlist .dn-submit { color:var(--on-gold); text-shadow:var(--on-gold-shadow); }

/* Double coche : lovable/recruiter-shortlist.css est une feuille de RÉFÉRENCE
   qui vise la même classe de page et ajoute un ✓ en ::after sur .checkbox.checked,
   en plus de la coche SVG de la vue. Comme le layout charge toutes les feuilles
   sur toutes les pages, les deux s'affichaient, la seconde débordant sous la
   case. On neutralise le pseudo-élément et on ancre la case sur la ligne. */
.page-recruiter-shortlist .ccard .checkbox::after,
.page-recruiter-shortlist .ccard .checkbox::before { content: none; }
.page-recruiter-shortlist .ccard .checkbox { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #C9C5BC; background: #fff; box-shadow: none; display: grid; place-items: center; }
.page-recruiter-shortlist .ccard .checkbox.checked { background: var(--gold-500); border-color: var(--gold-500); }
.page-recruiter-shortlist .ccard .checkbox svg { width: 12px; height: 12px; }

/* « Non classé » : la relance de la maquette. */
.page-recruiter-shortlist .pc-warn { color: #B0432F; }

/* État vide (la maquette n'a que des données garnies). */
.page-recruiter-shortlist .sl-empty { text-align: center; padding: 40px 20px; color: #8A857A; font-size: 13px; }
.page-recruiter-shortlist .sl-empty a { color: var(--gold-600); font-weight: 700; text-decoration: underline; }

/* Le partial shortlist rend le bouton dans un <form> : il doit se comporter
   comme les deux autres boutons de la colonne. */
.page-recruiter-shortlist .cc-side form { margin: 0; display: flex; }
.page-recruiter-shortlist .cc-side .cbtn { cursor: pointer; font-family: inherit; }

/* ═══ Déclarations rapatriées de app/assets/stylesheets/lovable/recruiter-shortlist.css ═══
   La vue index rend `.page-header`, `.page-subtitle`, `.jobs-section`, `.jobs-label`,
   `.cc-info`, `.cc-rank` : des classes que cette feuille ne définissait pas. Le rendu
   validé venait donc, sans qu'on le sache, de l'export Lovable servi sur toutes les
   pages produit (140 feuilles par page, cf. ApplicationHelper). Ces feuilles sortent
   du bundle produit ; les déclarations qui portaient réellement la mise en page sont
   recopiées ici à l'identique, pour ne rien changer visuellement.
   À migrer ensuite sur les classes de la maquette (.wrap / .blk-lbl / .lead de
   app/views/mockups/recruiter/shortlist.html.erb), qui sont la référence. */
.page-recruiter-shortlist .page-header { padding: 32px 32px 0; }
.page-recruiter-shortlist .page-subtitle { font-size: 13px; color: #999; margin-top: 6px; }
.page-recruiter-shortlist .jobs-section { padding: 20px 32px 0; }
.page-recruiter-shortlist .jobs-label { font-size: 9px; font-weight: 800; letter-spacing: 2px; color: #999; text-transform: uppercase; margin-bottom: 10px; }
.page-recruiter-shortlist .toolbar { justify-content: space-between; }
/* NB : `.cc-info` héritait aussi un `align-items` / `gap` de l'export Lovable, mais la
   règle locale la garde en `display:block` — ces deux propriétés y étaient inertes.
   Rien à rapatrier, sous peine de remettre le bloc « poste actuel » en colonne. */
.page-recruiter-shortlist .cc-rank { font-size: 9px; font-weight: 800; color: #ccc; margin-top: 4px; }
/* .checkbox est en display:grid ici : `place-items` centre l'item, pas la colonne. */
.page-recruiter-shortlist .checkbox { justify-content: center; }