/*
  Recruiter — Recherche Talents (R12). Migrated verbatim from the canonical
  mockups (app/views/mockups/recruiter/talent_search.html.erb +
  app/views/mockups/shared/_talent_card_styles.html.erb inline <style> blocks —
  card V4 #1864, espacements #1865, icônes et pills #1895, barre texte #1634).
  Zero inline CSS: the view carries only class hooks; the few dynamic values go
  through data-attrs / Stimulus. Scoped under .ts-page.
*/

.ts-page {
  --ts-gold: var(--gold-500);
  --ts-gold-light: var(--gold-primary);
  --ts-gold-deep: var(--gold-700);
  --ts-gold-luminous: var(--gold-fill);
  --ts-cream: var(--gold-50);
  --ts-cream-border: var(--gold-200);
  --ts-ink: var(--preview-ink);
  --ts-ink-soft: var(--n-700);
  --ts-ink-mute: var(--n-500);
  --ts-line: var(--preview-line);
  --ts-bg: var(--n-0);
  --ts-success: var(--preview-success);
  /* Card V4 tokens (mockups/shared/_talent_card_styles) */
  --ts-gold-50: var(--gold-50);
  --ts-gold-200: var(--gold-200);
  --ts-border: var(--preview-line);
  --ts-green: var(--green);
  --ts-green-50: var(--green-50);
  --ts-cta: var(--gold-fill);
  --ts-round: var(--gold-metal);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--ts-bg);
  min-height: 100vh;
  color: var(--ts-ink);
}

/* === Hero (#1865 : espacements resserrés) === */
.ts-hero { max-width: 1280px; margin: 0 auto; padding: 26px 40px 10px; text-align: center; }
.ts-hero h1 { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 8px; }
/* 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 */
.ts-hero h1 em {
  font-style: italic;
  font-weight: 600;
  display: inline-block;
  padding-right: .14em;
  margin-right: -.14em;
  background: linear-gradient(120deg, var(--gold-700), var(--gold-400) 45%, var(--gold-200) 70%, var(--gold-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ts-hero p { font-size: 13.5px; color: var(--ts-ink-mute); margin: 0 0 14px; }
/* #2624 — le nombre de profils ressort en doré et en gras. */
.ts-hero p strong { color: var(--ts-gold-deep); font-weight: 700; }

/* === #1634 : barre de recherche textuelle === */
.ts-hero-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 620px;
  margin: 0 auto 14px;
  padding: 6px 6px 6px 16px;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 999px;
  box-shadow: 0 2px 14px rgba(44,44,44,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ts-hero-search:focus-within { border-color: var(--ts-cream-border); box-shadow: 0 4px 18px rgba(163,133,67,0.14); }
.ts-hero-search > svg { width: 17px; height: 17px; color: var(--ts-ink-mute); flex-shrink: 0; }
.ts-hero-search input[type="search"]::placeholder { color: var(--ts-ink-mute); }
.ts-hero-search button, .ts-hero-search input[type="submit"] {
  flex-shrink: 0;
  height: 36px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: var(--ts-gold-luminous);
  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,0.28);
  transition: filter 0.15s;
}
.ts-hero-search button:hover, .ts-hero-search input[type="submit"]:hover { filter: brightness(1.04); }
.ts-hero-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ts-ink);
  padding: 9px 0;
  height: auto;
  box-shadow: none;
}

/* === Mode toggle (#1895 : pills modernes) ===
   B2 : les deux modes sont des liens (?mode=ai), plus des boutons désactivés. */
.ts-mode-toggle { display: inline-flex; gap: 4px; background: #F4F2EE; border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.ts-mode-btn {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ts-ink-mute);
  transition: all 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}
.ts-mode-btn svg { width: 15px; height: 15px; }
.ts-mode-btn:hover { color: var(--ts-gold-deep); }
.ts-mode-btn.active {
  background: var(--ts-gold-luminous);
  color: var(--on-gold);
  text-shadow: var(--on-gold-shadow);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(189,151,51,0.30);
}
.ts-beta {
  background: var(--ts-cream);
  color: var(--ts-gold-deep);
  border: 1px solid var(--ts-cream-border);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ts-mode-btn.active .ts-beta { background: rgba(255,255,255,0.55); border-color: rgba(0,0,0,0.10); color: var(--gold-700); }

.ts-mode-panel { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* === Filter bar (#1895 : cellules + chevrons modernisés) === */
.ts-filter-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 20px;
  box-shadow: 0 3px 18px rgba(44,44,44,0.05);
  max-width: 1180px;
  margin: 0 auto;
}
/* Rangée AC16.3 dévoilée par « Filtres avancés » (?advanced=1). */
.ts-filter-bar--advanced { margin-top: 10px; max-width: 820px; }
.ts-cell-wrap { flex: 1; position: relative; min-width: 0; }
.ts-cell {
  width: 100%;
  padding: 8px 26px 8px 13px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  min-width: 0;
}
.ts-cell:hover, .ts-cell.active { background: var(--ts-cream); }
.ts-cell-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ts-ink-mute);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}
/* #2623 — l'icône se pose À CÔTÉ du libellé (et non en dessous) et passe en
   doré. La feuille lovable/recruiter-talent-search.css, chargée globalement,
   porte un `.ts-cell .ts-cell-label { display: block }` plus spécifique qui
   renvoyait l'icône à la ligne : on repasse devant en scopant par .ts-page. */
.ts-cell-label svg { width: 11px; height: 11px; opacity: 0.75; flex-shrink: 0; }
.ts-page .ts-cell .ts-cell-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ts-ink-mute);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}
.ts-page .ts-cell .ts-cell-label svg { width: 11px; height: 11px; opacity: 1; flex-shrink: 0; color: var(--ts-gold); }
.ts-cell-value {
  display: block;
  color: var(--ts-ink);
  font-weight: 600;
  font-size: 13px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-chevron { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); color: var(--ts-ink-mute); opacity: 0.55; pointer-events: none; }
.ts-divider { width: 1px; height: 26px; background: var(--ts-line); flex-shrink: 0; }
.ts-reset {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ts-ink-mute);
  flex-shrink: 0;
  transition: all 0.15s;
  text-decoration: none;
}
.ts-reset:hover { background: #F4F2EE; color: var(--ts-gold-deep); }
.ts-search-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ts-gold-luminous);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-gold);
  text-shadow: var(--on-gold-shadow);
  box-shadow: 0 3px 10px rgba(163,133,67,0.30);
  flex-shrink: 0;
  transition: filter 0.15s;
}
.ts-search-btn:hover { filter: brightness(1.04); }

/* Dropdown panels (open via the recruiter-talent-search Stimulus controller) */
.ts-cell-panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--ts-line); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); padding: 6px; z-index: 50; display: none; }
.ts-cell-wrap.open .ts-cell-panel { display: block; }
.ts-cell-wrap.open .ts-cell { background: var(--ts-cream); }
.ts-cell-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; font-size: 13px; color: var(--ts-ink); text-decoration: none; cursor: pointer; }
.ts-cell-opt[hidden] { display: none; }
.ts-cell-opt:hover { background: var(--ts-cream); }
.ts-cell-opt.selected { background: var(--ts-cream); font-weight: 700; color: var(--ts-gold-deep); }
/* #2625 — mini-recherche en tête de chaque menu déroulant. Le panneau garde sa
   hauteur max : seule la liste défile, le champ reste visible. */
.ts-cell-panel { display: none; flex-direction: column; }
.ts-cell-wrap.open .ts-cell-panel { display: flex; }
.ts-cell-search {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; margin-bottom: 4px;
  border: 1px solid var(--ts-line); border-radius: 9px; background: #fff;
}
.ts-cell-search:focus-within { border-color: var(--ts-cream-border); }
.ts-cell-search svg { width: 13px; height: 13px; color: var(--ts-ink-mute); flex-shrink: 0; }
.ts-cell-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--ts-ink); padding: 2px 0; box-shadow: none; height: auto;
}
.ts-cell-opts { overflow-y: auto; max-height: 240px; }
.ts-cell-empty { padding: 9px 12px; font-size: 12.5px; color: var(--ts-ink-mute); }

.ts-advanced-link { text-align: center; margin-top: 12px; }
.ts-advanced-link button, .ts-advanced-link a {
  background: transparent;
  border: none;
  color: var(--ts-ink-mute);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ts-advanced-link button:hover, .ts-advanced-link a:hover { color: var(--ts-gold-deep); }
.ts-advanced-link a.is-open { color: var(--ts-gold-deep); }
.ts-advanced-link svg { width: 13px; height: 13px; }

/* === Results (#1865 : marges resserrées) === */
.ts-results { max-width: 1280px; margin: 18px auto 0; padding: 0 40px 56px; }
.ts-results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.ts-results-title { font-size: 12px; color: var(--ts-ink-mute); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
/* #2627 — compteur de résultats en doré et en gras, comme le hero (#2624). */
.ts-results-title strong { color: var(--ts-gold-deep); font-weight: 700; }
/* #1895 : pill de tri. Un seul ordre de tri existe : la pilule porte la valeur
   en texte (on ne simule pas un menu qui ne s'ouvre pas). */
.ts-results-sort { display: inline-flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ts-ink-mute); }
.ts-results-sort .ts-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ts-ink);
  cursor: default;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.ts-results-sort .ts-pill:hover { border-color: var(--ts-cream-border); }
.ts-results-sort .ts-pill svg { width: 12px; height: 12px; opacity: 0.55; }
.ts-empty { text-align: center; padding: 60px 20px; color: var(--ts-ink-soft); font-size: 14px; border: 1px dashed var(--ts-line); border-radius: 18px; background: #fff; }

/* R16/AC16.3 — la facette « qualité de match » vit dans la barre de résultats,
   pas dans la barre de filtres guidés. En réutilisant .ts-cell-wrap elle
   héritait de son `flex: 1`, prévu pour partager une rangée de filtres : elle
   s'étirait sur toute la largeur en un long ruban, chevron perdu à droite. On
   la fige en largeur et on lui donne le même contenant que « Trier par ». */
.ts-results-head { gap: 12px; }
.ts-results-head .ts-match-facet { flex: 0 0 auto; margin-left: auto; }
.ts-results-head .ts-match-facet .ts-cell {
  width: auto;
  min-width: 172px;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 999px;
  padding: 5px 30px 5px 14px;
  transition: border-color 0.15s;
}
.ts-results-head .ts-match-facet .ts-cell:hover,
.ts-results-head .ts-match-facet.open .ts-cell { background: #fff; border-color: var(--ts-cream-border); }
.ts-results-head .ts-match-facet .ts-chevron { right: 12px; }
/* Le panneau s'ouvre sous un contrôle collé à droite : on l'aligne à droite
   pour qu'il ne déborde pas de la page. */
.ts-results-head .ts-match-facet .ts-cell-panel { left: auto; right: 0; }

/* === Marqueur de disponibilité (composant partagé cards talent / expert) === */
.ts-avail { display: inline-flex; align-items: center; gap: 5px; font-family: 'Geist', system-ui, sans-serif; font-weight: 600; line-height: 1; white-space: nowrap; }
.ts-avail--sm { font-size: 11px; }
.ts-avail--md { font-size: 12.5px; }
.ts-avail__dot, .ts-avail .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ts-avail--md .ts-avail__dot, .ts-avail--md .dot { width: 7px; height: 7px; }
.ts-avail--now { color: #1B7A4E; }
.ts-avail--soon { color: var(--gold-deep); }
.ts-avail--later { color: #B4442F; }
.ts-avail--unknown { color: #8A857A; }

/* ══ Card talent V4 (retour cliente #1864, Drive "Recruteurs / Talents-V4") ══
   Photo 236px + languette de match sur la couture + bloc identité (nom / poste /
   dispo / pitch vidéo) + timeline "Postes récents" + langues + cert + éducation + CTA. */
.ts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }

.ts-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(44,44,44,.05);
  transition: box-shadow .18s ease, transform .18s ease;
  cursor: pointer;
  font-family: 'Geist', system-ui, sans-serif;
  color: var(--ts-ink);
  min-width: 0;
  height: 100%;
}
.ts-card:hover { box-shadow: 0 10px 30px rgba(44,44,44,.10); transform: translateY(-2px); }

/* ── Photo ── */
/* overflow visible : la languette de match doit déborder sous la photo (#1904).
   L'image remplit exactement la boîte et la card porte déjà overflow:hidden,
   les angles arrondis restent donc corrects. */
.ts-card .ts-card-photo { position: relative; height: 236px; overflow: visible; flex-shrink: 0; }
.ts-card .ts-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-card .ts-card-photo-gradient {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.40));
}
/* Initiales (or sur fond noir) quand le talent n'a pas de photo de profil. */
.ts-card-photo-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #0D0D0D; color: var(--gold-primary); font-family: 'Geist', system-ui, sans-serif; font-weight: 700; letter-spacing: 1px; font-size: 46px; }
/* Badge T VERIFIED (identité vérifiée Tastellers) */
.ts-card .ts-card-vbadge {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px; border-radius: 5px;
  /* #2619 — écriture NOIRE sur le doré : seule exception validée par la cliente
     à la règle « pas de blanc sur or ». Aligné sur mockups/shared/
     _talent_card_styles et sur .rxs-card-vbadge. */
  background: var(--ts-round); color: #242424;
  font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.ts-card .ts-card-vbadge::before {
  content: ""; width: 9px; height: 11px; flex-shrink: 0;
  background: url("/images/verified-t.svg") no-repeat center/contain;
}

/* ── Languette de match, posée à cheval sur la couture photo / fiche ──
   B2 (R14/AC14.3) — uniquement quand la card sort d'une recherche IA (#1904, #1905). */
.ts-card .ts-card-mtab {
  position: absolute; right: 0; bottom: 0; transform: translateY(50%); z-index: 4;
  display: inline-flex; border-radius: 999px 0 0 999px; overflow: hidden;
  box-shadow: 0 3px 12px rgba(30,28,24,.20);
}
.ts-card .ts-card-mtab .tsm-badge { border-radius: 999px 0 0 999px; border-right: none; padding-right: 11px; }

/* ── Corps ── */
.ts-card .ts-card-info { padding: 0 11px 10px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ts-card .ts-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-top: 10px; }
.ts-card .ts-card-idblock { flex: 1; min-width: 0; }
.ts-card .ts-card-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; min-width: 0; }
.ts-card .ts-card-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Intitulé de poste + localisation tenus sur une seule ligne (#1904) */
.ts-card .ts-card-cur { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; margin-top: 3px; font-size: 12.5px; color: var(--ts-ink-mute); min-width: 0; }
.ts-card .ts-card-cur b { color: var(--ts-gold-deep); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ts-card .ts-card-cur svg { width: 12px; height: 12px; flex-shrink: 0; }
.ts-card .ts-card-loc { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-card .ts-card-dispo { margin-top: 5px; }

/* Pitch vidéo (#1963 : descend pour dégager la languette de match) */
.ts-card .ts-card-pitch { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; margin-top: 14px; }
.ts-card .ts-card-pitch-thumb {
  position: relative; width: 50px; height: 50px; padding: 3px; border: none; border-radius: 50%;
  background: var(--ts-round); box-shadow: 0 2px 8px rgba(163,133,67,.35); cursor: pointer;
}
.ts-card .ts-card-pitch-inner { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #E6E0D4; }
.ts-card .ts-card-pitch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-card .ts-card-pitch-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.9); color: #1E1C18;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(0,0,0,.28);
}
.ts-card .ts-card-pitch-play svg { width: 11px; height: 11px; margin-left: 1px; }
.ts-card .ts-card-pitch-lbl { font-size: 7.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ts-gold-deep); }

/* ── Libellés de section (filet doré) ── */
.ts-card .ts-card-block { margin-top: 10px; min-width: 0; }
.ts-card .ts-card-lbl {
  display: inline-block; position: relative; padding-bottom: 4px; margin-bottom: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-gold-deep);
}
.ts-card .ts-card-lbl::after { content: ""; position: absolute; left: 0; right: 2px; bottom: 0; height: 1.5px; border-radius: 1px; background: var(--ts-cta); }

/* ── Timeline "Postes récents" ── */
.ts-card .ts-card-tl { position: relative; padding-left: 17px; }
.ts-card .ts-card-tl::before { content: ""; position: absolute; left: 4.5px; top: 9px; bottom: 9px; width: 1.5px; background: var(--ts-border); }
.ts-card .ts-card-tl-i { position: relative; padding: 4px 0; min-width: 0; }
.ts-card .ts-card-tl-d { position: absolute; left: -17px; top: 6px; width: 10px; height: 10px; border-radius: 3px; background: #fff; border: 1.5px solid var(--ts-gold-200); }
.ts-card .ts-card-tl-i.is-current .ts-card-tl-d { background: var(--ts-gold); border-color: var(--ts-gold); }
.ts-card .ts-card-tl-l1 { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ts-card .ts-card-tl-t { font-size: 12.5px; font-weight: 700; color: var(--ts-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-card .ts-card-tl-y { font-size: 9px; letter-spacing: .02em; color: var(--ts-ink-mute); flex: 0 0 auto; }
.ts-card .ts-card-tl-now {
  flex: 0 0 auto; font-size: 7.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ts-green); background: var(--ts-green-50); border: 1px solid #BFE0CC; border-radius: 4px; padding: 1px 4px;
}
.ts-card .ts-card-tl-m { font-size: 11.5px; color: var(--ts-ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; display: flex; align-items: center; gap: 5px; }
.ts-card .ts-card-tl-m > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-card .ts-card-mich {
  display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; line-height: 0;
  background: #fff; border: 1px solid #E0A9A5; border-radius: 4px; padding: 2px 5px;
}

/* ── Langues / Certifications / Éducation ── */
.ts-card .ts-card-langs, .ts-card .ts-card-edu { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ts-card .ts-card-langs .ts-card-lbl, .ts-card .ts-card-edu .ts-card-lbl { margin-bottom: 0; flex: 0 0 auto; }
.ts-card .ts-card-flags { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: -1px; }
.ts-card .ts-card-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ts-card .ts-card-chip {
  font-size: 10px; font-weight: 500; color: var(--ts-ink-mute);
  background: #fff; border: 1px solid var(--ts-border); border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.ts-card .ts-card-chip--gold { color: var(--ts-gold-deep); border-color: var(--ts-gold-200); background: var(--ts-gold-50); font-weight: 600; }
.ts-card .ts-card-chip--michelin {
  display: inline-flex; align-items: center; gap: 4px;
  color: #B8322B; background: #fff; border-color: #E0A9A5; font-weight: 700;
}
.ts-card .ts-card-edu-i { width: 13px; height: 13px; color: var(--ts-gold); flex: 0 0 auto; margin-top: -1px; }
.ts-card .ts-card-edu-i svg { width: 13px; height: 13px; display: block; }
.ts-card .ts-card-edu-n { font-size: 11.5px; font-weight: 600; color: var(--ts-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-top: -1px; }

/* ── CTA ── */
/* #2618 — le filet doré du dernier bloc (Éducation) touchait le bouton
   « Aperçu rapide » : `margin-top: auto` retombe à 0 quand la card est pleine.
   On garde l'alignement bas des CTA et on impose l'écart des autres blocs. */
.ts-card .ts-card-block:has(+ .ts-card-preview-btn) { margin-bottom: 10px; }
.ts-card .ts-card-preview-btn {
  margin-top: auto; width: 100%; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--ts-gold-200); border-radius: 10px; background: #fff; color: var(--ts-gold-deep);
  font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer; transition: background .15s ease;
}
.ts-card .ts-card-preview-btn:hover { background: var(--ts-gold-50); }
.ts-card .ts-card-preview-btn svg { width: 12px; height: 12px; }
/* Rangée SHORTLISTER + VOIR LE PROFIL (mockup V4). Le contrôle shortlist est un
   turbo-frame + form : on propage le flex jusqu'au bouton. */
.ts-card .ts-card-actions { display: flex; flex-direction: row; align-items: stretch; gap: 7px; margin-top: 7px; padding: 0; }
.ts-card .ts-card-actions turbo-frame { display: flex; flex: 1; min-width: 0; }
.ts-card .ts-card-actions form { flex: 1; display: flex; min-width: 0; }
.ts-card .ts-btn {
  flex: 1; width: auto; height: 32px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 10px;
  font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: all .15s ease;
}
.ts-card .ts-btn svg { width: 12px; height: 12px; }
/* Le partial shortlist (variant "card") rend .ts-btn.dark : on lui applique le
   style "ghost" de la maquette V4 (blanc, bord, encre ; shortlisté = vert). */
.ts-card .ts-btn.ghost, .ts-card .ts-btn.dark { background: #fff; border: 1px solid var(--ts-border); color: var(--ts-ink); }
.ts-card .ts-btn.ghost:hover, .ts-card .ts-btn.dark:hover { border-color: var(--ts-gold-200); background: var(--ts-gold-50); color: var(--ts-gold-deep); }
.ts-card .ts-btn.ghost.is-on, .ts-card .ts-btn.dark.is-shortlisted { border-color: #BFE0CC; background: var(--ts-green-50); color: var(--ts-green); }
.ts-card .ts-btn.dark.is-shortlisted svg { fill: var(--ts-green); stroke: var(--ts-green); }
.ts-card .ts-btn.gold { background: var(--ts-cta); color: #fff; text-shadow: 0 1px 2px rgba(60,44,10,.45); box-shadow: 0 3px 10px rgba(163,133,67,.30); }
.ts-card .ts-btn.gold:hover { filter: brightness(1.04); }

/* ══ APERÇU RAPIDE — drawer droite (design V4, retour #1864) ══ */
.ts-qp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20,18,14,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s;
}
.ts-qp-overlay[hidden] { display: none; }
.ts-qp-overlay.open { opacity: 1; visibility: visible; }
.ts-qp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 92vw;
  z-index: 1001;
  background: #fff;
  box-shadow: -10px 0 40px rgba(0,0,0,0.20);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  font-family: 'Geist', system-ui, sans-serif;
}
.ts-qp-drawer.open { transform: translateX(0); }
.ts-qp-content { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ts-qp-scroll { flex: 1; overflow-y: auto; }
/* overflow visible : #2620 — la languette de match déborde sous la photo, comme
   sur la card. La photo remplit exactement sa boîte, rien d'autre ne dépasse. */
.ts-qp-body { padding: 14px 26px 26px; }
.ts-qp-sec {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-ink-mute);
  margin: 16px 0 9px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ts-qp-sec:first-child { margin-top: 0; }
.ts-qp-ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--ts-gold-deep);
  background: var(--ts-cream);
  border: 1px solid var(--ts-cream-border);
  border-radius: 999px;
  padding: 2px 8px;
}
.ts-qp-ai-tag svg { width: 10px; height: 10px; }
/* Pitch video */
/* #1968 : split pitch (pastille ronde dorée) + statut/localisation */
.ts-qp-split { display: flex; align-items: center; gap: 14px; }
.ts-qp-pitch {
  position: relative; width: 56px; height: 56px; padding: 3px; flex-shrink: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--ts-round); box-shadow: 0 2px 8px rgba(163,133,67,.35);
}
.ts-qp-pitch-inner { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #E6E0D4; }
.ts-qp-pitch-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-qp-pitch-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.92); color: #1E1C18;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(0,0,0,.28);
}
.ts-qp-pitch-play svg { width: 12px; height: 12px; margin-left: 1px; }
.ts-qp-split-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ts-qp-pitch-lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ts-gold-deep); }
/* Statut */
.ts-qp-status { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ts-ink-soft); }
.ts-qp-loc { display: inline-flex; align-items: center; gap: 5px; color: var(--ts-ink-mute); }
.ts-qp-loc svg { width: 13px; height: 13px; }
/* Actuellement */
.ts-qp-cur {
  background: var(--ts-cream);
  border: 1px solid var(--ts-cream-border);
  border-radius: 12px;
  padding: 13px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ts-qp-cur-t { font-size: 13.5px; font-weight: 700; color: var(--ts-ink); }
.ts-qp-cur-m { font-size: 12px; color: var(--ts-ink-mute); margin-top: 2px; }
.ts-qp-cur-b { font-size: 11.5px; font-weight: 700; color: var(--ts-gold-deep); white-space: nowrap; }
/* Parcours */
.ts-qp-tl { position: relative; padding-left: 22px; }
.ts-qp-tl::before { content: ""; position: absolute; left: 5.25px; top: 4px; bottom: 8px; width: 1.5px; background: var(--ts-line); }
.ts-qp-tl-i { position: relative; margin-bottom: 15px; }
.ts-qp-tl-i:last-child { margin-bottom: 0; }
.ts-qp-tl-i::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #fff;
  border: 1.5px solid var(--ts-cream-border);
}
.ts-qp-tl-i.is-current::before { background: var(--ts-gold); border-color: var(--ts-gold); }
.ts-qp-tl-top { display: flex; align-items: center; gap: 8px; }
.ts-qp-tl-t { font-size: 13.5px; font-weight: 700; color: var(--ts-ink); }
.ts-qp-tl-now {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ts-success);
  background: #EAF4EE;
  border: 1px solid #BFE0CC;
  border-radius: 5px;
  padding: 2px 6px;
}
.ts-qp-tl-mich { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid #E0A9A5; border-radius: 4px; padding: 2px 5px; line-height: 0; }
.ts-qp-tl-y { margin-left: auto; font-size: 11px; color: var(--ts-ink-mute); white-space: nowrap; }
.ts-qp-tl-m { font-size: 12px; color: var(--ts-ink-mute); margin-top: 2px; }
/* Insight */
.ts-qp-exp { font-size: 12.5px; line-height: 1.65; color: var(--ts-ink-soft); }
/* #3238 (Kevin, 20/08) — « l'à propos, peux-t-on le limiter à 2 lignes maximum ».
   La coupe est faite ICI et pas dans la vue : le paragraphe entier reste dans la
   page (le recruteur le sélectionne et le copie), et le point de coupe suit la
   largeur réelle de la colonne, qui change entre le bureau (440 px) et le
   téléphone (pleine largeur à 390 px). Un `truncate` en Ruby couperait au même
   nombre de caractères dans les deux cas, donc à la mauvaise place au moins une
   fois sur deux.
   Classe DÉDIÉE, et pas `.ts-qp-exp` : la même classe porte aussi la
   disponibilité déclarée dans l'aperçu d'une candidature, qui n'a aucune raison
   d'être coupée. Elle est composée (`.ts-qp-exp.ts-qp-bio`) pour rester au-dessus
   de la typographie ci-dessus quel que soit l'ordre des 66 feuilles servies.
   Pas de « voir plus » : les deux aperçus se terminent par un CTA vers le profil
   complet, qui rend la bio en entier. Ajouter un dépliant ici créerait un
   composant qui n'existe nulle part ailleurs dans ces panneaux. */
.ts-qp-exp.ts-qp-bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* Langues */
.ts-qp-langs { display: flex; flex-direction: column; gap: 13px; }
.ts-qp-lg { display: flex; align-items: center; gap: 12px; }
.ts-qp-lg-t { flex: 1; min-width: 0; }
.ts-qp-lg-n { font-size: 13.5px; font-weight: 700; color: var(--ts-ink); }
.ts-qp-lg-lv { font-size: 12px; color: var(--ts-ink-mute); margin-top: 1px; }
/* #2620 — drapeau du pays devant chaque langue. */
.ts-qp-lg-fl { display: inline-flex; align-items: center; flex-shrink: 0; width: 22px; }
.ts-qp-lg-d { display: flex; gap: 5px; flex-shrink: 0; }
.ts-qp-lg-d i { width: 8px; height: 8px; border-radius: 50%; background: var(--ts-cream-border); opacity: 0.45; }
.ts-qp-lg-d i.on { background: var(--ts-gold); opacity: 1; }
/* Certifications */
.ts-qp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ts-qp-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--ts-ink-soft);
  border: 1px solid var(--ts-line);
  /* #2620 — cadre rectangulaire (moins arrondi) au lieu de la pilule. */
  border-radius: 8px;
  padding: 7px 12px;
}
/* Formation / Référence */
.ts-qp-form, .ts-qp-ref {
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 12px;
  padding: 13px 15px;
}
.ts-qp-form { background: var(--ts-cream); border: 1px solid var(--ts-cream-border); }
.ts-qp-ref { background: #fff; border: 1px solid var(--ts-line); align-items: flex-start; }
.ts-qp-form-i {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gold-metal);
  color: #fff; text-shadow: var(--on-gold-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ts-qp-form-i svg { width: 19px; height: 19px; }
.ts-qp-form-n, .ts-qp-ref-n { font-size: 13.5px; font-weight: 700; color: var(--ts-ink); }
.ts-qp-form-f { font-size: 12px; color: var(--ts-ink-mute); margin-top: 2px; }
.ts-qp-ref-a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold-metal);
  color: #fff; text-shadow: var(--on-gold-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.ts-qp-ref-q { font-size: 12px; color: var(--ts-ink-mute); font-style: italic; margin-top: 3px; line-height: 1.5; }
/* Footer */
.ts-qp-foot {
  border-top: 1px solid var(--ts-line);
  padding: 14px 26px;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.ts-qp-foot turbo-frame { flex: 1; display: flex; }
.ts-qp-foot form { flex: 1; display: flex; }
.ts-qp-foot button, .ts-qp-foot a {
  flex: 1;
  height: 46px;
  border-radius: 13px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.15s;
}
.ts-qp-foot svg { width: 14px; height: 14px; }
.ts-qp-foot .shortlist-btn { border: 1px solid var(--ts-line); background: #fff; color: var(--ts-ink); }
.ts-qp-foot .shortlist-btn:hover { border-color: var(--ts-cream-border); background: var(--ts-cream); color: var(--ts-gold-deep); }
.ts-qp-foot .shortlist-btn.is-on, .ts-qp-foot .shortlist-btn.is-shortlisted { border-color: #BFE0CC; background: #EAF4EE; color: var(--ts-success); }
.ts-qp-foot .view-btn {
  border: none;
  background: linear-gradient(90deg,var(--gold-400) 0%,var(--gold-300) 28%,var(--gold-200) 58%,var(--gold-200) 80%,var(--gold-300) 100%);
  color: #fff; text-shadow: var(--on-gold-shadow);
  box-shadow: 0 3px 10px rgba(184,145,42,0.28);
}
/* Flèches de navigation entre profils */
.ts-qp-nav {
  position: fixed;
  top: 50%;
  right: calc(min(440px, 92vw) + 10px);
  transform: translateY(-50%);
  z-index: 1002;
  display: flex;
  gap: 8px;
}
.ts-qp-arrow {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #1E1C18;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0,0,0,0.28);
  transition: all 0.15s;
}
.ts-qp-arrow:hover { background: var(--ts-cream); color: var(--ts-gold-deep); }
.ts-qp-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.ts-qp-arrow svg { width: 20px; height: 20px; }

/* ── Drawer : bouton Pitch vidéo + modale (AC3.14) ── */
.ts-qp-video-btn { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); background: #FAF6EC; cursor: pointer; display: flex; align-items: center; gap: 11px; margin-bottom: 18px; font-family: inherit; }
.ts-qp-video-btn:hover { background: #F6EFDC; }
.ts-qp-video-play { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-primary), var(--gold-300)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; flex-shrink: 0; }
.ts-qp-video-meta { flex: 1; text-align: left; display: flex; flex-direction: column; }
.ts-qp-video-title { font-size: 12.5px; font-weight: 700; color: #18140C; }
.ts-qp-video-sub { font-size: 10px; color: #888; margin-top: 1px; }
.ts-qp-video-chevron { font-size: 14px; color: #18140C; }

/* Modale centrée par défaut (dialog::modal centré par le navigateur via margin auto). */
.ts-qp-video-modal { border: none; border-radius: 16px; padding: 0; width: min(90vw, 640px); max-width: 90vw; margin: auto; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.ts-qp-video-modal::backdrop { background: rgba(0,0,0,0.55); }
.ts-qp-video-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 18px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.ts-qp-video-modal-title { font-size: 13px; font-weight: 700; color: #18140C; }
.ts-qp-video-modal-tools { display: flex; align-items: center; gap: 4px; }
.ts-qp-video-modal-btn { background: none; border: none; line-height: 1; color: #6B6560; cursor: pointer; padding: 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; transition: background 0.15s; }
.ts-qp-video-modal-btn svg { width: 17px; height: 17px; }
.ts-qp-video-modal-btn:hover { background: #F3EFE6; color: #18140C; }
.ts-qp-video-frame { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1C1A17, #2A2620); display: flex; align-items: center; justify-content: center; }
.ts-qp-video-frame svg { width: 56px; height: 56px; color: rgba(255,255,255,0.85); }
.ts-qp-video-frame:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; }

/* === Responsive === */
@media (max-width: 1180px) {
  .ts-filter-bar { flex-wrap: wrap; border-radius: 18px; }
  .ts-divider { display: none; }
  .ts-cell-wrap { flex: 1 1 30%; }
  .ts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ts-hero { padding: 20px 20px 10px; }
  .ts-hero h1 { font-size: 28px; }
  .ts-mode-panel { padding: 0 20px; }
  .ts-results { padding: 0 20px 40px; }
  .ts-cell-wrap { flex: 1 1 45%; }
  .ts-hero-search { flex-wrap: wrap; border-radius: 18px; }
  .ts-qp-nav { display: none; }
  .ts-results-head { align-items: flex-start; gap: 10px; }
  .ts-results-head .ts-match-facet { margin-left: 0; width: 100%; }
  .ts-results-head .ts-match-facet .ts-cell { width: 100%; }
}
@media (max-width: 640px) {
  .ts-grid { grid-template-columns: 1fr; }
}

/* ═══ Déclarations rapatriées de app/assets/stylesheets/lovable/recruiter-talent-search.css ═══
   `.ts-results-sort` n'existait que dans l'export Lovable, et `.ts-cell .ts-cell-value`
   (specificité 0,2,0) y battait le `.ts-cell-value` local. Ces feuilles ne sont plus
   servies sur les pages produit : on récupère ici les déclarations qui portaient le
   rendu validé. */
.ts-cell { position: relative; }
.ts-cell .ts-cell-value { font-size: 12px; margin-top: 1px; }
.ts-results-sort {
  display: flex; gap: 8px; align-items: center; background: #fff;
  border: 1px solid var(--ts-line); padding: 6px 10px; border-radius: 100px;
  font-size: 12px; color: var(--ts-ink-soft);
}
.ts-results-sort select {
  background: transparent; border: none; font-family: inherit;
  font-size: 12px; color: var(--ts-ink); font-weight: 600; cursor: pointer; outline: none;
}

/* Lecteur Mux injecté dans la modale « Pitch vidéo » (retour Loïc 10/08 : la
   modale ne contenait qu'une icône Play statique, aucune vidéo n'était lue). */
.ts-qp-video-player { width: 100%; height: 100%; display: block; }