/* R17/AC17.4 — Messagerie recruteur (contact flow).
   Duplication fidele du <style> de /mockups/recruiter/messages.
   Nettoyé le 06/08 : un bloc ERB/HTML de la vue avait été collé ici. */
  .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%);
    --green:#1D7A46; --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}
  .pm-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--gold-deep);text-transform:uppercase;margin-bottom:6px}
  .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:580px;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:999px;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:16px;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:999px;
    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:999px;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)}
  /* Chip « Essai » : pas de modèle en Brique 2, désactivé + annoté (même
     convention que les blocs Brique 3 de la shortlist). */
  .pm-tab.is-future{opacity:.55;cursor:not-allowed}
  .pm-tab .cnt.cnt-b3{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-600);background:#F6F1E4;border:1px solid #E4DECF}
  .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:12px;
    border:1px solid transparent;background:none;cursor:pointer;transition:.14s;position:relative}
  .pm-row:hover{background:#fff;border-color:var(--line)}
  .pm-row.active{background:#fff;border-color:var(--cream-line);box-shadow:0 2px 10px rgba(26,22,20,.05)}
  .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-deep);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:999px}
  .st-gold{background:var(--cream);border:1px solid var(--cream-line);color:var(--gold-700)}
  .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)}

  /* petit badge match IA */
  .pm-match{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:var(--gold-700);
    background:var(--cream);border:1px solid var(--cream-line);padding:2px 8px;border-radius:999px;white-space:nowrap}

  /* ===== 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;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)}
  .pm-thead-chips{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
  .rel-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;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:#FBF1E5;border:1px solid #F0DCC2;color:var(--gold-deep)}.rel-mid .d{background:var(--gold-500)}
  .rel-bad{background:#F8EBE9;border:1px solid #EBD2CD;color:var(--red)}.rel-bad .d{background:var(--red)}

  /* Meme espacement de fil que cote talent (retour client 07/08) : 16px. */
  .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:999px;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-700)}
  .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-quote{margin-top:10px;padding:10px 13px;border-left:3px solid var(--cream-line);background:#fff;border-radius:0 10px 10px 0;
    font-size:12px;line-height:1.55;color:var(--ink-700);font-style:italic}
  .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-await{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;font-weight:700;color:var(--ink-500);
    background:#F3F1ED;border:1px solid var(--line);border-radius:999px;padding:4px 11px}
  .pm-await svg{width:13px;height:13px}
  .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 d'engagement ESSAI (#1893) ----
     Forme bi-partite reprise du dossier Drive (.ecard) : bandeau dore en haut,
     corps blanc a contour dore. Meme composant que la card offre cote talent. */
  .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:linear-gradient(90deg,#FDFAF3 0%,#F5ECD2 45%,var(--gold-200) 100%);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-deep)}
  .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-700)}
  .pm-ecard-body{padding:14px 16px 15px}
  .pm-trial-when{font-size:19px;font-weight:800;letter-spacing:-.2px;color:var(--ink-900)}
  .pm-trial-where{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gold-deep);font-weight:600;margin-top:5px}
  .pm-trial-where svg{width:13px;height:13px;flex:0 0 auto}
  .pm-trial-rows{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
  .pm-trial-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:4px 0}
  .pm-trial-row dt{font-size:12px;font-weight:600;color:var(--ink-500);flex:0 0 auto}
  .pm-trial-row dd{font-size:12.5px;font-weight:700;color:var(--ink-900);text-align:right}
  .pm-trial-note{font-size:12px;color:var(--ink-500);line-height:1.5;margin-top:10px}
  .pm-trial-wait{display:flex;align-items:flex-start;gap:9px;margin-top:13px;padding:11px 13px;border-radius:10px;
    background:#F7FAF8;border:1.5px dashed #C8DDCE;font-size:11.5px;line-height:1.5;color:#4F6A58}
  .pm-trial-wait svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;color:#3D8A5E}
  .pm-trial-wait b{color:#2C4A37}
  .pm-trial-ok{display:inline-flex;align-items:center;gap:6px;margin-top:13px;font-size:11px;font-weight:700;
    color:var(--green);background:#EAF3ED;border:1px solid #CFE6D8;border-radius:999px;padding:5px 12px}
  .pm-trial-ok svg{width:13px;height:13px}

  /* ---- #1887 : signaux visibles par l'employeur uniquement ---- */
  .pm-private{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-500);background:#F3F1ED;border:1px solid var(--line);
    border-radius:999px;padding:3px 8px}
  .pm-private svg{width:11px;height:11px}
  .pm-ctx-sec-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 9px}
  /* Le libellé de cette rangée porte `.ts-qp-sec` depuis #3264 ; son `margin:0`
     vit dans conversation_preview.css, avec le reste du tiroir. */
  .pm-autonote{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 13px;border-radius:11px;
    background:linear-gradient(180deg,#FFFDF7,#FBF3DF);border:1px solid var(--cream-line)}
  .pm-autonote svg{width:15px;height:15px;color:var(--gold-deep);flex:0 0 auto;margin-top:1px}
  .pm-autonote p{font-size:11.5px;line-height:1.5;color:var(--ink-700)}
  .pm-autonote b{color:var(--gold-700)}

  /* bandeau SLA / attente */
  .pm-sla{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-radius:12px;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-700)}
  .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:999px;padding:5px 13px}
  .pm-reveal svg{width:14px;height:14px}

  /* barre actions recruteur + 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:999px;padding:7px 12px;cursor:pointer;transition:.15s}
  .pm-abtn:hover{border-color:var(--gold);color:var(--gold-700)}
  .pm-abtn.ag{background:linear-gradient(180deg,#FFFDF7,#FBF3DF);border-color:var(--cream-line);color:var(--gold-700)}
  .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:12px;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:12px;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-match{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:10.5px;font-weight:800;letter-spacing:.02em;
    color:var(--gold-700);background:#fff;border:1px solid var(--cream-line);border-radius:999px;padding:4px 11px}
  .pm-ctx-match svg{width:13px;height:13px}
  .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:12px;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}
  .pm-poste-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
  .pm-poste-head .rl{font-size:13px;font-weight:800;color:var(--ink-900)}
  .pm-poste-head .vn{font-size:11px;color:var(--gold-deep);font-weight:600}

  /* 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:12px;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:#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:999px;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) — photos de profil ──────────────────
   La pastille garde exactement sa taille et son anneau doré ; la photo la
   remplit. Une identité encore masquée ne passe jamais par ici (le serveur
   rend alors les initiales), la règle de masquage reste côté vue. */
.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; }

/* R13b — « Proposer un essai » n'a pas de modèle (catégorie Essai, post-MVP) :
   le bouton existe mais reste inerte et visiblement grisé. */
.page-messages .pm-abtn:disabled { opacity: .5; cursor: not-allowed; }
.page-messages .pm-abtn:disabled:hover { border-color: var(--line); color: var(--ink-700); }

/* R13b — modales de décision, partagées avec « Candidature reçue ». Mêmes
   règles que recruiter_application_received.css, re-scopées sur .page-messages
   pour que la barre d'actions du fil ouvre exactement les mêmes fenêtres. */
.page-messages .mo-back{ position:fixed; inset:0; background:rgba(20,16,12,.5); opacity:0; pointer-events:none; transition:opacity .2s; z-index:300; }
.page-messages .mo-back.show{ opacity:1; pointer-events:auto; }
.page-messages .mo{ position:fixed; top:50%; left:50%; transform:translate(-50%,-46%) scale(.97); opacity:0; pointer-events:none; width:480px; max-width:94vw; max-height:88vh; overflow-y:auto; background:#fff; border-radius:18px; box-shadow:0 24px 64px rgba(26,22,20,.3); z-index:301; transition:.22s; padding:24px; }
.page-messages .mo.show{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.page-messages .mo-x{ position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; background:#F1EFEA; color:var(--ink-500); display:grid; place-items:center; border:none; cursor:pointer; }
.page-messages .mo-x:hover{ background:#FBF3DF; color:var(--gold-700); }
.page-messages .mo-eyebrow{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-700); }
.page-messages .mo-title{ font-family:'Playfair Display',Georgia,serif; font-size:21px; font-weight:600; margin-top:5px; color:var(--ink-900); }
.page-messages .mo-sub{ font-size:13px; color:var(--ink-500); margin-top:6px; line-height:1.55; }
.page-messages .mo textarea{ width:100%; min-height:96px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-family:inherit; font-size:13.5px; resize:vertical; margin-top:12px; color:var(--ink-900); }
.page-messages .mo textarea:focus{ outline:none; border-color:var(--gold); }
.page-messages .mo-field{ margin-top:14px; }
.page-messages .mo-field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-700); margin-bottom:6px; }
.page-messages .mo-field input{ width:100%; height:42px; border:1px solid var(--line); border-radius:10px; padding:0 13px; font-family:inherit; font-size:13.5px; color:var(--ink-900); }
.page-messages .mo-field input:focus{ outline:none; border-color:var(--gold); }
.page-messages .mo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.page-messages .mo-foot{ display:flex; gap:10px; margin-top:20px; }
.page-messages .mo-foot .btn{ margin-bottom:0; width:auto; flex:1 1 0; min-width:0; }
.page-messages .mo-cancel{ flex:0 0 auto; padding:0 20px; }

/* 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 — bulles trop serrées : elles ne sont pas des enfants
   directs de `.pm-thread` mais du conteneur qui reçoit les turbo_stream
   (`#messages_conversation_<id>`), un bloc. Ni le `gap` du fil ni
   `align-self:flex-end` (bulle « moi ») ne s'y appliquaient. Même correctif que
   côté talent (talent_messages.css). */
.page-messages .pm-thread > .pm-msgs {
  display: flex; flex-direction: column; gap: 16px;
  flex: 0 0 auto; align-self: stretch; min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTAGE MAQUETTE MESSAGERIE DU 19/08 — #3220 (réarticulation) et #3215
   (« le texte de la conversation s'efface largement après les deux cards »).
   Source : 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, consigne #3220 : « À METTRE AVEC DESIGN SYSTEME TASTELLERS (celui
   que tu as ici est parfait) ». Aucune couleur en dur : jetons uniquement.

   POURQUOI TOUT EST SCOPÉ SOUS `.pm-recruiter` : Propshaft sert les 66 feuilles
   du produit sur CHAQUE page (ApplicationHelper#product_stylesheets_paths).
   `talent_messages.css` est donc chargé ici aussi et redéclare les mêmes
   sélecteurs `.pm-*` sans portée — c'est déjà lui qui style `.pm-prop`,
   `.pm-hbtn` et `.pm-thead-acts` de cet écran. Une règle en `.pm-x` toute nue
   ajoutée ici jouerait à pile ou face avec l'ordre de chargement ; en
   `.pm-recruiter .pm-x` elle gagne par spécificité, et la messagerie talent
   n'est pas touchée.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 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-recruiter .pm-panel{
  grid-template-columns:300px minmax(0,1fr);
  gap:var(--sp-5);
  background:none; border:none; box-shadow:none; overflow:visible;
}
.pm-recruiter .pm-side,
.pm-recruiter .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-recruiter .pm-side{ border-right:1px solid var(--line); }

/* ── En-tête du fil : « Aperçu » (ouvre le tiroir) + « Profil complet » ──── */
.pm-recruiter .pm-thead-acts{ margin-left:auto; display:flex; gap:9px; flex:0 0 auto; }
.pm-recruiter .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-recruiter .pm-hbtn svg{ width:14px; height:14px; flex:0 0 auto; }
.pm-recruiter .pm-hbtn:hover{ border-color:var(--gold); color:var(--gold-700); background:var(--cream); }
.pm-recruiter .pm-hbtn-primary,
.pm-recruiter .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 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. `.pm-info-stack` survit : elle devient la colonne de
   droite du bandeau. */
.pm-recruiter .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 (« texte plus grand que
   l'origine ») et repasse l'encre en pleine valeur. Le message d'approche de
   la Maison, qui était une citation italique 12 px gris clair, devient la
   première bulle du fil, avec son auteur au-dessus (.m-author). */
.pm-recruiter .pm-bub{ font-size:15px; line-height:1.6; }
.pm-recruiter .pm-bub.them{ color:var(--ink-900); }
.pm-recruiter .pm-bauthor{
  display:block; font-size:11.5px; font-weight:600; color:var(--ink-400);
  margin-bottom:5px;
}
.pm-recruiter .pm-bub.me .pm-bauthor{ color:var(--gold-700); }
.pm-recruiter .pm-brow.pm-approach{ align-self:flex-end; }

/* ── Tiroir d'aperçu ───────────────────────────────────────────────────────
   Retour Tatianna 19/08 08:11 : « le split de droite prend trop de place et on
   n'a pas la possibilité de le fermer ». Ouverture par « Aperçu », fermeture
   par la croix, par le fond ou par Échap (conversation_context_controller).
   L'attribut `hidden` porte l'état : fermé, le tiroir sort de la tabulation. */
.pm-recruiter .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-recruiter .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-recruiter .pm-drawer[hidden],
.pm-recruiter .pm-drawer-scrim[hidden]{ display:none; }
@keyframes pm-drawer-in{ from{ transform:translateX(105%); } to{ transform:none; } }
@keyframes pm-scrim-in{ from{ opacity:0; } to{ opacity:1; } }
.pm-recruiter .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-recruiter .pm-drawer-x:hover{
  background:var(--cream); border-color:var(--cream-line); color:var(--gold-700);
}
.pm-recruiter .pm-drawer .pm-ctx{ flex:1 1 auto; min-height:0; }
body.pm-drawer-open{ overflow:hidden; }

/* ── Libellés de section du tiroir : ceux de la charte, pas ceux de la maquette
   Le produit a UNE définition du libellé de section d'un aperçu latéral,
   `.ts-qp-sec` (recruiter_talent_search.css) : 9.5px / 700 / .14em / --n-500.
   C'est elle que rendent l'aperçu talent et l'aperçu d'une candidature.

   Le 21/08 au matin (180d4e3), le tiroir portait encore `.pm-ctx-sec`, transcrit
   de la maquette du 19/08 (800 / .12em / #9A938B), et cette règle-ci recopiait
   les trois propriétés de `.ts-qp-sec` par-dessus. Une copie de plus.
   #3264 (« les mêmes tailles et polices pour les sections ») a tranché autrement :
   la vue rend directement `.ts-qp-sec`. La copie n'a plus de raison d'être.
   Ce qui restait à brancher (les jetons `--ts-*` que cette règle consomme) vit
   dans conversation_preview.css, la feuille commune aux deux tiroirs. */

/* ── Mobile ────────────────────────────────────────────────────────────────
   La feuille ne descendait pas plus bas que 1100 px : à 390 px la liste gardait
   270 px et 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-recruiter .pm-panel{
    grid-template-columns:minmax(0,1fr);
    height:auto; min-height:0; max-height:none;
  }
  .pm-recruiter .pm-side{ max-height:340px; }
  .pm-recruiter .pm-thread-col{ height:70vh; min-height:420px; }
  .pm-recruiter .pm-thead{ flex-wrap:wrap; row-gap:9px; }
  .pm-recruiter .pm-thead-acts{ margin-left:0; width:100%; }
  .pm-recruiter .pm-hbtn{ flex:1 1 0; min-width:0; justify-content:center; }
  .pm-recruiter .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-recruiter`, 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-recruiter{
  /* 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-recruiter .pm-thread > .pm-offer-banner{ flex:0 0 auto; align-self:stretch; }
.pm-recruiter .pm-offer-banner{
  margin:0; border-color:var(--n-200);
  position:sticky; top:0; z-index:5;
  transition:box-shadow var(--t);
}
.pm-recruiter .pm-offer-banner.is-compact{ box-shadow:0 6px 18px rgba(26,22,20,.10); }

/* ── Étage 1 : le liseré, pôle sombre ────────────────────────────────────── */
.pm-recruiter .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-recruiter .pm-offer-banner.is-urgent .pm-ecard-band{ background:var(--pm-urgent-grad); }
.pm-recruiter .pm-offer-banner .pm-ecard-lbl{ color:var(--pm-on-deep); }
.pm-recruiter .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-recruiter .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-recruiter .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-recruiter .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-recruiter .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-recruiter .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-recruiter .pm-offer-banner.is-compact .pm-offer-compact{ display:flex; }
.pm-recruiter .pm-offer-banner.is-compact .pm-offer-body,
.pm-recruiter .pm-offer-banner.is-compact .pm-offer-foot{ display:none; }
.pm-recruiter .pm-offer-compact-role{ font-size:13px; font-weight:800; color:var(--ink-900); min-width:0; }
.pm-recruiter .pm-offer-compact-pay{ font-size:13px; font-weight:700; color:var(--gold-800); min-width:0; }
.pm-recruiter .pm-offer-compact-sep{ color:var(--ink-400); }
.pm-recruiter .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-recruiter .pm-offer-compact:hover .pm-offer-compact-more{ color:var(--gold-700); }
.pm-recruiter .pm-offer-compact-more svg{ width:14px; height:14px; }

/* ── Étage 2 : le corps ──────────────────────────────────────────────────── */
.pm-recruiter .pm-offer-body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;
}
.pm-recruiter .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-recruiter .pm-offer-pay{
  margin-top:5px; font-size:19px; font-weight:800; line-height:1.15;
  color:var(--ink-900); letter-spacing:-.01em;
}
.pm-recruiter .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-recruiter .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-recruiter .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-recruiter .pm-deadline-h{ display:flex; align-items:center; gap:9px; }
.pm-recruiter .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-recruiter .pm-deadline-ic svg{ width:13px; height:13px; }
.pm-recruiter .pm-deadline-t{ font-size:12.5px; font-weight:700; color:var(--ink-900); min-width:0; }
.pm-recruiter .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-recruiter .pm-deadline-bar{
  height:3px; border-radius:var(--r-pill); background:var(--pm-track);
  margin-top:7px; overflow:hidden;
}
.pm-recruiter .pm-deadline-bar i{
  display:block; height:100%; background:var(--amber); transition:width .4s ease;
}
/* Sous 48 h, la pill entière bascule. */
.pm-recruiter .pm-offer-banner.is-urgent .pm-deadline{
  background:var(--red-50); border-color:var(--red-200); border-left-color:var(--red);
}
.pm-recruiter .pm-offer-banner.is-urgent .pm-deadline-ic{
  background:var(--red-50); color:var(--red);
}
.pm-recruiter .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-recruiter .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-recruiter .pm-preview-cta:hover{
  transform:translateY(-1px); border-color:var(--gold-500);
  box-shadow:0 10px 30px rgba(26,22,20,.10);
}
.pm-recruiter .pm-preview-cta:focus-visible{ outline:2px solid var(--gold-500); outline-offset:3px; }
.pm-recruiter .pm-preview-cta-art{ flex:0 0 auto; width:46px; height:40px; display:block; }
.pm-recruiter .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-recruiter .pm-preview-cta-art .cta-paper-back{ fill:var(--n-0); opacity:.8; }
.pm-recruiter .pm-preview-cta-art .cta-paper{ fill:var(--gold-50); stroke:var(--cream-line); }
.pm-recruiter .pm-preview-cta-art .cta-line{ fill:var(--n-200); }
.pm-recruiter .pm-preview-cta-art .cta-accent{ fill:var(--cta-accent); }
.pm-recruiter .pm-preview-cta-art .cta-accent-soft{ fill:var(--cta-accent); opacity:.18; }
.pm-recruiter .pm-preview-cta-art .cta-glass{ fill:var(--n-0); fill-opacity:.92; stroke:var(--n-300); }
.pm-recruiter .pm-preview-cta-art .cta-lens{ stroke:var(--n-300); }
.pm-recruiter .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-recruiter .pm-preview-cta-art .cta-gold{ fill:var(--gold-500); }
.pm-recruiter .pm-preview-cta-copy{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pm-recruiter .pm-preview-cta-t{ font-size:14px; font-weight:700; color:var(--ink-900); line-height:1.25; }
.pm-recruiter .pm-preview-cta-d{ font-size:12px; line-height:1.45; color:var(--ink-500); }
.pm-recruiter .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-recruiter .pm-preview-cta-arrow svg{ width:16px; height:16px; }
.pm-recruiter .pm-preview-cta:hover .pm-preview-cta-arrow{
  transform:translateX(3px); box-shadow:0 8px 22px var(--cta-shadow);
}

/* ── Étage 3 : le pied ───────────────────────────────────────────────────── */
.pm-recruiter .pm-offer-foot{
  border-top:1px solid var(--line); background:var(--pm-surface-2);
  padding:11px 14px 12px;
}
.pm-recruiter .pm-offer-foot .pm-await{ margin:0; }
.pm-recruiter .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-recruiter .pm-offer-foot-actions > form{ flex:0 1 340px; min-width:0; margin:0; display:flex; }
.pm-recruiter .pm-offer-foot-actions > form .btn{ width:100%; margin-bottom:0; justify-content:center; }
.pm-recruiter .pm-offer-foot-actions .pm-accept{ box-shadow:0 6px 18px rgba(163,133,67,.28); }
.pm-recruiter .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-recruiter .pm-decline-wrap{ flex:0 0 auto; margin-left:auto; min-width:0; }
.pm-recruiter .pm-decline-wrap[open]{ flex:1 1 100%; margin-left:0; }
.pm-recruiter .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-recruiter .pm-decline-wrap > summary::-webkit-details-marker{ display:none; }
.pm-recruiter .pm-decline-wrap > summary::marker{ content:""; }
.pm-recruiter .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-recruiter .pm-decline-l-open{ display:none; }
.pm-recruiter .pm-decline-wrap[open] .pm-decline-l{ display:none; }
.pm-recruiter .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-recruiter .pm-decline-wrap:not([open]) .pm-decline-confirm{ display:none; }
.pm-recruiter .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-recruiter .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-recruiter .pm-decline-confirm form{ margin:0; flex:0 0 auto; }
.pm-recruiter .btn-danger{
  background:var(--red); color:var(--n-0); border:1px solid var(--red); font-weight:700;
}
.pm-recruiter .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-recruiter .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-recruiter .pm-row .pm-avwrap{ align-self:flex-start; }
.pm-recruiter .pm-thead .pm-avwrap{ align-self:center; }
.pm-recruiter .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-recruiter .pm-pres-dot.is-online{ background:var(--green); }
.pm-recruiter .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-recruiter .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-recruiter .pm-presence-strong{ font-weight:700; color:var(--ink-500); }
.pm-recruiter .pm-presence.on .pm-presence-strong{ color:var(--green); }
.pm-recruiter .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-recruiter .pm-row.is-unread .pm-nm{ font-weight:800; color:var(--ink); }
.pm-recruiter .pm-row.is-unread .pm-prev{ color:var(--ink-700); font-weight:600; }
.pm-recruiter .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-recruiter .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-recruiter .pm-rl{ display:block; }
.pm-recruiter .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-recruiter .pm-ticks{
  display:inline-flex; align-items:center; vertical-align:-2px; color:var(--ink-400);
}
.pm-recruiter .pm-ticks.is-read{ color:var(--green); }
.pm-recruiter .pm-ticks svg{ width:13px; height:13px; }
/* Accusé de lecture dans la bulle : la double coche AVEC son libellé. */
.pm-recruiter .pm-readnote{
  display:inline-flex; align-items:center; gap:4px; margin-left:6px;
  font-size:10.5px; font-weight:600; color:var(--green);
}
.pm-recruiter .pm-readnote svg{ width:12px; height:12px; }
.pm-recruiter .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-recruiter .pm-tab.on{
  background:var(--pm-deep-grad-short); color:var(--on-gold);
  text-shadow:none; border-color:transparent;
}
.pm-recruiter .pm-tab.on .cnt{ background:rgba(255,255,255,.18); color:var(--on-gold); }
.pm-recruiter .pm-row.active{
  background:var(--pm-surface-2); border-color:var(--n-200); box-shadow:none;
}
.pm-recruiter .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-recruiter .pm-offer-body{ grid-template-columns:minmax(0,1fr); }
  .pm-recruiter .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-recruiter .pm-offer-banner.is-compact .pm-offer-foot{ display:block; }
  .pm-recruiter .pm-offer-compact{ gap:6px 8px; padding:10px 13px; }
  .pm-recruiter .pm-offer-compact-more{ margin-left:0; flex:1 1 100%; }
  .pm-recruiter .pm-preview-cta-art{ display:none; }
  .pm-recruiter .pm-preview-cta{ gap:10px; padding:12px 13px; }
  .pm-recruiter .pm-deadline-d{ display:none; }
  .pm-recruiter .pm-offer-pay{ font-size:18px; }
  .pm-recruiter .pm-offer-foot-actions > form{ flex:1 1 auto; }
  .pm-recruiter .pm-decline-wrap{ margin-left:0; }
  .pm-recruiter .pm-thead .pm-presence{ display:block; font-size:11px; line-height:1.5; }
  .pm-recruiter .pm-thead .pm-presence .pm-presence-role,
  .pm-recruiter .pm-thead .pm-presence .pm-dotsep{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .pm-recruiter .pm-preview-cta,
  .pm-recruiter .pm-preview-cta-arrow,
  .pm-recruiter .pm-deadline-bar i{ transition:none; }
  .pm-recruiter .pm-preview-cta:hover{ transform:none; }
  .pm-recruiter .pm-preview-cta:hover .pm-preview-cta-arrow{ transform:none; }
}