/* ══════════════════════════════════════════════════════════════════════════
   LA FENÊTRE DE DISCUSSION — styles de `messagerie.js` (chantier 37, lot 37-11).

   Maquettes : `docs/maquettes/chantier-37/Candidat.dc.html` (bureau) et
   `CandidatMobile.dc.html` (390 px). Couleurs, polices et ombres viennent des
   jetons de `style.css` (`--ink`, `--cream`, `--gold-deep`, `--font-mono`…) :
   aucune valeur n'est recopiée des maquettes.

   Tout commence par `su-msg` : la feuille ne touche à rien d'autre de la page.
   Seules exceptions, voulues : les deux classes que le script pose sur `<html>`
   pendant que la fenêtre est là — `su-msg-depliee` et `su-msg-repliee` — pour
   que la page range ses propres éléments flottants à côté (le message bref
   `.toast` de `mon-profil.html`), et la marge du bas qui empêche la fenêtre
   repliée de cacher la fin de la page.

   Bureau : en bas à droite, 420 px de large, repliée = la seule barre de titre.
   Sous 900 px : dépliée = plein écran ; repliée = une barre en bas, bord à bord.
   z-index 190 : au-dessus du contenu, sous l'écran de connexion de
   `mon-profil.html` (200), sous le tiroir du menu (1000) et le message bref
   (9999).

   Côté recruteur (lot 37-12, maquettes `Main.dc.html` et `Rangement.dc.html`) :
   la fenêtre des listes (`su-msg-liste`), à la fin de ce fichier, et deux
   mesures publiées sur <html> pour que la page range ses éléments flottants
   (`--su-msg-bas`, `--su-msg-emprise`). Le côté candidat a la même fenêtre
   (lot 38b-2), sans le rangement : `su-msg-convs-plates`.

   Le formulaire de premier contact (lot 37-13, maquette `Formulaire.dc.html`) :
   `su-msg-form`, en fin de fichier.

   La fenêtre du modèle (lot 37-14, maquette `Modele.dc.html`) :
   `su-msg-modele`, à la fin.

   « Proposer un RDV » (côté recruteur, lot 38-6) : `su-msg-rdv`, tout à la fin.

   L'avertissement Calendly (côté candidat, lot 38-7) : `su-msg-calendly`, avec
   le petit texte de `su-msg-note`, sous les bulles.
   ══════════════════════════════════════════════════════════════════════════ */

.su-msg{
  position:fixed;right:24px;bottom:0;z-index:190;
  width:420px;max-width:calc(100vw - 48px);
  box-sizing:border-box;
  display:flex;flex-direction:column;
  background:var(--cream);color:var(--ink);
  border:1.5px solid var(--ink);border-bottom:none;border-radius:10px 10px 0 0;
  box-shadow:var(--shadow-card-lg);
  font-family:var(--font-sans);
}
.su-msg *,.su-msg *::before,.su-msg *::after{box-sizing:border-box;}
.su-msg[hidden]{display:none;}
.su-msg.su-msg-depliee{height:min(680px,calc(100vh - 72px));height:min(680px,calc(100dvh - 72px));}
.su-msg:focus{outline:none;}
.su-msg:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ── LA BARRE DE TITRE ─────────────────────────────────────────────────── */
.su-msg-tete{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:12px 14px 12px 16px;min-height:60px;
  background:var(--ink);color:var(--cream);border-radius:8px 8px 0 0;
}
.su-msg-avatar{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal);color:var(--gold);
  font-family:var(--font-display);font-weight:900;font-size:13px;letter-spacing:.02em;
}
.su-msg-ident{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:0;border:none;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit;
}
.su-msg-ident:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;}
.su-msg-nom{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-display);font-weight:900;font-size:16px;line-height:1.1;text-transform:uppercase;
}
.su-msg-sous{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
}
.su-msg-sous:empty{display:none;}
/* Le nom du candidat, lien vers sa fiche (côté recruteur, lot 38-5). Le lien
   est le voisin du bouton `su-msg-ident`, jamais dedans : le bouton remplit le
   bloc `su-msg-qui` comme avant, son nom devient invisible mais garde sa place,
   et le lien se pose exactement par-dessus (même police, même coin). Un clic sur
   le nom ouvre la fiche ; partout ailleurs dans le bloc, le bouton replie. */
.su-msg-qui{flex:1 1 auto;min-width:0;position:relative;display:flex;}
.su-msg-qui-lien .su-msg-ident .su-msg-nom{visibility:hidden;}
.su-msg-nom-lien{
  position:absolute;top:0;left:0;z-index:1;
  color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:rgba(255,248,231,.45);cursor:pointer;
}
.su-msg-nom-lien[hidden]{display:none;}
.su-msg-nom-lien:hover{color:var(--gold);text-decoration-color:var(--gold);}
.su-msg-nom-lien:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;}
.su-msg-btn-tete{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,248,231,.1);color:var(--cream);font-size:16px;line-height:1;cursor:pointer;
  font-family:var(--font-sans);
}
.su-msg-btn-tete:hover{background:rgba(255,248,231,.2);}
.su-msg-btn-tete:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.su-msg-ico-mobile{display:none;}

/* ── LE CORPS ──────────────────────────────────────────────────────────── */
.su-msg-corps{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;}
.su-msg.su-msg-repliee .su-msg-corps{display:none;}

.su-msg-outils{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;border-bottom:1px solid var(--cream-3);background:var(--cream);
}
.su-msg-outils[hidden]{display:none;}
.su-msg-statut{
  min-width:0;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-3);
}
.su-msg-bouton{
  font-family:var(--font-mono);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 12px;border:1.5px solid var(--ink);border-radius:4px;background:transparent;color:var(--ink);
  cursor:pointer;white-space:nowrap;
}
.su-msg-bouton:hover{background:var(--ink);color:var(--cream);}
.su-msg-bouton:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;}
.su-msg-bouton.su-msg-plein{border-color:var(--gold-deep);background:var(--gold-deep);color:var(--cream);}
.su-msg-bouton.su-msg-plein:hover{background:var(--ink);border-color:var(--ink);}
.su-msg-bouton:disabled{opacity:.55;cursor:wait;}
.su-msg-bouton[hidden]{display:none;}

.su-msg-bandeau{
  flex:0 0 auto;margin:0;padding:10px 16px;border-bottom:1px solid var(--cream-3);
  background:var(--cream-2);font-size:13px;line-height:1.45;color:var(--teal-2);
}
.su-msg-bandeau:empty{display:none;}

/* ── LE FIL ────────────────────────────────────────────────────────────── */
.su-msg-fil{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--cream-2);
}
.su-msg-attente{
  margin:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-3);
  text-align:center;line-height:1.6;
}
.su-msg-attente .su-msg-bouton{margin-top:12px;}

/* La demande : premier message du recruteur, avec la fiche de poste. */
.su-msg-demande{
  align-self:flex-start;width:100%;max-width:330px;
  display:flex;flex-direction:column;gap:8px;padding:14px;
  background:var(--cream);border:1.5px solid var(--ink);border-radius:8px;
}
.su-msg-meta{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-3);line-height:1.5;
}
.su-msg-poste{
  font-family:var(--font-display);font-weight:900;font-size:18px;line-height:1;text-transform:uppercase;
  overflow-wrap:anywhere;
}
.su-msg-fiche{display:flex;flex-direction:column;gap:3px;margin:0;padding:0;list-style:none;font-size:12px;line-height:1.45;color:var(--teal-2);}
.su-msg-fiche li{overflow-wrap:anywhere;}
.su-msg-texte{font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;}
.su-msg-efface{font-size:13px;line-height:1.45;font-style:italic;color:var(--teal-3);}

/* Une bulle : à gauche l'autre partie, à droite soi. */
.su-msg-message{display:flex;flex-direction:column;gap:4px;max-width:300px;min-width:0;}
.su-msg-message.su-msg-autre{align-self:flex-start;}
.su-msg-message.su-msg-moi{align-self:flex-end;align-items:flex-end;}
.su-msg-bulle{max-width:100%;padding:12px 14px;border-radius:8px;}
.su-msg-autre .su-msg-bulle{background:var(--cream);border:1px solid var(--cream-3);}
.su-msg-moi .su-msg-bulle{background:var(--ink);color:var(--cream);}
.su-msg-moi .su-msg-meta{text-align:right;}

/* Une réponse par e-mail qui attend la confirmation du candidat. */
.su-msg-message.su-msg-a-confirmer{align-self:flex-end;align-items:stretch;max-width:320px;width:100%;}
.su-msg-a-confirmer .su-msg-bulle{background:var(--cream);color:var(--ink);border:1.5px dashed var(--gold-deep);display:flex;flex-direction:column;gap:8px;}
.su-msg-etiquette{
  font-family:var(--font-mono);font-weight:700;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);
}
.su-msg-note{font-size:12px;line-height:1.45;color:var(--teal-2);}
/* L'avertissement Calendly (côté candidat, lot 38-7) : le petit texte de
   `su-msg-note`, sous la bulle (ou sous le texte de la demande), dans la largeur
   du message ; il ne déborde jamais. */
.su-msg-calendly{max-width:100%;overflow-wrap:anywhere;}
.su-msg-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}

/* ── LA SAISIE ─────────────────────────────────────────────────────────── */
.su-msg-saisie{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-top:1px solid var(--cream-3);background:var(--cream);}
.su-msg-saisie[hidden]{display:none;}
.su-msg-etiquette-saisie{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-3);}
.su-msg-champ{
  width:100%;min-height:62px;max-height:160px;resize:none;
  font-family:var(--font-sans);font-size:14px;line-height:1.4;padding:10px 12px;
  border:1.5px solid var(--cream-3);border-radius:4px;background:var(--cream-2);color:var(--ink);outline:none;
}
.su-msg-champ:focus{border-color:var(--gold-deep);}
.su-msg-champ::placeholder{color:var(--teal-3);}
.su-msg-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.su-msg-rappel{font-size:11px;line-height:1.35;color:var(--teal-3);min-width:0;}
.su-msg-envoyer{font-size:11px;padding:10px 18px;}

.su-msg-retour{
  flex:0 0 auto;margin:0;padding:8px 16px;font-size:12px;line-height:1.45;background:var(--cream);
  border-top:1px solid var(--cream-3);color:var(--teal-2);
}
.su-msg-retour.su-msg-erreur{color:var(--rust);}
.su-msg-retour:empty{display:none;}

/* ── LA CONFIRMATION (« Mettre fin », « Supprimer ») ───────────────────── */
.su-msg-confirmation{
  position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;
  background:rgba(26,34,34,.45);
}
.su-msg-confirmation[hidden]{display:none;}
.su-msg-confirmation-boite{
  width:100%;background:var(--cream);border-top:1.5px solid var(--ink);
  display:flex;flex-direction:column;
}
.su-msg-confirmation-titre{
  margin:0;padding:14px 16px;background:var(--ink);color:var(--cream);
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.su-msg-confirmation-texte{margin:0;padding:16px;font-size:14px;line-height:1.5;color:var(--teal-2);}
.su-msg-confirmation-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:0 16px 16px;}

/* ── LA PAGE, PENDANT QUE LA FENÊTRE EST REPLIÉE ───────────────────────── */
html.su-msg-repliee body{padding-bottom:72px;}

/* ── SOUS 900 PX : PLEIN ÉCRAN ─────────────────────────────────────────── */
@media (max-width:899px){
  .su-msg{right:0;left:0;width:auto;max-width:none;border-left:none;border-right:none;}
  .su-msg.su-msg-depliee{top:0;bottom:0;height:auto;border:none;border-radius:0;box-shadow:none;}
  .su-msg.su-msg-depliee .su-msg-tete{border-radius:0;padding:14px 16px;}
  .su-msg.su-msg-depliee .su-msg-ico-bureau{display:none;}
  .su-msg.su-msg-depliee .su-msg-ico-mobile{display:inline;}
  .su-msg.su-msg-depliee .su-msg-fermer{display:none;}
  .su-msg.su-msg-depliee .su-msg-replier{width:44px;height:44px;font-size:18px;}
  .su-msg-btn-tete{width:44px;height:44px;}
  .su-msg-nom{font-size:18px;}
  .su-msg-demande{max-width:none;}
  .su-msg-message{max-width:85%;}
  .su-msg-message.su-msg-a-confirmer{max-width:92%;}
  .su-msg-saisie{padding:10px 16px 18px;}
  .su-msg-champ{font-size:16px;}
  .su-msg-bouton{min-height:44px;}
  .su-msg-pied{align-items:flex-end;}
}

/* ══════════════════════════════════════════════════════════════════════════
   LE CÔTÉ RECRUTEUR (lot 37-12) — maquettes `Main.dc.html` et
   `Rangement.dc.html`. Couleurs et polices : jetons de `style.css` ; le cercle
   du score prend la couleur de son palier (`--score-1` à `--score-3`), seule
   marque du niveau.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LA PLACE QU'ELLE PREND, DITE À LA PAGE ────────────────────────────────
   `--su-msg-bas` : la hauteur des barres posées en bas (barre de titre et son
   filet, mesurée le 08/10 dans Chromium, polices chargées : 61 px à
   l'ordinateur, 69 px sous 900 px ; un pixel de jeu au-dessus).
   `--su-msg-emprise` : à l'ordinateur, la largeur prise à droite par les
   fenêtres dépliées, marge de 24 px de chaque côté comprise. La page place sa
   barre de comparaison ou son lecteur au-dessus des barres et à gauche des
   fenêtres dépliées ; sous 900 px, une fenêtre dépliée prend tout l'écran et la
   page cache les siens. */
html.su-msg-repliee,html.su-msg-depliee{--su-msg-bas:62px;}
html.su-msg-conv-depliee{--su-msg-emprise:468px;}                /* 24 + 420 + 24 */
html.su-msg-liste-depliee{--su-msg-emprise:408px;}               /* 24 + 360 + 24 */
html.su-msg-deux.su-msg-liste-depliee{--su-msg-emprise:844px;}   /* 24 + 420 + 16 + 360 + 24 */

/* ── L'EN-TÊTE DE LA CONVERSATION : LE SCORE DU CANDIDAT ───────────────── */
.su-msg-avatar.su-msg-avatar-score{background:transparent;border:1.5px solid var(--teal-3);color:var(--cream);font-size:14px;}
.su-msg-avatar.su-msg-palier-s1{border-color:var(--score-1);color:var(--score-1);}
.su-msg-avatar.su-msg-palier-s2{border-color:var(--score-2);color:var(--score-2);}
.su-msg-avatar.su-msg-palier-s3{border-color:var(--score-3);color:var(--score-3);}

/* ── LA FENÊTRE DES LISTES ─────────────────────────────────────────────── */
.su-msg.su-msg-liste{width:360px;}
.su-msg-liste .su-msg-nom{font-size:18px;}
@media (min-width:900px){
  /* Une conversation ouverte : les listes passent à sa gauche. */
  html.su-msg-deux .su-msg.su-msg-liste{right:460px;}            /* 24 + 420 + 16 */
}
.su-msg-pastille{
  flex:0 0 auto;padding:3px 9px;border-radius:20px;background:var(--gold);color:var(--ink);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;white-space:nowrap;
}
.su-msg-pastille[hidden]{display:none;}

.su-msg-groupes{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;background:var(--cream);
}
.su-msg-groupes .su-msg-attente{padding:24px 16px;}

/* Une liste : son titre se déplie sur ses conversations. */
.su-msg-groupe-tete{
  display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;
  border:none;border-bottom:1px solid var(--cream-3);background:var(--cream-2);
  text-align:left;cursor:pointer;font:inherit;color:inherit;
}
.su-msg-groupe-tete:hover{background:var(--cream-3);}
.su-msg-groupe-tete:focus-visible,.su-msg-conv-ouvrir:focus-visible,.su-msg-conv-menu:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px;}
.su-msg-groupe-fleche{flex:0 0 auto;width:12px;font-family:var(--font-mono);font-size:12px;color:var(--gold-deep);}
.su-msg-groupe-nom{
  flex:1 1 auto;min-width:0;overflow-wrap:anywhere;
  font-family:var(--font-display);font-weight:900;font-size:15px;line-height:1.1;text-transform:uppercase;
}
.su-msg-groupe-compte{flex:0 0 auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--teal-3);white-space:nowrap;}

/* Une conversation : score, nom, état, extrait, point « nouveau », trois points. */
.su-msg-convs{margin:0;padding:0;list-style:none;}
.su-msg-convs[hidden]{display:none;}
.su-msg-conv{display:flex;align-items:center;border-bottom:1px solid var(--cream-3);}
.su-msg-conv-ouvrir{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;padding:12px 4px 12px 36px;
  border:none;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit;
}
.su-msg-conv-ouvrir:hover{background:var(--cream-2);}
/* Côté candidat (lot 38b-2) : une seule liste, sans titre de liste ni menu à
   trois points ; la ligne prend toute la largeur. Le cercle porte les
   initiales de l'entreprise (`su-msg-initiales`), comme l'en-tête de la
   conversation. */
.su-msg-convs-plates .su-msg-conv-ouvrir{padding:12px 16px;}
.su-msg-score,.su-msg-initiales{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--cream-3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:900;font-size:13px;color:var(--ink);
}
.su-msg-score.su-msg-palier-s1{border-color:var(--score-1);}
.su-msg-score.su-msg-palier-s2{border-color:var(--score-2);}
.su-msg-score.su-msg-palier-s3{border-color:var(--score-3);}
.su-msg-conv-texte{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.su-msg-conv-nom{font-weight:600;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.su-msg-conv-etat{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-3);line-height:1.5;}
.su-msg-conv-extrait{
  font-size:12px;line-height:1.35;color:var(--teal-2);overflow-wrap:anywhere;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.su-msg-point{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--gold-deep);}
.su-msg-conv-menu{
  flex:0 0 auto;width:44px;height:44px;margin-right:8px;padding:0;
  border:1.5px solid transparent;border-radius:4px;background:transparent;
  font-size:18px;line-height:1;color:var(--teal-2);cursor:pointer;
}
.su-msg-conv-menu:hover,.su-msg-conv-menu[aria-expanded="true"]{border-color:var(--ink);background:var(--cream);color:var(--ink);}

.su-msg-liste-note{
  flex:0 0 auto;margin:0;padding:12px 16px;border-top:1px solid var(--cream-3);background:var(--cream);
  font-size:11px;line-height:1.4;color:var(--teal-3);
}

/* ── LE MENU À TROIS POINTS ────────────────────────────────────────────── */
.su-msg-menu{
  position:absolute;right:14px;z-index:3;width:260px;max-width:calc(100% - 28px);max-height:calc(100% - 80px);
  overflow-y:auto;display:flex;flex-direction:column;
  background:var(--cream);border:1.5px solid var(--ink);border-radius:6px;box-shadow:var(--shadow-card);
}
.su-msg-menu[hidden]{display:none;}
.su-msg-menu-titre{
  margin:0;padding:10px 14px;border-bottom:1px solid var(--cream-3);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-3);
}
.su-msg-menu-choix{display:flex;flex-direction:column;}
.su-msg-bouton.su-msg-menu-option{
  display:block;width:100%;padding:12px 14px;border:none;border-bottom:1px solid var(--cream-3);border-radius:0;
  background:transparent;color:var(--ink);text-align:left;white-space:normal;overflow-wrap:anywhere;
  font-family:var(--font-sans);font-weight:400;font-size:14px;letter-spacing:0;text-transform:none;
}
.su-msg-bouton.su-msg-menu-option:hover{background:var(--cream-2);color:var(--ink);}
.su-msg-bouton.su-msg-menu-option:disabled{opacity:1;color:var(--teal-3);cursor:default;background:transparent;}
.su-msg-bouton.su-msg-menu-separe{border-bottom:1.5px solid var(--ink);}
.su-msg-bouton.su-msg-menu-retirer{border-bottom:none;color:var(--rust);}
.su-msg-bouton.su-msg-menu-retirer:hover{color:var(--rust);}
.su-msg-menu-texte{margin:0;padding:10px 14px;font-size:13px;line-height:1.45;color:var(--teal-2);}
.su-msg-menu-texte.su-msg-erreur{color:var(--rust);}
.su-msg-menu-texte:empty{display:none;}
.su-msg-menu-form{display:flex;flex-direction:column;gap:6px;}
.su-msg-menu-etiquette{
  margin-top:4px;padding:0 14px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-3);
}
.su-msg-menu-champ{
  margin:0 14px;width:calc(100% - 28px);padding:9px 10px;
  border:1.5px solid var(--cream-3);border-radius:4px;background:var(--cream-2);color:var(--ink);
  font-family:var(--font-sans);font-size:14px;outline:none;
}
.su-msg-menu-champ:focus{border-color:var(--gold-deep);}
.su-msg-menu-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:10px 14px 12px;}
.su-msg-bouton.su-msg-danger{border-color:var(--rust);background:var(--rust);color:var(--cream);}
.su-msg-bouton.su-msg-danger:hover{border-color:var(--ink);background:var(--ink);}

/* ── SOUS 900 PX ───────────────────────────────────────────────────────── */
@media (max-width:899px){
  html.su-msg-repliee,html.su-msg-depliee{--su-msg-bas:70px;}
  .su-msg.su-msg-liste{width:auto;}
  /* Une conversation ouverte prend la place : les listes reviennent par sa flèche. */
  html.su-msg-deux .su-msg.su-msg-liste{display:none;}
  .su-msg-conv-ouvrir{padding-left:16px;}
  .su-msg-menu-champ{font-size:16px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   LE FORMULAIRE DE PREMIER CONTACT (lot 37-13) — maquette `Formulaire.dc.html`.
   Une fenêtre au milieu de l'écran, sur un voile ; plein écran sous 900 px.
   Couleurs, polices et ombre : jetons de `style.css`. z-index 950 : au-dessus
   de la messagerie (190), de la barre de comparaison (400) et des fenêtres des
   pages (600), sous le message bref (9999).
   ══════════════════════════════════════════════════════════════════════════ */
.su-msg-form-fond{
  position:fixed;inset:0;z-index:950;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(26,34,34,.7);
  font-family:var(--font-sans);color:var(--ink);
}
.su-msg-form-fond[hidden]{display:none;}
.su-msg-form-fond *,.su-msg-form-fond *::before,.su-msg-form-fond *::after{box-sizing:border-box;}
.su-msg-form{
  width:760px;max-width:100%;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
  display:flex;flex-direction:column;
  background:var(--cream);border:1.5px solid var(--ink);border-radius:10px;box-shadow:var(--shadow-card-lg);
}
.su-msg-form:focus{outline:none;}

.su-msg-form-tete{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px 14px 20px;background:var(--ink);color:var(--cream);border-radius:8px 8px 0 0;
}
.su-msg-form-titre{
  margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}

.su-msg-form-formulaire{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.su-msg-form-corps{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:24px 28px;display:flex;flex-direction:column;gap:16px;
}

.su-msg-form-champ{display:flex;flex-direction:column;gap:6px;min-width:0;}
.su-msg-form-champ[hidden]{display:none;}
.su-msg-form-etiquette{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-3);
}
.su-msg-form-saisie{
  width:100%;min-width:0;font-family:var(--font-sans);font-size:15px;line-height:1.3;color:var(--ink);
  padding:12px 14px;border:1.5px solid var(--cream-3);border-radius:4px;background:var(--cream-2);outline:none;
}
.su-msg-form-saisie:focus{border-color:var(--gold-deep);}
.su-msg-form-saisie::placeholder{color:var(--teal-3);}
.su-msg-form-saisie[aria-invalid="true"]{border-color:var(--rust);}
.su-msg-form-saisie:disabled{opacity:.6;}
select.su-msg-form-saisie{cursor:pointer;}

/* La liste : en tête, séparée du reste. */
.su-msg-form-lien{
  display:flex;align-items:flex-end;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--cream-3);
}
.su-msg-form-lien .su-msg-form-champ{flex:1 1 auto;}
.su-msg-form-liste{border-color:var(--ink);background:var(--cream);}
.su-msg-form-aide{flex:0 1 280px;margin:0;font-size:12px;line-height:1.4;color:var(--teal-3);}
.su-msg-form-intro{margin:0;font-size:14px;line-height:1.5;color:var(--teal-2);}

.su-msg-form-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;}
.su-msg-form-qui{display:flex;flex-direction:column;gap:6px;min-width:0;}
.su-msg-form-case{display:flex;gap:8px;align-items:center;font-size:12px;line-height:1.35;color:var(--teal-2);cursor:pointer;}
.su-msg-form-case input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--gold-deep);}

/* La rémunération : facultative, vivement conseillée, deux chiffres sourcés. */
.su-msg-form-remu{
  margin:0;min-width:0;padding:16px;display:flex;flex-direction:column;gap:12px;
  border:1.5px solid var(--gold-deep);border-radius:8px;
  background:rgba(201,168,106,.12);background:color-mix(in srgb,var(--gold) 12%,transparent);   /* --gold à 12 % */
}
.su-msg-form-remu-legende{
  float:left;width:100%;padding:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.su-msg-form-remu-legende + *{clear:both;}
.su-msg-form-remu-titre{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.su-msg-form-remu-facultative{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-3);white-space:nowrap;}
.su-msg-form-montants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.su-msg-form-champ-montant .su-msg-form-etiquette{
  font-family:var(--font-sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--teal-2);
}
.su-msg-form-montant{padding:10px 12px;background:var(--cream);}
.su-msg-form-chiffres{
  margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;
  font-size:13px;line-height:1.5;color:var(--ink);
}
.su-msg-form-chiffres a{color:var(--gold-deep);}
.su-msg-form-chiffres a:hover{color:var(--ink);}

.su-msg-form-message{resize:vertical;min-height:110px;max-height:320px;font-size:14px;line-height:1.45;}

.su-msg-form-erreur{flex:1 1 100%;margin:0;font-size:13px;line-height:1.5;color:var(--rust);}
.su-msg-form-erreur:empty{display:none;}

.su-msg-form-pied{
  flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;
  padding:14px 28px;border-top:1px solid var(--cream-3);
}
.su-msg-form-pied-note{margin:0;max-width:380px;min-width:0;font-size:12px;line-height:1.4;color:var(--teal-3);}
.su-msg-form-actions{flex:0 0 auto;display:flex;gap:10px;}
.su-msg-bouton.su-msg-form-bouton{font-size:11px;padding:12px 20px;}
.su-msg-bouton.su-msg-form-envoyer:disabled{cursor:wait;}

/* ── SOUS 900 PX : PLEIN ÉCRAN ─────────────────────────────────────────── */
@media (max-width:899px){
  .su-msg-form-fond{padding:0;align-items:stretch;}
  .su-msg-form{width:100%;max-width:none;max-height:none;height:100%;border:none;border-radius:0;box-shadow:none;}
  .su-msg-form-tete{border-radius:0;padding:10px 12px 10px 16px;}
  .su-msg-form-titre{white-space:normal;line-height:1.5;}
  .su-msg-form-corps{padding:18px 16px;}
  .su-msg-form-lien{flex-direction:column;align-items:stretch;gap:8px;}
  .su-msg-form-aide{flex:none;}
  .su-msg-form-grille{grid-template-columns:minmax(0,1fr);}
  .su-msg-form-saisie{font-size:16px;}
  .su-msg-form-pied{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;padding:12px 16px 16px;}
  .su-msg-form-erreur{flex:none;}
  .su-msg-form-pied-note{max-width:none;}
  .su-msg-form-actions{justify-content:flex-end;}
  .su-msg-bouton.su-msg-form-bouton{min-height:44px;}
}
@media (max-width:520px){
  .su-msg-form-montants{grid-template-columns:repeat(2,minmax(0,1fr));}
  .su-msg-form-montants .su-msg-form-champ-montant:last-child{grid-column:1 / -1;}
  .su-msg-form-actions .su-msg-bouton{flex:1 1 auto;}
}

/* « Mettre à jour le modèle » (lot 37-14), sous la liste du formulaire : là
   seulement quand la liste choisie a un modèle. */
.su-msg-form-case[hidden]{display:none;}
.su-msg-form-maj{margin-top:4px;}

/* ══════════════════════════════════════════════════════════════════════════
   LA FENÊTRE DU MODÈLE (lot 37-14) — maquette `Modele.dc.html`.
   Une petite fenêtre au milieu de l'écran, sur un voile, après l'envoi du
   formulaire ; elle le reste sous 900 px (elle tient en 390 px). Couleurs,
   polices et ombre : jetons de `style.css`. Ses champs, sa case et ses boutons
   reprennent les classes du formulaire (`su-msg-form-*`). z-index 950, comme le
   formulaire (qui est fermé quand elle s'ouvre).
   ══════════════════════════════════════════════════════════════════════════ */
.su-msg-modele-fond{
  position:fixed;inset:0;z-index:950;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(26,34,34,.7);
  font-family:var(--font-sans);color:var(--ink);
}
.su-msg-modele-fond[hidden]{display:none;}
.su-msg-modele-fond *,.su-msg-modele-fond *::before,.su-msg-modele-fond *::after{box-sizing:border-box;}
.su-msg-modele{
  width:520px;max-width:100%;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
  display:flex;flex-direction:column;
  background:var(--cream);border:1.5px solid var(--ink);border-radius:10px;box-shadow:var(--shadow-card-lg);
}
.su-msg-modele:focus{outline:none;}
.su-msg-modele-tete{
  flex:0 0 auto;padding:16px 20px;background:var(--ink);color:var(--cream);border-radius:8px 8px 0 0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.su-msg-modele-formulaire{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.su-msg-modele-corps{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:24px;display:flex;flex-direction:column;gap:16px;
}
.su-msg-modele-titre{
  margin:0;font-family:var(--font-display);font-weight:900;font-size:28px;line-height:.95;text-transform:uppercase;
  overflow-wrap:anywhere;
}
.su-msg-modele-titre-suite{font-family:var(--font-serif);font-weight:400;font-style:italic;text-transform:none;color:var(--gold-deep);}
.su-msg-modele-texte{margin:0;font-size:14px;line-height:1.5;color:var(--teal-2);}
.su-msg-modele-nouvelle{display:flex;flex-direction:column;gap:12px;}
.su-msg-modele-nouvelle[hidden]{display:none;}
.su-msg-form-case.su-msg-modele-case{align-items:flex-start;font-size:13px;line-height:1.4;}
.su-msg-modele-case input{margin-top:1px;}
.su-msg-modele-note{
  margin:0;padding:12px 14px;border:1px solid var(--cream-3);border-radius:6px;background:var(--cream-2);
  font-size:12px;line-height:1.5;color:var(--teal-2);
}
.su-msg-modele-erreur{flex:none;}
.su-msg-modele-pied{
  flex:0 0 auto;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;
  padding:14px 24px;border-top:1px solid var(--cream-3);
}

/* ── SOUS 900 PX ───────────────────────────────────────────────────────── */
@media (max-width:899px){
  .su-msg-modele-fond{padding:16px;}
  .su-msg-modele-corps{padding:20px 16px;}
  .su-msg-modele-titre{font-size:24px;}
  .su-msg-modele-pied{padding:12px 16px 16px;}
}
@media (max-width:520px){
  .su-msg-modele-pied .su-msg-bouton{flex:1 1 auto;}
}

/* ══════════════════════════════════════════════════════════════════════════
   « PROPOSER UN RDV » (côté recruteur, lot 38-6) — une barre sous le fil de la
   conversation, entre le fil et la saisie : elle reste là quand la saisie est
   cachée. Un bouton secondaire (le contour de `su-msg-bouton`, jamais plein :
   « Envoyer » reste le seul bouton plein) et son « i », dont la bulle s'ouvre
   DANS la barre, sous le bouton : rien ne sort de la fenêtre, à aucune largeur.
   Couleurs et polices : jetons de `style.css`.
   ══════════════════════════════════════════════════════════════════════════ */
.su-msg-rdv{
  flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  padding:8px 16px;border-top:1px solid var(--cream-3);background:var(--cream);
}
.su-msg-rdv[hidden]{display:none;}
/* Inactif : grisé, sans l'inversion du survol ni le sablier des envois. */
.su-msg-bouton.su-msg-rdv-bouton:disabled{opacity:.45;cursor:not-allowed;}
.su-msg-bouton.su-msg-rdv-bouton:disabled:hover{background:transparent;color:var(--ink);}
/* Le « i » : un cercle de 20 px dans une cible de 32 px (44 px sous 900 px). */
.su-msg-rdv-info{
  flex:0 0 auto;width:32px;height:32px;padding:0;border:none;border-radius:50%;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--teal-2);
}
.su-msg-rdv-i{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  border:1.5px solid currentColor;font-family:var(--font-mono);font-weight:700;font-size:11px;line-height:1;
}
.su-msg-rdv-info:hover,.su-msg-rdv-info[aria-expanded="true"]{color:var(--gold-deep);}
.su-msg-rdv-info:focus-visible{outline:2px solid var(--gold-deep);outline-offset:0;}
/* La bulle : une phrase entière, en sans, sur toute la largeur de la barre. */
.su-msg-rdv-bulle{
  flex:1 1 100%;min-width:0;margin:0;padding:10px 12px;
  border:1px solid var(--cream-3);border-radius:6px;background:var(--cream-2);
  font-size:12px;line-height:1.5;color:var(--teal-2);overflow-wrap:anywhere;
}
.su-msg-rdv-bulle[hidden]{display:none;}

/* ── SOUS 900 PX ───────────────────────────────────────────────────────── */
@media (max-width:899px){
  .su-msg-rdv-info{width:44px;height:44px;}
}