/* B2 tâche 011 — R16/AC16.1-AC16.2. Comparateur shortlist recruteur.
   Styles dupliqués du mockup client validé /mockups/recruiter/compare
   (harmonisation #1912-#1915, #1920) — la maquette reste intouchée.
   Écarts fonctionnels (server-first) : pas de dossiers, de drag & drop, de
   corbeille ni de panneau latéral — le vivier et le retrait par colonne sont
   des liens GET ; les classes correspondantes du mockup ne sont pas reprises.
   La largeur de la grille est posée par .cols-2/3/4 (zéro style inline). */

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

.page-recruiter-compare .wrap { max-width: 1400px; margin: 0 auto; padding: 30px 26px 130px; }

/* ─── En-tête (#1912 : interlignage et gouttières) ─── */
.page-recruiter-compare .back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #8A857A; margin-bottom: 16px; }
.page-recruiter-compare .back:hover { color: var(--gold-700); }
.page-recruiter-compare .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.page-recruiter-compare h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 32px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: #2C2C2C; margin: 0 0 11px; }
/* #1912 : réserve .34em pour la dernière lettre italique du background-clip:text. */
.page-recruiter-compare h1 em { font-style: italic; font-weight: 600; display: inline-block; padding-right: .34em; margin-right: -.34em; background: var(--gold-text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.page-recruiter-compare .subtitle { font-size: 14px; color: #8A857A; margin: 0; }
.page-recruiter-compare .head-actions { display: flex; gap: 10px; flex-shrink: 0; }
.page-recruiter-compare .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 11px 18px; transition: all .15s ease; white-space: nowrap; }
.page-recruiter-compare .btn-outline { background: #fff; border: 1px solid #E5E2DC; color: #4A4640; }
.page-recruiter-compare .btn-outline:hover { border-color: var(--gold-300); color: var(--gold-700); }
.page-recruiter-compare .btn-dark { background: #2C2C2C; border: 1px solid #2C2C2C; color: #fff; }
.page-recruiter-compare .btn-dark:hover { background: #3A352E; }
.page-recruiter-compare .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ─── Vivier de la shortlist ─── */
.page-recruiter-compare .pool { margin: 22px 0 20px; }
.page-recruiter-compare .pool-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.page-recruiter-compare .pool-title { font-size: 15px; font-weight: 700; }
.page-recruiter-compare .pool-sub { font-size: 12.5px; color: #8A857A; }
.page-recruiter-compare .pool-strip { display: flex; gap: 12px; flex-wrap: wrap; }
.page-recruiter-compare .mcard { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid #E5E2DC; border-radius: 14px; padding: 10px 14px 10px 10px; min-width: 234px; transition: all .15s ease; }
.page-recruiter-compare .mcard:hover { border-color: var(--gold-200); }
.page-recruiter-compare .mcard.is-in { border-color: var(--gold-400); background: var(--gold-50); box-shadow: 0 2px 8px rgba(163,133,67,.1); }
.page-recruiter-compare .mcard-av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 600; border: 2px solid #F4F2EE; }
.page-recruiter-compare .mcard-body { flex: 1; min-width: 0; }
.page-recruiter-compare .mcard-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* #2635 — le poste ET le match tiennent sur la même ligne. Le nom ou le poste
   trop long est coupé plutôt que de pousser la card. */
.page-recruiter-compare .mcard-sub { font-size: 11.5px; color: #8A857A; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* #2635 — le match s'écrit en couleur dans la ligne du poste : la pastille
   (tsm-badge) prenait une ligne entière pour elle seule. Mêmes teintes de
   niveau que la Grille de Match (ai_score.css), pour rester lisible sans
   pastille. */
.page-recruiter-compare .mcard-match { font-size: 11.5px; font-weight: 700; color: var(--gold-600); }
.page-recruiter-compare .mcard-match--perfect { color: #2D7A4F; }
.page-recruiter-compare .mcard-match--strong { color: #C0651F; }
.page-recruiter-compare .mcard-match--match { color: var(--gold-500); }
/* B3 tache 072 — AC47.9. Un score reel sous le seuil : neutre et en poids
   normal, pour ne pas se lire comme un niveau de la Grille de Match, mais
   present, pour ne pas se confondre avec « pas de score ». */
.page-recruiter-compare .mcard-match--below { color: #6B6560; font-weight: 500; }
.page-recruiter-compare .mcard-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #E5E2DC; background: #fff; color: var(--gold-600); display: grid; place-items: center; flex-shrink: 0; transition: all .15s ease; }
.page-recruiter-compare .mcard-btn:hover { border-color: var(--gold-300); }
.page-recruiter-compare .mcard-btn svg { width: 15px; height: 15px; }
.page-recruiter-compare .mcard-btn.is-off { opacity: .4; cursor: not-allowed; }
.page-recruiter-compare .mcard.is-in .mcard-btn { background: #EAF4EE; border-color: #BFE0CC; color: #1B7A4E; }
.page-recruiter-compare .add-card { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 210px; min-height: 66px; background: #FFFDF9; border: 1.5px dashed var(--gold-300); border-radius: 14px; font-size: 13.5px; font-weight: 700; color: var(--gold-700); transition: all .15s ease; }
.page-recruiter-compare .add-card:hover { background: var(--gold-50); border-color: var(--gold-400); }
.page-recruiter-compare .add-card .plus { width: 30px; height: 30px; border-radius: 50%; background: var(--gold-50); border: 1px solid var(--gold-200); display: grid; place-items: center; }
.page-recruiter-compare .add-card .plus svg { width: 15px; height: 15px; }

/* ─── Grille de comparaison ─── */
.page-recruiter-compare .compare-card { overflow-x: auto; padding: 4px 2px 10px; }
/* #2634 — la grille était restée sur l'ancien dessin (colonnes continues, filet
   clair entre les sections, arrondis seulement en haut et en bas). La maquette
   regroupe visuellement PAR SECTION depuis #2383 : chaque cellule est une card
   complète (bordure sur les quatre côtés, radius 16px) et un row-gap de 16px
   sépare les sections. On s'aligne. */
.page-recruiter-compare .cgrid { display: grid; min-width: 920px; column-gap: 14px; row-gap: 16px; }
.page-recruiter-compare .cgrid.cols-2 { grid-template-columns: 200px repeat(2, minmax(0, 1fr)); }
.page-recruiter-compare .cgrid.cols-3 { grid-template-columns: 200px repeat(3, minmax(0, 1fr)); }
/* #2641 — à 4 colonnes, la largeur utile d'une cellule tombait sous la largeur
   du contenu (icône + bloc de ligne) : la grille défile plutôt que d'écraser. */
.page-recruiter-compare .cgrid.cols-4 { grid-template-columns: 200px repeat(4, minmax(0, 1fr)); min-width: 1120px; }
.page-recruiter-compare .cell { padding: 18px 18px; border: 1px solid #EADFC2; border-radius: 16px; min-width: 0; text-align: center; background: #fff; }
.page-recruiter-compare .rowlab { position: sticky; left: 0; z-index: 2; background: linear-gradient(180deg, var(--gold-50) 0%, #F5EDD9 100%); padding: 24px 14px; display: flex; align-items: center; justify-content: center; text-align: center; }
.page-recruiter-compare .rowlab-pill { display: inline-block; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 18px; letter-spacing: .2px; color: #2C2C2C; line-height: 1.25; }
.page-recruiter-compare .rowlab-pill::after { content: ''; display: block; width: 52px; height: 3px; margin: 9px auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-300) 55%, rgba(212,188,122,0) 100%); }

/* --- Candidat --- */
.page-recruiter-compare .cand-cell { position: relative; text-align: center; padding-top: 16px; }
.page-recruiter-compare .cand-remove { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #E5E2DC; color: #8A857A; display: grid; place-items: center; z-index: 2; }
.page-recruiter-compare .cand-remove svg { width: 13px; height: 13px; }
.page-recruiter-compare .cand-remove:hover { border-color: #B0432F; color: #B0432F; }
/* #2642 — en-tête de colonne en split (photo à gauche, identité à droite),
   repris du comparateur Talent (.offer-split, #1916). L'ancien empilement
   centré (avatar rond 76px, puis nom, puis rôle, puis chips) mangeait ~230px
   de hauteur par colonne et poussait tout le reste de la grille vers le bas. */
.page-recruiter-compare .cand-split { display: flex; align-items: stretch; gap: 13px; text-align: left; }
.page-recruiter-compare .cand-photo { flex: 0 0 78px; width: 78px; min-height: 108px; align-self: stretch; position: relative; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: #EDE7DA; color: #fff; font-size: 19px; font-weight: 700; box-shadow: 0 0 0 1px #EADFC2, 0 2px 10px rgba(44,44,44,.08); }
.page-recruiter-compare .cand-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.page-recruiter-compare .cand-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
/* À 4 finalistes la colonne descend à ~230px de contenu : la photo et le nom
   se resserrent pour laisser respirer le libellé de provenance. */
.page-recruiter-compare .cgrid.cols-4 .cand-split { gap: 10px; }
.page-recruiter-compare .cgrid.cols-4 .cand-photo { flex: 0 0 62px; width: 62px; min-height: 92px; }
.page-recruiter-compare .cgrid.cols-4 .cand-name { font-size: 15.5px; padding-right: 22px; }
/* #2637 — à 4 colonnes, l'exergue « POSTULATION / SOURCING » mangeait toute la
   place et ne laissait qu'une ellipse à la place du poste. On garde le poste,
   qui porte l'information utile ; le type reste lisible dans l'infobulle du
   marqueur (title), en plus de sa couleur. */
.page-recruiter-compare .cgrid.cols-4 .cand-prov .prov-t { display: none; }
.page-recruiter-compare .avatar { width: 76px; height: 76px; border-radius: 50%; margin: 4px auto 12px; display: grid; place-items: center; color: #fff; font-size: 22px; font-weight: 600; border: 3px solid #fff; box-shadow: 0 0 0 2px #EADFC2; }
/* Vraies photos de talents (retour client B2) : l'avatar est un cadre photo. */
.page-recruiter-compare .avatar.has-photo,
.page-recruiter-compare .mcard-av.has-photo { background: #EDE7DA; overflow: hidden; padding: 0; }
.page-recruiter-compare .avatar.has-photo img,
.page-recruiter-compare .mcard-av.has-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.page-recruiter-compare .cand-name { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; flex-wrap: wrap; justify-content: flex-start; padding-right: 26px; }
/* Badge Verified (#1915) — pastille officielle de la marque (cf. .ts-card-vbadge).
   #2636 : la police n'était pas figée, le badge héritait donc de la famille de
   son parent (Playfair sur certaines surfaces). Geist, comme la pastille de
   référence des cards talent. */
.page-recruiter-compare .verified { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 5px; background: var(--gold-metal); font-family: 'Geist', system-ui, sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; font-style: normal; color: #242424; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.28); text-shadow: none; }
.page-recruiter-compare .verified::before { content: ""; width: 9px; height: 11px; flex-shrink: 0; background: url("/images/verified-t.svg") no-repeat center/contain; }
.page-recruiter-compare .cand-role { font-size: 13.5px; color: #8A857A; margin: 5px 0 10px; }
/* #2648 — le marqueur de disponibilité est le composant partagé .ts-avail
   (pastille verte écrite), identique sur toutes les surfaces de l'app. */
.page-recruiter-compare .cand-body .ts-avail { margin-bottom: 2px; }
.page-recruiter-compare .prov-wrap { display: block; width: 100%; text-align: left; min-width: 0; }
/* #2637 — chips de la colonne candidat calibrés pareil (12px / 5px 12px) et
   libellé de provenance coupé : un intitulé de recherche à rallonge fabriquait
   un marqueur sur deux lignes, plus large que la colonne. */
.page-recruiter-compare .cand-prov { display: block; max-width: 100%; margin: 10px 0 0; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.page-recruiter-compare .cand-prov .prov-t { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; margin-right: 6px; }
.page-recruiter-compare .cand-prov.prov-p { color: var(--gold-700); background: var(--gold-50); border: 1px solid var(--gold-200); }
.page-recruiter-compare .cand-prov.prov-s { color: #5B7A9B; background: #EEF2F6; border: 1px solid #C9D6E3; }

/* --- Match --- */
.page-recruiter-compare .match-cell { padding-top: 24px; padding-bottom: 24px; }
.page-recruiter-compare .match-cell.perfect { background: linear-gradient(180deg, rgba(234,244,238,.9) 0%, rgba(234,244,238,0) 62%); }
.page-recruiter-compare .match-cell.strong { background: linear-gradient(180deg, rgba(251,239,226,.9) 0%, rgba(251,239,226,0) 62%); }
.page-recruiter-compare .match-cell.match { background: linear-gradient(180deg, rgba(251,247,238,.95) 0%, rgba(251,247,238,0) 62%); }
/* Le badge lui-même vient du partial partagé shared/_ai_score (tsm-badge). */
.page-recruiter-compare .match-bar { width: 96px; height: 5px; border-radius: 999px; background: #EADFC2; margin: 12px auto 10px; overflow: hidden; }
.page-recruiter-compare .match-bar i { display: block; height: 100%; border-radius: 999px; }
.page-recruiter-compare .match-bar.perfect i { background: #2D7A4F; }
.page-recruiter-compare .match-bar.strong i { background: #C0651F; }
.page-recruiter-compare .match-bar.match i { background: linear-gradient(135deg, var(--gold-primary), var(--gold-500)); }
/* B3 tache 072 — AC47.9. Sous le seuil : la jauge reste (le score est reel) mais
   son remplissage est gris, sans couleur de la Grille de Match, et la cellule ne
   prend aucun fond de niveau. Impossible de la confondre avec un badge, ni avec
   « pas de score » (qui n'a ni jauge ni chiffre). */
.page-recruiter-compare .match-bar.below { background: #E7E4DD; }
.page-recruiter-compare .match-bar.below i { background: #B8B2A6; }
.page-recruiter-compare .match-note { font-size: 12px; color: #8A857A; line-height: 1.4; }
.page-recruiter-compare .match-none { font-size: 13px; font-weight: 600; color: #A8A399; }

/* --- Infos clés --- */
/* #2638 — intitulés d'infos clés réduits de 15 % (9px -> 7.65px). L'interligne
   des majuscules mono reste lisible ; le letter-spacing est légèrement resserré
   pour compenser la perte de chasse. */
.page-recruiter-compare .ik-label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 7.65px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A857A; margin: 0 0 5px; }
.page-recruiter-compare .ik-block { margin-bottom: 18px; }
.page-recruiter-compare .ik-block:last-child { margin-bottom: 0; }
.page-recruiter-compare .ik-value { font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.page-recruiter-compare .leplus { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1B7A4E; background: #EAF4EE; border: 1px solid #BFE0CC; padding: 2px 7px; border-radius: 999px; }
.page-recruiter-compare .leplus svg { width: 9px; height: 9px; }
/* B3 tache 072 — la jauge de pretentions (.range-bar) est retiree : son echelle
   etait l'etendue du lot compare, ecrite nulle part a l'ecran. La fourchette en
   toutes lettres la remplace. Regles supprimees avec leur dernier lecteur. */
.page-recruiter-compare .stars-line { display: inline-flex; align-items: center; justify-content: center; }
.page-recruiter-compare .stars-line.empty { font-size: 12.5px; color: #A8A399; }
.page-recruiter-compare .tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; justify-content: center; }
/* #2637 — même calibre pour tous les chips de la grille (tags, certifications,
   provenance) : 12px de texte, 5px/12px de gouttière. */
.page-recruiter-compare .tag { font-size: 12px; font-weight: 600; color: #4A4640; background: #FFFDF9; border: 1px solid #E5E2DC; padding: 5px 12px; border-radius: 8px; }
.page-recruiter-compare .chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.page-recruiter-compare .chip { font-size: 12px; font-weight: 600; color: var(--gold-700); border: 1px solid var(--gold-200); background: #fff; padding: 5px 12px; border-radius: 8px; }
.page-recruiter-compare .cell-empty { font-size: 12.5px; color: #A8A399; }

/* --- Lignes (formation / expériences / mentors), alignement #1914 --- */
/* #2641 — les icônes débordaient sur le cadre de la cellule. La ligne mesurait
   34 + 12 + 232 = 278px pour une zone de contenu de 232px à 4 colonnes : le
   surplus se répartissait de part et d'autre (justify-content: center) et
   l'icône passait sous la bordure. Deux correctifs : le gabarit d'icône du
   mockup (29px, svg 14px, gouttière 10px, cf. #2382, jamais répercuté ici) et
   surtout un bloc de ligne qui SE RÉTRÉCIT au lieu de déborder. Les lignes
   d'une même cellule partagent la même largeur : l'alignement de #1914 tient. */
.page-recruiter-compare .line-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; justify-content: center; }
.page-recruiter-compare .line-item:last-child { margin-bottom: 0; }
.page-recruiter-compare .li-ic { width: 29px; height: 29px; border-radius: 8px; flex-shrink: 0; border: 1px solid #E5E2DC; background: #FFFDF9; display: grid; place-items: center; color: var(--gold-500); }
.page-recruiter-compare .li-ic svg { width: 14px; height: 14px; }
.page-recruiter-compare .li-body { flex: 1 1 auto; min-width: 0; max-width: 232px; text-align: left; }
.page-recruiter-compare .li-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.page-recruiter-compare .li-title { font-size: 14px; font-weight: 700; min-width: 0; }
.page-recruiter-compare .li-date { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #8A857A; background: #F4F2EE; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.page-recruiter-compare .li-sub { font-size: 12.5px; color: #8A857A; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.page-recruiter-compare .li-meta { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-600); margin-top: 3px; }

/* --- Actions (#1913 : CTA dégradé gold du design system) --- */
.page-recruiter-compare .btn-propose { display: block; width: 100%; text-align: center; font-size: 14px; font-weight: 700; color: #fff; text-shadow: var(--on-gold-shadow); background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 50%, var(--gold-600) 100%); border-radius: 999px; padding: 13px 0; margin-bottom: 10px; box-shadow: 0 3px 12px rgba(163,133,67,.3); transition: all .15s ease; }
.page-recruiter-compare .btn-propose:hover { transform: translateY(-1px); filter: brightness(1.03); }
.page-recruiter-compare .btn-propose[disabled] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.page-recruiter-compare .actions-sub { display: flex; gap: 10px; }
.page-recruiter-compare .actions-sub .btn { flex: 1; justify-content: center; padding: 11px 0; }

@media (max-width: 760px) {
  .page-recruiter-compare h1 { font-size: 24px; }
  .page-recruiter-compare .rowlab { padding: 16px 12px; }
  .page-recruiter-compare .rowlab-pill { font-size: 15px; }
  .page-recruiter-compare .cell { padding: 16px 14px; }
  /* Les trois boutons du bandeau font 351px cote a cote : avec flex-shrink:0 et
     .btn en white-space:nowrap, ils sortaient de l'ecran meme apres le passage
     a la ligne du bandeau. Ils s'empilent au lieu de deborder. */
  .page-recruiter-compare .head-actions { flex-wrap: wrap; flex-shrink: 1; }
}

/* Export PDF : à l'impression, seule la grille compte. */
@media print {
  .page-recruiter-compare .back,
  .page-recruiter-compare .head-actions,
  .page-recruiter-compare .pool { display: none; }
}

/* R16/AC16.2 — dossiers, notes d'equipe, corbeille, panneau : regles completes du mockup. */
/* ─── Dossiers de comparaison ─── */
.page-recruiter-compare .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: 0 0 11px; }
.page-recruiter-compare .folders-wrap { margin-bottom: 18px; }
.page-recruiter-compare .folders { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-recruiter-compare .folder-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #4A4640; background: #fff; border: 1px solid #E5E2DC; border-radius: 999px; padding: 10px 18px; transition: all .15s ease; }
.page-recruiter-compare .folder-chip:hover { border-color: var(--gold-300); background: #FFFDF9; }
.page-recruiter-compare .folder-chip.is-active { background: var(--gold-50); border-color: var(--gold-400); color: #2C2C2C; font-weight: 700; box-shadow: 0 2px 8px rgba(163,133,67,.16); }
.page-recruiter-compare .folder-chip .n { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; color: var(--gold-600); background: rgba(163,133,67,.12); border-radius: 999px; padding: 1px 7px; }
.page-recruiter-compare .folder-new { border-style: dashed; color: #8A857A; }
.page-recruiter-compare .folder-new:hover { border-color: var(--gold-300); color: var(--gold-700); }
.page-recruiter-compare .add-card { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 210px; min-height: 66px; background: #FFFDF9; border: 1.5px dashed var(--gold-300); border-radius: 14px; font-size: 13.5px; font-weight: 700; color: var(--gold-700); transition: all .15s ease; }
.page-recruiter-compare .add-card:hover { background: var(--gold-50); border-color: var(--gold-400); }
.page-recruiter-compare .add-card .plus { width: 30px; height: 30px; border-radius: 50%; background: var(--gold-50); border: 1px solid var(--gold-200); display: grid; place-items: center; }
.page-recruiter-compare .add-card .plus svg { width: 15px; height: 15px; }
.page-recruiter-compare .drag-hint { position: absolute; top: 10px; left: 12px; color: #C9C5BC; cursor: grab; }
.page-recruiter-compare .drag-hint svg { width: 16px; height: 16px; }
/* Vraies photos de talents (retour client B2) : l'avatar devient un cadre photo,
   les degrades ph1..ph6 restent le repli quand aucune photo n'est disponible. */
.page-recruiter-compare .avatar.has-photo,
.page-recruiter-compare .mcard-av.has-photo,
.page-recruiter-compare .sl-av.has-photo { background: #EDE7DA; overflow: hidden; padding: 0; }
.page-recruiter-compare .avatar.has-photo img,
.page-recruiter-compare .mcard-av.has-photo img,
.page-recruiter-compare .sl-av.has-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
/* Audit de véracité 07/08 — les degrades ph1..ph6 existaient dans le commentaire
   ci-dessus mais pas dans la feuille : sans eux, une pastille d'initiales sort
   en blanc sur blanc. Memes valeurs que recruiter_shortlist.css. */
.page-recruiter-compare .ph1 { background: linear-gradient(135deg, var(--gold-600), var(--gold-primary)); }
.page-recruiter-compare .ph2 { background: linear-gradient(135deg, #3d5a4a, #6e8f76); }
.page-recruiter-compare .ph3 { background: linear-gradient(135deg, var(--gold-700), var(--gold-400)); }
.page-recruiter-compare .ph4 { background: linear-gradient(135deg, #5B7A9B, #9db4c9); }
.page-recruiter-compare .ph5 { background: linear-gradient(135deg, #8a5a4a, #c69a86); }
.page-recruiter-compare .ph6 { background: linear-gradient(135deg, #6c5ab0, #a99ad6); }
/* Colonne du comparateur : la vignette est un rectangle haut, l'initiale
   l'occupe entierement. */
.page-recruiter-compare .cand-photo-initials { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-family: 'Geist', system-ui, sans-serif; font-size: 26px; font-weight: 700; letter-spacing: 1px; }
.page-recruiter-compare .cgrid.cols-4 .cand-photo-initials { font-size: 21px; }
/* --- Avis équipe --- */
.page-recruiter-compare .reco-row { display: flex; gap: 9px; margin-bottom: 14px; justify-content: center; }
.page-recruiter-compare .reco-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; background: #fff; border: 1px solid #E5E2DC; color: #4A4640; border-radius: 999px; padding: 8px 16px; transition: all .15s ease; }
.page-recruiter-compare .reco-btn svg { width: 15px; height: 15px; }
.page-recruiter-compare .reco-btn:hover { border-color: var(--gold-300); }
.page-recruiter-compare .reco-btn.is-on { background: #EAF4EE; border-color: #BFE0CC; color: #1B7A4E; }
.page-recruiter-compare .reco-down { padding: 8px 12px; }
.page-recruiter-compare .note { display: flex; gap: 9px; margin-bottom: 10px; text-align: left; }
.page-recruiter-compare .note-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; }
.page-recruiter-compare .note-bubble { flex: 1; background: #FFFDF9; border: 1px solid #E5E2DC; border-radius: 10px; padding: 9px 12px; }
.page-recruiter-compare .note-head { display: flex; justify-content: space-between; gap: 8px; }
/* Audit 07/08 — croix de suppression d'une note, visible pour son seul auteur. */
.page-recruiter-compare .note-head { align-items: center; }
.page-recruiter-compare .note-del-form { display: inline-flex; margin: 0; }
.page-recruiter-compare .note-del { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; border-radius: 5px; background: transparent; color: #9a938a; cursor: pointer; transition: .15s; }
.page-recruiter-compare .note-del:hover { background: rgba(179, 38, 30, .08); color: #b3261e; }
.page-recruiter-compare .note-del svg { width: 11px; height: 11px; }
.page-recruiter-compare .note-author { font-size: 12.5px; font-weight: 700; }
.page-recruiter-compare .note-date { font-size: 11px; color: #8A857A; }
.page-recruiter-compare .note-text { font-size: 12.5px; color: #4A4640; margin-top: 3px; line-height: 1.45; }
.page-recruiter-compare .note-input { display: block; width: calc(100% - 37px); margin-left: 37px; min-height: 62px; resize: vertical; font-family: inherit; font-size: 12.5px; color: #2C2C2C; border: 1px solid #E5E2DC; border-radius: 10px; padding: 10px 12px; background: #fff; }
.page-recruiter-compare .note-input::placeholder { color: #A8A399; }
.page-recruiter-compare .note-input:focus { outline: none; border-color: var(--gold-primary); }
.page-recruiter-compare .note-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.page-recruiter-compare .btn-publish { font-size: 12.5px; font-weight: 700; color: #fff; text-shadow: var(--on-gold-shadow); background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-300) 45%, var(--gold-500) 100%); border-radius: 999px; padding: 8px 20px; box-shadow: 0 2px 8px rgba(207,160,78,.28); }
.page-recruiter-compare .team-visible { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: #8A857A; margin-top: 12px; }
.page-recruiter-compare .team-visible svg { width: 13px; height: 13px; }
/* --- État vide --- */
.page-recruiter-compare .empty-state { padding: 60px 24px; text-align: center; color: #8A857A; font-size: 14px; line-height: 1.6; border: 1px solid #EADFC2; border-radius: 16px; background: #fff; }
.page-recruiter-compare .empty-state b { color: #2C2C2C; }
/* ─── Note produit ─── */
.page-recruiter-compare .product-note { margin-top: 24px; border: 1px solid #E5E2DC; border-radius: 12px; background: #FFFDF9; padding: 16px 20px; font-size: 12.5px; color: #8A857A; line-height: 1.55; }
.page-recruiter-compare .product-note b { color: #2C2C2C; }
/* ─── Corbeille ─── */
/* La corbeille n'apparaît que pendant un glisser-déposer. Elle n'était masquée
   que par sa translation (la règle .visible plus bas rallume déjà opacity et
   visibility, sans que l'état de repos ne les éteigne) : elle réapparaissait
   donc en pleine page sur une capture plein écran et restait dans l'arbre
   d'accessibilité. */
.page-recruiter-compare .trash-zone { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(140px); opacity: 0; visibility: hidden; display: flex; align-items: center; gap: 10px; background: #fff; border: 2px dashed #B0432F; color: #B0432F; font-size: 14px; font-weight: 700; border-radius: 16px; padding: 18px 32px; z-index: 500; transition: transform .2s ease, opacity .2s ease; box-shadow: 0 10px 30px rgba(44,44,44,.15); pointer-events: none; }
.page-recruiter-compare .trash-zone svg { width: 18px; height: 18px; }
.page-recruiter-compare .trash-zone.visible { transform: translateX(-50%) translateY(0); pointer-events: auto; }
.page-recruiter-compare .trash-zone.hot { background: #FBEEEA; }
/* ─── Panneau latéral ─── */
.page-recruiter-compare .panel-overlay { position: fixed; inset: 0; background: rgba(44,44,44,.32); z-index: 600; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.page-recruiter-compare .panel-overlay.open { opacity: 1; pointer-events: auto; }
.page-recruiter-compare .panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(92vw, 520px); z-index: 610; background: #fff; box-shadow: -14px 0 40px rgba(44,44,44,.18); transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column; }
.page-recruiter-compare .panel.open { transform: none; }
.page-recruiter-compare .panel-head { padding: 26px 24px 20px; border-bottom: 1px solid #E5E2DC; background: linear-gradient(180deg, var(--gold-50), #fff); }
.page-recruiter-compare .panel-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.page-recruiter-compare .panel-title { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 22px; margin: 0; color: #2C2C2C; }
.page-recruiter-compare .panel-title::after { content: ''; display: block; width: 52px; height: 3px; margin: 10px 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-300) 55%, rgba(212,188,122,0) 100%); }
.page-recruiter-compare .panel-close { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid #E5E2DC; color: #8A857A; display: grid; place-items: center; }
.page-recruiter-compare .panel-close svg { width: 14px; height: 14px; }
.page-recruiter-compare .panel-close:hover { border-color: #B0432F; color: #B0432F; }
.page-recruiter-compare .panel-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; }
.page-recruiter-compare .panel-picker { margin-bottom: 16px; }
.page-recruiter-compare .panel-picker-lbl { display: block; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A857A; margin-bottom: 8px; }
.page-recruiter-compare .panel-folder-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.page-recruiter-compare .sl-row { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border: 1px solid #E5E2DC; border-radius: 14px; margin-bottom: 10px; background: #fff; transition: all .15s ease; }
.page-recruiter-compare .sl-row.is-in { border-color: var(--gold-400); background: var(--gold-50); }
.page-recruiter-compare .sl-av { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 600; border: 2px solid #F4F2EE; }
.page-recruiter-compare .sl-body { flex: 1; min-width: 0; }
.page-recruiter-compare .sl-name { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; flex-wrap: wrap; }
.page-recruiter-compare .sl-role { font-size: 12.5px; color: #8A857A; margin-top: 1px; }
.page-recruiter-compare .sl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.page-recruiter-compare .sl-tag { font-size: 10.5px; font-weight: 600; color: var(--gold-700); border: 1px solid var(--gold-200); background: #fff; padding: 2px 8px; border-radius: 6px; }
.page-recruiter-compare .sl-avail { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.page-recruiter-compare .sl-avail.g { background: #EAF4EE; color: #1B7A4E; border: 1px solid #BFE0CC; }
.page-recruiter-compare .sl-avail.n { background: #FFFDF9; color: #4A4640; border: 1px solid #E5E2DC; }
.page-recruiter-compare .sl-add { flex-shrink: 0; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 9px 16px; background: var(--gold-50); border: 1px solid var(--gold-200); color: var(--gold-700); transition: all .15s ease; }
.page-recruiter-compare .sl-add:hover { border-color: var(--gold-400); }
.page-recruiter-compare .sl-add.is-in { background: #EAF4EE; border-color: #BFE0CC; color: #1B7A4E; }
.page-recruiter-compare .panel-empty { padding: 24px 8px; text-align: center; color: #8A857A; font-size: 13px; }

/* Etats pilotes par Stimulus (le mockup les ouvrait en JS inline) et champ de
   creation de dossier, absent du mockup qui passait par une invite JS. */
.page-recruiter-compare .folder-new-form { display: inline-flex; align-items: center; gap: 8px; }
.page-recruiter-compare .folder-new-input { font-size: 12.5px; border: 1px solid #E5E2DC; border-radius: 999px; padding: 8px 14px; min-width: 160px; }
.page-recruiter-compare .folder-new-input:focus { outline: none; border-color: var(--gold-primary); }
.page-recruiter-compare .panel.open,
.page-recruiter-compare .panel-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.page-recruiter-compare .trash-zone.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.page-recruiter-compare .trash-zone.hot { border-color: #B0432F; color: #B0432F; }