/* R17/AC17.4 — Messagerie talent (contact flow).
   Duplication fidele du <style> de /mockups/talent/messages, conformement a la
   regle « zero CSS inline » du projet. Ne pas diverger sans retour client trace. */
.page-messages{
    --gold:var(--gold-500);
    --ink-900:#1A1614; --ink-700:#3D3833; --ink-500:#6B6660; --ink-400:#9A938B;
    --line:#E5E1DB; --cream:#FBF5E4; --cream-line:#EFE2BC;
    --gold-grad:var(--gold-fill);
    --gold-btn:var(--gold-fill);
    --head-grad:linear-gradient(100deg,#FBF5E6 0%,#F4E7C4 58%,var(--gold-200) 100%);
    /* #1874 / #1869 : degrades dores repris tels quels de « Ma shortlist »
       (talent/saved.html.erb : h1 em pour le texte, .cbtn.primary pour l'aplat). */
    --gold-soft:linear-gradient(135deg,#FDFAF1 0%,#F8F0DA 45%,#F2E6C4 100%);
    --gold-band:linear-gradient(90deg,#FDFAF3 0%,#F5ECD2 45%,var(--gold-200) 100%);
    --red:#B23A2E; --blue:#2A5C8F;
    color:var(--ink-900);
  }
  .page-messages svg{width:16px;height:16px}
  .page-messages .serif{font-family:'Playfair Display',serif}

  /* ---- En-tete ---- */
  .pm-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
  /* #1874 : « Contact flow » repris avec le degrade dore de la shortlist */
  .pm-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;
    color:var(--gold-700);background:var(--gold-text-grad);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;width:max-content;
    /* padding droit : la dernière lettre déborde sinon de la boîte de peinture du
       background-clip:text (le bloc est déjà en width:max-content, pas besoin d'inline-block) */
    padding-right:.14em;margin-right:-.14em}
  .pm-h1{font-family:'Playfair Display',serif;font-size:34px;font-weight:700;letter-spacing:-.5px;line-height:1.05}
  .pm-sub{margin-top:8px;font-size:13.5px;color:var(--ink-500);max-width:560px;line-height:1.5}
  .pm-meta{font-size:12.5px;font-weight:600;color:var(--ink-500);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px}

  /* ---- Panneau 3 colonnes ---- */
  .pm-panel{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;
    height:calc(100vh - 240px);min-height:560px;max-height:760px;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 2px 14px rgba(26,22,20,.05)}
  @media(max-width:1100px){.pm-panel{grid-template-columns:270px minmax(0,1fr)}.pm-ctx-col{display:none}}

  /* ===== Colonne 1 - liste ===== */
  .pm-side{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);background:#FCFBF9}
  .pm-search{position:relative;padding:14px 14px 8px}
  .pm-search svg{position:absolute;left:26px;top:24px;color:var(--ink-400)}
  .pm-search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:10px;
    background:#fff;font-family:inherit;font-size:12.5px;color:var(--ink-900);outline:none}
  .pm-search input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,165,89,.16)}
  .pm-tabs{display:flex;gap:6px;padding:4px 14px 10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
  .pm-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-pill);
    border:1px solid var(--line);background:#fff;font-size:11.5px;font-weight:600;color:var(--ink-500);cursor:pointer;transition:.15s}
  .pm-tab .cnt{font-size:10px;font-weight:800;background:#F1EEE8;color:var(--ink-500);border-radius:var(--r-pill);padding:0 6px}
  .pm-tab.on{background:var(--gold-grad);color:var(--on-gold);text-shadow:var(--on-gold-shadow);border-color:transparent}
  .pm-tab.on .cnt{background:rgba(26,22,20,.14);color:#1A1614}
  .pm-tab.alert::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--red)}
  .pm-list{flex:1;overflow-y:auto;padding:8px}
  .pm-row{display:flex;gap:11px;width:100%;text-align:left;padding:11px 22px 11px 10px;border-radius:var(--r-md);
    border:1px solid transparent;background:none;cursor:pointer;transition:.14s;position:relative}
  .pm-row:hover{background:#fff;border-color:var(--line)}
  /* #1869 : onglet de conversation actif sur le degrade dore de la shortlist.
     Aplat doux (--gold-soft) pour garder les 3 lignes lisibles + liseré
     --gold-grad plein a gauche, le meme degrade que .cbtn.primary de saved. */
  .pm-row.active{background:var(--gold-soft);border-color:var(--gold-200);box-shadow:0 2px 10px rgba(163,133,67,.14)}
  /* pas d'overflow:hidden ici : sur un <button>, il empeche la ligne de prendre
     la hauteur de son contenu. Le liseré est arrondi a la main. */
  .pm-row.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
    background:var(--gold-grad);border-radius:12px 0 0 12px}
  .pm-row.active .pm-prev{color:var(--ink-700)}
  .pm-av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    font-family:'Playfair Display',serif;font-weight:700;font-size:15px;color:var(--on-gold);text-shadow:var(--on-gold-shadow);
    background:var(--gold-grad);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(201,169,78,.5)}
  .pm-av.masked{background:linear-gradient(155deg,#EFEAE1,#DDD5C7);color:var(--n-500)}
  .pm-av svg{width:17px;height:17px}
  .pm-rbd{flex:1;min-width:0}
  .pm-l1{display:flex;align-items:center;gap:6px}
  .pm-nm{font-size:13px;font-weight:600;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .pm-nm.unread{font-weight:800}
  .pm-vf{width:14px;height:14px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#fff}
  .pm-vf svg{width:9px;height:9px}
  .pm-time{margin-left:auto;font-size:10.5px;color:var(--ink-400);flex:0 0 auto}
  .pm-rl{font-size:11.5px;color:var(--gold-700);font-weight:600;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pm-prev{font-size:11.5px;color:var(--ink-500);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pm-prev.unread{color:var(--ink-700);font-weight:500}
  .pm-dot{position:absolute;top:50%;right:9px;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--gold)}

  /* badges de statut */
  .pm-badge{display:inline-flex;align-items:center;gap:4px;margin-top:7px;font-size:9.5px;font-weight:800;
    letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill)}
  .st-gold{background:var(--cream);border:1px solid var(--cream-line);color:var(--gold-800)}
  .st-green{background:#EAF3ED;border:1px solid #CFE6D8;color:var(--green)}
  .st-blue{background:#EAF0F8;border:1px solid #CFDDF0;color:var(--blue)}
  .st-red{background:#F8EBE9;border:1px solid #EBD2CD;color:var(--red)}
  .st-grey{background:#F3F1ED;border:1px solid var(--line);color:var(--ink-500)}

  /* ===== Colonne 2 - fil ===== */
  .pm-thread-col{display:flex;flex-direction:column;min-width:0;background:#fff}
  .pm-conv{display:none;flex-direction:column;height:100%;min-height:0}
  .pm-conv.active{display:flex}
  .pm-thead{display:flex;align-items:center;gap:12px;row-gap:8px;flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid var(--line);background:#fff}
  .pm-thead .pm-av{width:40px;height:40px;font-size:14px}
  .pm-hid{min-width:0;flex:1}
  .pm-title{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;color:var(--ink-900)}
  .pm-title .pm-vf{width:15px;height:15px}
  .pm-presence{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink-400);margin-top:2px}
  .pm-presence .d{width:7px;height:7px;border-radius:50%;background:var(--ink-400)}
  .pm-presence.on{color:var(--green)}.pm-presence.on .d{background:var(--green)}
  .rel-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap}
  .rel-chip .d{width:7px;height:7px;border-radius:50%}
  .rel-good{background:#EAF3ED;border:1px solid #CFE6D8;color:var(--green)}.rel-good .d{background:var(--green)}
  .rel-mid{background:var(--amber-50);border:1px solid var(--amber-200);color:var(--amber-strong)}.rel-mid .d{background:var(--amber)}
  .rel-bad{background:#F8EBE9;border:1px solid #EBD2CD;color:var(--red)}.rel-bad .d{background:var(--red)}

  /* Retour client 07/08 : « les bulles sont trop serrees ». La maquette etait
     deja a 12px, elle n'apportait donc pas la reponse : on aere le fil a 16px,
     valeur reportee a l'identique dans /mockups/talent/messages et cote
     recruteur (recruiter_messages.css, /mockups/recruiter/messages). */
  .pm-thread{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:16px;background:#FCFBF9}
  .pm-daysep{align-self:center;font-size:10.5px;font-weight:700;color:var(--ink-400);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 12px;margin:2px 0}
  .pm-brow{display:flex;gap:9px;max-width:82%}
  .pm-brow.them{align-self:flex-start}
  .pm-brow.me{align-self:flex-end;flex-direction:row-reverse}
  .pm-brow .pm-av{width:30px;height:30px;font-size:11px}
  .pm-bub{padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.5}
  .pm-bub.them{background:#fff;border:1px solid var(--line);border-top-left-radius:4px;color:var(--ink-700)}
  .pm-bub.me{background:var(--head-grad);border:1px solid var(--cream-line);border-top-right-radius:4px;color:var(--ink-900)}
  .pm-bmeta{display:block;margin-top:5px;font-size:9.5px;color:var(--ink-400);text-align:right}
  .pm-bmeta .tk{margin-left:4px;color:var(--ink-400)}
  .pm-bmeta .tk.read{color:var(--blue)}

  /* cartes d'evenement (contact flow) */
  .pm-evt{align-self:stretch;border-radius:14px;padding:14px 16px;border:1px solid var(--line);background:#fff}
  .pm-evt-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.02em}
  .pm-evt-h svg{width:16px;height:16px}
  .pm-evt-b{font-size:12.5px;color:var(--ink-700);line-height:1.55;margin-top:8px}
  .pm-evt.gold{background:linear-gradient(180deg,#FFFDF7,#FBF3DF);border-color:var(--cream-line)}
  .pm-evt.gold .pm-evt-h{color:var(--gold-800)}
  .pm-evt.blue{background:#F5F8FC;border-color:#D9E4F2}.pm-evt.blue .pm-evt-h{color:var(--blue)}
  .pm-evt.green{background:#F1F8F3;border-color:#CFE6D8}.pm-evt.green .pm-evt-h{color:var(--green)}
  .pm-evt.red{background:#FBF1EF;border-color:#EBD2CD}.pm-evt.red .pm-evt-h{color:var(--red)}
  .pm-evt.muted{background:#F6F5F2;border-color:var(--line)}.pm-evt.muted .pm-evt-h{color:var(--ink-500)}
  .pm-slot{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12.5px;font-weight:600;color:var(--ink-900);margin-top:8px}
  .pm-slot svg{width:15px;height:15px;color:var(--gold);flex:0 0 auto}
  .pm-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .pm-kv .k{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}
  .pm-kv .v{font-size:12.5px;font-weight:700;color:var(--ink-900);margin-top:2px}
  .pm-evt-act{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
  .btn{border-radius:10px;font-weight:700;font-size:12.5px;padding:9px 14px;cursor:pointer;border:none;font-family:inherit;transition:.15s;display:inline-flex;align-items:center;gap:6px}
  .btn-gold{background:var(--gold-btn);color:var(--on-gold);text-shadow:var(--on-gold-shadow);font-weight:800}
  .btn-gold:hover{filter:brightness(1.03)}
  .btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-700)}
  .btn-ghost:hover{border-color:#d8d2c8;color:var(--ink-900)}
  .btn.grow{flex:1;justify-content:center}

  /* ---- Carte bi-partite (#1875 proposition, #1883 offre) ----
     Bandeau dore en haut + corps blanc a contour dore, forme reprise du
     dossier Drive (.ecard) et alignee sur notre design system. */
  .pm-ecard{background:#fff;border:1px solid #E9DDC0;border-radius:14px;overflow:hidden;
    box-shadow:0 1px 3px rgba(26,22,20,.05)}
  .pm-ecard-band{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--gold-band);
    border-bottom:1px solid #E6D9B6}
  .pm-ecard-ico{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--gold-200),var(--gold-300));box-shadow:inset 0 1px 0 rgba(255,255,255,.5);color:var(--gold-700)}
  .pm-ecard-ico svg{width:15px;height:15px}
  .pm-ecard-lbl{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-800)}
  .pm-ecard-body{padding:14px 16px 15px}

  /* carte « proposition recue » compacte, posee au-dessus de la conversation */
  .pm-prop{margin:14px 20px 0;flex:0 0 auto}
  .pm-prop .pm-ecard-body{padding:13px 15px 14px}
  .pm-prop-role{font-size:14.5px;font-weight:800;color:var(--ink-900);line-height:1.25}
  .pm-prop-est{font-size:11.5px;font-weight:600;color:var(--gold-700);margin-top:2px}
  .pm-prop-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .pm-prop-facts span{font-size:11px;font-weight:600;color:var(--ink-700);background:#FBF8F1;
    border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 9px}
  .pm-prop .pm-evt-act{margin-top:12px}

  /* ---- En-tete conversation : Profil complet + Apercu (#1884) ---- */
  .pm-thead-acts{display:flex;align-items:center;gap:7px;flex:0 0 auto}
  .pm-hbtn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink-700);
    background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 11px;cursor:pointer;
    font-family:inherit;text-decoration:none;transition:.15s;white-space:nowrap}
  .pm-hbtn:hover{border-color:var(--gold);color:var(--gold-800)}
  .pm-hbtn svg{width:13px;height:13px}
  /* Le popover « Aperçu » (`pm-peek`) est parti avec le portage #3270 : le
     tiroir de contexte porte le même libellé et tout le contenu, garder les
     deux mettait deux boutons « Aperçu » sur la même barre. Ses règles sont
     retirées plutôt que laissées mortes — cette feuille est servie sur TOUTES
     les pages produit, y compris la messagerie recruteur. */

  /* bandeau SLA / expiration */
  .pm-sla{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-radius:var(--r-md);margin-bottom:2px}
  .pm-sla.info{background:#FBF3DF;border:1px solid var(--cream-line)}
  .pm-sla.warn{background:#FBECE9;border:1px solid #EFD1CB}
  .pm-sla .ic{flex:0 0 auto;color:var(--gold-800)}
  .pm-sla.warn .ic{color:var(--red)}
  .pm-sla-t{font-size:12.5px;font-weight:800;color:var(--ink-900)}
  .pm-sla-x{font-size:11.5px;color:var(--ink-700);line-height:1.45;margin-top:2px}
  .pm-sla-bar{height:5px;border-radius:99px;background:rgba(0,0,0,.08);margin-top:7px;overflow:hidden}
  .pm-sla-bar i{display:block;height:100%;background:var(--gold-grad)}
  .pm-sla.warn .pm-sla-bar i{background:var(--red)}

  .pm-reveal{align-self:center;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
    color:var(--green);background:#EAF3ED;border:1px solid #CFE6D8;border-radius:var(--r-pill);padding:5px 13px}
  .pm-reveal svg{width:14px;height:14px}

  /* barre Auguste + composer */
  .pm-abar{display:flex;gap:8px;padding:10px 16px 0;flex-wrap:wrap}
  .pm-abtn{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-700);
    background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 12px;cursor:pointer;transition:.15s}
  .pm-abtn:hover{border-color:var(--gold);color:var(--gold-800)}
  .pm-abtn.ag{background:linear-gradient(180deg,#FFFDF7,#FBF3DF);border-color:var(--cream-line);color:var(--gold-800)}
  .pm-abtn svg{width:14px;height:14px}
  .pm-compose{display:flex;gap:9px;padding:12px 16px;border-top:1px solid var(--line);background:#fff;align-items:center}
  .pm-compose input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:#FCFBF9;font-family:inherit;font-size:13px;color:var(--ink-900);outline:none}
  .pm-compose input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,165,89,.16)}
  .pm-send{width:42px;height:42px;border-radius:var(--r-md);flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    background:var(--gold-btn);color:var(--on-gold);text-shadow:var(--on-gold-shadow);border:none;cursor:pointer}
  .pm-send svg{width:18px;height:18px}
  .pm-locked-compose{display:flex;align-items:center;gap:9px;padding:13px 16px;border-top:1px solid var(--line);
    background:#FCFBF9;font-size:12px;color:var(--ink-500)}
  .pm-locked-compose svg{width:15px;height:15px;color:var(--ink-400);flex:0 0 auto}

  /* ===== Colonne 3 - contexte ===== */
  .pm-ctx-col{border-left:1px solid var(--line);background:#FCFBF9;min-width:0}
  .pm-ctx{display:none;flex-direction:column;height:100%;overflow-y:auto}
  .pm-ctx.active{display:flex}
  /* #3264 — le bandeau de tête du tiroir (pastille ronde de 58 px sur dégradé
     doré, `.pm-ctx-hero` / `.pm-ctx-av` / `.pm-ctx-nm` / `.pm-ctx-q`) est
     RETIRÉ : les deux tiroirs rendent maintenant `recruiter/_talent_hero`, le
     bandeau d'identité commun aux aperçus, dessiné par
     recruiter_talent_hero.css. Plus aucun élément ne portait ces classes. */
  .pm-ctx-body{padding:16px 18px 22px}
  /* #3264 — les libellés de section du tiroir portent `.ts-qp-sec`, la seule
     définition du produit (recruiter_talent_search.css). `.pm-ctx-sec` n'a plus
     de porteur : la règle partirait sinon en doublon silencieux. */
  .pm-ctx-tags{display:flex;flex-wrap:wrap;gap:6px}
  .pm-ctx-desc{font-size:12.5px;line-height:1.6;color:var(--ink-700)}
  .pm-keys{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
  .pm-key{background:#fff;padding:11px 13px}
  .pm-key .k{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}
  .pm-key .v{font-size:12.5px;font-weight:700;color:var(--ink-900);margin-top:3px}

  /* frise etat candidature */
  .pm-steps{display:flex;flex-direction:column;gap:0}
  .pm-step{display:flex;gap:11px;position:relative;padding-bottom:14px}
  .pm-step:last-child{padding-bottom:0}
  .pm-step .rail{position:absolute;left:8px;top:18px;bottom:-4px;width:2px;background:var(--line)}
  .pm-step:last-child .rail{display:none}
  .pm-step .bullet{width:18px;height:18px;border-radius:50%;flex:0 0 auto;z-index:1;border:2px solid #fff;background:#E7E2DA;box-shadow:0 0 0 1px var(--line)}
  .pm-step.done .bullet{background:var(--gold-grad);box-shadow:0 0 0 1px var(--gold)}
  .pm-step.cur .bullet{background:var(--gold-grad);box-shadow:0 0 0 3px rgba(196,165,89,.3),0 0 0 1px var(--gold)}
  .pm-step.cur .rail,.pm-step.done .rail{background:var(--gold-grad)}
  .pm-step.red .bullet{background:var(--red);box-shadow:0 0 0 1px var(--red)}
  .pm-step-l{font-size:12px;font-weight:700;color:var(--ink-900);line-height:1.2}
  .pm-step.pending .pm-step-l{color:var(--ink-400);font-weight:600}
  .pm-step-d{font-size:11px;color:var(--ink-500);margin-top:2px}
  .pm-reliability{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
  .pm-reliability:last-child{border-bottom:none}
  .pm-reliability span{color:var(--ink-500)}
  .pm-reliability b{color:var(--ink-900);font-weight:700}
  .pm-reliability b.bad{color:var(--red)}
  .pm-locknote{display:flex;gap:9px;padding:12px 13px;border-radius:var(--r-md);background:#F6F5F2;border:1px solid var(--line);align-items:flex-start}
  .pm-locknote svg{width:16px;height:16px;color:var(--ink-500);flex:0 0 auto;margin-top:1px}
  .pm-locknote p{font-size:11.5px;color:var(--ink-600,#5b564f);line-height:1.5}

  /* toast */
  .pm-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
    background:var(--ink-900);color:#fff;font-size:12.5px;font-weight:600;padding:11px 18px;border-radius:var(--r-pill);z-index:400;transition:.25s}
  .pm-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Correctif de mise en page (passe visuelle 27/07) : sans `min-height:0`, la
   taille minimale automatique d'un enfant de grille vaut son contenu. Les trois
   colonnes depassaient donc la hauteur du panneau, que `overflow:hidden`
   rognait : le bas du panneau de contexte (fiabilite, journee d'essai, bouton
   « Profil complet ») devenait invisible et inatteignable, et le fil ne
   defilait pas. Avec min-height:0, chaque colonne se limite a la hauteur du
   panneau et son `overflow-y:auto` interne reprend la main. */
.page-messages .pm-side,
.page-messages .pm-thread-col,
.page-messages .pm-ctx-col { min-height: 0; }
.page-messages .pm-thread { overflow-y: auto; }

/* ── Retour client 06/08 vague 2 (R13a) — logo de la Maison ─────────────────
   Miroir de recruteur : la pastille garde sa taille, le logo la remplit.
   Identité masquée => le serveur rend le cadenas, jamais un logo. */
.page-messages .pm-av.has-photo { background: #fff; padding: 0; overflow: hidden; }
.page-messages .pm-av.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* R13c — la card « Offre reçue » porte Accepter / Décliner : les deux boutons
   se partagent la rangée, comme la card de proposition juste au-dessus. */
.page-messages .pm-ecard .pm-evt-act form { flex: 1 1 0; min-width: 0; margin: 0; }
.page-messages .pm-ecard .pm-evt-act .btn { width: 100%; margin-bottom: 0; }

/* R13b/R13c — les cards d'événement sont des enfants directs de `.pm-thread`,
   qui est une colonne flex : sans `flex:0 0 auto` elles se font écraser sous
   leur hauteur de contenu et `overflow:hidden` rogne le bas de la carte
   (les boutons Accepter / Décliner disparaissaient à moitié). */
.page-messages .pm-thread > .pm-ecard,
.page-messages .pm-thread > .pm-evt { flex: 0 0 auto; align-self: stretch; }

/* Retour client 07/08 — « les bulles sont trop serrées ». Elles ne sont pas des
   enfants directs de `.pm-thread` : elles vivent dans le conteneur qui reçoit
   les turbo_stream (`#messages_conversation_<id>`), un bloc. Le `gap` du fil ne
   s'appliquait donc PAS entre elles (0px), et `align-self:flex-end` d'une bulle
   « moi » ne s'appliquait pas non plus : tout le fil partait à gauche. Ce
   conteneur reprend la colonne flex et l'espacement du fil. */
.page-messages .pm-thread > .pm-msgs {
  display: flex; flex-direction: column; gap: 16px;
  flex: 0 0 auto; align-self: stretch; min-width: 0;
}

/* Retour Loïc 10/08 — deux liens distincts par ligne de la liste : le contenu
   mène à l'opportunité (ou au fil, selon la nature de l'entrée), la pastille de
   droite ouvre la conversation rattachée à une proposition. La ligne n'est plus
   un <a> mais un conteneur, ce qui permet d'imbriquer deux liens sans produire
   du HTML invalide. Elle garde .pm-row et ses data-*, dont dépend le filtre. */
.pm-row-main{display:flex;gap:11px;flex:1 1 auto;min-width:0;text-align:left;text-decoration:none;color:inherit;}
.pm-row-alt{
  flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;color:var(--gold-600);
  border:1px solid var(--cream-line);background:#fff;text-decoration:none;
}
.pm-row-alt:hover{border-color:var(--gold-500);background:rgba(196,165,89,.08);}

/* ══════════════════════════════════════════════════════════════════════════
   PORTAGE MAQUETTE MESSAGERIE DU 19/08 — côté TALENT, #3270.
   « Bien penser à faire la modification de la messagerie aussi côté Talent
   stp » (Tatianna, WhatsApp du 21/08 08:30). Même source que le portage
   recruteur du 19/08 (#3220 / #3215) :
   doc/clients_files/maquettes_19082026/maquette_messagerie_4.html.

   La maquette fait autorité sur l'ARTICULATION (2 colonnes + tiroir, cards
   d'information repliées, bulles plus grandes) ; la charte reste celle du
   produit. Aucune couleur en dur : jetons uniquement, plus les encres neutres
   déjà déclarées en haut de cette feuille.

   POURQUOI TOUT EST SCOPÉ SOUS `.pm-talent` : Propshaft sert les 66 feuilles
   du produit sur CHAQUE page (ApplicationHelper#product_stylesheets_paths).
   `recruiter_messages.css` est donc chargé ici aussi, et cette feuille est
   chargée sur /recruiter/conversations — les deux redéclarent les mêmes
   sélecteurs `.pm-*`. Une règle en `.pm-x` toute nue ajoutée ici irait aussi
   repeindre la messagerie recruteur, livrée et validée en production ; en
   `.pm-talent .pm-x` elle gagne par spécificité et ne sort pas de cet écran.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Deux colonnes séparées, plus un bloc à trois ──────────────────────────
   La troisième colonne part dans le tiroir (voir plus bas). La maquette
   sépare nettement la liste de la conversation : deux cartes, un vrai vide
   entre les deux, au lieu d'un panneau unique cloisonné. */
.pm-talent .pm-panel{
  grid-template-columns:300px minmax(0,1fr);
  gap:var(--sp-5);
  background:none; border:none; box-shadow:none; overflow:visible;
}
.pm-talent .pm-side,
.pm-talent .pm-thread-col{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 2px 14px rgba(26,22,20,.05);
}
.pm-talent .pm-side{ border-right:1px solid var(--line); }

/* ── En-tête du fil : « Aperçu » (ouvre le tiroir) + « Profil complet » ────
   Côté talent, « Profil complet » n'apparaît qu'après le double accord : la
   barre peut donc n'avoir qu'un seul bouton, elle doit rester propre. */
.pm-talent .pm-thead-acts{ margin-left:auto; display:flex; gap:9px; flex:0 0 auto; }
.pm-talent .pm-hbtn{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  border:1px solid var(--line); background:var(--n-0); border-radius:var(--r-pill);
  padding:8px 14px; font-size:12.5px; font-weight:600; color:var(--ink-700);
  font-family:inherit; cursor:pointer; text-decoration:none; transition:var(--t);
}
.pm-talent .pm-hbtn svg{ width:14px; height:14px; flex:0 0 auto; }
.pm-talent .pm-hbtn:hover{ border-color:var(--gold); color:var(--gold-700); background:var(--cream); }
.pm-talent .pm-hbtn-primary,
.pm-talent .pm-hbtn-primary:hover{
  background:var(--gold-fill); border-color:transparent;
  color:var(--on-gold); text-shadow:var(--on-gold-shadow);
}

/* ── #3285 — la proposition et ses deux cards repliées ont fusionné ────────
   Le bloc `.pm-prop-row` / `.pm-icard` du 19/08 (proposition à gauche, échéance
   et identité protégée repliées à droite) n'a plus d'élément dans le produit :
   la maquette du 24/08 les réunit dans `.pm-offer-banner`, plus bas dans cette
   feuille. Ses règles sont retirées plutôt que gardées : une copie sans porteur
   dérive, c'est exactement ce que #3264 a eu à nettoyer.
   `.pm-info-stack` survit : elle devient la colonne de droite du bandeau. */
.pm-talent .pm-info-stack{
  display:flex; flex-direction:column; gap:var(--sp-3); min-width:0;
}

/* ── Bulles : le texte du fil redevient lisible (#3215) ────────────────────
   La maquette monte le corps de message à 15 px et repasse l'encre en pleine
   valeur. La bulle d'approche de la Maison porte son auteur au-dessus
   (.m-author de la maquette) ; côté talent elle arrive de l'autre bord que
   chez le recruteur, c'est une bulle « them ». */
.pm-talent .pm-bub{ font-size:15px; line-height:1.6; }
.pm-talent .pm-bub.them{ color:var(--ink-900); }
.pm-talent .pm-bauthor{
  display:block; font-size:11.5px; font-weight:600; color:var(--ink-400);
  margin-bottom:5px;
}
.pm-talent .pm-bub.me .pm-bauthor{ color:var(--gold-700); }
.pm-talent .pm-brow.pm-approach{ align-self:flex-start; }

/* ── Tiroir d'aperçu ───────────────────────────────────────────────────────
   Ouverture par « Aperçu », fermeture par la croix, par le fond ou par Échap
   (conversation_context_controller, partagé avec la messagerie recruteur).
   L'attribut `hidden` porte l'état : fermé, le tiroir sort de la tabulation. */
.pm-talent .pm-drawer-scrim{
  position:fixed; inset:0; z-index:300;
  background:rgba(26,22,20,.42); backdrop-filter:blur(2px);
  animation:pm-scrim-in .3s ease;
}
.pm-talent .pm-drawer{
  position:fixed; top:0; right:0; bottom:0; width:400px; max-width:92vw;
  z-index:301; display:flex; flex-direction:column;
  background:var(--n-0); box-shadow:0 24px 64px rgba(26,22,20,.3);
  animation:pm-drawer-in .3s cubic-bezier(.32,.72,.28,1);
}
.pm-talent .pm-drawer[hidden],
.pm-talent .pm-drawer-scrim[hidden]{ display:none; }
.pm-talent .pm-drawer-x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--n-0); color:var(--ink-500);
  display:grid; place-items:center; transition:var(--t);
}
.pm-talent .pm-drawer-x:hover{
  background:var(--cream); border-color:var(--cream-line); color:var(--gold-700);
}
.pm-talent .pm-drawer .pm-ctx{ flex:1 1 auto; min-height:0; }
/* `@keyframes pm-drawer-in` / `pm-scrim-in` et `body.pm-drawer-open` (verrou de
   défilement) sont déclarés une fois dans recruiter_messages.css, servie sur
   toutes les pages produit comme celle-ci. Un keyframe et une règle sur `body`
   sont globaux par nature : les redéclarer ici n'en ferait qu'un doublon, et
   les scoper n'a pas de sens. C'est la seule chose que les deux messageries
   partagent volontairement. */

/* ── Mobile ────────────────────────────────────────────────────────────────
   La feuille ne descendait pas plus bas que 1100 px, où la liste garde 270 px :
   à 390 px il restait ~120 px pour la conversation (bulles écrasées, champ de
   saisie sous la limite). Les deux colonnes s'empilent, et le panneau cesse de
   se caler sur la hauteur de fenêtre pour que chaque bloc garde sa taille. */
@media(max-width:900px){
  .pm-talent .pm-panel{
    grid-template-columns:minmax(0,1fr);
    height:auto; min-height:0; max-height:none;
  }
  .pm-talent .pm-side{ max-height:340px; }
  .pm-talent .pm-thread-col{ height:70vh; min-height:420px; }
  .pm-talent .pm-thead{ flex-wrap:wrap; row-gap:9px; }
  .pm-talent .pm-thead-acts{ margin-left:0; width:100%; }
  .pm-talent .pm-hbtn{ flex:1 1 0; min-width:0; justify-content:center; }
  .pm-talent .pm-brow{ max-width:94%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTAGE MAQUETTE MESSAGERIE DU 24/08 — #3285.
   Source : doc/clients_files/maquettes_24082026/messagerie-talent-FINAL.html
   (WhatsApp Kevin le 24/08 : « on met tout dans la même card en haut, on change
   un peu les visuels »). La maquette est construite À PARTIR de l'application :
   même vocabulaire `pm-*`, même tiroir, même scrim. C'est une évolution de ce
   qu'on a livré le 19/08, pas une réécriture.

   CE QUI CHANGE
   1. UN bandeau (`.pm-offer-banner`) remplace les trois contenants du 19/08 :
      la card de proposition, la card d'échéance repliée, la card d'identité
      repliée. Trois étages qui suivent l'ordre de décision : le liseré (de quoi
      il s'agit, combien de temps il reste), le corps (le poste à gauche, ce
      qu'il faut savoir à droite), le pied pleine largeur.
      Le pied est pleine largeur POUR une raison : tant que la décision vivait
      dans la colonne de gauche, l'œil (lecture en F) rencontrait les boutons
      AVANT l'échéance et l'aperçu. On demandait de trancher avant d'avoir lu.
   2. Le bandeau COLLE en haut du fil et se réduit à une barre au défilement.
      Sans ça il restait visible trois messages puis disparaissait vers le haut,
      alors que c'est le contexte dont on a besoin en écrivant.
   3. Le diagnostic couleur de la maquette : il manquait un PÔLE SOMBRE. Toutes
      les surfaces vivaient entre 92 % et 100 % de luminosité et tous les
      accents dans la même famille chromatique ; sans point d'ancrage, aucun
      élément ne peut ressortir et le doré, appliqué partout, devient le fond.
      Le liseré, l'onglet actif, la barre de sélection et la pastille fléchée
      passent donc sur un dégradé encre → brun doré → doré. Le seul aplat doré
      plein qui reste dans la vue est l'action primaire.

   PORTÉE — Propshaft sert les 66 feuilles du produit sur CHAQUE page, et l'autre
   messagerie redéclare les mêmes `.pm-*`. Toute règle ci-dessous est donc scopée
   `.pm-talent`, sans exception : un test relit cette feuille et échoue si un
   sélecteur en sort.

   COULEURS — aucune valeur écrite en dur : uniquement des jetons de
   design_tokens.css. Le dégradé de marque est recomposé à partir de --ink et
   des jetons or plutôt qu'avec les bruns de la maquette, qui étaient neuf
   hexadécimaux de plus dans une famille où on en a déjà compté neuf.
   ══════════════════════════════════════════════════════════════════════════ */

.pm-talent{
  /* Pôle sombre chaud : encre à gauche, doré à droite. Il descend à la valeur
     de --ink sans quitter l'axe chaud de la marque. */
  --pm-deep-grad:linear-gradient(100deg,var(--ink) 0%,var(--gold-800) 46%,var(--gold-600) 100%);
  --pm-deep-grad-short:linear-gradient(100deg,var(--ink) 0%,var(--gold-800) 100%);
  --pm-deep-grad-v:linear-gradient(180deg,var(--ink) 0%,var(--gold-600) 100%);
  --pm-urgent-grad:linear-gradient(100deg,var(--ink) 0%,var(--red) 100%);
  --pm-on-deep:var(--gold-50);
  --pm-on-deep-soft:var(--gold-100);
  --pm-surface-2:var(--n-100);
  --pm-track:var(--n-200);
}

/* ── Le bandeau ──────────────────────────────────────────────────────────── */
.pm-talent .pm-thread > .pm-offer-banner{ flex:0 0 auto; align-self:stretch; }
.pm-talent .pm-offer-banner{
  margin:0; border-color:var(--n-200);
  position:sticky; top:0; z-index:5;
  transition:box-shadow var(--t);
}
.pm-talent .pm-offer-banner.is-compact{ box-shadow:0 6px 18px rgba(26,22,20,.10); }

/* ── Étage 1 : le liseré, pôle sombre ────────────────────────────────────── */
.pm-talent .pm-offer-banner .pm-ecard-band{
  background:var(--pm-deep-grad); border-bottom:0;
  padding:8px 14px; gap:9px; flex-wrap:wrap; row-gap:6px;
}
.pm-talent .pm-offer-banner.is-urgent .pm-ecard-band{ background:var(--pm-urgent-grad); }
.pm-talent .pm-offer-banner .pm-ecard-lbl{ color:var(--pm-on-deep); }
.pm-talent .pm-offer-banner .pm-ecard-ico{
  width:26px; height:26px; border-radius:8px; box-shadow:none;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  color:var(--gold-200);
}
.pm-talent .pm-offer-banner .pm-ecard-ico svg{ width:13px; height:13px; }
/* L'identité protégée était une card repliée pleine hauteur pour une ligne qui
   ne bougera pas de toute la vie de la conversation : elle monte dans le liseré
   et n'y prend qu'une ligne. Le texte long vit dans le tiroir. */
.pm-talent .pm-band-lock{
  display:inline-flex; align-items:center; gap:6px; min-width:0;
  font-size:11px; font-weight:600; color:var(--pm-on-deep-soft);
}
.pm-talent .pm-band-lock svg{ width:12px; height:12px; flex:0 0 auto; }
/* Seule information périssable de l'écran : elle doit survivre au repli, donc
   elle vit dans le liseré et pas dans le corps. */
.pm-talent .pm-offer-banner .pm-band-deadline{
  margin-left:auto; flex:0 0 auto; white-space:nowrap;
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--pm-on-deep); background:rgba(26,22,20,.42);
  border:1px solid rgba(255,255,255,.26); border-radius:var(--r-pill); padding:3px 9px;
}

/* ── Barre compacte (état replié) ────────────────────────────────────────── */
.pm-talent .pm-offer-compact{
  display:none; width:100%; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px; background:var(--n-0); color:inherit;
  border:0; border-top:1px solid var(--line);
  font-family:inherit; text-align:left; cursor:pointer;
}
.pm-talent .pm-offer-banner.is-compact .pm-offer-compact{ display:flex; }
.pm-talent .pm-offer-banner.is-compact .pm-offer-body,
.pm-talent .pm-offer-banner.is-compact .pm-offer-foot{ display:none; }
.pm-talent .pm-offer-compact-role{ font-size:13px; font-weight:800; color:var(--ink-900); min-width:0; }
.pm-talent .pm-offer-compact-pay{ font-size:13px; font-weight:700; color:var(--gold-800); min-width:0; }
.pm-talent .pm-offer-compact-sep{ color:var(--ink-400); }
.pm-talent .pm-offer-compact-more{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--ink-500);
}
.pm-talent .pm-offer-compact:hover .pm-offer-compact-more{ color:var(--gold-700); }
.pm-talent .pm-offer-compact-more svg{ width:14px; height:14px; }

/* ── Étage 2 : le corps ──────────────────────────────────────────────────── */
.pm-talent .pm-offer-body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;
}
.pm-talent .pm-offer-main{ padding:12px 14px 13px; min-width:0; }
/* La rémunération est le premier critère de décision d'un candidat : elle
   sortait en 11 px, même graisse et même pastille que « CDI ». */
.pm-talent .pm-offer-pay{
  margin-top:5px; font-size:19px; font-weight:800; line-height:1.15;
  color:var(--ink-900); letter-spacing:-.01em;
}
.pm-talent .pm-offer-main .pm-prop-facts{ margin-top:9px; }
/* Colonne de droite : même rythme, séparée par un filet plutôt que par un
   deuxième cadre. */
.pm-talent .pm-offer-body > .pm-info-stack{
  padding:12px 14px 13px; border-left:1px solid var(--line); gap:8px;
}

/* ── L'échéance ──────────────────────────────────────────────────────────── */
/* Elle n'est plus un <details> : c'était la seule information urgente de
   l'écran, et sa phrase la plus utile était cachée derrière un chevron. */
.pm-talent .pm-deadline{
  background:var(--n-0); border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:var(--r-md); padding:9px 12px 10px;
}
.pm-talent .pm-deadline-h{ display:flex; align-items:center; gap:9px; }
.pm-talent .pm-deadline-ic{
  flex:0 0 auto; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center;
  background:var(--amber-50); border:1px solid transparent; color:var(--amber);
}
.pm-talent .pm-deadline-ic svg{ width:13px; height:13px; }
.pm-talent .pm-deadline-t{ font-size:12.5px; font-weight:700; color:var(--ink-900); min-width:0; }
.pm-talent .pm-deadline-d{ margin-top:6px; font-size:11.5px; line-height:1.45; color:var(--ink-700); }
/* La barre se VIDE : pleine à réception, vide à l'expiration. Remplie, elle se
   lisait « expiré » au premier jour. */
.pm-talent .pm-deadline-bar{
  height:3px; border-radius:var(--r-pill); background:var(--pm-track);
  margin-top:7px; overflow:hidden;
}
.pm-talent .pm-deadline-bar i{
  display:block; height:100%; background:var(--amber); transition:width .4s ease;
}
/* Sous 48 h, la pill entière bascule. */
.pm-talent .pm-offer-banner.is-urgent .pm-deadline{
  background:var(--red-50); border-color:var(--red-200); border-left-color:var(--red);
}
.pm-talent .pm-offer-banner.is-urgent .pm-deadline-ic{
  background:var(--red-50); color:var(--red);
}
.pm-talent .pm-offer-banner.is-urgent .pm-deadline-bar i{ background:var(--red); }

/* ── L'aperçu : une card, plus un bouton perdu dans la barre de titre ────── */
.pm-talent .pm-preview-cta{
  --cta-accent:var(--ink);
  --cta-shadow:rgba(26,22,20,.22);
  display:flex; align-items:center; gap:10px; width:100%;
  border:1px solid var(--line); border-radius:14px; background:var(--n-0);
  padding:10px 12px; font-family:inherit; text-align:left; cursor:pointer;
  transition:box-shadow var(--t), transform var(--t), border-color var(--t);
}
.pm-talent .pm-preview-cta:hover{
  transform:translateY(-1px); border-color:var(--gold-500);
  box-shadow:0 10px 30px rgba(26,22,20,.10);
}
.pm-talent .pm-preview-cta:focus-visible{ outline:2px solid var(--gold-500); outline-offset:3px; }
.pm-talent .pm-preview-cta-art{ flex:0 0 auto; width:46px; height:40px; display:block; }
.pm-talent .pm-preview-cta-art svg{ width:100%; height:100%; display:block; }
/* `var()` ne s'applique pas dans un attribut de présentation SVG : la vignette
   ne porte que des CLASSES, et c'est ici qu'elle est peinte. Changer
   l'habillage ne demande alors aucune retouche du dessin. */
.pm-talent .pm-preview-cta-art .cta-paper-back{ fill:var(--n-0); opacity:.8; }
.pm-talent .pm-preview-cta-art .cta-paper{ fill:var(--gold-50); stroke:var(--cream-line); }
.pm-talent .pm-preview-cta-art .cta-line{ fill:var(--n-200); }
.pm-talent .pm-preview-cta-art .cta-accent{ fill:var(--cta-accent); }
.pm-talent .pm-preview-cta-art .cta-accent-soft{ fill:var(--cta-accent); opacity:.18; }
.pm-talent .pm-preview-cta-art .cta-glass{ fill:var(--n-0); fill-opacity:.92; stroke:var(--n-300); }
.pm-talent .pm-preview-cta-art .cta-lens{ stroke:var(--n-300); }
.pm-talent .pm-preview-cta-art .cta-eye{ fill:var(--n-0); }
/* L'or ne subsiste dans le dessin qu'en détail : la pastille œil. */
.pm-talent .pm-preview-cta-art .cta-gold{ fill:var(--gold-500); }
.pm-talent .pm-preview-cta-copy{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pm-talent .pm-preview-cta-t{ font-size:14px; font-weight:700; color:var(--ink-900); line-height:1.25; }
.pm-talent .pm-preview-cta-d{ font-size:12px; line-height:1.45; color:var(--ink-500); }
.pm-talent .pm-preview-cta-arrow{
  margin-left:auto; flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--pm-deep-grad); color:var(--on-gold);
  box-shadow:0 6px 16px var(--cta-shadow);
  transition:transform var(--t), box-shadow var(--t);
}
.pm-talent .pm-preview-cta-arrow svg{ width:16px; height:16px; }
.pm-talent .pm-preview-cta:hover .pm-preview-cta-arrow{
  transform:translateX(3px); box-shadow:0 8px 22px var(--cta-shadow);
}

/* ── Étage 3 : le pied ───────────────────────────────────────────────────── */
.pm-talent .pm-offer-foot{
  border-top:1px solid var(--line); background:var(--pm-surface-2);
  padding:11px 14px 12px;
}
.pm-talent .pm-offer-foot .pm-await{ margin:0; }
.pm-talent .pm-offer-foot-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* `button_to` rend un <form> : c'est LUI l'item flex, pas le bouton. */
.pm-talent .pm-offer-foot-actions > form{ flex:0 1 340px; min-width:0; margin:0; display:flex; }
.pm-talent .pm-offer-foot-actions > form .btn{ width:100%; margin-bottom:0; justify-content:center; }
.pm-talent .pm-offer-foot-actions .pm-accept{ box-shadow:0 6px 18px rgba(163,133,67,.28); }
.pm-talent .pm-offer-foot-note{
  margin-top:7px; font-size:11px; line-height:1.45; color:var(--ink-500);
}

/* ── Confirmation de refus, sans JavaScript maison ───────────────────────── */
/* Décliner est irréversible et notifie l'autre partie : un clic parasite, et
   l'offre est morte. La confirmation reste DANS son contexte (pas de modale) et
   n'a besoin d'aucun contrôleur : c'est un <details>. Le clavier l'ouvre et la
   referme gratuitement, et un téléphone sans survol y a droit aussi.
   Fermé, il reste à l'opposé d'« Accepter » : la distance est la meilleure
   protection contre le clic parasite. Ouvert, il prend sa propre ligne. */
.pm-talent .pm-decline-wrap{ flex:0 0 auto; margin-left:auto; min-width:0; }
.pm-talent .pm-decline-wrap[open]{ flex:1 1 100%; margin-left:0; }
.pm-talent .pm-decline-wrap > summary.pm-decline{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  padding:9px 4px; font-size:12.5px; font-weight:600; color:var(--ink-500);
  text-decoration:underline; text-underline-offset:3px;
}
.pm-talent .pm-decline-wrap > summary::-webkit-details-marker{ display:none; }
.pm-talent .pm-decline-wrap > summary::marker{ content:""; }
.pm-talent .pm-decline-wrap > summary.pm-decline:hover{ color:var(--ink-900); }
/* Le résumé porte les deux libellés (Décliner / Annuler) : c'est le seul moyen
   d'écrire l'état courant sans JavaScript. */
.pm-talent .pm-decline-l-open{ display:none; }
.pm-talent .pm-decline-wrap[open] .pm-decline-l{ display:none; }
.pm-talent .pm-decline-wrap[open] .pm-decline-l-open{ display:inline; }
/* Repliée, la confirmation doit sortir de la MISE EN PAGE, pas seulement de la
   vue. Chrome pose `content-visibility:hidden` sur le contenu d'un <details>
   fermé : le bloc n'est plus peint, mais il garde un rectangle, et son bouton
   « Oui, décliner » ressortait à 401 px sur un écran de 390 (mesure du test
   mobile). `display:none` ferme la mesure comme la vue. */
.pm-talent .pm-decline-wrap:not([open]) .pm-decline-confirm{ display:none; }
.pm-talent .pm-decline-confirm{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px;
  border:1px solid var(--red-200); background:var(--red-50);
  border-radius:var(--r-md); padding:11px 13px;
}
.pm-talent .pm-decline-confirm p{
  margin:0; flex:1 1 220px; min-width:0;
  font-size:12.5px; line-height:1.45; color:var(--red); font-weight:600;
}
.pm-talent .pm-decline-confirm form{ margin:0; flex:0 0 auto; }
.pm-talent .btn-danger{
  background:var(--red); color:var(--n-0); border:1px solid var(--red); font-weight:700;
}
.pm-talent .btn-danger:hover{ filter:brightness(.94); }

/* ── Marqueur de présence, posé sur l'avatar ─────────────────────────────── */
/* Source : User#online? (une page vue il y a moins de 5 minutes). La maquette
   montre aussi un état « absent » (`is-away`) : rien ne le porte en base,
   `online?` est un booléen, il n'est pas rendu. */
.pm-talent .pm-avwrap{ position:relative; flex:0 0 auto; display:block; }
/* La rangée de liste est un flex en `align-items:stretch` : sans ceci, la
   pastille prend toute la hauteur de la ligne et son point de présence, calé
   sur son BAS, se retrouvait à côté du badge d'état. */
.pm-talent .pm-row .pm-avwrap{ align-self:flex-start; }
.pm-talent .pm-thead .pm-avwrap{ align-self:center; }
.pm-talent .pm-pres-dot{
  position:absolute; right:-1px; bottom:-1px;
  width:11px; height:11px; border-radius:50%;
  background:var(--n-300); box-shadow:0 0 0 2.5px var(--n-0);
}
.pm-talent .pm-pres-dot.is-online{ background:var(--green); }
.pm-talent .pm-thead .pm-pres-dot{ width:13px; height:13px; }

/* ── Ligne de présence de l'en-tête ──────────────────────────────────────── */
/* Le point remonte sur l'avatar, il ne reste ici que le libellé. Le bandeau
   « délai de réponse médian » de la maquette (`.pm-sla-chip`) n'est PAS porté :
   il s'appuie sur `users.response_time`, que seules les seeds écrivent. */
.pm-talent .pm-thead .pm-presence{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:11.5px; font-weight:600; color:var(--ink-500); margin-top:2px;
}
.pm-talent .pm-presence-strong{ font-weight:700; color:var(--ink-500); }
.pm-talent .pm-presence.on .pm-presence-strong{ color:var(--green); }
.pm-talent .pm-dotsep{ color:var(--n-300); }

/* ── Lu / non lu ─────────────────────────────────────────────────────────── */
/* Le non-lu se signale par la GRAISSE et une pastille de marque profonde,
   jamais par le doré : sinon « nouveau » et « premium » deviennent le même
   signal. Sources : Conversation#unread_count_for et Message#read?. */
.pm-talent .pm-row.is-unread .pm-nm{ font-weight:800; color:var(--ink); }
.pm-talent .pm-row.is-unread .pm-prev{ color:var(--ink-700); font-weight:600; }
.pm-talent .pm-unread{
  flex:0 0 auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--pm-deep-grad-short); color:var(--on-gold);
  font-size:10.5px; font-weight:800; line-height:18px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.pm-talent .pm-row .pm-l1{ display:flex; align-items:center; gap:7px; }
/* `.pm-rl` porte `white-space:nowrap` + `text-overflow:ellipsis` depuis
   l'origine, sur un <span> resté INLINE : les deux propriétés n'y font rien.
   Un intitulé long (« Chef de Partie tournant en cuisine gastronomique ») sortait
   donc de la colonne et lui donnait une barre de défilement horizontale. */
.pm-talent .pm-rl{ display:block; }
.pm-talent .pm-row .pm-time{ margin-left:auto; flex:0 0 auto; }
/* Accusé de lecture dans l'aperçu de la liste (dernier message envoyé par moi). */
.pm-talent .pm-ticks{
  display:inline-flex; align-items:center; vertical-align:-2px; color:var(--ink-400);
}
.pm-talent .pm-ticks.is-read{ color:var(--green); }
.pm-talent .pm-ticks svg{ width:13px; height:13px; }
/* Accusé de lecture dans la bulle : la double coche AVEC son libellé. */
.pm-talent .pm-readnote{
  display:inline-flex; align-items:center; gap:4px; margin-left:6px;
  font-size:10.5px; font-weight:600; color:var(--green);
}
.pm-talent .pm-readnote svg{ width:12px; height:12px; }
.pm-talent .pm-bmeta{ display:inline-flex; align-items:center; gap:6px; }

/* ── Sortie du tout-doré : onglet actif et ligne sélectionnée ────────────── */
/* La ligne active était un dégradé crème plus une barre dorée, c'est-à-dire le
   même signal que l'onglet actif, que le liseré et que le bouton d'action. Elle
   devient neutre : c'est la barre sombre et la graisse du nom qui portent la
   sélection. */
.pm-talent .pm-tab.on{
  background:var(--pm-deep-grad-short); color:var(--on-gold);
  text-shadow:none; border-color:transparent;
}
.pm-talent .pm-tab.on .cnt{ background:rgba(255,255,255,.18); color:var(--on-gold); }
.pm-talent .pm-row.active{
  background:var(--pm-surface-2); border-color:var(--n-200); box-shadow:none;
}
.pm-talent .pm-row.active::before{ background:var(--pm-deep-grad-v); }

/* ── Empilement ──────────────────────────────────────────────────────────── */
/* 1100 px et non 900 : le fil ne fait que ~370 px de large sur un écran de 980,
   deux colonnes y tombaient à 185 px et le titre de la card d'aperçu passait
   sur quatre lignes. */
@media(max-width:1100px){
  .pm-talent .pm-offer-body{ grid-template-columns:minmax(0,1fr); }
  .pm-talent .pm-offer-body > .pm-info-stack{ border-left:0; border-top:1px solid var(--line); }
}
/* À 390 px, déplié, le bandeau occupait plus que la hauteur du fil : l'offre
   remplissait plus que l'écran et le premier message n'existait plus. Sur
   téléphone il s'ouvre donc REPLIÉ (statut, poste, montant, échéance) et
   « Afficher l'offre » déplie le reste. Le pied, lui, reste toujours visible :
   c'est la raison d'être de l'écran. */
@media(max-width:640px){
  .pm-talent .pm-offer-banner.is-compact .pm-offer-foot{ display:block; }
  .pm-talent .pm-offer-compact{ gap:6px 8px; padding:10px 13px; }
  .pm-talent .pm-offer-compact-more{ margin-left:0; flex:1 1 100%; }
  .pm-talent .pm-preview-cta-art{ display:none; }
  .pm-talent .pm-preview-cta{ gap:10px; padding:12px 13px; }
  .pm-talent .pm-deadline-d{ display:none; }
  .pm-talent .pm-offer-pay{ font-size:18px; }
  .pm-talent .pm-offer-foot-actions > form{ flex:1 1 auto; }
  .pm-talent .pm-decline-wrap{ margin-left:0; }
  .pm-talent .pm-thead .pm-presence{ display:block; font-size:11px; line-height:1.5; }
  .pm-talent .pm-thead .pm-presence .pm-presence-role,
  .pm-talent .pm-thead .pm-presence .pm-dotsep{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .pm-talent .pm-preview-cta,
  .pm-talent .pm-preview-cta-arrow,
  .pm-talent .pm-deadline-bar i{ transition:none; }
  .pm-talent .pm-preview-cta:hover{ transform:none; }
  .pm-talent .pm-preview-cta:hover .pm-preview-cta-arrow{ transform:none; }
}

/* ── Écusson de la Maison anonyme ────────────────────────────────────────── */
/* Un cadenas seul dit « verrouillé », pas « maison ». L'écusson (bouclier plus
   serrure) tient les deux : c'est une maison, et elle est confidentielle. Il
   n'existe QUE côté talent : côté recruteur le sujet est une personne, dont
   l'avatar masqué reste aux initiales. */
.pm-talent .pm-crest{ width:56%; height:56%; display:block; }
.pm-talent .pm-av.masked{
  background:var(--pm-deep-grad-short); border:0; color:var(--gold-200);
}
.pm-talent .pm-thead .pm-av.masked{ box-shadow:0 0 0 3px rgba(26,22,20,.06); }
.pm-talent .ts-qp-hero-initials .pm-crest{ width:44px; height:44px; color:var(--gold-200); }