/* ═══════════════════════════════════════════════════════════════════════════
   #4921 #4922 (16/10) — L'INTÉRIEUR D'UNE CONVERSATION, maquette de Tatianna du
   15/10 (Drive 1r19_ReHRzKQfjjiv1tlSpa-o7CPDNCjH, `messagerie-talent-standalone`
   et `messagerie-recruteur-standalone`). Ce que la maquette ajoute à la livraison
   du 11/10 (`messagerie_nd.css`) est la « surcouche V1 » (`v1_overlay`, « version
   GO du 10/10 ») et sa compensation `nf-v1.css` : ce fichier en est le portage,
   valeurs littérales, dorés passés par les jetons de `design_tokens.css`.

   Feuille chargée AVANT `messagerie_v3.css` (ordre alphabétique des feuilles du
   produit) : chaque règle porte donc `.pm-v3.pm-v3`, comme `messagerie_nd.css`,
   et les `!important` de la maquette là où elle en met.

   Écarts, et pourquoi :
   · le bouton « Contexte » sous 1100 px : la maquette n'en laisse aucun (la
     poignée y est cachée et l'onglet aussi) ; on garde l'onglet de l'application,
     sans quoi le volet (documents, signalement) deviendrait inatteignable ;
   · la fiabilité (B3 tâche 047, AC37.5) : la maquette cache le délai de réponse
     (`.pm-sla-chip`), la pastille des faits (`.rel-chip--fact`) et le bloc du
     volet (`.pm-reliability`, `.pmx-mirror`…). C'est une fonction livrée et
     validée, pas un dessin : elle reste affichée tant que sa disparition n'est
     pas décidée (décision à prendre, voir le compte rendu du 16/10).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Plus aucun bandeau : « C'est à vous » disparaît, les cartes portent l'état ── */
.pm-v3.pm-v3 .pm-conv .pm-turn{ display:none !important; }

/* « Aperçu » et « Profil complet » n'existent pas dans l'en-tête de la maquette : le volet
   Contexte porte la fiche (« Voir le profil complet », « Voir l'annonce ») */
.pm-v3.pm-v3 .pm-thead .pm-thead-acts{ display:none !important; }

/* « En ligne » quitte la ligne du poste (il passe dans la pastille d'activité), et
   son « · » avec lui (nf-v1 : sinon « · Chef de Partie ») */
.pm-v3.pm-v3 .pm-thead .pm-presence-strong,
.pm-v3.pm-v3 .pm-thead .pm-presence-strong + .pm-dotsep{ display:none; }

/* la pastille d'activité (« En ligne actuellement », « Actif hier »…) */
.pm-v3.pm-v3 .v1-act{
  display:inline-flex; align-items:center; gap:6px; margin-top:5px; padding:3px 10px;
  border-radius:999px; border:1px solid var(--cl); color:var(--ci);
  font:700 11.5px Geist, sans-serif; background:#fff;
}
.pm-v3.pm-v3 .v1-act i{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.pm-v3.pm-v3 .v1-act.ok{ --cl:#CBDCD1; --ci:#3A5142; }
.pm-v3.pm-v3 .v1-act.nt{ --cl:#C9C3B8; --ci:#3D3833; }

/* ── Le bouton « Contexte » : une pilule horizontale en haut à droite du fil ── */
@media (min-width:1101px){
  .pm-v3.pm-v3:not(.is-home) .pmx-handle{
    display:inline-flex !important; align-items:center; gap:8px;
    padding:9px 16px !important; border-radius:999px !important; border:1px solid #D8CDB5 !important;
    background:#fff !important; color:#1A1614 !important; font:800 12.5px Geist, sans-serif !important;
    box-shadow:0 4px 14px rgba(26,22,20,.08); cursor:pointer;
    writing-mode:horizontal-tb !important; transform:none !important; height:auto !important; width:auto !important;
    top:12px !important; right:14px !important; left:auto !important; z-index:6;
  }
  .pm-v3.pm-v3:not(.is-home) .pmx-handle:hover{ border-color:var(--gold-deep) !important; box-shadow:0 6px 18px rgba(138,107,31,.18); }
  /* nf-v1 : centrée sur l'en-tête du fil (« ← Accueil », rond de 44 px) */
  .pm-v3.pm-v3.is-thread .pmx-handle{ top:26px !important; }
  .pm-v3.pm-v3.pm-v3-rec.is-thread .pmx-handle{ top:24px !important; }
  .pm-v3.pm-v3 .pmr-home.active ~ .pmx-handle{ display:none !important; }
  /* l'onglet de l'en-tête (« › Masquer ») : la pilule le remplace */
  .pm-v3.pm-v3 .pm-thead .pmx-tab{ display:none !important; }
  /* l'en-tête laisse la place de la pilule */
  .pm-v3.pm-v3 .pm-thead{ padding-right:150px; }
}

/* ── « Envoyée le 10 oct. · 10:32 » au-dessus d'une carte d'étape ── */
.pm-v3.pm-v3 .v1-tm{ text-align:center; font:500 11px Geist, sans-serif; color:#77706A; margin:10px 0 4px; }

/* ── « Shortlister » / « ★ Shortlisté » dans la barre d'actions de la Maison ── */
.pm-v3.pm-v3 .pm-actbar turbo-frame,
.pm-v3.pm-v3 .pm-actbar turbo-frame form{ display:contents; }
.pm-v3.pm-v3 .pm-actbtn.v1-star.on{ border-color:var(--gold-primary); color:var(--gold-deep); }

/* ── La carte d'étape compacte (`pe-card.is-compact`) ── */
.pm-v3.pm-v3 .pe-card.is-compact:not(.is-open) .pe-card-more{ display:none; }
.pm-v3.pm-v3 .pe-card-cmain{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:6px; }
.pm-v3.pm-v3 .pe-card-cmain > div{ min-width:0; }
.pm-v3.pm-v3 .pe-card-cfoot{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:0; flex:0 0 auto; }
.pm-v3.pm-v3 .pe-card-open{
  display:inline-flex; align-items:center; gap:4px; font-family:inherit; font-size:11.5px; font-weight:700;
  color:var(--gold-700); background:none; border:0; padding:4px 2px; cursor:pointer; white-space:nowrap;
}
.pm-v3.pm-v3 .pe-card-open:hover{ color:var(--gold-800); text-decoration:underline; text-underline-offset:3px; }
.pm-v3.pm-v3 .pe-card-open svg{ transition:transform .15s; }
.pm-v3.pm-v3 .pe-card.is-open .pe-card-open svg{ transform:rotate(90deg); }
@media (max-width:860px){
  .pm-v3.pm-v3 .pe-card-cmain{ flex-direction:column; align-items:stretch; gap:10px; }
  .pm-v3.pm-v3 .pe-card-cfoot{ justify-content:flex-start; flex-wrap:wrap; gap:8px; }
  .pm-v3.pm-v3 .pe-card-cfoot .pe-card-open{ flex:1 1 100%; justify-content:center; padding:8px 4px; }
}

/* ═══ #4921 (16/10) — L'offre reçue allégée, côté talent ═══════════════════
   `.pm-offer-d1` + `offer()` de la surcouche V1 (la seconde série de règles,
   la compacte, est celle qui s'applique dans la maquette) : en-tête `v1-oh`,
   rémunération en 22 px, tuiles Contrat / Début / Lieu, « Qui m'écrit ? »,
   pied sans fond ni filet. Dorés par les jetons. La note sous les boutons et
   « Poser une question » sont cachés par la surcouche : ils ne sont pas rendus. */
.pm-v3.pm-v3 .v1-offer.pm-offer-banner{
  border-radius:20px; overflow:hidden; border:1px solid #EFE6D2; background:var(--n-0);
  box-shadow:0 14px 40px -14px rgba(44,36,16,.22); padding:0;
  position:relative; top:auto; /* hors du fil, dans le socle : plus de bandeau collé */
}
.pm-v3.pm-v3 .v1-offer.pm-offer-banner.is-compact{ box-shadow:0 14px 40px -14px rgba(44,36,16,.22); }
.pm-v3.pm-v3 .v1-oh{
  display:flex; align-items:center; gap:12px; padding:10px 18px;
  background:radial-gradient(70% 140% at 100% 0%,#F6E9C4 0%,transparent 70%),linear-gradient(180deg,#FFFDF7,#FAF3E0);
  border-bottom:1px solid #EFE6D2;
}
.pm-v3.pm-v3 .v1-oh .sh{
  width:36px; height:36px; border-radius:50%; background:var(--n-0); border:2px solid var(--n-0);
  box-shadow:0 4px 12px rgba(44,44,44,.18); display:grid; place-items:center; color:var(--gold-deep); flex:none;
}
.pm-v3.pm-v3 .v1-oh .sh svg{ width:18px; height:18px; }
.pm-v3.pm-v3 .v1-oh-t{ min-width:0; }
.pm-v3.pm-v3 .v1-oh small{
  display:block; font:800 9.5px Geist, sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep);
}
.pm-v3.pm-v3 .v1-oh b{ display:block; font:800 16px Geist, sans-serif; color:var(--ink); margin-top:0; }
.pm-v3.pm-v3 .v1-oh .sub{ display:block; font:500 11px Geist, sans-serif; color:#5E5A52; margin-top:0; }
.pm-v3.pm-v3 .v1-oh .dl{
  margin-left:auto; font:800 11px Geist, sans-serif; color:var(--gold-deep); background:var(--n-0);
  border:1px solid #E9DFC6; border-radius:999px; padding:4px 10px; white-space:nowrap; flex:none;
}
.pm-v3.pm-v3 .v1-offer.pm-offer-banner.is-urgent .v1-oh .dl{ color:var(--red); }

.pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-offer-body{ display:block; padding:10px 18px 0; }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-offer-pay{
  font-size:22px; font-weight:800; line-height:1.2; color:var(--ink); letter-spacing:-.015em; margin:0;
}
.pm-v3.pm-v3 .v1-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:8px 0; }
.pm-v3.pm-v3 .v1-tile{
  display:flex; flex-direction:row; align-items:center; gap:8px; min-width:0;
  border:1px solid #E8E4DC; border-radius:12px; padding:8px 10px; background:var(--n-0);
  font:800 12.5px Geist, sans-serif; color:var(--ink); white-space:nowrap;
}
.pm-v3.pm-v3 .v1-tile > div{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.pm-v3.pm-v3 .v1-tile span{ display:none; }
.pm-v3.pm-v3 .v1-tile i{
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none; font-style:normal;
}
.pm-v3.pm-v3 .v1-tile i svg{ width:15px; height:15px; }
.pm-v3.pm-v3 .v1-tile.b i{ background:#EAF0FF; color:#2F5AA8; }
.pm-v3.pm-v3 .v1-tile.g i{ background:#E4F3EA; color:var(--green); }
.pm-v3.pm-v3 .v1-tile.o i{ background:#FBF4DF; color:var(--gold-deep); }

/* « Qui m'écrit ? » (`od-who.is-compact`, encadré plein de la surcouche) */
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-who{
  margin:0 0 2px; border:1px solid #E8E4DC; background:var(--n-0); border-radius:16px;
}
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-who-t{
  width:100%; display:flex; align-items:center; gap:8px; padding:6px 10px; border:0; border-radius:16px;
  background:var(--n-0); font-size:12px; text-align:left; color:var(--ink-700); cursor:pointer; list-style:none;
}
.pm-v3.pm-v3 .v1-offer.pm-offer-banner div.od-who-t{ cursor:default; }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-who-t::-webkit-details-marker{ display:none; }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-who-t::marker{ content:""; }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-who-k{
  flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-800);
}
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-who-s{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-who-more{
  display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; font-size:11px; font-weight:800; color:var(--gold-800);
}
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-who-more svg{ width:12px; height:12px; transition:transform .18s; }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-who[open] .od-who-more svg{ transform:rotate(180deg); }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-who-x{ padding:2px 10px 8px; font-size:12px; line-height:1.45; color:var(--ink-700); }

/* Le pied : « Accepter d'échanger », « Voir l'offre complète », « Décliner » */
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-offer-foot{ padding:8px 18px 12px; border-top:0; background:var(--n-0); }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-offer-foot-actions{ gap:8px 12px; }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-offer-foot-actions > form{ flex:0 0 auto; }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-accept{
  padding:7px 14px; border-radius:9px; font-size:12.5px; font-weight:800; color:var(--ink-900); text-shadow:none; box-shadow:none;
}
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-full{
  display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--amber-strong); background:#FFFDF7; border:1.5px solid var(--gold-primary); border-radius:10px;
  padding:7px 14px; cursor:pointer; transition:background .15s, box-shadow .15s;
}
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-full:hover{ background:var(--gold-50); box-shadow:0 2px 10px rgba(196,165,89,.25); }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-full svg{ width:15px; height:15px; }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-decline-wrap{ margin-left:0; }
.pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-decline-wrap > summary.pm-decline{ font-size:11.5px; padding:6px 2px; }

/* Téléphone : le pied de la maquette passe en grille (Accepter, puis l'offre
   complète, pleine largeur) ; les tuiles, que la maquette ne replie pas, vont à
   la ligne plutôt que de déborder. */
@media (max-width:640px){
  .pm-v3.pm-v3 .v1-oh{ padding:10px 12px; gap:10px; }
  .pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-offer-body{ padding:10px 12px 0; }
  .pm-v3.pm-v3 .v1-tiles{ display:flex; flex-wrap:wrap; }
  .pm-v3.pm-v3 .v1-tile{ flex:0 1 auto; max-width:100%; }
  .pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-offer-foot{ padding:6px 12px 12px; }
  .pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-offer-foot-actions{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
  .pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-offer-foot-actions > form .btn,
  .pm-v3.pm-v3 .v1-offer.pm-offer-banner .od-full{ width:100%; justify-content:center; min-height:42px; box-sizing:border-box; margin:0; }
  .pm-v3.pm-v3 .v1-offer.pm-offer-banner .pm-decline-wrap{ justify-self:start; }
}