/*
  Aperçu latéral d'une CANDIDATURE REÇUE (slide-over `.ra-overlay`).

  Retours Tatianna du 18/08 (#3190, #3191) et maquette déposée le 19/08
  (doc/clients_files/maquettes_19082026/candidatures_tatianna_v3_4.html), précisée
  sur WhatsApp le 19/08 à 08:08 : « le style graphique du preview doit reprendre
  celui des autres preview, identiques sauf ajout poste visé + CTA en fin de
  preview ».

  Conséquence directe : cette feuille ne redessine RIEN de ce que l'aperçu talent
  dessine déjà. Le corps du panneau porte les classes `.ts-qp-*` de
  recruiter/talent_searches/_preview (sections, statut, parcours, langues,
  certifications, formation), dont les règles vivent dans
  recruiter_talent_search.css et sont globales. On n'y touche pas.

  Ce que cette feuille ajoute, et rien de plus :
    1. les jetons `--ts-*` que ces règles consomment. Ils n'étaient déclarés que
       sur `.ts-page` : hors de la recherche talents, `var(--ts-cream-border)`
       et consorts sont « invalid at computed-value time », donc les bordures et
       les encres DISPARAISSAIENT. C'est une partie du « pas très premium » de
       #3190 (la pastille Vérifié perdait son fond doré, faute de --ts-round).
    2. le chrome du slide-over, DÉ-SCOPÉ de `.page-recruiter-applications` pour
       que le dashboard puisse ouvrir le même panneau (#3216, Kevin).
    3. les deux seuls ajouts demandés : la bannière « Poste visé » et le pied de
       CTA. Plus l'encart du message de candidature, propre à une candidature.

  Zéro couleur en dur : tout passe par les jetons de design_tokens.css /
  components.css (test/assets/design_system_test.rb).

  Passe du 21/08 — « adapté au design système Tastellers » (Kevin, 20/08 12:53)
  ------------------------------------------------------------------------------
  Les deux blocs ajoutés ici (bannière « Poste visé », encart de message) avaient
  été transcrits de la maquette du 19/08 en valeurs LITTÉRALES, alors que le
  produit avait déjà un composant pour chacun. Mesuré au navigateur contre
  l'aperçu talent, qui est la référence validée (#3191) :

    sur-titre de bloc   8.5px / 800 / .1em    →  11px / 700 / .05em  (.ts-qp-pitch-lbl)
    boutons du pied     42px / 10.5px / .02em →  46px / 11.5px / .03em (.ts-qp-foot button)
    gouttière du pied   8px                   →  10px                (.ts-qp-foot)
    padding du pied     12px 26px 15px        →  14px 26px           (.ts-qp-foot)
    rouge « Décliner »  #B23A2E               →  var(--red)          (= #B0432F, celui
                                                                      de la carte, même écran)

  Le pied avait été resserré pour tenir trois libellés sur une ligne. La mesure
  dit que ce n'était pas nécessaire : au gabarit de la charte, le plus long
  (« Profil complet ») fait 104 px pour 111 px disponibles à 390 px.

  Rien n'a bougé dans la structure ni dans l'ordre des sections : c'est
  l'articulation que le client valide.
*/

/* ── 1. Jetons de l'aperçu talent, rendus disponibles hors de .ts-page ────────
   Mêmes valeurs que le bloc `.ts-page` de recruiter_talent_search.css. Les
   dorés passent par les jetons de marque, jamais par un hexadécimal. */
.ra-overlay {
  --ts-gold: var(--gold-500);
  --ts-gold-light: var(--gold-primary);
  --ts-gold-deep: var(--gold-700);
  --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-success: var(--preview-success);
  /* Dégradé « métal brossé » du badge Vérifié, déclaré à :root par components.css. */
  --ts-round: var(--gold-metal);

  /* ── 2. Chrome du slide-over ────────────────────────────────────────────────
     Ces déclarations étaient préfixées `.page-recruiter-applications`, ce qui
     enfermait le panneau sur la boîte de réception. Le dashboard ouvre le même
     (#3216), donc on s'appuie sur le préfixe `ra-`, qui n'appartient qu'à ce
     composant et ne collisionne avec aucune autre feuille. */
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 18, 14, 0.45);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.ra-overlay[hidden] { display: none; }

.ra-panel {
  width: 440px;
  max-width: 92vw;
  height: 100%;
  background: var(--n-0);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  min-height: 0;
  animation: ra-slide-in 0.3s cubic-bezier(.4, 0, .2, 1);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  color: var(--ts-ink);
}
@keyframes ra-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
body.ra-panel-open { overflow: hidden; }

/* Le Turbo-frame s'intercale entre le panneau et son contenu : sans display
   flex, il casse la chaîne et le pied de CTA ne se colle plus en bas. */
.ra-panel > turbo-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* `.ra-panel-inner` porte aussi `.ts-qp-content` (colonne scroll + pied). */
.ra-panel-inner { flex: 1; min-height: 0; }

/* La bannière de tête touche les bords : elle est déjà en pleine largeur, il
   suffit qu'aucun padding ne l'entoure (le corps porte le sien). */
.ra-panel-inner > .ts-qp-scroll > .ts-qp-photo { border-radius: 0; }

/* ── 3a. Bannière « Poste visé » (ajout demandé) ──────────────────────────────
   Transcription de `.ov-poste` de la maquette du 19/08. */
.ra-poste {
  border: 1.5px solid var(--ts-gold);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--n-0);
}
.ra-poste-photo {
  position: relative;
  height: 56px;
  background-size: cover;
  background-position: center 55%;
  background-color: var(--ts-cream);
}
.ra-poste-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35));
}
.ra-poste-body { padding: var(--sp-3) 14px; background: var(--ts-cream); }
/* Sur-titre d'un bloc : la charte en a déjà un, `.ts-qp-pitch-lbl` de l'aperçu
   talent (11px / 700 / .05em / doré profond). La maquette du 19/08 écrivait le
   sien en 8.5px / 800 / .1em, et c'est cette valeur littérale qui a été
   transcrite. On reprend la définition du composant, pas celle de la maquette. */
.ra-poste-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ts-gold-deep);
}
.ra-poste-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ts-ink);
  margin-top: 3px;
}
.ra-poste-etab { font-size: 11.5px; color: var(--ts-ink-mute); margin-top: 2px; }
.ra-poste-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ra-poste-tags span {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--n-0);
  border: 1px solid var(--ts-cream-border);
  color: var(--ts-gold-deep);
}

/* ── 3b. Message de candidature (`.ov-msg` de la maquette) ────────────────── */
.ra-msg {
  border: 1px solid var(--ts-line);
  border-radius: var(--r-md);
  padding: var(--sp-3) 14px;
  background: var(--n-50);
}
/* Même sur-titre que `.ra-poste-eyebrow`, donc même définition que
   `.ts-qp-pitch-lbl`. */
.ra-msg-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ts-gold-deep);
  margin-bottom: 5px;
}
.ra-msg-txt {
  font-size: 12.5px;
  color: var(--ts-ink);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Pitch vidéo dédié à la candidature : le lecteur Mux, dans le cadre du panneau. */
.ra-pitch-player { border-radius: var(--r-md); overflow: hidden; background: var(--ink); }
.ra-pitch-player mux-player { display: block; width: 100%; }
.ra-pitch-pending {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ts-ink-mute);
}

/* ── 3c. Pied de CTA (ajout demandé) ──────────────────────────────────────────
   Le pied porte AUSSI `.ts-qp-foot` : la taille, le rayon et la casse des
   boutons restent ceux de l'aperçu talent (le « identiques » de la cliente).
   Les sélecteurs doublés (0,2,0) passent devant `.ts-qp-foot` quel que soit
   l'ordre de chargement des feuilles : on ne parie pas sur la cascade. */
.ra-foot.ts-qp-foot {
  flex-direction: column;
  gap: 10px;
  padding: 14px 26px;
}
.ra-foot.ts-qp-foot form { margin: 0; }

.ra-foot .ra-cta-reply {
  width: 100%;
  border: none;
  background: var(--gold-fill);
  color: var(--on-gold);
  text-shadow: var(--on-gold-shadow);
  box-shadow: 0 3px 10px rgba(163, 133, 67, 0.30);
}
.ra-foot .ra-cta-reply:hover { filter: brightness(1.03); }

/* #3265 (Tatianna, 21/08) — deux libellés pour le CTA principal : « Répondre &
   entrer en contact » quand la place est là, « Entrer en contact » sur mobile.
   Les deux sont dans le bouton, la CSS en efface un. `display: none` (et non
   une opacité ou un retrait visuel) : le libellé masqué sort aussi de ce que
   lit un lecteur d'écran, sinon le bouton s'annoncerait deux fois. */
.ra-foot .ra-cta-reply .ra-cta-reply-short { display: none; }

/* Rangée secondaire : trois libellés sur une ligne. La maquette du 19/08
   resserrait la sienne (`.ov-foot-row .btn-sl`, 12.5px / 42px) et cette valeur
   littérale avait été transcrite, ce qui donnait des boutons plus petits et plus
   pâles que partout ailleurs (42px / 10.5px / .02em contre 46px / 11.5px / .03em
   dans tous les autres aperçus). Mesuré : les trois libellés au gabarit de la
   charte tiennent large (le plus long, « Profil complet », fait 104 px pour
   111 px disponibles à 390 px), donc rien n'obligeait à réduire. On rend la
   rangée au gabarit `.ts-qp-foot button`. */
.ra-foot-row { display: flex; gap: 10px; }
/* Sélecteur doublé (0,2,0) : `.ts-qp-foot form` et `.ts-qp-foot turbo-frame`
   valent 0,1,1 et remettaient la base à 0 pour deux enfants sur trois, d'où des
   tiers inégaux (193 / 97 / 82 px mesurés). Ici, trois tiers égaux. */
.ra-foot .ra-foot-row > * { flex: 1 1 0%; display: flex; min-width: 0; }
.ra-foot .ra-foot-row form { flex: 1; display: flex; margin: 0; }
.ra-foot .ra-foot-row button,
.ra-foot .ra-foot-row a {
  padding: 0 6px;
  white-space: nowrap;
}

.ra-foot .ra-cta-profile {
  border: 1px solid var(--ts-line);
  background: var(--n-0);
  color: var(--ts-ink);
}
.ra-foot .ra-cta-profile:hover {
  border-color: var(--ts-cream-border);
  background: var(--ts-cream);
  color: var(--ts-gold-deep);
}
.ra-foot .ra-cta-decline {
  width: 100%;
  border: 1px solid var(--red-200);
  background: var(--n-0);
  color: var(--red);
}
.ra-foot .ra-cta-decline:hover { background: var(--red-50); border-color: var(--red); }

/* ── 4. Mobile (mesuré à 390 px) ──────────────────────────────────────────────
   Le panneau prend toute la largeur, le corps resserre son padding et la rangée
   de CTA passe à la ligne plutôt que d'écraser les libellés. */
@media (max-width: 480px) {
  .ra-panel { width: 100%; max-width: 100%; }
  .ra-panel .ts-qp-body { padding: 14px 18px 22px; }
  .ra-panel .ts-qp-photo { height: 240px; }
  .ra-foot.ts-qp-foot { padding: 14px 18px; }
  /* #3265 — la bascule des deux libellés du CTA principal se fait ICI, au
     palier que la feuille utilise déjà : le panneau passe pleine largeur et le
     bouton prend son libellé court d'un seul mouvement. */
  .ra-foot .ra-cta-reply .ra-cta-reply-long { display: none; }
  .ra-foot .ra-cta-reply .ra-cta-reply-short { display: inline; }
}