/* #4755 #4737 (12/10/2026) — messagerie « nouveau design » de Kevin, étape 1 : ACCUEIL et panneau de conversations.

   TRANSCRIPTION LITTÉRALE (brick-mockup-transcription : la source fait autorité, aucune normalisation de charte).
   Source : doc/clients_files/messagerie_nouveau_design_11102026/ (livraison du 11/10 validée par Kevin), posée sur nos maquettes
   app/views/mockups/{talent,recruiter}/messages.html.erb le 12/10.
     1. « Accueil messagerie 08/10 » + « Panneau de conversations 08/10 » : bloc <style> des deux vues de maquette (identique au caractère près
        entre talent et recruteur), recopié tel quel.
     2. « nd-css » : app/views/mockups/shared/_messagerie_nd_css.html.erb (cards à anneau, rail avec noms, panneau allégé, pastilles « Doux »).
        Le bloc « unless recruiter » (panneau allégé) devient « .pm-v3.pm-talent » (même spécificité que « .pm-v3.pm-v3 »).
     3. « nf-correctifs » / « nf-recruteur » : seulement ce qui touche l'accueil et la liste, plus les trois correctifs de lisibilité de Kevin
        (bouton doré « C'est à vous », fondu du Contexte, pied du Contexte). Le reste (bulles, cartes d'événement) relève de l'étape 2.
     4. Adaptations à l'application, en fin de fichier (balisage rendu par le serveur au lieu du DOM construit en JavaScript).
   Vocabulaire : la maquette marque les photos « .is-photo » et les logos « .is-logo » ; l'application marque les deux « .has-photo »
   (ConversationsHelper). Côté Maison une image est une photo de talent : « .pm-v3-rec … .has-photo » reprend les règles « .is-photo ».
   Ors : les dorés que la maquette écrit en dur passent par des jetons de design_tokens.css (valeurs LITTÉRALES, --nd-* quand l'échelle gold
   ne les a pas, cf. design_system_test) ; les commentaires citent la valeur source sans dièse.
   Assemblage et écarts : doc/memory/brick-3/transcription-messagerie-nd.md. */

/* ═════════ 1. Accueil et panneau 08/10 (bloc <style> des vues de maquette) ═════════ */
/* ══ Accueil messagerie 08/10 — « en un coup d'œil » (recruteur + talent) ══════
   L'ancien bloc .pmr-home-in reste dans la page comme SOURCE de données
   (échéances, lignes à traiter, états recalculés par les scripts existants) ;
   .pmh en est la vue : rendue par le script « accueil » en fin de page. */
.pm-v3 .pmr-home-in{ display:none; }
.pm-v3 .pmh{ display:none; width:100%; max-width:1180px; margin:0 auto; padding:26px 28px 40px; box-sizing:border-box; color:var(--ink-900); }
.pm-v3 .pmr-home.active .pmh{ display:block; }
.pm-v3 .pmh *{ box-sizing:border-box; }
.pm-v3 .pmh button{ font-family:inherit; }
.pm-v3 .pmh :focus-visible{ outline:2px solid var(--gold-800); outline-offset:2px; border-radius:8px; }

/* l'accueil prend toute la largeur : plus de colonne de liste ni de contexte */
.pm-v3.is-home .pm-ctx-col, .pm-v3.is-home .pmx-handle{ display:none; }

.pm-v3 .pmh-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-bottom:22px; }
.pm-v3 .pmh-h{ margin:0; font-family:'Playfair Display',serif; font-size:30px; line-height:1.15; font-weight:700; letter-spacing:-.4px; color:var(--ink-900); }
.pm-v3 .pmh-lead{ margin:8px 0 0; font-size:16px; font-weight:600; color:var(--ink-900); }
.pm-v3 .pmh-sub{ margin:4px 0 0; font-size:13.5px; color:var(--ink-500); }

.pm-v3 .pmh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px;
  border:1px solid var(--pmx-line); border-radius:999px; background:#fff; color:var(--ink-900);
  font-size:14px; font-weight:700; cursor:pointer; transition:.14s; text-decoration:none; white-space:nowrap;
}
.pm-v3 .pmh-btn:hover{ border-color:#D6CFC0; background:#FDFBF5; }
.pm-v3 .pmh-btn svg{ width:16px; height:16px; flex:0 0 auto; }
.pm-v3 .pmh-btn.is-primary{ background:var(--gold-btn); border-color:transparent; color:#1A1614; }
.pm-v3 .pmh-btn.is-primary:hover{ filter:brightness(.97); }
.pm-v3 .pmh-btn[disabled]{ opacity:.5; cursor:not-allowed; background:#fff; border-color:var(--pmx-line); color:var(--ink-500); filter:none; }
.pm-v3 .pmh-btn.is-block{ width:100%; }
.pm-v3 .pmh-link{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:6px 2px; cursor:pointer;
  font-size:13.5px; font-weight:700; color:var(--gold-800); }
.pm-v3 .pmh-link:hover{ text-decoration:underline; text-underline-offset:3px; }
.pm-v3 .pmh-link svg{ width:14px; height:14px; }

.pm-v3 .pmh-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:16px; }
/* cartes « halo et reflet » : halo teinté dans l'angle, bord intérieur lumineux, ombre colorée, reflet au survol */
.pm-v3 .pmh-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; min-height:210px; padding:22px;
  border:1px solid var(--pmx-line); border-radius:18px; cursor:pointer;
  background:radial-gradient(120% 90% at 100% 0%,var(--pmh-halo,#FBF3E1) 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#fff,#FEFDFB);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(26,22,20,.04),0 14px 30px -14px var(--pmh-glow,rgba(176,116,30,.25));
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.pm-v3 .pmh-card::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.75),transparent); transform:skewX(-14deg); transition:left .7s ease;
}
.pm-v3 .pmh-card:hover, .pm-v3 .pmh-card:focus-within{
  transform:translateY(-3px); border-color:var(--pmh-edge,var(--nd-gold-edge));
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(26,22,20,.05),0 22px 38px -14px var(--pmh-glow,rgba(176,116,30,.4));
}
.pm-v3 .pmh-card:hover::after{ left:130%; }
.pm-v3 .pmh-card:active{ transform:translateY(0); }
.pm-v3 .pmh-card.t-blue{ --pmh-halo:#EEF2F6; --pmh-glow:rgba(91,122,155,.3); --pmh-edge:#B9C9DA; }
.pm-v3 .pmh-card.is-warn{ --pmh-halo:#FBEEEC; --pmh-glow:rgba(180,68,47,.28); --pmh-edge:#E3B8AE; }
.pm-v3 .pmh-card.is-zero{ --pmh-halo:#F6F4EF; --pmh-glow:rgba(0,0,0,.05); --pmh-edge:var(--pmx-line); cursor:default; }
.pm-v3 .pmh-card.is-zero:hover, .pm-v3 .pmh-card.is-zero:focus-within{ transform:none; }
.pm-v3 .pmh-card.is-zero::after{ display:none; }
.pm-v3 .pmh-card-top{ position:relative; display:flex; align-items:center; gap:14px; }
.pm-v3 .pmh-ico{ flex:0 0 auto; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:#FBF3E1; color:var(--gold-800); }
.pm-v3 .pmh-ico svg{ width:24px; height:24px; }
.pm-v3 .pmh-card .pmh-ico{ width:44px; height:44px; border-radius:12px; }
.pm-v3 .pmh-card .pmh-ico svg{ width:20px; height:20px; }
.pm-v3 .pmh-ico.is-blue{ background:#EEF2F6; color:#5B7A9B; }
.pm-v3 .pmh-ico.is-warn{ background:#FBEEEC; color:var(--danger); }
.pm-v3 .pmh-ico.is-zero{ background:#F3F0EA; color:var(--ink-400); }
.pm-v3 .pmh-num{ font-family:'Playfair Display',serif; font-size:46px; line-height:1; font-weight:700; color:var(--ink-900); }
.pm-v3 .pmh-card.is-zero .pmh-num{ color:var(--ink-400); }
.pm-v3 .pmh-ct{ position:relative; margin:0; font-size:15.5px; font-weight:700; color:var(--ink-900); }
.pm-v3 .pmh-cd{ position:relative; margin:0; flex:1; font-size:13.5px; line-height:1.45; color:var(--ink-500); }
.pm-v3 .pmh-cf{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.pm-v3 .pmh-cp{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.pm-v3 .pmh-cp.is-amber{ background:#FBF1E5; color:var(--amber-strong); border-color:#F0DCC2; }
.pm-v3 .pmh-cp.is-blue{ background:#EEF2F6; color:#2A5C8F; border-color:#CFDAE6; }
.pm-v3 .pmh-cp.is-green{ background:#EAF4EE; color:#1B7A4E; border-color:#BFE0CC; }
.pm-v3 .pmh-cp.is-red{ background:#FBEEEC; color:var(--danger); border-color:#E8C9C2; }
.pm-v3 .pmh-cp.is-zero{ background:#F3F0EA; color:var(--ink-500); border-color:var(--pmx-line); }
.pm-v3 .pmh-card .pmh-btn svg{ transition:transform .2s; }
.pm-v3 .pmh-card:hover .pmh-btn:not([disabled]) svg{ transform:translateX(3px); }
.pm-v3 .pmh-card:hover .pmh-btn.is-primary{ box-shadow:0 6px 14px -6px rgba(176,116,30,.5); }
.pm-v3 .pmh-pa{ display:flex; align-items:center; min-width:0; }
.pm-v3 .pmh-pa .pmh-pe{ position:relative; }
.pm-v3 .pmh-pa .pmh-pe + .pmh-pe, .pm-v3 .pmh-pa .pmh-plus{ margin-left:-10px; transition:margin .25s ease; }
.pm-v3 .pmh-card:hover .pmh-pa .pmh-pe + .pmh-pe, .pm-v3 .pmh-card:hover .pmh-pa .pmh-plus{ margin-left:-4px; }
.pm-v3 .pmh-pe > button{ all:unset; display:block; cursor:pointer; border-radius:50%; }
.pm-v3 .pmh-pe > button:focus-visible{ outline:2px solid var(--gold-800); outline-offset:2px; }
.pm-v3 .pmh-pe .pm-av{ width:36px; height:36px; border:2px solid #fff; box-shadow:0 0 0 1px var(--pmx-line); transition:transform .2s ease, box-shadow .2s ease; margin:0; }
.pm-v3 .pmh-pe:hover .pm-av, .pm-v3 .pmh-pe:focus-within .pm-av{ transform:translateY(-3px); box-shadow:0 0 0 2px var(--nd-gold-edge); }
.pm-v3 .pmh-plus{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#F3F0EA; color:var(--ink-700); font-size:12px; font-weight:700; border:2px solid #fff; box-shadow:0 0 0 1px var(--pmx-line); }
.pm-v3 .pmh-tip{
  position:absolute; left:-6px; bottom:calc(100% + 10px); width:220px; padding:10px 12px; text-align:left;
  background:#fff; border:1px solid var(--pmx-line); border-radius:12px; box-shadow:0 14px 28px -10px rgba(26,22,20,.25);
  opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:5;
}
.pm-v3 .pmh-pe:nth-child(n+3) .pmh-tip{ left:auto; right:-6px; }
.pm-v3 .pmh-pe:hover .pmh-tip, .pm-v3 .pmh-pe:focus-within .pmh-tip{ opacity:1; transform:none; }
.pm-v3 .pmh-tip b{ display:block; font-size:13px; color:var(--ink-900); }
.pm-v3 .pmh-tip span{ display:block; font-size:12px; color:var(--ink-500); overflow-wrap:anywhere; }
@media (hover:none){ .pm-v3 .pmh-tip{ display:none; } }
@media (prefers-reduced-motion:reduce){ .pm-v3 .pmh-pe .pm-av, .pm-v3 .pmh-tip, .pm-v3 .pmh-pa .pmh-pe + .pmh-pe{ transition:none; } }
@media (prefers-reduced-motion:reduce){ .pm-v3 .pmh-card, .pm-v3 .pmh-card::after, .pm-v3 .pmh-card .pmh-btn svg{ transition:none; } }

.pm-v3 .pmh-lower{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; margin-bottom:16px; }
.pm-v3 .pmh-panel{ padding:22px; border:1px solid var(--pmx-line); border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(26,22,20,.04); }
.pm-v3 .pmh-ph{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px; }
.pm-v3 .pmh-pt{ margin:0; font-family:'Playfair Display',serif; font-size:21px; font-weight:700; color:var(--ink-900); }
.pm-v3 .pmh-ps{ margin:2px 0 0; font-size:13.5px; color:var(--ink-500); }
.pm-v3 .pmh-list{ list-style:none; margin:10px 0 0; padding:0; border-top:1px solid var(--pmx-line); }
.pm-v3 .pmh-item{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--pmx-line); }
.pm-v3 .pmh-item:last-child{ border-bottom:0; }
.pm-v3 .pmh-item .pmr-av{ flex:0 0 auto; width:44px; height:44px; }
.pm-v3 .pmh-b{ flex:1; min-width:0; }
.pm-v3 .pmh-t{ margin:0; font-size:14.5px; font-weight:700; color:var(--ink-900); overflow-wrap:anywhere; }
.pm-v3 .pmh-d{ margin:2px 0 0; font-size:13px; color:var(--ink-500); overflow-wrap:anywhere; }
.pm-v3 .pmh-pill{ flex:0 0 auto; font-size:12px; color:var(--ink-500); border:1px solid var(--pmx-line); border-radius:999px; padding:3px 10px; white-space:nowrap; }
.pm-v3 .pmh-pill.is-late{ border-color:#E3C9C2; color:var(--danger); font-weight:700; }
.pm-v3 .pmh-item .pmh-btn{ min-height:38px; padding:0 16px; font-size:13.5px; }
.pm-v3 .pmh-date{ flex:0 0 auto; width:46px; text-align:center; }
.pm-v3 .pmh-date b{ display:block; font-family:'Playfair Display',serif; font-size:24px; line-height:1; color:var(--ink-900); }
.pm-v3 .pmh-date span{ display:block; margin-top:3px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); }
.pm-v3 .pmh-kind{ flex:0 0 auto; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; color:#2A5C8F; background:#EAF1F9; border:1px solid #C9D9EC; white-space:nowrap; }
.pm-v3 .pmh-kind.is-essai{ color:#1B7A4E; background:#EAF4EE; border-color:#BFE0CC; }
.pm-v3 .pmh-go{ flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--pmx-line); border-radius:50%; background:#fff; color:var(--ink-700); cursor:pointer; }
.pm-v3 .pmh-go:hover{ border-color:#D6CFC0; color:var(--ink-900); }
.pm-v3 .pmh-go svg{ width:16px; height:16px; }
.pm-v3 .pmh-foot{ margin-top:10px; }
.pm-v3 .pmh-none{ margin:14px 0 0; padding:18px 0 4px; font-size:13.5px; color:var(--ink-500); border-top:1px solid var(--pmx-line); }

.pm-v3 .pmh-find{ display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; padding:20px 22px; border:1px solid var(--pmx-line); border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(26,22,20,.04); }
.pm-v3 .pmh-find .pmh-ico{ width:48px; height:48px; }
.pm-v3 .pmh-find-t{ flex:0 1 240px; min-width:180px; }
.pm-v3 .pmh-find form{ flex:1 1 360px; display:flex; gap:10px; min-width:0; }
.pm-v3 .pmh-q{ flex:1; min-width:0; min-height:44px; padding:0 16px; border:1px solid var(--pmx-line); border-radius:999px; background:#fff; font:inherit; font-size:14px; color:var(--ink-900); }
.pm-v3 .pmh-q::placeholder{ color:var(--ink-400); }
.pm-v3 .pmh-chip{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border:1px solid var(--pmx-line); border-radius:999px; background:#fff; color:var(--ink-700); font-size:13px; font-weight:600; cursor:pointer; }
.pm-v3 .pmh-chip:hover{ border-color:#D6CFC0; color:var(--ink-900); }
.pm-v3 .pmh-chip b{ color:var(--ink-900); }
.pm-v3 .pmh-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* états : chargement, erreur, vide */
.pm-v3 .pmh-state{ padding:40px 24px; text-align:center; border:1px solid var(--pmx-line); border-radius:16px; background:#fff; }
.pm-v3 .pmh-state h3{ margin:0 0 6px; font-family:'Playfair Display',serif; font-size:22px; color:var(--ink-900); }
.pm-v3 .pmh-state p{ margin:0 auto 18px; max-width:460px; font-size:14px; color:var(--ink-500); }
.pm-v3 .pmh-skel{ border-radius:16px; background:linear-gradient(90deg,#F4F1EA 25%,#FBFAF7 50%,#F4F1EA 75%); background-size:200% 100%; animation:pmhsk 1.3s linear infinite; }
@keyframes pmhsk{ to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .pm-v3 .pmh-skel{ animation:none; } }

@media(max-width:1100px){ .pm-v3 .pmh-lower{ grid-template-columns:minmax(0,1fr); } }
@media(max-width:860px){
  .pm-v3 .pmh{ padding:18px 14px 28px; }
  .pm-v3 .pmh-h{ font-size:25px; }
  .pm-v3 .pmh-cards{ grid-template-columns:minmax(0,1fr); }
  .pm-v3 .pmh-head .pmh-btn{ width:100%; }
}
@media(max-width:560px){
  .pm-v3 .pmh-item{ flex-wrap:wrap; }
  .pm-v3 .pmh-item .pmh-b{ flex:1 1 calc(100% - 70px); }
  .pm-v3 .pmh-item .pmh-btn, .pm-v3 .pmh-pill{ margin-left:58px; }
  .pm-v3 .pmh-find form{ flex-wrap:wrap; }
  .pm-v3 .pmh-find form .pmh-btn{ width:100%; }
}

/* ══ Panneau de conversations 08/10 — ouvert / réduit / masqué, recherche en tête ═══ */
.pm-v3 .pmh-sh{ display:flex; align-items:center; gap:8px; padding:14px 14px 4px 16px; }
.pm-v3 .pmh-sh h2{ flex:1; margin:0; font-family:'Playfair Display',serif; font-size:20px; line-height:1.2; font-weight:700; color:var(--ink-900); }
.pm-v3 .pmh-sb{ width:36px; height:36px; display:grid; place-items:center; border:1px solid transparent; border-radius:10px; background:none; color:var(--ink-700); cursor:pointer; transition:.15s; }
.pm-v3 .pmh-sb:hover{ background:#F6F3EC; border-color:var(--pmx-line); color:var(--ink-900); }
.pm-v3 .pmh-sb:focus-visible, .pm-v3 .pmh-show:focus-visible, .pm-v3 .pmh-rb:focus-visible{ outline:2px solid var(--gold-800); outline-offset:2px; }
.pm-v3 .pmh-sb svg, .pm-v3 .pmh-show svg{ width:16px; height:16px; }
.pm-v3 .pmh-sl{ display:block; padding:6px 16px 0; font-size:13px; font-weight:700; color:var(--ink-900); }
.pm-v3 .pm-side .pm-search{ padding:8px 14px 6px; }
.pm-v3 .pm-side .pm-search input{ min-height:42px; font-size:14px; }
/* filtres en pastilles (Tous / Par poste / Non lus + compteur) */
.pm-v3 .pm-side .pmr-seg, .pm-v3 .pm-side .pmh-chips{ flex:0 0 auto; align-content:flex-start; display:flex; flex-wrap:wrap; gap:8px; padding:4px 14px 6px; background:none; border:0; box-shadow:none; }
.pm-v3 .pm-side .pmr-seg button, .pm-v3 .pm-side .pmh-chip{
  flex:0 0 auto; min-height:36px; padding:0 14px; border:1px solid var(--pmx-line); border-radius:999px; background:#fff; color:var(--ink-700);
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; box-shadow:none;
}
.pm-v3 .pm-side .pmr-seg button:hover, .pm-v3 .pm-side .pmh-chip:hover{ border-color:#D6CFC0; color:var(--ink-900); }
.pm-v3 .pm-side .pmr-seg button.on, .pm-v3 .pm-side .pmh-chip[aria-pressed="true"]{ background:var(--gold-btn); border-color:transparent; color:#1A1614; font-weight:700; }
.pm-v3 .pm-side .pmr-seg button:focus-visible, .pm-v3 .pm-side .pmh-chip:focus-visible{ outline:2px solid var(--gold-800); outline-offset:2px; }
.pm-v3 .pm-side .pmh-cnt{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#F3F0EA; color:var(--ink-900); font-size:12px; font-weight:700; display:inline-grid; place-items:center; }
.pm-v3 .pm-side .on .pmh-cnt{ background:rgba(255,255,255,.55); }
.pm-v3 .pm-side .pm-tabs-toggle{ margin:2px 14px 6px; min-height:36px; }
/* liste : aperçu sur deux lignes au plus */
.pm-v3 .pm-side .pm-prev{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; font-size:12.5px; }
.pm-v3 .pm-side .pm-nm{ font-size:14px; }
.pm-v3 .pm-side .pm-rl{ font-size:12.5px; }
.pm-v3 .pm-side .pm-time{ font-size:12px; }
/* barre réduite */
.pm-v3 .pmh-rail{ display:none; flex-direction:column; align-items:center; gap:10px; padding:10px 0; height:100%; overflow-y:auto; }
.pm-v3 .pmh-rb{ position:relative; flex:0 0 auto; width:48px; height:48px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; }
.pm-v3 .pmh-rb .pm-av{ width:44px; height:44px; margin:0; transition:box-shadow .15s ease, transform .15s ease; }
.pm-v3 .pmh-rb:hover .pm-av{ transform:translateY(-2px); box-shadow:0 0 0 2px var(--nd-gold-edge); }
.pm-v3 .pmh-rb.is-active .pm-av{ box-shadow:0 0 0 2px var(--gold-800); }
.pm-v3 .pmh-rb i{ position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#2A5C8F; color:#fff; border:2px solid #fff; font-family:inherit; font-size:10px; font-weight:700; line-height:12px; font-style:normal; text-align:center; box-sizing:content-box; }
.pm-v3 .pmh-rail .pmh-sb{ border-color:var(--pmx-line); background:#fff; }
.pm-v3 .pmh-show{ display:none; align-items:center; gap:8px; min-height:40px; padding:0 16px; border:1px solid var(--pmx-line); border-radius:999px; background:#fff; color:var(--ink-900); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.pm-v3 .pmh-show:hover{ border-color:#D6CFC0; background:#FDFBF5; }
.pm-v3.side-hidden .pmh-show{ display:inline-flex; }
@media(min-width:861px){
  .pm-v3.side-reduced .pm-panel, .pm-v3.side-reduced.has-ctx .pm-panel{ grid-template-columns:76px minmax(0,1fr); }
  .pm-v3.side-reduced.has-ctx .pm-panel{ grid-template-columns:76px minmax(0,1fr) 320px; }
  .pm-v3.side-hidden .pm-panel, .pm-v3.side-hidden.has-ctx .pm-panel{ grid-template-columns:minmax(0,1fr); }
  .pm-v3.side-hidden.has-ctx .pm-panel{ grid-template-columns:minmax(0,1fr) 320px; }
  .pm-v3.side-hidden .pm-side{ display:none; }
  .pm-v3.side-reduced .pm-side > :not(.pmh-rail):not(.pmh-edge){ display:none !important; }
  .pm-v3.side-reduced .pmh-rail{ display:flex; }
}
@media(max-width:860px){ .pm-v3 .pmh-sh .pmh-sb, .pm-v3 .pmh-show{ display:none !important; } .pm-v3 .pmh-rail{ display:none !important; } }
.pm-v3 .pmh-sstate{ margin:10px 14px; padding:22px 16px; text-align:center; border:1px solid var(--pmx-line); border-radius:14px; background:#fff; }
.pm-v3 .pmh-sstate h3{ margin:0 0 6px; font-family:'Playfair Display',serif; font-size:18px; color:var(--ink-900); }
.pm-v3 .pmh-sstate p{ margin:0 0 12px; font-size:13px; color:var(--ink-500); }
@media (prefers-reduced-motion:reduce){ .pm-v3 .pmh-sb, .pm-v3 .pmh-rb .pm-av{ transition:none; } }

/* barre réduite : bouton doré « bulle » + compteur, et libellé « 6 · 3 non lues » */
.pm-v3 .pmh-big{ position:relative; flex:0 0 auto; width:52px; height:52px; padding:0; border:0; border-radius:16px; cursor:pointer; display:grid; place-items:center;
  background:var(--gold-btn); color:#1A1614; box-shadow:0 8px 18px -8px rgba(176,116,30,.6); transition:transform .2s ease, box-shadow .2s ease; }
.pm-v3 .pmh-big:hover{ transform:translateY(-2px); box-shadow:0 12px 22px -8px rgba(176,116,30,.7); }
.pm-v3 .pmh-big:focus-visible{ outline:2px solid var(--gold-800); outline-offset:3px; }
.pm-v3 .pmh-big svg{ width:22px; height:22px; }
.pm-v3 .pmh-big em{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--ink-900); color:#fff; border:2px solid #fff;
  font-family:inherit; font-size:11px; font-weight:700; line-height:16px; font-style:normal; text-align:center; box-sizing:border-box; }
.pm-v3 .pmh-bsub{ flex:0 0 auto; margin:-2px 0 4px; max-width:88px; text-align:center; font-size:12px; font-weight:600; line-height:1.25; color:var(--ink-500); }
.pm-v3 .pmh-sb.is-round{ border-radius:50%; border-color:var(--pmx-line); background:#fff; }
.pm-v3 .pmh-sb.is-round:hover{ background:#FDFBF5; border-color:#D6CFC0; }
@media(min-width:861px){
  .pm-v3.side-reduced .pm-panel, .pm-v3.side-reduced.has-ctx .pm-panel{ grid-template-columns:112px minmax(0,1fr); }
  .pm-v3.side-reduced.has-ctx .pm-panel{ grid-template-columns:112px minmax(0,1fr) 320px; }
}
@media (prefers-reduced-motion:reduce){ .pm-v3 .pmh-big{ transition:none; } }
.pm-v3 .pmh-blabel{ flex:0 0 auto; margin:2px 0 0; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-900); }
.pm-v3 .pmh-bsub{ margin-top:-4px; }

/* ══ Accueil 08/10 : une carte affiche sa liste sous les cartes (le panneau de gauche ne bouge pas) ══ */
.pm-v3 .pmh-card.is-zero{ cursor:pointer; }
.pm-v3 .pmh-card.is-sel, .pm-v3 .pmh-card.is-sel:hover{
  transform:translateY(-3px); border-color:var(--pmh-edge,var(--nd-gold-edge));
  box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(223,165,43,.30),0 22px 38px -14px var(--pmh-glow,rgba(176,116,30,.4));
}
.pm-v3 .pmh-card.t-blue.is-sel{ box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(91,122,155,.30),0 22px 38px -14px var(--pmh-glow); }
.pm-v3 .pmh-card.is-warn.is-sel{ box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(180,68,47,.25),0 22px 38px -14px var(--pmh-glow); }
.pm-v3 .pmh-card.is-zero.is-sel{ box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(26,22,20,.12); }
.pm-v3 .pmh-detail{ margin-bottom:16px; }
.pm-v3 .pmh-detail .pmh-pt:focus{ outline:none; }
.pm-v3 .pmh-nb{ display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 8px; margin-left:10px; border-radius:999px; background:#F3F0EA; color:var(--ink-900); font-family:inherit; font-size:13px; font-weight:700; vertical-align:2px; }
.pm-v3 .pmh-link.is-back svg{ transform:rotate(180deg); }
.pm-v3 .pmh-item .pm-av{ width:44px; height:44px; margin:0; flex:0 0 auto; }
.pm-v3 .pmh-item .pmh-d.is-2l{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pm-v3 .pmh-st{ flex:0 0 auto; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:#F3F0EA; color:var(--ink-700); border:1px solid var(--pmx-line); white-space:nowrap; }
.pm-v3 .pmh-tm{ flex:0 0 auto; font-size:12px; color:var(--ink-500); white-space:nowrap; }
@media(max-width:560px){ .pm-v3 .pmh-item .pmh-st, .pm-v3 .pmh-item .pmh-tm{ margin-left:58px; } }

/* barre réduite 08/10 : photo + nom + début de conversation, 112 px (+22 %) */
.pm-v3 .pmh-rail{ gap:4px; padding:10px 6px 12px; }
.pm-v3 .pmh-rail .pmh-big{ margin-top:2px; }
.pm-v3 .pmh-rb{ width:100%; height:auto; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border-radius:12px; text-align:center; font-family:inherit; color:inherit; transition:background .15s ease, box-shadow .15s ease; }
.pm-v3 .pmh-rb:hover{ background:#FBF3E1; }
.pm-v3 .pmh-rb.is-active{ background:#FBF3E1; box-shadow:inset 0 0 0 1px var(--nd-gold-edge); }
.pm-v3 .pmh-rb:focus-visible{ outline:2px solid var(--gold-800); outline-offset:-2px; }
.pm-v3 .pmh-rp{ position:relative; display:block; width:48px; height:48px; flex:0 0 auto; }
.pm-v3 .pmh-rb .pmh-rp .pm-av{ width:48px; height:48px; }
.pm-v3 .pmh-rb:hover .pm-av{ transform:none; box-shadow:0 0 0 2px var(--nd-gold-edge); }
.pm-v3 .pmh-rp i{ top:-3px; right:-5px; }
.pm-v3 .pmh-rn{ display:block; width:100%; font-size:12px; font-weight:700; line-height:1.25; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-v3 .pmh-rv{ display:-webkit-box; width:100%; font-size:12px; line-height:1.3; color:var(--ink-500); -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.pm-v3 .pmh-rb.is-unread .pmh-rv{ color:var(--ink-700); font-weight:600; }
.pm-v3 .pmh-bsub{ max-width:100px; }
@media (prefers-reduced-motion:reduce){ .pm-v3 .pmh-rb{ transition:none; } }

/* bouton « Messages » de la barre réduite : bleu frais (couleur des non lus) + flèche de dépliage */
.pm-v3 .pmh-big{ background:linear-gradient(145deg,#4F8FE0 0%,#2A5C8F 100%); color:#fff; box-shadow:0 10px 20px -8px rgba(42,92,143,.65),inset 0 1px 0 rgba(255,255,255,.35); }
.pm-v3 .pmh-big:hover{ box-shadow:0 14px 24px -8px rgba(42,92,143,.75),inset 0 1px 0 rgba(255,255,255,.35); }
.pm-v3 .pmh-big:focus-visible{ outline-color:#2A5C8F; }
.pm-v3 .pmh-big svg{ width:24px; height:24px; }
.pm-v3 .pmh-chev{ position:absolute; right:-11px; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#2A5C8F; border:1px solid #CFDAE6; box-shadow:0 3px 8px -2px rgba(26,22,20,.25); transition:transform .2s ease; }
.pm-v3 .pmh-chev svg{ width:12px; height:12px; }
.pm-v3 .pmh-big:hover .pmh-chev{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){ .pm-v3 .pmh-chev{ transition:none; } }

/* « Revenir à l'aperçu » : pastille engageante */
.pm-v3 .pmh-link.is-back{ min-height:40px; padding:0 18px 0 7px; gap:9px; border:1px solid var(--nd-gold-edge); border-radius:999px; background:linear-gradient(180deg,#FFFDF8,#FBF3E1); color:var(--nd-gold-back-ink); font-size:13.5px; font-weight:700; box-shadow:0 1px 2px rgba(26,22,20,.05); transition:background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease; }
.pm-v3 .pmh-link.is-back:hover{ background:var(--gold-btn); border-color:transparent; color:#1A1614; text-decoration:none; box-shadow:0 8px 16px -8px rgba(176,116,30,.6); }
.pm-v3 .pmh-link.is-back svg{ width:26px; height:26px; padding:6px; box-sizing:border-box; border-radius:50%; background:#fff; border:1px solid var(--nd-gold-edge); color:var(--amber-strong); transform:rotate(180deg); transition:transform .2s ease; }
.pm-v3 .pmh-link.is-back:hover svg{ transform:translateX(-3px) rotate(180deg); border-color:transparent; }
.pm-v3 .pmh-link.is-back:focus-visible{ outline:2px solid var(--gold-800); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .pm-v3 .pmh-link.is-back, .pm-v3 .pmh-link.is-back svg{ transition:none; } }

/* barre réduite : loupe de recherche + séparation entre l'en-tête « Messages » et la liste des profils */
.pm-v3 .pmh-rs{ flex:0 0 auto; width:40px; height:40px; margin-top:8px; border:1px solid var(--pmx-line); border-radius:50%; background:#fff; color:var(--ink-700); display:grid; place-items:center; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.pm-v3 .pmh-rs:hover{ background:#EEF2F6; border-color:#B9C9DA; color:#2A5C8F; }
.pm-v3 .pmh-rs:focus-visible{ outline:2px solid #2A5C8F; outline-offset:2px; }
.pm-v3 .pmh-rs svg{ width:18px; height:18px; }
.pm-v3 .pmh-sep{ flex:0 0 auto; width:68px; height:0; margin:14px 0 8px; border:0; border-top:1px solid var(--pmx-line); }
@media (prefers-reduced-motion:reduce){ .pm-v3 .pmh-rs{ transition:none; } }

/* ══ 08/10 soir : barre réduite « en barre » (photos seules), fond blanc, bordure atténuée, flèche sur le bord ══ */
.pm-v3 .pmh-link.is-back{ background:#fff; color:#1A1614; }
.pm-v3 .pmh-link.is-back svg{ color:#1A1614; }
.pm-v3 .pmh-link.is-back:hover{ background:var(--gold-btn); color:#1A1614; }
.pm-v3 .pmh-big{ background:#E8F0FA; color:#2A5C8F; border:1px solid #C9D9EC; box-shadow:0 6px 14px -8px rgba(42,92,143,.35); }
.pm-v3 .pmh-big:hover{ background:#DCE8F7; box-shadow:0 10px 18px -8px rgba(42,92,143,.45); }
.pm-v3 .pmh-big svg{ width:24px; height:24px; }
.pm-v3 .pmh-bsub{ display:flex; align-items:center; justify-content:center; gap:4px; max-width:100px; font-size:12px; }
.pm-v3 .pmh-bsub svg{ width:12px; height:12px; flex:0 0 auto; color:var(--nd-gold-star); fill:var(--nd-gold-star); }
.pm-v3 .pmh-edge{ display:none; }
@media(min-width:861px){
  .pm-v3.side-reduced .pm-side{ position:relative; overflow:visible; background:#fff; border-color:#EFE9DC; }
  .pm-v3.side-reduced .pmh-rail{ border-radius:14px; background:#fff; }
  .pm-v3.side-reduced .pmh-edge{ position:absolute; z-index:6; top:44px; right:-15px; width:30px; height:30px; padding:0; display:grid; place-items:center; border:1px solid #E7E3DB; border-radius:50%; background:#fff; color:#2A5C8F; cursor:pointer; box-shadow:0 4px 10px -3px rgba(26,22,20,.22); transition:transform .2s ease, background .2s ease, border-color .2s ease; }
  .pm-v3.side-reduced .pmh-edge:hover{ background:#EEF2F6; border-color:#B9C9DA; transform:translateX(2px); }
  .pm-v3.side-reduced .pmh-edge:focus-visible{ outline:2px solid #2A5C8F; outline-offset:2px; }
  .pm-v3.side-reduced .pmh-edge svg{ width:15px; height:15px; }
}
@media (prefers-reduced-motion:reduce){ .pm-v3.side-reduced .pmh-edge{ transition:none; } }

/* ══ 08/10 soir (2) : icône dans l'en-tête du panneau, pastille « Accueil », relance en orangé ══ */
.pm-v3 .pmh-sh{ gap:10px; }
.pm-v3 .pmh-hico{ flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#E8F0FA; color:#2A5C8F; border:1px solid #C9D9EC; }
.pm-v3 .pmh-hico svg{ width:19px; height:19px; }
/* « À relancer » : orangé quand il y a quelque chose à relancer */
.pm-v3 .pmh-card.is-warn{ --pmh-halo:#FDF1E3; --pmh-glow:rgba(194,98,14,.28); --pmh-edge:#F0C9A0; }
.pm-v3 .pmh-ico.is-warn{ background:#FDEBD3; color:#C2620E; }
.pm-v3 .pmh-cp.is-red{ background:#FDEFDD; color:#A24E0C; border-color:#F0D2AE; }
.pm-v3 .pmh-card.is-warn.is-sel{ box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(194,98,14,.26),0 22px 38px -14px var(--pmh-glow); }

/* barre réduite : aucune barre de défilement visible (molette et toucher conservés), jamais de défilement horizontal */
.pm-v3 .pmh-rail{ overflow-x:hidden; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior:contain; }
.pm-v3 .pmh-rail::-webkit-scrollbar{ display:none; width:0; height:0; }

/* fondu discret quand d'autres profils dépassent en haut ou en bas de la barre réduite */
.pm-v3 .pmh-rail[data-fade="bottom"]{ -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent); }
.pm-v3 .pmh-rail[data-fade="top"]{ -webkit-mask-image:linear-gradient(to bottom,transparent,#000 44px); mask-image:linear-gradient(to bottom,transparent,#000 44px); }
.pm-v3 .pmh-rail[data-fade="both"]{ -webkit-mask-image:linear-gradient(to bottom,transparent,#000 44px,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(to bottom,transparent,#000 44px,#000 calc(100% - 44px),transparent); }

/* retour vers l'accueil depuis une conversation : flèche + libellé */
.pm-v3 .pm-thead .pmr-back{ display:inline-flex; align-items:center; gap:7px; }
.pm-v3 .pm-thead .pmr-back span{ font-size:13px; font-weight:700; }

.pm-v3 .pm-thead .pmr-back{ width:auto; min-width:0; height:34px; padding:0 14px 0 10px; border-radius:999px; flex:0 0 auto; }
.pm-v3 .pm-thead .pmr-back svg{ width:14px; height:14px; }

/* ══ 08/10 nuit : attente en terracotta, relance en bleu, suivi des réponses expirées (bandeau + onglet) ══ */
.pm-v3 .pmh-card.t-terra{ --pmh-halo:#FBEDE6; --pmh-glow:rgba(196,103,58,.28); --pmh-edge:#E9BBA4; }
.pm-v3 .pmh-ico.is-terra{ background:#FAE6DC; color:#B4552B; }
.pm-v3 .pmh-cp.is-terra{ background:#FBEDE6; color:#9C4521; border-color:#EDC9B6; }
.pm-v3 .pmh-card.t-terra.is-sel{ box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(196,103,58,.28),0 22px 38px -14px var(--pmh-glow); }
.pm-v3 .pmh-alert{ display:flex; align-items:center; gap:14px; margin:0 0 14px; padding:12px 16px; border:1px solid #EBC9C2; border-radius:14px; background:#FDF4F1; color:#7A2E21; }
.pm-v3 .pmh-alert.is-sel{ box-shadow:0 0 0 3px rgba(180,68,47,.18); }
.pm-v3 .pmh-ai{ flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#F8E1DB; color:#B4442F; }
.pm-v3 .pmh-ai svg{ width:20px; height:20px; }
.pm-v3 .pmh-at{ flex:1; min-width:0; }
.pm-v3 .pmh-at b{ display:block; font-size:14.5px; font-weight:700; }
.pm-v3 .pmh-at span{ display:block; font-size:13px; color:#8A4A3F; }
.pm-v3 .pmh-alert .pmh-btn{ min-height:38px; padding:0 16px; font-size:13.5px; border-color:#E3B8AE; background:#fff; color:#7A2E21; }
.pm-v3 .pmh-alert .pmh-btn:hover{ background:#FFF9F7; border-color:#D7A092; }
.pm-v3 .pmh-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.pm-v3 .pmh-tab{ display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 15px; border:1px solid var(--pmx-line); border-radius:999px; background:#fff; color:var(--ink-700); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.pm-v3 .pmh-tab:hover{ border-color:#D6CFC0; color:var(--ink-900); }
.pm-v3 .pmh-tab[aria-selected="true"]{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }
.pm-v3 .pmh-tab:focus-visible{ outline:2px solid var(--gold-800); outline-offset:2px; }
.pm-v3 .pmh-tn{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#B4442F; color:#fff; font-size:12px; font-weight:700; line-height:20px; text-align:center; box-sizing:border-box; }
.pm-v3 .pmh-tn.is-zero{ background:#F3F0EA; color:var(--ink-500); }
@media(max-width:560px){ .pm-v3 .pmh-alert{ flex-wrap:wrap; } .pm-v3 .pmh-alert .pmh-btn{ width:100%; } }
@media (prefers-reduced-motion:reduce){ .pm-v3 .pmh-tab{ transition:none; } }

/* bandeau des réponses expirées : sous les trois cartes */
.pm-v3 .pmh-alert{ margin:0 0 16px; }

/* ═════════ 2. nd-css : nouveau design de l'accueil (partiel _messagerie_nd_css, <style id="nd-css">) ═════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   NOUVEAU DESIGN DE L'ACCUEIL MESSAGERIE (validé par Kevin le 10/10/2026) — 1/4 : les trois cards « en un coup d'œil »
   Anneau + chiffre, filet d'état, un seul bouton plein (doré de la plateforme). Aucun halo, aucune tuile teintée. Le seul dégradé de la card = l'arc de l'anneau
   (dégradé + reflet, dessiné en SVG par nd-cartes.js · anneau() ; ici seules les pistes sont teintées).
   Ce fichier REMPLACE les règles .pmh-card* / .pmh-ico* / .pmh-cp* de la page (voir NOTE-PASSATION).
   États : défaut = doré « à vous de répondre » · .t-blue = en attente de la maison · .t-terra = en retard · .is-zero = à jour.
   Tailles en px CSS de la page (les pages de revue autonomes simulent un zoom navigateur de 75 % : mêmes proportions).
   ═══════════════════════════════════════════════════════════════════════════ */
.pm-v3 .pmh .pmh-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.pm-v3 .pmh .pmh-card{
  --tone:var(--gold-600); --tone-line:#E7E3DB; --tone-soft:#EAE0CC; --tone-hover:#D3CABA; --tone-deep:#3D3833; --sel:var(--gold-800);
  position:relative; display:flex; flex-direction:column; gap:0; min-height:0; padding:18px 22px 18px;
  border:1px solid var(--tone-line); border-radius:20px; background:#fff; box-shadow:none; color:#1A1614;
  cursor:pointer; transform:none; transition:border-color .22s, box-shadow .22s;
}
.pm-v3 .pmh .pmh-card::after{display:none}
.pm-v3 .pmh .pmh-card:hover,.pm-v3 .pmh .pmh-card:focus-within{transform:none;border-color:var(--tone-hover);box-shadow:0 18px 32px -26px rgba(44,36,19,.42)}
.pm-v3 .pmh .pmh-card.t-blue{--tone:#5C8DBF;--tone-line:#C9D9EC;--tone-soft:#DDEBFA;--tone-hover:#A9C3DF;--tone-deep:#2F6199;--sel:#2F6199}
.pm-v3 .pmh .pmh-card.t-terra{--tone:#C0502F;--tone-line:#EBBBA8;--tone-soft:#FADED3;--tone-hover:#DE9A80;--tone-deep:#A8401F;--sel:#A8401F}
.pm-v3 .pmh .pmh-card.is-zero{--tone:#1B7A4E;--tone-soft:#D9F0E3;cursor:pointer}
.pm-v3 .pmh .pmh-card.is-sel,.pm-v3 .pmh .pmh-card.is-sel:hover{transform:none;border-color:var(--sel);box-shadow:0 0 0 1px var(--sel)}

/* anneau = part des conversations ; au centre le chiffre (ou la coche si rien) */
.pm-v3 .pmh .pmh-body{display:flex;align-items:center;gap:18px}
.pm-v3 .pmh .pmh-ring{position:relative;flex:none;width:84px;height:84px}
.pm-v3 .pmh .pmh-ring>svg{position:absolute;inset:0;width:100%;height:100%}
.pm-v3 .pmh .pmh-ring .trk{fill:none;stroke:var(--tone-soft);stroke-width:6}   /* l'arc (dégradé + reflet) est dessiné par nd-cartes.js : anneau() */
.pm-v3 .pmh .pmh-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.pm-v3 .pmh .pmh-in>svg{width:30px;height:30px;color:#1B7A4E;stroke-width:1.75}
.pm-v3 .pmh .pmh-num{font:600 29px/1 Geist,system-ui,sans-serif;letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;color:#1A1614}
.pm-v3 .pmh .pmh-card.t-blue .pmh-num{color:#2F6199}
.pm-v3 .pmh .pmh-card.t-terra .pmh-num{color:#C0502F}
.pm-v3 .pmh .pmh-of{display:block;margin-top:3px;font-size:11.5px;font-weight:500;color:#6B6660}
.pm-v3 .pmh .pmh-txt{min-width:0}
.pm-v3 .pmh .pmh-ct{margin:0;font:600 15.5px/1.25 Geist,system-ui,sans-serif;color:#1A1614}
.pm-v3 .pmh .pmh-cd{margin:6px 0 0;flex:none;font-size:14px;line-height:1.45;color:#6B6660}

/* pied : maisons (ronds blancs qui se chevauchent) · bouton */
.pm-v3 .pmh .pmh-cf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:auto;padding-top:16px}
.pm-v3 .pmh .pmh-pa{margin-left:3px}
/* avatars des maisons = habillage de la maquette : rond blanc, anneau blanc de 2 px + filet de 1 px, logo à 3 px du bord, écusson brun foncé, initiales Geist */
.pm-v3 .pmh .pmh-pe .pm-av{width:30px;height:30px;margin:0;padding:0;border:0;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#fff;font:600 10.5px/1 Geist,system-ui,sans-serif;color:#3D3833;text-shadow:none;box-shadow:0 0 0 2px #fff,0 0 0 3px #E7E3DB}
.pm-v3 .pmh .pmh-pe .pm-av img{width:100%;height:100%;padding:3px;border-radius:0;object-fit:contain}
.pm-v3-rec .pmh .pmh-pe .pm-av.has-photo img{padding:0;border-radius:50%;object-fit:cover;object-position:50% 30%}   /* page Recruteur : ce sont des PHOTOS de talents, pas des logos (sans cela : vignette rectangulaire qui flotte dans le rond) */
.pm-v3 .pmh .pmh-pe .pm-av.masked{background:#2A1B09;color:var(--nd-crest-ink)}
.pm-v3 .pmh .pmh-pe .pm-av.masked svg{width:15px;height:15px;color:var(--nd-crest-ink)}
.pm-v3 .pmh .pmh-pe .pm-av.masked svg path:last-child{stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.pm-v3 .pmh .pmh-pe:hover .pm-av,.pm-v3 .pmh .pmh-pe:focus-within .pm-av{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--nd-gold-edge)}
.pm-v3 .pmh .pmh-pa .pmh-pe + .pmh-pe,.pm-v3 .pmh .pmh-pa .pmh-plus{margin-left:-8px}
.pm-v3 .pmh .pmh-plus{box-sizing:border-box;width:30px;height:30px;padding:0 0 0 8px;border:0;background:#fff;color:#3D3833;font-size:11px;box-shadow:0 0 0 2px #fff,0 0 0 3px #E7E3DB}   /* padding-left 8 = le recouvrement par le rond voisin (−8 px) : le « + » de « +2 » n'est plus rogné */
.pm-v3 .pmh .pmh-cp{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0;border:0;background:none;white-space:nowrap;font:600 13.5px/1 Geist,system-ui,sans-serif}
.pm-v3 .pmh .pmh-cp.is-green{color:#1B7A4E}
.pm-v3 .pmh .pmh-cp.is-zero{color:#6B6660}
.pm-v3 .pmh .pmh-cp svg{width:18px;height:18px;stroke-width:2}
.pm-v3 .pmh .pmh-card .pmh-btn{min-height:44px;padding:0 17px;gap:7px;font-size:13.5px;font-weight:600;line-height:1;border-color:#E7E3DB;background:#fff;color:#1A1614}
.pm-v3 .pmh .pmh-card:hover .pmh-btn:not(.is-primary){border-color:#D3CABA}
/* le bouton plein reste le doré de la plateforme (.is-primary, --gold-btn, texte encre) : ne PAS le passer en brun */
.pm-v3 .pmh .pmh-card.t-blue .pmh-btn{border-color:#B7CDE5;color:#2F6199}
.pm-v3 .pmh .pmh-card.t-terra .pmh-btn{border-color:#E8B6A2;color:#A8401F}
.pm-v3 .pmh .pmh-card.t-blue:hover .pmh-btn{border-color:#A9C3DF}
.pm-v3 .pmh .pmh-card.t-terra:hover .pmh-btn{border-color:#DE9A80}

@container (max-width: 760px){}
@media (max-width: 860px){.pm-v3 .pmh .pmh-cards{grid-template-columns:minmax(0,1fr);gap:12px}}
@media (prefers-reduced-motion:reduce){.pm-v3 .pmh .pmh-card{transition:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   NOUVEAU DESIGN DE L'ACCUEIL MESSAGERIE — 2/4 : le reste de l'accueil, mis au même système
   Bande « réponses expirées » (contour terracotta, fond blanc, pas de tuile), panneaux sans ombre, pastilles sans fond teinté.
   Les boutons pleins (« Répondre ») restent le doré de la plateforme : on ne touche pas à .pmh-btn.is-primary.
   ═══════════════════════════════════════════════════════════════════════════ */
.pm-v3 .pmh .pmh-alert{margin:0 0 16px;padding:14px 18px;border:1px solid #EBBBA8;border-radius:18px;background:#fff;color:#1A1614}
.pm-v3 .pmh .pmh-ai{width:auto;height:auto;border-radius:0;background:none;color:#C0502F}
.pm-v3 .pmh .pmh-ai svg{width:22px;height:22px}
.pm-v3 .pmh .pmh-at b{color:#1A1614}
.pm-v3 .pmh .pmh-at span{color:#6B6660}
.pm-v3 .pmh .pmh-alert .pmh-btn{background:#fff;border-color:#E7E3DB;color:#1A1614}
.pm-v3 .pmh .pmh-alert .pmh-btn:hover{background:#fff;border-color:#DE9A80}
.pm-v3 .pmh .pmh-panel{padding:24px;border-radius:20px;box-shadow:none}
.pm-v3 .pmh .pmh-kind,.pm-v3 .pmh .pmh-kind.is-essai{background:#fff;border:1px solid #E7E3DB;color:#3D3833}
.pm-v3 .pmh .pmh-st{background:#fff;color:#3D3833;border:1px solid #E7E3DB}
.pm-v3 .pmh .pmh-pill.is-late{border-color:#EBBBA8;color:#A8401F}
.pm-v3 .pmh .pmh-tn{background:#C0502F}
.pm-v3 .pmh .pmh-tn.is-zero{background:#fff;border:1px solid #E7E3DB;color:#6B6660}
.pm-v3 .pmh .pmh-item .pmh-btn.is-primary{min-height:40px}
.pm-v3 .pmh .pmh-date b{font-variant-numeric:lining-nums}
/* l'accueil occupe la place gagnée quand le panneau de gauche est réduit */
.pm-v3.side-reduced .pmh{max-width:1316px}

/* ═══════════════════════════════════════════════════════════════════════════
   NOUVEAU DESIGN DE L'ACCUEIL MESSAGERIE — 3/4 : panneau RÉDUIT (état .side-reduced), « rail avec noms » — idée 2 retenue par Kevin
   Colonne de 112 px (largeur inchangée). Un rond par conversation, le nom court dessous, un anneau d'état autour du rond :
   doré = à vous de répondre · bleu = en attente de la maison · terracotta = en retard · filet = clôturé.
   Plus de bouton bleu, plus de libellé « MESSAGES », plus d'aperçu de message (il reste dans le title / aria-label).
   Valeurs au pixel de la maquette validée (src/side-ideas.css de la maquette) : voir la NOTE, §5 « Mesures ».
   ═══════════════════════════════════════════════════════════════════════════ */
.pm-v3.side-reduced .pm-side{background:#fff;overflow:visible;border-color:#E5E1DB}   /* le filet du panneau réduit prend celui du panneau ouvert (#E5E1DB) au lieu du beige #EFE9DC */
.pm-v3 .pmh-rail{align-items:center;gap:14px;padding:16px 0 14px;background:none;border-radius:0;overflow:visible}
.pm-v3 .pmh-rail.nd-scroll{overflow-y:auto}   /* posée par nd-rail.js seulement quand les conversations dépassent la hauteur */
.pm-v3 .pmh-rail .pmh-rs{position:relative;flex:none;width:40px;height:40px;margin:0;padding:0;border:1px solid #E7E3DB;border-radius:50%;background:#fff;box-shadow:none;color:#3D3833;display:grid;place-items:center;transition:border-color .2s,color .2s}
.pm-v3 .pmh-rail .pmh-rs:hover{background:#fff;border-color:#D3CABA;color:#1A1614;transform:none;box-shadow:none}
.pm-v3 .pmh-rail .pmh-rs svg{width:19px;height:19px;stroke-width:1.8}
/* en-tête : « c'est la messagerie » (icône + mot) et « on l'ouvre ici » (bouton avec relief et aura, voir nd-pills-e2.css) */
.pm-v3 .pmh-rail .pmh-hd{display:flex;flex-direction:column;align-items:center;gap:6px}
.pm-v3 .pmh-rail .pmh-hic{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid #E7E3DB;border-radius:50%;background:#fff;color:#3D3833}
.pm-v3 .pmh-rail .pmh-hic svg{width:22px;height:22px;stroke-width:1.8}
.pm-v3 .pmh-rail .pmh-hic em{position:absolute;top:-7px;right:-10px;min-width:18px;height:18px;padding:0 5px;border:2px solid #fff;border-radius:9px;box-sizing:content-box;background:#1A1614;color:#fff;font:700 10.5px/18px Geist,system-ui,sans-serif;font-style:normal;text-align:center}
.pm-v3 .pmh-rail .pmh-hl{font:700 12px/1.1 Geist,system-ui,sans-serif;color:#1A1614}
.pm-v3 .pmh-rail .pmh-big.pmh-open{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;width:auto;height:32px;margin:0;padding:0 11px 0 14px;border:1px solid #D3CABA;border-radius:999px;background:#fff;color:#1A1614;font:700 12px/1 Geist,system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 #fff,0 7px 14px -7px rgba(44,36,19,.40),0 0 16px 2px rgba(196,165,89,.36);transition:transform .2s,box-shadow .2s}
.pm-v3 .pmh-rail .pmh-big.pmh-open svg{width:13px;height:13px;transition:transform .2s}
.pm-v3 .pmh-rail .pmh-big.pmh-open:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 10px 18px -8px rgba(44,36,19,.46),0 0 20px 4px rgba(196,165,89,.44)}
.pm-v3 .pmh-rail .pmh-big.pmh-open:hover svg{transform:translateX(2px)}
.pm-v3 .pmh-rail .pmh-big.pmh-open:focus-visible{outline:2px solid var(--gold-800);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pm-v3 .pmh-rail .pmh-big.pmh-open,.pm-v3 .pmh-rail .pmh-big.pmh-open svg{transition:none}}
.pm-v3 .pmh-rail .pmh-sep{width:34px;height:1px;margin:2px 0;border:0;background:#E7E3DB}
/* un rond par conversation : 46 px, anneau d'état (2 px blanc + 2 px de couleur), nom court dessous (11,5 px) */
.pm-v3 .pmh-rail .pmh-rb{--ring:#E7E3DB;width:100%;height:auto;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;border-radius:12px;background:none;box-shadow:none}
.pm-v3 .pmh-rail .pmh-lst{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:4px}
.pm-v3 .pmh-rail .pmh-rb[data-state="mine"]{--ring:var(--gold-600)}
.pm-v3 .pmh-rail .pmh-rb[data-state="wait"]{--ring:#5C8DBF}
.pm-v3 .pmh-rail .pmh-rb[data-state="late"]{--ring:#C0502F}
.pm-v3 .pmh-rail .pmh-rb:hover,.pm-v3 .pmh-rail .pmh-rb.is-active{background:none;box-shadow:none}
.pm-v3 .pmh-rail .pmh-rb .pmh-rp{position:relative;display:block;flex:none;width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ring)}
.pm-v3 .pmh-rail .pmh-rb.is-active .pmh-rp{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--ring)}
/* habillage des avatars du rail = celui de la maquette (rond blanc, logo à 5 px du bord, écusson brun foncé, initiales Geist) */
.pm-v3 .pmh-rail .pmh-rb .pmh-rp .pm-av{width:46px;height:46px;margin:0;padding:0;border:0;border-radius:50%;box-shadow:none;display:grid;place-items:center;overflow:hidden;background:#fff;font:600 12px/1 Geist,system-ui,sans-serif;color:#3D3833;text-shadow:none}
.pm-v3 .pmh-rail .pmh-rb .pmh-rp .pm-av img{width:100%;height:100%;padding:5px;border-radius:0;object-fit:contain}
.pm-v3-rec .pmh-rail .pmh-rb .pmh-rp .pm-av.has-photo img{padding:0;border-radius:50%;object-fit:cover;object-position:50% 30%}   /* page Recruteur : photos de talents */
.pm-v3 .pmh-rail .pmh-rb .pmh-rp .pm-av.masked{background:#2A1B09;color:var(--nd-crest-ink)}
.pm-v3 .pmh-rail .pmh-rb .pmh-rp .pm-av.masked svg{width:21.16px;height:21.16px;color:var(--nd-crest-ink)}
.pm-v3 .pmh-rail .pmh-rb .pmh-rp .pm-av.masked svg path:last-child{stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}   /* l'écusson de la maquette contourne aussi sa pièce pleine */
.pm-v3 .pmh-rail .pmh-rb:hover .pm-av{transform:none;box-shadow:none}
.pm-v3 .pmh-rail .pmh-rb i{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;border:2px solid #fff;border-radius:9px;box-sizing:content-box;background:#1A1614;color:#fff;font:700 10.5px/18px Geist,system-ui,sans-serif;font-style:normal;text-align:center}
/* présence (copiée de la liste) : point 11 px à bord blanc, en bas à droite du rond */
.pm-v3 .pmh-rail .pmh-pres{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;box-sizing:border-box;border:2px solid #fff;border-radius:50%;background:#B8B1A5}
.pm-v3 .pmh-rail .pmh-pres.is-online{background:#1B7A4E}
.pm-v3 .pmh-rail .pmh-pres.is-away{background:var(--nd-presence-away)}
.pm-v3 .pmh-rail .pmh-rn{display:block;width:auto;max-width:96px;font-size:11.5px;font-weight:600;line-height:1.5;color:#3D3833;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-v3 .pmh-rail .pmh-rb.is-unread .pmh-rn{color:#1A1614;font-weight:700}
.pm-v3 .pmh-rail .pmh-rv,.pm-v3 .pmh-rail .pmh-blabel,.pm-v3 .pmh-rail .pmh-bsub{display:none}
/* le bouton du bord du panneau (chevron bleu de la page) devient le petit « » » discret en bas du rail, comme sur la maquette (nd-rail.js lui donne l'icône à deux chevrons) */
.pm-v3.side-reduced .pmh-edge{position:absolute;z-index:6;top:auto;right:0;bottom:14px;left:0;width:34px;height:34px;margin:0 auto;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:none;box-shadow:none;color:#8E877D;transform:none;transition:color .2s}
.pm-v3.side-reduced .pmh-edge:hover{background:none;border-color:transparent;color:#1A1614;transform:none}
.pm-v3.side-reduced .pmh-edge:focus-visible{outline:2px solid var(--gold-800);outline-offset:2px}
.pm-v3.side-reduced .pmh-edge svg{width:19px;height:19px;stroke-width:1.8}

/* ── panneau allégé : TALENT seulement (dans la maquette : bloc « unless recruiter ») ── */

/* ═══════════════════════════════════════════════════════════════════════════
   NOUVEAU DESIGN DE L'ACCUEIL MESSAGERIE — 4/4 : panneau OUVERT allégé (validé par Kevin avant le choix du rail)
   Colonne 372 → 328 px ; pas de tuile bleue ni de libellé « Retrouver une conversation » ; une seule rangée de filtres
   (Toutes · Non lus · Filtres ▾) ; pastilles de comptage sans fond gris ; étiquettes d'état en texte simple ; aperçu sur 1 ligne ;
   points bleus/dorés de droite retirés ; nom en pleine largeur (l'heure descend sous le compteur de non lus) ; fond blanc.
   Port FIDÈLE de la maquette validée (src/side-lite.css de la maquette), au pixel près. Les règles de la page ayant une spécificité de
   3 classes (.pm-v3 .pm-side .x), les sélecteurs sont préfixés « .pm-v3.pm-talent .pm-side » (4 classes) : pas de !important.
   ═══════════════════════════════════════════════════════════════════════════ */
/* colonne de 328 px SEULEMENT sur ordinateur (≥ 861 px) : sans cette borne la règle battait le `@media (max-width:860px)` de la page
   (une seule colonne) et le panneau restait figé à 329 px sur tablette et mobile (page à moitié vide, titres cassés) — défaut relevé par la relecture du 10/10 nuit */
@media (min-width:861px){.pm-v3.pm-talent:not(.side-reduced):not(.side-hidden) .pm-panel{grid-template-columns:328px minmax(0,1fr)}}
/* panneau « Contexte » ouvert (.has-ctx) : la page a TROIS colonnes (liste · conversation · contexte de 320 px) au-dessus de 1100 px ; sans cette règle la colonne du contexte,
   privée de sa 3ᵉ colonne par la règle ci-dessus, passait SOUS la liste (défaut relevé en posant le design sur la vue Rails, où le contexte est ouvert à l'arrivée) */
@media (min-width:1101px){.pm-v3.pm-talent.has-ctx:not(.side-reduced):not(.side-hidden) .pm-panel{grid-template-columns:328px minmax(0,1fr) 320px}}
.pm-v3.pm-talent .pm-side{background:#fff}
/* en-tête : titre seul + deux icônes discrètes */
.pm-v3.pm-talent .pm-side .pmh-hico{display:none}
.pm-v3.pm-talent .pm-side .pmh-sh{padding:14px 12px 4px 16px;gap:6px}
.pm-v3.pm-talent .pm-side .pmh-sh h2{font-size:18px;font-variant-numeric:lining-nums}   /* chiffres alignés : le « 5 » de « Conversations (5) » descendait sous la ligne (Playfair est « old-style » par défaut) */
.pm-v3.pm-talent .pm-side .pmh-sb,.pm-v3.pm-talent .pm-side .pmh-sb.is-round{width:30px;height:30px;border:0;background:none;color:#6B6660;border-radius:8px}
.pm-v3.pm-talent .pm-side .pmh-sb:hover{background:#fff;color:#1A1614}
.pm-v3.pm-talent .pm-side .pmh-sl{display:none}
/* recherche : champ simple, bouton « agrandir » en icône */
.pm-v3.pm-talent .pm-side .pm-search{padding:8px 14px 6px}
.pm-v3.pm-talent .pm-side .pm-search input{padding:8px 12px 8px 34px;border-radius:999px;background:#fff}
.pm-v3.pm-talent .pm-side .pm-side-expand{background:none;border:0;box-shadow:none;color:#9A938B}
.pm-v3.pm-talent .pm-side .pm-side-expand:hover{color:#1A1614}
/* filtres : une seule rangée (la pastille « Non lus » d'origine est déplacée dans la rangée par nd-open.js) */
.pm-v3.pm-talent .pm-side .pmh-chips{display:none}
.pm-v3.pm-talent .pm-side .pm-tabs{gap:6px;padding:2px 14px 10px;flex-wrap:nowrap}
.pm-v3.pm-talent .pm-side .pm-tab:not(.nd-keep):not([data-group="all"]){display:none}
.pm-v3.pm-talent .pm-side .pm-tab{padding:5px 11px;font-size:11.5px;box-shadow:none;white-space:nowrap}
.pm-v3.pm-talent .pm-side .pm-tab .cnt,.pm-v3.pm-talent .pm-side .pm-tab .pmh-cnt{background:none;padding:0;font-size:11px;font-weight:700;color:#9A938B}
.pm-v3.pm-talent .pm-side .pm-tab .pmh-cnt{min-width:0;height:auto;border-radius:0;display:inline;line-height:inherit}
.pm-v3.pm-talent .pm-side .pm-tab.on .cnt,.pm-v3.pm-talent .pm-side .pm-tab.on .pmh-cnt,.pm-v3.pm-talent .pm-side .pm-tab.pmh-chip[aria-pressed="true"] .pmh-cnt{background:none;color:rgba(255,255,255,.75)}
.pm-v3.pm-talent .pm-side .pm-tab svg{width:12px;height:12px}
.pm-v3.pm-talent .pm-side .pm-tab.pmh-chip{min-height:0;gap:6px;color:#6B6660;border-color:#E5E1DB}
/* lignes : moins de bruit */
.pm-v3.pm-talent .pm-side .pm-list{padding:4px 8px}
.pm-v3.pm-talent .pm-side .pm-row{padding:10px 10px 10px 8px;gap:10px}
.pm-v3.pm-talent .pm-side .pm-l1{gap:5px}
.pm-v3.pm-talent .pm-side .pm-row .pm-av{width:38px;height:38px}
.pm-v3.pm-talent .pm-side .pm-row .pm-av:not(.masked):not(.has-photo){font-family:Geist,system-ui,sans-serif;font-weight:600;color:#3D3833;text-shadow:none}   /* initiales (« SF ») : lettres foncées en Geist, comme dans le rail et les cards (avant : blanc fantôme sur fond blanc) */
.pm-v3.pm-talent .pm-side .pm-prev{-webkit-line-clamp:1}
.pm-v3.pm-talent .pm-side .pm-waitdot{display:none}
.pm-v3.pm-talent .pm-side .pm-badge{margin-top:5px;padding:0;background:none;border:0;text-transform:none;letter-spacing:0;font-size:11px;font-weight:600;color:#6B6660}
.pm-v3.pm-talent .pm-side .pm-badge.st-gold{color:var(--gold-600)}
.pm-v3.pm-talent .pm-side .pm-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
/* nom en pleine largeur : l'heure descend à droite de la ligne du poste, le compteur de non lus reste à droite du nom */
.pm-v3.pm-talent .pm-side .pm-rbd{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;align-items:center}
.pm-v3.pm-talent .pm-side .pm-l1{display:contents}
.pm-v3.pm-talent .pm-side .pm-nm{grid-column:1;grid-row:1}
.pm-v3.pm-talent .pm-side .pm-unread{grid-column:2;grid-row:1;justify-self:end}
.pm-v3.pm-talent .pm-side .pm-time{grid-column:2;grid-row:2;margin:0;justify-self:end}
/* survol / menu ouvert : le bouton rond « ··· » de la ligne recouvrait l'heure (la marge de 34 px que l'origine lui réservait sur .pm-l1 disparaît avec display:contents) → l'heure s'efface le temps du survol */
.pm-v3.pm-talent .pm-side .pm-row:hover .pm-time,.pm-v3.pm-talent .pm-side .pm-row.is-menu .pm-time{visibility:hidden}
.pm-v3.pm-talent .pm-side .pm-rl{grid-column:1;grid-row:2}
.pm-v3.pm-talent .pm-side .pm-prev{grid-column:1/-1;grid-row:3}
.pm-v3.pm-talent .pm-side .pm-badge{grid-column:1/-1;grid-row:4;justify-self:start}
/* menu « Filtres » (les autres onglets) — nouveau, non présent sur la maquette PNG */
.pm-talent .nd-menu{position:absolute;z-index:30;min-width:210px;padding:6px;background:#fff;border:1px solid #E7E3DB;border-radius:14px;box-shadow:0 18px 34px -18px rgba(44,36,19,.45)}
.pm-talent .nd-menu button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:none;font:600 12.5px/1.2 Geist,system-ui,sans-serif;color:#3D3833;cursor:pointer;text-align:left}
.pm-talent .nd-menu button:hover,.pm-talent .nd-menu button:focus-visible{background:#fff;box-shadow:inset 0 0 0 1px #E7E3DB;outline:none}
.pm-talent .nd-menu small{font-size:11px;font-weight:700;color:#9A938B}

/* ── fin du bloc talent ── */

/* ═══════════════════════════════════════════════════════════════════════════
   NOUVEAU DESIGN DE L'ACCUEIL MESSAGERIE — PILLS « E2 DOUX » (CHOIX FINAL DE KEVIN, 11/10/2026) : doré doux + flèche sans rond
   Remplace nd-pills-e2.css (jeton marron : choix du 10/10, abandonné le 11/10). Mêmes boutons, mêmes états, TROIS changements : ceux de la note de
   passation « bulles » (§ 6), reportés ici plutôt que posés en couche par-dessus (même résultat : 228 styles calculés comparés à la page « bulles »
   validée par Kevin, repos et survol, tous identiques à un border-radius invisible près — la flèche n'a plus de fond) :
     1. l'or est plus doux : --nd-gold = 135° E9D6A5 → #F2E4C0 (55 %) → #FAF1D6 ; liseré rgba(122,94,38,.38) (au lieu de .5) ;
     2. la flèche de « Répondre → » et les chevrons de « Ouvrir » n'ont plus de rond : 16 px, trait 2,4, de la couleur du texte (#2C2413), posés sur l'or ;
     3. boutons resserrés autour : « Répondre » (card) padding-right 16 px (au lieu de 7) ; « Ouvrir » (rail) padding 0 12px 0 14px (au lieu de 0 5px 0 14px).
   Ne changent pas : le reflet en biais, les ombres, l'aura de « Ouvrir », le survol, l'appui, le focus — ni LE MARRON QUI REPÈRE (onglets actifs, compteurs).
   · L'OR AGIT   : « Répondre » (cards et liste) et « Ouvrir » (rail) = doré doux + reflet en biais + liseré marron fin.
   · LE MARRON REPÈRE : onglet actif « À venir », onglet actif « Toutes » du panneau ouvert, compteurs de non lus (rail, en-tête, liste).
   · Les pastilles blanches à contour (« Réponse », « Aujourd'hui », « En retard », « Voir les échanges → »…) ne changent pas.
   CSS pur : dégradés superposés + ombres en couches, aucun élément ajouté, AUCUNE animation (Kevin n'aime pas le « reflet qui balaie »).
   Contraste : #2C2413 sur l'or doux ≈ 10,7:1 (reflet compris : davantage) · blanc sur le marron sous le pic du reflet ≥ 5,5:1 (10,7:1 hors reflet).
   Tout est dans CE fichier : il remplace nd-pills-e2.css / nd-pills-expresso.css / nd-pills-dore.css (une seule option de pills à la fois).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --nd-gold:linear-gradient(135deg,var(--nd-gold-soft-start) 0%,#F2E4C0 55%,#FAF1D6 100%);   /* doré « Doux » (choix C de Kevin) — l'or de la plateforme #C4A559 → #EFE2B8 était jugé trop lourd */
  --nd-gold-glint:linear-gradient(104deg,rgba(255,255,255,0) 22%,rgba(255,255,255,.435) 37%,rgba(255,255,255,0) 52%);   /* pic à 0,435 = 75 % de 0,58 (réglage de Kevin : « diminue le reflet de 25 % ») */
  --nd-brown:linear-gradient(165deg,var(--nd-brown-start) 0%,var(--gold-800) 52%,#392E16 100%);
  --nd-brown-glint:linear-gradient(104deg,rgba(255,236,170,0) 24%,rgba(255,236,170,.165) 38%,rgba(255,236,170,0) 52%);   /* 75 % de 0,22 */
}

/* ── L'OR AGIT : boutons pleins ───────────────────────────────────────────── */
.pm-v3 .pmh .pmh-btn.is-primary,.pm-v3 .pmh .pmh-card .pmh-btn.is-primary,.pm-v3 .pmh .pmh-card:hover .pmh-btn.is-primary,
.pm-v3 .pmh-rail .pmh-big.pmh-open{
  background:var(--nd-gold-glint),var(--nd-gold);border-color:rgba(122,94,38,.38);color:#2C2413;filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(122,94,38,.28),0 1px 1px rgba(74,60,30,.14),0 7px 14px -8px rgba(122,94,38,.55);
}
.pm-v3 .pmh .pmh-btn.is-primary:hover,.pm-v3 .pmh .pmh-card:hover .pmh-btn.is-primary{
  filter:brightness(1.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(122,94,38,.3),0 1px 1px rgba(74,60,30,.16),0 10px 18px -9px rgba(122,94,38,.62);
}
.pm-v3 .pmh .pmh-btn.is-primary:active{transform:translateY(1px);filter:brightness(.98);box-shadow:inset 0 1px 2px rgba(122,94,38,.35),0 1px 1px rgba(74,60,30,.12)}
.pm-v3 .pmh .pmh-btn.is-primary:focus-visible,.pm-v3 .pmh-rail .pmh-big.pmh-open:focus-visible{outline:2px solid var(--gold-800);outline-offset:3px;border-radius:999px}   /* la page carre les boutons à 8 px au focus (.pm-v3 .pmh :focus-visible) : on garde la pastille ronde */

/* ── LA FLÈCHE : « Répondre → » (card) et chevrons de « Ouvrir » (rail), SANS rond, de la couleur du texte ────────────────────────────── */
.pm-v3 .pmh .pmh-card .pmh-btn.is-primary{padding-right:16px}
/* la page décalait la flèche de 3 px au survol : on la laisse en place (le bouton, lui, gagne déjà en ombre) */
.pm-v3 .pmh .pmh-card:hover .pmh-btn.is-primary:not([disabled]) svg{transform:none}
.pm-v3 .pmh .pmh-btn.is-primary svg,.pm-v3 .pmh-rail .pmh-big.pmh-open svg{
  box-sizing:border-box;flex:none;width:16px;height:16px;padding:0;background:none;box-shadow:none;color:#2C2413;stroke-width:2.4;
}

/* ── « Ouvrir » (rail) : même bouton d'or, plus petit, avec l'aura dorée (demande de Kevin : « un peu d'aura et de relief ») ── */
.pm-v3 .pmh-rail .pmh-big.pmh-open{
  padding:0 12px 0 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(122,94,38,.28),0 8px 16px -8px rgba(176,116,30,.6),0 0 18px 3px rgba(196,165,89,.45);
}
.pm-v3 .pmh-rail .pmh-big.pmh-open:hover{
  transform:translateY(-1px);filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(122,94,38,.28),0 11px 20px -8px rgba(176,116,30,.65),0 0 22px 5px rgba(196,165,89,.55);
}
.pm-v3 .pmh-rail .pmh-big.pmh-open:hover svg{transform:none}
.pm-v3 .pmh-rail .pmh-big.pmh-open:active{transform:none;filter:brightness(.98);box-shadow:inset 0 1px 2px rgba(122,94,38,.35),0 0 12px 2px rgba(196,165,89,.35)}

/* ── LE MARRON REPÈRE : onglets actifs et compteurs ──────────────────────────────────────────────────────────── */
.pm-v3 .pmh .pmh-tab[aria-selected="true"],.pm-v3 .pmh .pmh-tab[aria-selected="true"]:hover,
.pm-v3 .pm-side .pm-tab.on,.pm-v3 .pm-side .pm-tab.pmh-chip[aria-pressed="true"],.pm-v3 .pm-side .pmr-seg button.on{
  background:var(--nd-brown-glint),var(--nd-brown);border-color:#2C2413;color:#fff;text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,236,170,.4),inset 0 -1px 0 rgba(0,0,0,.28),0 1px 1px rgba(44,36,19,.18),0 6px 12px -8px rgba(44,36,19,.55);
}
.pm-v3 .pm-side .pm-tab.on,.pm-v3 .pm-side .pm-tab.pmh-chip[aria-pressed="true"],.pm-v3 .pm-side .pmr-seg button.on{box-shadow:inset 0 1px 0 rgba(255,236,170,.4),inset 0 -1px 0 rgba(0,0,0,.28)}
.pm-v3 .pmh-rail .pmh-rb i,.pm-v3 .pmh-rail .pmh-hic em,.pm-v3 .pm-unread{
  background:linear-gradient(165deg,var(--nd-brown-start),#392E16);color:#fff;box-shadow:inset 0 1px 0 rgba(255,236,170,.35);
}
@media (prefers-reduced-motion:reduce){.pm-v3 .pmh .pmh-btn.is-primary:active,.pm-v3 .pmh-rail .pmh-big.pmh-open:hover{transform:none}}


/* ═════════ 3. nf-correctifs / nf-recruteur : accueil, liste et les trois correctifs de lisibilité ═════════ */
/* ── barres de défilement : jamais de barre grise visible (liste, accueil Recruteur, panneau Contexte) ── */
.pm-v3.pm-v3 :is(.pm-list, .pmr-home, .pmx){ scrollbar-width:none; }
.pm-v3.pm-v3 :is(.pm-list, .pmr-home, .pmx)::-webkit-scrollbar{ display:none; }
/* correctif de Kevin n°2 : le panneau « Contexte » tranchait sa dernière ligne net au bord bas → fondu de 12 px */
.pm-v3.pm-v3 .pmx{ -webkit-mask-image:linear-gradient(#000 calc(100% - 12px), transparent); mask-image:linear-gradient(#000 calc(100% - 12px), transparent); }
/* correctif de Kevin n°3 : pied du « Contexte » #9A938B (2,9:1) → #6B6660 */
.pm-v3.pm-v3 .pmx-foot{ color:#6B6660; }
/* correctif de Kevin n°1 : bouton doré du bandeau « C'est à vous » à texte blanc (1,4:1 à 2,3:1) → encre des pastilles « Doux » */
.pm-v3.pm-v3 .pm-turn-btn.is-primary{ color:#2C2413; text-shadow:none; }
/* tablette / mobile : pastille « ☰ Conversations » de l'accueil, marges égales */
@media (max-width:860px){ .pm-v3.pm-v3 .pmr-back--list{ margin-left:12px; margin-right:12px; } }
/* mobile : le titre de l'accueil laissait « d'œil » seul sur sa 2e ligne → lignes équilibrées */
@media (max-width:860px){ .pm-v3.pm-v3 .pmh .pmh-h{ text-wrap:balance; } }
/* nf-recruteur (liste de gauche de la Maison, qui n'a pas le panneau allégé) */
.pm-v3-rec.pm-v3 .pm-badge{ font-size:10px; }
.pm-v3-rec.pm-v3 .pm-side .pmr-seg{ margin-left:0; margin-right:0; }
.pm-v3-rec.pm-v3 .pm-side .pm-tabs-toggle{ width:auto; }
.pm-v3-rec.pm-v3 .pm-side .pmh-sh h2{ font-variant-numeric:lining-nums; }

/* ═════════ 4. Adaptations à l'application ═════════ */
/* le serveur rend tout l'accueil ; le contrôleur messagerie-home montre / cache avec l'attribut hidden, que les display:grid / flex
   de la maquette battraient sans cette règle (spécificité 3 > 2) */
.pm-v3 .pmh [hidden], .pm-v3 .pm-side .nd-menu[hidden]{ display:none; }
/* les avatars des cards, les ronds du rail et les boutons de ligne sont des LIENS (le fil a son adresse) et non des boutons qui cliquent une ligne */
.pm-v3 .pmh-pe > a{ all:unset; display:block; cursor:pointer; border-radius:50%; }
.pm-v3 .pmh-pe > a:focus-visible{ outline:2px solid var(--gold-800); outline-offset:2px; }
.pm-v3 a.pmh-rb, .pm-v3 a.pmh-go{ text-decoration:none; color:inherit; }


/* ═════════ 5. Étape 2 (12/10/2026) : les CONVERSATIONS, `nf-css` du partiel de maquette ═════════
   Source : app/views/mockups/shared/_messagerie_nd_css.html.erb, <style id="nf-css"> (nf-bulles, nf-avatars, nf-avatars-bulles,
   nf-evenements, reste de nf-correctifs, nf-bulles-plus, nf-recruteur), recopié dans l'ordre, valeurs LITTÉRALES.
   Mêmes règles d'adaptation qu'aux sections 2 et 3 : `.is-logo` (logo de Maison, côté talent) → `.pm-v3.pm-talent … .has-photo`,
   `.is-photo` (photo de talent, côté Maison) → `.pm-v3-rec … .has-photo`, `:not(.is-logo):not(.is-photo)` → `:not(.has-photo)` ;
   le bloc `if recruiter` → `.pm-v3-rec.pm-v3`. Dorés en jetons de valeur identique (design_tokens.css).
   Écarts propres à l'application, en fin de section (5.8) : `.pm-msgs` (le conteneur des bulles que vise Turbo), `.pm-readnote` /
   `.pm-ticks` (notre « Lu » / « Envoyé »), et la carte d'étape (#4748) au dessin des cartes d'événement. */

/* ── 5.1 nf-bulles : bulles Écrin, texte affirmé, réactions, survol, saisie, réponse ── */
.pm-v3.pm-v3 .pm-thread{ padding:34px 16px 14px; gap:10px; scrollbar-width:none; }   /* jamais de barre grise */
.pm-v3.pm-v3 .pm-thread::-webkit-scrollbar{ display:none; }

.pm-v3.pm-v3 .pm-brow{ align-items:flex-end; gap:8px; }
.pm-v3.pm-v3 .pm-brow .pm-av{ align-self:flex-end; margin-bottom:21px; }

.pm-v3.pm-v3 .pm-bub{
  position:relative; overflow:visible; overflow-wrap:anywhere;
  margin:0 0 21px; padding:9px 13px; border-radius:17px;
  font-size:14.5px; font-weight:500; line-height:1.5;     /* « texte affirmé » validé le 10/10 */
}
.pm-v3.pm-v3 .pm-bub p{ margin:0; }
.pm-v3.pm-v3 .pm-bub.them{
  margin-top:19px; color:#000; background:#fff; border:1px solid #E6DFD0; border-bottom-left-radius:5px;
  box-shadow:0 1px 1px rgba(74,60,30,.05), 0 8px 18px -10px rgba(74,60,30,.30);
}
/* envoyé : le doré de l'en-tête de la card « Offre reçue » (FBF5E6 → F4E7C4 → E6D5A4, filet E4CF98) */
.pm-v3.pm-v3 .pm-bub.me{
  color:#000; border:1px solid var(--nd-bub-line); border-bottom-right-radius:5px;
  background:linear-gradient(100deg, #FBF5E6 0%, var(--nd-bub-mid) 58%, var(--gold-200) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 10px 20px -12px rgba(138,111,55,.50);
}

.pm-v3.pm-v3 .pm-bub .pm-bauthor{
  position:absolute; left:4px; bottom:calc(100% + 4px); margin:0;
  font-size:11px; font-weight:600; line-height:1.2; color:#6B6660; white-space:nowrap;
}
.pm-v3.pm-v3 .pm-bub .pm-bmeta{
  position:absolute; top:calc(100% + 5px); left:4px; right:auto; margin:0;
  display:flex; align-items:center; gap:5px; flex-wrap:nowrap; justify-content:flex-start;
  white-space:nowrap; font-size:10.5px; line-height:1.2; color:#6B6660;
}
.pm-v3.pm-v3 .pm-bub.me .pm-bmeta{ left:auto; right:4px; justify-content:flex-end; color:#6B6660; }
.pm-v3.pm-v3 .pm-bub .pm-bmeta b,
.pm-v3.pm-v3 .pm-bub .pm-bmeta b + .sep{ display:none; }
.pm-v3.pm-v3 .pm-bub .pm-bmeta .state{ color:#6B6660; font-weight:600; }
.pm-v3.pm-v3 .pm-bub .pm-bmeta .state.is-read{ color:#1B7A4E; }

/* messages enchaînés : une seule étiquette, rayons resserrés */
.pm-v3.pm-v3 .pm-brow.me + .pm-brow.me,
.pm-v3.pm-v3 .pm-brow.them + .pm-brow.them{ margin-top:-7px; }
.pm-v3.pm-v3 .pm-brow.me:has(+ .pm-brow.me) .pm-bub{ margin-bottom:0; border-bottom-right-radius:8px; }
.pm-v3.pm-v3 .pm-brow.me + .pm-brow.me .pm-bub{ border-top-right-radius:8px; }
.pm-v3.pm-v3 .pm-brow.me:has(+ .pm-brow.me) .pm-bmeta{ display:none; }
.pm-v3.pm-v3 .pm-brow.them:has(+ .pm-brow.them) .pm-bub{ margin-bottom:0; border-bottom-left-radius:8px; }
.pm-v3.pm-v3 .pm-brow.them + .pm-brow.them .pm-bub{ margin-top:0; border-top-left-radius:8px; }
.pm-v3.pm-v3 .pm-brow.them + .pm-brow.them .pm-bauthor,
.pm-v3.pm-v3 .pm-brow.them:has(+ .pm-brow.them) .pm-bmeta{ display:none; }
.pm-v3.pm-v3 .pm-brow.them:has(+ .pm-brow.them) .pm-av{ visibility:hidden; margin-bottom:0; }

/* réponse citée dans la bulle */
.pm-v3.pm-v3 .pm-quote{
  margin:0 0 6px; padding:2px 0 2px 9px; border-left:3px solid var(--gold-400); border-radius:0; background:none;
}
.pm-v3.pm-v3 .pm-quote b{ color:var(--gold-700); font-style:normal; }
.pm-v3.pm-v3 .pm-quote span{ color:#6B6660; font-style:normal; max-width:38ch; }
.pm-v3.pm-v3 .pm-bub.me .pm-quote{ background:none; border-left-color:var(--gold-400); }
.pm-v3.pm-v3 .pm-bub.me .pm-quote b{ color:var(--gold-700); }
.pm-v3.pm-v3 .pm-bub.me .pm-quote span{ color:#6B6660; }

/* réactions : pastilles posées sur le bord bas de la bulle */
.pm-v3.pm-v3 .pm-brow:has(+ .pm-reacts) .pm-bub{ margin-bottom:36px; }
.pm-v3.pm-v3 .pm-brow:has(+ .pm-reacts) .pm-bub .pm-bmeta{ top:calc(100% + 17px); }
.pm-v3.pm-v3 .pm-brow:has(+ .pm-reacts) .pm-av{ margin-bottom:36px; }
.pm-v3.pm-v3 .pm-reacts{ position:relative; z-index:1; margin:-58px 0 16px; padding:0 0 0 46px; gap:4px; }
.pm-v3.pm-v3 .pm-brow.me + .pm-reacts{ justify-content:flex-end; padding:0 12px 0 0; }
.pm-v3.pm-v3 .pm-react{
  display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 8px 0 6px; border-radius:999px;
  font-size:12px; line-height:1; color:#3D3833; background:#fff; border:1px solid #E5E1DB;
  box-shadow:0 3px 8px -2px rgba(26,22,20,.22);
}
.pm-v3.pm-v3 .pm-react b{ font-size:10.5px; font-weight:600; }
.pm-v3.pm-v3 .pm-react.is-mine{ background:#fff; border-color:var(--gold-400); box-shadow:0 0 0 1.5px rgba(191,161,92,.35), 0 3px 8px -2px rgba(26,22,20,.22); }

/* survol : réagir / répondre, AU-DESSUS de la bulle */
.pm-v3.pm-v3 .pm-msgtools{ top:-16px; right:10px; left:auto; gap:2px; padding:3px; box-shadow:0 6px 16px -6px rgba(26,22,20,.28); }
.pm-v3.pm-v3 .pm-brow.me .pm-msgtools,
.pm-v3.pm-v3 .pm-brow.them + .pm-brow.them .pm-msgtools{ top:-35px; right:10px; left:auto; }
.pm-v3.pm-v3 .pm-msgtools button{ width:28px; height:28px; }
.pm-v3.pm-v3 .pm-msgtools button:hover,
.pm-v3.pm-v3 .pm-msgtools button:focus-visible{ background:#fff; color:var(--gold-800); box-shadow:inset 0 0 0 1.5px var(--gold-300); outline:none; }
.pm-v3.pm-v3 .pm-brow:has(.pm-picker) > .pm-msgtools{ display:none; }
.pm-v3.pm-v3 .pm-picker{ top:-28px; left:34px; right:auto; gap:2px; padding:5px 7px; box-shadow:0 14px 30px -10px rgba(26,22,20,.38); }
.pm-v3.pm-v3 .pm-brow.me .pm-picker,
.pm-v3.pm-v3 .pm-brow.them + .pm-brow.them .pm-picker{ top:-47px; }
.pm-v3.pm-v3 .pm-brow.me .pm-picker{ left:auto; right:0; }
.pm-v3.pm-v3 .pm-picker button{ width:32px; height:32px; font-size:18px; }
.pm-v3.pm-v3 .pm-picker button:hover,
.pm-v3.pm-v3 .pm-picker button:focus-visible{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--gold-300); outline:none; }

/* tactile : la barre n'apparaît qu'après un appui sur la bulle (message-actions#tapBubble, `nf-js` de la maquette) */
@media (hover:none){
  .pm-v3.pm-v3 .pm-msgtools{ display:none; }
  .pm-v3.pm-v3 .pm-brow.is-tools > .pm-msgtools{ display:inline-flex; }
  .pm-v3.pm-v3 .pm-brow:has(.pm-picker) > .pm-msgtools{ display:none; }
}

/* saisie en cours */
.pm-v3.pm-v3 .pm-typing-bub{
  padding:12px 14px; border-radius:17px 17px 17px 5px; background:#fff; border:1px solid #E6DFD0;
  box-shadow:0 8px 18px -10px rgba(74,60,30,.30);
}
.pm-v3.pm-v3 .pm-typing-bub i{ background:var(--gold-400); }

/* barre « Réponse à… » au-dessus de la saisie : blanche */
.pm-v3.pm-v3 .pm-replybar{ background:#fff; border:1px solid #E5E1DB; border-left:3px solid var(--gold-400); border-radius:12px; }
.pm-v3.pm-v3 .pm-replybar-x:hover{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--gold-300); }

/* ── 5.2 nf-avatars : ronds photo du fil 40 px, en-tête 44 px (Kevin 10/10) ── */
.pm-v3.pm-v3 .pm-thread .pm-brow > .pm-av,
.pm-v3.pm-v3 .pm-thread .pm-typing > .pm-av{ width:40px; height:40px; flex:0 0 40px; font-size:13px; }
.pm-v3.pm-talent .pm-thread .pm-brow > .pm-av.has-photo,
.pm-v3.pm-talent .pm-thread .pm-typing > .pm-av.has-photo{ padding:5px; }
.pm-v3.pm-v3 .pm-thread .pm-brow > .pm-av svg,
.pm-v3.pm-v3 .pm-thread .pm-typing > .pm-av svg{ width:20px; height:20px; }

.pm-v3.pm-v3 .pm-thead .pm-avwrap .pm-av{ width:44px; height:44px; font-size:14px; }
.pm-v3.pm-talent .pm-thead .pm-avwrap .pm-av.has-photo{ padding:5px; }

@media (max-width:860px){
  .pm-v3.pm-v3 .pm-thread .pm-brow > .pm-av,
  .pm-v3.pm-v3 .pm-thread .pm-typing > .pm-av{ width:34px; height:34px; flex-basis:34px; font-size:12px; }
  .pm-v3.pm-talent .pm-thread .pm-brow > .pm-av.has-photo,
  .pm-v3.pm-talent .pm-thread .pm-typing > .pm-av.has-photo{ padding:4px; }
  .pm-v3.pm-v3 .pm-thread .pm-brow > .pm-av svg,
  .pm-v3.pm-v3 .pm-thread .pm-typing > .pm-av svg{ width:17px; height:17px; }
  .pm-v3.pm-v3 .pm-thead .pm-avwrap .pm-av{ width:40px; height:40px; font-size:13px; }
}

/* ── 5.3 nf-avatars-bulles : décalages dus à l'avatar plus large (40 + 8 = 48 px ; pastille 60 px) ── */
.pm-v3.pm-v3 .pm-reacts{ padding-left:60px; }
.pm-v3.pm-v3 .pm-brow.them .pm-picker{ left:48px; }
@media (max-width:860px){
  .pm-v3.pm-v3 .pm-reacts{ padding-left:54px; }
  .pm-v3.pm-v3 .pm-brow.them .pm-picker{ left:42px; }
}

/* ── 5.4 nf-evenements : cartes d'événement du fil (« Entretien honoré », « clôturée »…) ──
   green = honoré · muted = clôturé · gold = en cours · blue = information · red = problème */
.pm-v3.pm-v3 .pm-evt{
  --evt-ink:#1B7A4E; --evt-line:#CFE6D8; --evt-rgb:27,122,78;
  position:relative; box-sizing:border-box; align-self:stretch;
  padding:14px 18px 15px; border-radius:17px; background:#fff;
  border:1px solid var(--evt-line);
  box-shadow:0 1px 1px rgba(var(--evt-rgb),.05), 0 8px 18px -12px rgba(var(--evt-rgb),.34);
}
.pm-v3.pm-v3 .pm-evt.muted{ --evt-ink:#6B6660; --evt-line:#E7E3DB; --evt-rgb:74,60,30; }
.pm-v3.pm-v3 .pm-evt.gold{ --evt-ink:var(--gold-700); --evt-line:var(--nd-bub-line); --evt-rgb:138,111,55; }
.pm-v3.pm-v3 .pm-evt.blue{ --evt-ink:#2F6199; --evt-line:#C9D9EC; --evt-rgb:47,97,153; }
.pm-v3.pm-v3 .pm-evt.red{ --evt-ink:#A8401F; --evt-line:#EBBBA8; --evt-rgb:168,64,31; }

.pm-v3.pm-v3 .pm-evt .pm-evt-h{
  display:flex; align-items:center; gap:10px;
  font:600 14.5px/1.3 Geist, system-ui, sans-serif; letter-spacing:0; color:var(--evt-ink);
}
.pm-v3.pm-v3 .pm-evt .pm-evt-h svg{
  box-sizing:border-box; flex:none; width:30px; height:30px; padding:6.5px;
  border:1.5px solid currentColor; border-radius:50%; stroke-width:2.2;
}
.pm-v3.pm-v3 .pm-evt .pm-evt-h svg:has(circle){ width:38px; height:38px; margin:-4px; padding:0; border:0; stroke-width:1; }
.pm-v3.pm-v3 .pm-evt .pm-evt-b{
  margin:3px 0 0 40px; font:400 13.5px/1.55 Geist, system-ui, sans-serif; letter-spacing:0; color:#3D3833;
}
.pm-v3.pm-v3 .pm-evt .pm-evt-act{ margin-left:40px; }

/* ── 5.5 nf-correctifs : ce que l'étape 1 n'avait pas repris (barre de contexte, étiquettes, italiques, surfaces) ── */
.pm-v3.pm-v3 .pm-ctxbar .od-link{ font:700 12px/1.2 Geist, system-ui, sans-serif; color:var(--gold-700); }
.pm-v3.pm-v3 .pm-ctxbar .cb-x{ color:#6B6660; }
.pm-v3.pm-v3 .pm-stage-h{ font-size:9.5px; color:#6B6660; }
.pm-v3.pm-v3 .pm-compose-hint{ font-size:11px; color:#6B6660; }
.pm-v3.pm-v3 .pm-daysep{ color:#6B6660; }
@media (min-width:861px){ .pm-v3.pm-v3 .pm-stage{ padding-bottom:28px; } }
@media (max-width:860px){ .pm-v3.pm-v3 .pm-stage{ padding-bottom:20px; } }
.pm-v3.pm-v3 .pm-prev-typing,
.pm-v3.pm-v3 .pm-quote,
.pm-v3.pm-v3 .pm-quote *{ font-style:normal; }
.pm-v3.pm-v3 .pmx-hero-q{ font-family:Geist, system-ui, sans-serif; font-style:normal; font-weight:500; font-variant-numeric:lining-nums; }
/* initiales sans logo (en-tête et fil) : lettres blanches fantômes sur fond blanc → encre */
.pm-v3.pm-v3 .pm-thead .pm-av:not(.masked):not(.has-photo),
.pm-v3.pm-v3 .pm-thread .pm-av:not(.masked):not(.has-photo){ font-family:Geist, system-ui, sans-serif; font-weight:600; color:#3D3833; text-shadow:none; }
.pm-v3.pm-v3 :is(.pmx-sec, .pm-kv .k, .pm-key .k, .pmx-note-empty, .pmx-foot){ color:#6B6660; }
.pm-v3.pm-v3 :is(.pm-kv .k, .pm-key .k){ font-size:9.5px; }
.pm-v3.pm-v3 .ds-chip{ background:#fff; }
/* surfaces : « tout est blanc » (règle de Kevin) */
.pm-v3.pm-v3 .pm-replybar{ background:#fff; }
.pm-v3.pm-v3 .pm-react.is-mine{ background:#fff; border-color:var(--gold-400); }
.pm-v3.pm-v3 .pm-locked-compose{ background:#fff; }
.pm-v3.pm-v3 .pm-send-v3:disabled{ background:#fff; color:#A7A298; box-shadow:inset 0 0 0 1px #E5E1DB; opacity:1; }
.pm-v3.pm-v3 .pe-card-who .av{ background:#fff; }
/* lettres en exposant Unicode (« 8ᵉ ») remplacées par <sup> (exponents_controller.js, `nf-sup` de la maquette) */
.pm-v3.pm-v3 sup.nf-sup{ font-size:max(.78em, 9.5px); line-height:0; vertical-align:.38em; font-weight:inherit; }
@media (max-width:860px){
  .pm-v3.pm-v3 .pm-ctxbar .od-link{ display:inline-flex; align-items:center; min-height:36px; }
}

/* ── 5.6 nf-bulles-plus ── */
.pm-v3.pm-v3 .pm-compose-in{ font-size:14.5px; font-weight:500; color:#000; }
.pm-v3.pm-v3 .pm-compose-in::placeholder{ font-weight:400; }
.pm-v3.pm-v3 .pm-brow > .pm-av{ margin-bottom:24px; }
.pm-v3.pm-v3 .pm-brow:has(+ .pm-reacts) > .pm-av{ margin-bottom:39px; }
.pm-v3.pm-v3 .pm-typing > .pm-av{ margin-bottom:3px; }
.pm-v3.pm-v3 .pm-bub.me .pm-quote span{ color:#4A453F; }
/* #4860 (Tatianna, 14/10) : le logo de la Maison REMPLIT son rond dans la carte d'étape, comme dans la liste
   (talent_messages.css : cover) ; « logo entier » de nf-bulles-plus laissait un carré flotter dans le rond. */
.pm-v3.pm-talent .pe-card-who .av img{ object-fit:cover; object-position:50% 50%; padding:0; border-radius:50%; }
/* même règle pour le logo de l'en-tête du fil et celui posé à côté des bulles de la Maison */
.pm-v3.pm-talent .pm-thread :is(.pm-brow, .pm-typing) > .pm-av.has-photo,
.pm-v3.pm-talent .pm-thead .pm-avwrap .pm-av.has-photo{ padding:0; }
.pm-v3.pm-talent :is(.pm-thead, .pm-thread) .pm-av.has-photo img{ object-fit:cover; object-position:50% 50%; padding:0; border-radius:50%; }

/* ── 5.7 nf-recruteur : la photo du talent remplit son rond dans la carte d'étape ── */
.pm-v3-rec.pm-v3 .pe-card-who .av img{ object-fit:cover; object-position:50% 30%; padding:0; }

/* ── 5.8 Adaptations à l'application ── */
/* les bulles vivent dans `.pm-msgs` (cible des flux Turbo, talent_messages.css : gap 16 px) : même écart que le fil de la maquette,
   sans quoi l'enchaînement (-7 px) des messages d'un même côté ne se lirait pas */
.pm-v3.pm-v3 .pm-thread > .pm-msgs{ gap:10px; }
/* notre « Lu » (`.pm-readnote`, #3285) et « Envoyé » (`.pm-ticks`) prennent les couleurs de `.state` / `.state.is-read` */
.pm-v3.pm-v3 .pm-bub .pm-bmeta .pm-readnote{ display:inline-flex; align-items:center; gap:3px; color:#1B7A4E; font-weight:600; }
.pm-v3.pm-v3 .pm-bub .pm-bmeta .pm-ticks{ display:inline-flex; color:#6B6660; }
.pm-v3.pm-v3 .pm-bub .pm-bmeta svg{ width:11px; height:11px; }
/* l'étiquette d'un auteur supprimé (`_message_body`) reste DANS la bulle : elle est la seule à le dire */
.pm-v3.pm-v3 .pm-bub > .pm-bauthor + .pm-bauthor{ display:none; }

/* #4748 — la carte d'étape au dessin des cartes d'événement (5.4) : carte blanche, filet et médaillon de la couleur de l'état,
   titre 14,5 px / 600, corps aligné sous le titre. Le bandeau dégradé et l'étiquette en capitales de la V3 disparaissent. */
.pm-v3.pm-v3 .pe-card.is-evt{
  --evt-ink:var(--gold-700); --evt-line:var(--nd-bub-line); --evt-rgb:138,111,55;
  border:1px solid var(--evt-line); border-radius:17px; background:#fff;
  box-shadow:0 1px 1px rgba(var(--evt-rgb),.05), 0 8px 18px -12px rgba(var(--evt-rgb),.34);
}
.pm-v3.pm-v3 .pe-card.is-evt.tone-green{ --evt-ink:#1B7A4E; --evt-line:#CFE6D8; --evt-rgb:27,122,78; }
.pm-v3.pm-v3 .pe-card.is-evt.tone-muted{ --evt-ink:#6B6660; --evt-line:#E7E3DB; --evt-rgb:74,60,30; }
.pm-v3.pm-v3 .pe-card.is-evt.tone-red{ --evt-ink:#A8401F; --evt-line:#EBBBA8; --evt-rgb:168,64,31; }
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-band{ gap:10px; padding:14px 18px 0; background:none; border-bottom:0; }
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-band .ic{
  box-sizing:border-box; width:30px; height:30px; flex:none; background:#fff; box-shadow:none;
  border:1.5px solid currentColor; color:var(--evt-ink);
}
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-band .ic svg{ width:15px; height:15px; stroke-width:2.2; }
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-band .lbl{
  font:600 14.5px/1.3 Geist, system-ui, sans-serif; letter-spacing:0; text-transform:none; color:var(--evt-ink);
}
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-body{ padding:8px 18px 15px 58px; font-size:13.5px; color:#3D3833; }
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-rows{ font-size:13.5px; line-height:1.45; }
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-rows dt{ color:#6B6660; }
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-rows dd{ font-weight:600; color:#3D3833; }
.pm-v3.pm-v3 .pe-card.is-evt :is(.pe-card-msg, .pe-hint){ font-size:13.5px; line-height:1.55; color:#3D3833; }
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-where{ font-size:13.5px; }
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-who{ margin-bottom:10px; }
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-venir-h{ margin:12px 0 0; font-size:11px; font-weight:600; color:#6B6660; }
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-venir-h + .pe-card-venir{ margin-top:6px; }
.pm-v3.pm-v3 .pe-card.is-evt .pe-card-venir span{ background:#fff; }
@media (max-width:860px){
  .pm-v3.pm-v3 .pe-card.is-evt .pe-card-band{ padding:12px 14px 0; }
  .pm-v3.pm-v3 .pe-card.is-evt .pe-card-body{ padding:8px 14px 14px; }
  .pm-v3.pm-v3 .pe-card.is-evt .pe-card-rows{ grid-template-columns:1fr; gap:2px; }
  .pm-v3.pm-v3 .pe-card.is-evt .pe-card-rows dd{ text-align:left; margin-bottom:6px; }
}

/* ══ #4738 — suivi d'une proposition envoyée, en tête du volet Contexte de la Maison ══
   Composants du volet (pmx-deadline, pm-keys, pmx-foot, pmx-cta). Le rail de
   l'échéance n'avait de hauteur que dans le bandeau du fil (.pm-offer-d1) :
   même rail, même couleur, posé dans le volet. */
.pm-v3 .pmx-follow{ margin-bottom:6px; }
.pm-v3 .pmx-follow .pmx-deadline{ margin-top:8px; }
.pm-v3 .pmx-follow .pmx-deadline-h{ flex-wrap:wrap; }
.pm-v3 .pmx-follow .od-rail{ height:3px; border-radius:2px; background:#EDE7DA; overflow:hidden; }
.pm-v3 .pmx-follow .od-rail i{ display:block; height:100%; background:var(--amber); }
.pm-v3 .pmx-follow .is-urgent .od-rail i{ background:var(--danger); }
.pm-v3 .pmx-follow .pm-keys{ margin-top:10px; }
.pm-v3 .pmx-follow-note{ margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-700); }
.pm-v3 .pmx-follow-note b{ color:var(--ink-900); }
.pm-v3 .pmx-follow .pmx-follow-teller{ margin-top:10px; }
.pm-v3 .pmx-follow form{ margin:0; }
.pm-v3 .pmx-follow .pmx-follow-withdraw{ margin-top:12px; color:var(--danger); }
.pm-v3 .pmx-follow .pmx-follow-withdraw:hover{ border-color:var(--danger); color:var(--danger); }

/* ══ #4865 #4866 (Tatianna, 14/10) : en-tête du fil à la maquette du 11/10 ══════════════════
   « ← Accueil » libellé, onglet « › Masquer » / « ‹ Contexte » selon le volet, « Aperçu » et
   « Profil complet » rangés quand le volet est la 3e colonne (il porte le même contenu et son
   lien « Voir le profil complet » / « Voir l'annonce »), « Début de l'échange · date » centré. */
.pm-v3 .pmx-tab > span{ display:inline-flex; align-items:center; gap:6px; }
.pm-v3 .pmx-tab .pmx-tab-when-open{ display:none; }
.pm-v3.has-ctx .pmx-tab .pmx-tab-when-open{ display:inline-flex; }
.pm-v3.has-ctx .pmx-tab .pmx-tab-when-closed{ display:none; }
@media (min-width:1101px){
  .pm-v3.has-ctx .pm-thead-acts{ display:none; }
}
@media (max-width:1100px){
  .pm-v3 .pm-thead .pmr-back{ width:auto; padding:0 12px 0 10px; }
}
.pm-v3 .pm-thread > .pm-startsep.is-inline{ position:static; align-self:stretch; justify-content:center; padding:2px 0 4px; pointer-events:none; }
.pm-v3 .pm-thread > .pm-startsep.is-inline i{ display:none; }

/* ══ #4843 (Tatianna, 13/10) : l'alerte « réponse expirée » de l'accueil en « liquid glass »,
   comme la case « Prochaine étape » du tableau de bord. Jetons : liquid_glass.css. ══ */
.pm-v3 .pmh .pmh-alert{ position:relative; overflow:hidden; isolation:isolate;
  background:var(--lg-terra-fill), #fff; border-color:var(--lg-terra-edge); box-shadow:var(--lg-terra-shadow);
  -webkit-backdrop-filter:var(--lg-blur); backdrop-filter:var(--lg-blur); }
.pm-v3 .pmh .pmh-alert::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--lg-sheen); }
.pm-v3 .pmh .pmh-alert.is-sel{ box-shadow:var(--lg-terra-shadow), 0 0 0 3px rgba(180,68,47,.18); }
.pm-v3 .pmh .pmh-ai{ width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:13px;
  background:var(--lg-tile-fill); border:1px solid var(--lg-tile-edge); box-shadow:var(--lg-tile-shadow); color:#B4442F; }
.pm-v3 .pmh .pmh-ai svg{ width:20px; height:20px; }
.pm-v3 .pmh .pmh-at b{ color:#8A3220; }
.pm-v3 .pmh .pmh-at span{ color:#5E534D; }
.pm-v3 .pmh .pmh-alert .pmh-btn{ background:rgba(255,255,255,.85); border-color:var(--lg-terra-edge); color:#7A2E21; }
.pm-v3 .pmh .pmh-alert .pmh-btn:hover{ background:#fff; border-color:var(--lg-terra-edge-hover); }