/* Messagerie entre potes (messagerie.js) : panneau de chat sur toutes les pages d'un pilote connecté, et page
   messagerie.html. Charte « Corde » : blanc, gris clair, carbone ; le rouge seulement pour les non-lus, l'envoi et le
   focus. Présence = pastille (pleine / anneau / anneau gris) ET texte, jamais la couleur seule. Chargée par messagerie.js
   (jamais pour les visiteurs). */

.tdm [hidden], .msg-page [hidden] { display: none !important; }

/* ---------------------------------------------------------------- panneau : ordinateur (barre en bas à droite) */
.tdm { position: fixed; z-index: 66; right: 24px; bottom: var(--tdm-bas, 0px); width: 360px; display: flex; flex-direction: column;
  font: 400 14.5px/1.4 var(--f-text); color: var(--ink); }
.tdm-fab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px 0 16px; border: 0;
  border-radius: var(--radius) var(--radius) 0 0; background: var(--ink); color: #fff; font: 700 14.5px/1 var(--f-text); text-align: left;
  cursor: pointer; box-shadow: 0 -4px 18px rgba(22, 26, 29, .09); }
.tdm-fab:hover { background: var(--navy-2); }
.tdm-fab:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.tdm-fab > .ico { width: 20px; height: 20px; flex: none; }
.tdm-fab-t { white-space: nowrap; }
.tdm-fab-nl { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--red-deep);
  color: #fff; font: 700 12px/1 var(--f-text); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--ink); }
.tdm-fab-en { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; font: 500 12.5px var(--f-text); color: rgba(255, 255, 255, .78); white-space: nowrap; }
.tdm-fab-en .tdm-pt { box-shadow: 0 0 0 2px var(--ink); }
.tdm-chev { width: 18px; height: 18px; margin-left: auto; flex: none; transform: rotate(180deg); transition: transform .25s var(--ease); }
.tdm[data-ouvert=true] .tdm-chev { transform: none; }
.tdm.tdm-haut:not([data-ouvert=true]) .tdm-fab { border-radius: var(--radius); box-shadow: var(--shadow-2); }
.tdm.tdm-haut .tdm-corps { border-radius: 0 0 var(--radius) var(--radius); border-bottom: 1px solid var(--rule-strong); }
.tdm.tdm-cache { visibility: hidden; }

.tdm-corps { display: flex; flex-direction: column; height: min(560px, calc(100dvh - var(--tdm-bas, 0px) - 150px)); min-height: 300px; background: #fff;
  border: 1px solid var(--rule-strong); border-top: 0; border-bottom: 0; box-shadow: 0 10px 28px rgba(22, 26, 29, .09); overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .tdm[data-ouvert=true] .tdm-corps { animation: tdm-ouvre .32s var(--ease); }
  .tdm-pop .tdm-fab-nl { animation: tdm-pop .5s var(--ease); }
}
@keyframes tdm-ouvre { from { opacity: 0; transform: translateY(14px); clip-path: inset(0 0 30% 0); } }
@keyframes tdm-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.tdm-tete { display: none; }
.tdm[data-vue=conv] .tdm-tete { display: none; }
.tdm-vue { flex: 1; min-height: 0; }
.tdm-liste, .msg-liste { overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 10px; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.tdm-conv { display: flex; flex-direction: column; }
.tdm .tdm-ct .tdm-x { display: none; }
/* Page de fond : de la place pour que la barre ne cache pas le bas de la page */
body.tdm-actif::after { content: ""; display: block; height: 56px; }

/* ---------------------------------------------------------------- liste des conversations */
.tdm-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px 8px 6px; font: 800 12px/1.2 var(--f-display);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tdm-sec small { font: 600 12px var(--f-text); letter-spacing: 0; text-transform: none; color: var(--green); }
.tdm-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tdm-it { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 9px 8px; border: 0; border-radius: 10px;
  background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.tdm-it:hover { background: var(--paper); }
.tdm-it[aria-current=true] { background: var(--td2-active-bg); }
.tdm-it:focus-visible, .tdm-dem:focus-visible, .tdm-pied a:focus-visible, .tdm-aide a:focus-visible { outline: 2px solid var(--red-deep); outline-offset: -2px; }
.tdm-it-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tdm-it-l { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tdm-it-t b { min-width: 0; font: 700 14.5px/1.25 var(--f-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdm-it-t small { font-size: 13px; line-height: 1.3; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdm-it.is-nl .tdm-it-t small { color: var(--ink); font-weight: 600; }
.tdm-it .tdm-st .tdm-pt { display: none; }   /* la pastille est déjà sur l'avatar ; le texte reste */
.tdm-it-l b { flex: 0 0 auto; max-width: 100%; }   /* le pseudo d'abord ; le statut se raccourcit */
.tdm-it .tdm-st { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tdm-it-r { flex: none; display: grid; justify-items: end; gap: 4px; }
.tdm-it-r time { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdm-it.is-nl .tdm-it-r time { color: var(--red-deep); font-weight: 600; }
.tdm-nl { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--td2-action);
  color: #fff; font: 700 11.5px/1 var(--f-text); font-variant-numeric: tabular-nums; }
.tdm-fils { list-style: none; margin: 0 0 6px 27px; padding: 0 0 0 10px; border-left: 1px solid var(--rule); display: grid; gap: 2px; }
.tdm-fil { min-height: 46px; padding: 6px 8px; }
.tdm-date { flex: none; min-width: 52px; font: 800 13px/1.15 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.tdm-dem { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font: 600 13.5px/1.3 var(--f-text); text-decoration: none; }
.tdm-dem:hover { border-color: var(--ink); }
.tdm-dem .ico { width: 18px; height: 18px; flex: none; }
.tdm-dem span { flex: 1; }
.tdm-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 16px 8px 4px; padding-top: 12px; border-top: 1px solid var(--paper-2);
  font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.tdm-pied > span:first-child { flex: 1 1 170px; }
.tdm-pied-l { display: flex; gap: 12px; }
.tdm-pied a { color: var(--ink-2); font-weight: 600; text-underline-offset: 3px; }
.tdm-vide { margin: auto; padding: 22px 14px; text-align: center; color: var(--ink-2); line-height: 1.5; }
.tdm-vide p { max-width: 36ch; margin: 0 auto 14px; }
.tdm-vide p:only-child { margin-bottom: 0; }
.tdm-vide .btn { text-decoration: none; }
.tdm-aide { margin: 0 8px 8px; font-size: 13.5px; }
.tdm-aide a { color: var(--ink-2); text-underline-offset: 3px; }

/* Avatar (initiale) et présence */
.tdm-av { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--paper-2);
  color: var(--ink); font: 800 15px/1 var(--f-display); }
.tdm-av-g { border-radius: 12px; background: var(--g, var(--ink)); color: #fff; }
.tdm-av .tdm-pt { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; box-shadow: 0 0 0 2px #fff; }
.tdm-pt { display: inline-block; flex: none; box-sizing: border-box; width: 9px; height: 9px; border-radius: 50%; }
.tdm-pt-en_ligne, .tdm-st-en_ligne .tdm-pt { background: var(--green); }
.tdm-pt-absent, .tdm-st-absent .tdm-pt { background: #fff; border: 3px solid var(--yellow-ink); }
.tdm-pt-hors_ligne, .tdm-st-hors_ligne .tdm-pt { background: #fff; border: 2px solid var(--ink-3); }
.tdm-st { display: inline-flex; align-items: center; gap: 5px; flex: none; font: 500 12px/1.2 var(--f-text); color: var(--ink-3); white-space: nowrap; }
.tdm-st-en_ligne { color: var(--green); }
.tdm-st-absent { color: var(--yellow-ink); }

/* ---------------------------------------------------------------- conversation */
.tdm-ct { display: flex; align-items: center; gap: 6px; min-height: 64px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--td2-border); background: #fff; }
.tdm-ct-av { margin-right: 4px; }
.tdm-ct-av { flex: none; display: flex; }
.tdm-ct-av:empty { display: none; }
.tdm-ct-t { flex: 1; min-width: 0; }
.tdm-ct-t h2 { margin: 0; font: 800 16px/1.2 var(--f-display); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdm-ct-t p { display: flex; align-items: center; gap: 8px; margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tdm-nom { overflow: hidden; text-overflow: ellipsis; }
.tdm-ib { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--ink-2); cursor: pointer; text-decoration: none; }
.tdm-ib:hover { background: var(--paper); color: var(--ink); }
.tdm-ib:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 0; }
.tdm-ib .ico { width: 20px; height: 20px; }
.tdm-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 16px;
  background: #fff; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.tdm-msgs:focus-visible { outline: 2px solid var(--red-deep); outline-offset: -2px; }
.tdm-m { display: flex; }
.tdm-m.is-moi { justify-content: flex-end; }
.tdm-bulle { max-width: 84%; min-width: 0; padding: 8px 12px 5px; background: var(--td2-bg); border: 1px solid var(--td2-bg); border-radius: 4px 14px 14px 14px; }
.tdm-m.is-moi .tdm-bulle { background: var(--td2-active-bg); border-color: var(--td2-active-bg); border-radius: 14px 4px 14px 14px; }
/* Groupe : auteur (initiale + pseudo) au-dessus de la bulle des autres */
.tdm-m-qui { flex: 0 0 100%; display: flex; align-items: center; gap: 7px; margin: 6px 0 3px; font-size: 12.5px; color: var(--ink-2); }
.tdm-m-qui b { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.tdm-m-av { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--paper-2); color: var(--ink);
  font: 800 11px/1 var(--f-display); }
.tdm-m.is-groupe .tdm-bulle, .tdm-m.is-groupe > .tdr-chips { margin-left: 31px; }
.tdm-bulle p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.tdm-bulle p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 2px; }
.tdm-bulle p.tdm-suppr { font-style: italic; color: var(--ink-3); }
.tdm-m-t { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 22px; font-size: 11.5px; color: var(--ink-3); }
.tdm-m-t b { margin-right: auto; font-weight: 700; color: var(--ink-2); overflow-wrap: anywhere; }
.tdm-m-t time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdm-rapide { align-self: center; display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 4px 4px 12px; background: #fff; border: 1px solid var(--td2-border);
  border-radius: 99px; font-size: 13.5px; color: var(--ink-2); }
.tdm-rapide > .ico { width: 17px; height: 17px; flex: none; color: var(--ink); }
.tdm-rapide b { color: var(--ink); }
.tdm-rapide time { font-size: 11.5px; color: var(--ink-3); }
.tdm-jour { align-self: center; margin: 8px 0 2px; font: 600 12px var(--f-text); color: var(--ink-3); }
.tdm-jour span { display: inline-block; }
.tdm-jour span::first-letter { text-transform: uppercase; }
.tdm-plus { align-self: center; margin: 0 0 4px; }
.tdm-lien { min-height: 36px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 99px; background: #fff; font: 600 13px var(--f-text); color: var(--ink); cursor: pointer; }
.tdm-lien:hover { border-color: var(--ink); }
.tdm-menu { position: relative; }
.tdm-menu summary { list-style: none; display: grid; place-items: center; width: 30px; height: 24px; border-radius: var(--radius-sm); color: var(--ink-3); cursor: pointer; }
.tdm-menu summary::-webkit-details-marker { display: none; }
.tdm-menu summary:hover, .tdm-menu[open] summary { background: var(--paper-2); color: var(--ink); }
.tdm-menu summary:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 1px; }
.tdm-menu summary .ico { width: 16px; height: 16px; }
.tdm-menu > div { position: absolute; right: 0; top: 26px; z-index: 5; display: grid; min-width: 210px; padding: 6px; background: #fff; border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-2); }
.tdm-menu button { min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; font: 500 14px var(--f-text); color: var(--ink); text-align: left; cursor: pointer; }
.tdm-menu button:hover, .tdm-menu button:focus-visible { background: var(--paper); outline: none; }
.tdm-nouveaux { position: relative; z-index: 2; align-self: center; margin: -46px 0 8px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 99px;
  background: var(--ink); color: #fff; font: 600 13px var(--f-text); box-shadow: var(--shadow-2); cursor: pointer; }
.tdm-nouveaux:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.tdm-ecrire { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 6px 8px; padding: 10px; border-top: 1px solid var(--td2-border); background: #fff; }
.tdm-ecrire textarea { width: 100%; min-height: 44px; max-height: 132px; padding: 11px 14px; border: 1px solid var(--td2-border); border-radius: 10px;
  background: var(--td2-bg); font: 500 15px/1.4 var(--f-text); color: var(--ink); caret-color: var(--red-deep); resize: none; }
.tdm-ecrire textarea::placeholder { color: var(--ink-3); }
.tdm-ecrire textarea:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: var(--focus); }
.tdm-env { align-self: end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: var(--td2-action);
  color: #fff; cursor: pointer; }
.tdm-env:hover { background: var(--red-hover); }
.tdm-env:focus-visible { outline: 3px solid rgba(217, 45, 32, .35); outline-offset: 2px; }
.tdm-env:disabled { opacity: .55; cursor: wait; }
.tdm-env .ico { width: 20px; height: 20px; }
.tdm-reste, .tdm-err { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.tdm-reste:empty { display: none; }
.tdm-err { color: var(--danger); }
.tdm-dlg .act-l { display: grid; gap: 6px; font: 600 13px var(--f-text); }
.tdm-dlg textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); font: 500 15px var(--f-text); color: var(--ink); resize: vertical; }
.tdm-dlg textarea:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus); }
.tdm-dlg .act-p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.tdm-dlg .act-b { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.tdm-dlg .act-err { margin: 0; color: var(--danger); }

/* ---------------------------------------------------------------- pack design v2 : recherche et filtres de la liste */
.tdm-outils-slot { flex: none; }
.tdm[data-vue=conv] .tdm-outils-slot { display: none; }
.tdm-outils { display: grid; gap: 4px; padding: 10px 12px 0; }
.tdm-cherche { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--td2-border); border-radius: 10px;
  background: var(--td2-bg); color: var(--ink-3); cursor: text; }
.tdm-cherche:focus-within { border-color: var(--ink); background: #fff; box-shadow: var(--focus); }
.tdm-cherche .ico { width: 17px; height: 17px; flex: none; }
.tdm-cherche input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; background: none; font: 500 14px var(--f-text); color: var(--ink); outline: none; }
.tdm-cherche input::placeholder { color: var(--ink-3); }
.tdm-filtres { display: flex; border-bottom: 1px solid var(--td2-border); }
.tdm-filtres button { flex: 1 1 auto; min-height: 44px; padding: 0 6px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none;
  font: 600 13.5px var(--f-text); color: var(--ink-3); white-space: nowrap; cursor: pointer; }
.tdm-filtres button:hover { color: var(--ink); }
.tdm-filtres button[aria-pressed=true] { color: var(--td2-action); border-bottom-color: var(--td2-action); }
.tdm-filtres button:focus-visible { outline: 2px solid var(--red-deep); outline-offset: -2px; }
.tdm-f-n { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- en-tête de conversation : menu, recherche, journée épinglée */
.tdm-ct .tdm-ct-menu summary { width: 40px; height: 40px; }
.tdm-ct .tdm-ct-menu summary .ico { width: 20px; height: 20px; }
.tdm-ct-menu > div { top: 44px; }
.tdm-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm); font: 500 14px var(--f-text); color: var(--ink);
  text-decoration: none; white-space: nowrap; }
.tdm-menu a:hover, .tdm-menu a:focus-visible { background: var(--paper); outline: none; }
.tdm-ib[aria-expanded=true] { background: var(--td2-active-bg); color: var(--td2-action); }
.tdm-cc { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--td2-border); background: #fff; color: var(--ink-3); }
.tdm-cc > .ico { width: 17px; height: 17px; flex: none; }
.tdm-cc input { flex: 1; min-width: 0; height: 38px; padding: 0 4px; border: 0; background: none; font: 500 14.5px var(--f-text); color: var(--ink); outline: none; }
.tdm-cc:focus-within { box-shadow: inset 0 -2px 0 var(--ink); }
.tdm-cc-n { flex: none; font-size: 12.5px; white-space: nowrap; }
.tdm-pin-slot:empty { display: none; }
.tdm-pin { display: flex; align-items: center; gap: 12px; margin: 10px 12px 2px; padding: 10px 12px; border-radius: 10px; background: var(--td2-bg);
  color: var(--ink); text-decoration: none; font-size: 13px; }
a.tdm-pin:hover { background: var(--paper-2); }
a.tdm-pin:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 1px; }
.tdm-pin > .ico { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 8px; background: #fff; color: var(--td2-action); }
.tdm-pin-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tdm-pin-t b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdm-pin-t small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdm-pin-v { flex: none; font-weight: 600; color: var(--td2-action); white-space: nowrap; }
.tdm-pin > .ico:last-child { width: 16px; height: 16px; padding: 0; background: none; color: var(--ink-3); }
.tdm .tdm-pin-v { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* panneau étroit : flèche seule */

/* ---------------------------------------------------------------- téléphone : bouton flottant, panneau plein écran */
@media (max-width: 767px) {
  .tdm { right: 16px; bottom: calc(var(--tdm-bas, 0px) + 12px); width: auto; }
  .tdm-fab { position: relative; justify-content: center; width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%; box-shadow: 0 6px 20px rgba(22, 26, 29, .09); }
  .tdm-fab > .ico { width: 24px; height: 24px; }
  .tdm-fab-t, .tdm-fab-en { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tdm-chev { display: none; }
  .tdm-fab-nl { position: absolute; top: -3px; right: -3px; }
  .tdm.tdm-haut:not([data-ouvert=true]) .tdm-fab { border-radius: 50%; }
  .tdm[data-ouvert=true] { top: 0; left: 0; right: 0; bottom: var(--tdm-bas, 0px); width: auto; }
  .tdm.tdm-clavier[data-ouvert=true] { top: var(--tdm-vv-y, 0px); bottom: auto; height: var(--tdm-vv-h, 100%); }
  .tdm[data-ouvert=true] .tdm-fab { display: none; }
  .tdm[data-ouvert=true] .tdm-corps, .tdm.tdm-haut .tdm-corps { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .tdm[data-ouvert=true][data-vue=liste] .tdm-tete { display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--rule); }
  .tdm-tete h2 { flex: 1; margin: 0; font: 800 20px/1.2 var(--f-display); letter-spacing: -.03em; }
  .tdm .tdm-ct .tdm-x { display: grid; }
  .tdm[data-ouvert=true][data-vue=liste] .tdm-tete + .tdm-liste { padding-top: 4px; }
  body.site.tdm-actif { padding-bottom: calc(74px + 76px + env(safe-area-inset-bottom, 0px)); }
  body.tdm-actif::after { display: none; }
  .tdm-ecrire { padding-bottom: 10px; }
  .tdm-ecrire textarea { font-size: 16px; }   /* pas de zoom automatique à la saisie (iOS) */
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .tdm[data-ouvert=true] .tdm-corps { animation: tdm-plein .28s var(--ease); }
}
@keyframes tdm-plein { from { opacity: 0; transform: translateY(24px); } }
html.tdm-verrou, html.tdm-verrou body { overflow: hidden; }
html.tdm-verrou .bnav { display: none !important; }   /* chat ouvert sur téléphone : pas de menu du bas au-dessus du clavier */
@media print { .tdm { display: none; } }

/* ---------------------------------------------------------------- page messagerie.html (pack design v2, écran 04)
   Bureau : liste 280 px · discussion · contexte 280 px à partir de 1200 px (seulement pour un groupe ou un fil de journée).
   768–1199 px : contexte ouvert par le bouton de l'en-tête, par-dessus la discussion. Téléphone : redirigé vers le panneau. */
.msg-grid { position: relative; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; height: calc(100dvh - 300px); min-height: 540px; max-height: 900px; }
.msg-col, .msg-conv, .msg-ctx { min-height: 0; background: #fff; border: 1px solid var(--td2-border); border-radius: var(--td2-radius); box-shadow: var(--td2-shadow); }
.msg-col { display: flex; flex-direction: column; overflow: hidden; }
.msg-outils .tdm-outils { padding: 14px 14px 0; }
.msg-liste { flex: 1; min-height: 0; }
.msg-conv { display: flex; flex-direction: column; overflow: hidden; }
.msg-conv .tdm-ct { min-height: 72px; padding: 10px 10px 10px 18px; }
.msg-conv .tdm-ct .tdm-av { width: 46px; height: 46px; font-size: 17px; }
.msg-conv .tdm-ct-t h2 { font-size: 20px; }
.msg-conv .tdm-pin { margin: 12px 18px 0; padding: 12px 14px; }
.msg-conv .tdm-msgs { padding: 16px 20px 18px; }
.msg-conv .tdm-bulle { max-width: min(78%, 580px); }
.msg-conv .tdm-ecrire { padding: 12px 16px 14px; }
.msg-accueil { margin: auto; padding: 28px; max-width: 40ch; text-align: center; color: var(--ink-2); line-height: 1.5; }
.msg-accueil .ico { width: 40px; height: 40px; color: var(--ink-3); stroke-width: 1.5; }
.msg-accueil p { margin: 10px 0 0; }
.msg-anon { max-width: 640px; padding: 22px; }
.msg-anon p { margin: 0 0 14px; color: var(--ink-2); line-height: 1.5; }
.msg-anon .btn { text-decoration: none; }
.msg-conv .tdm-retour { display: none; }

/* Colonne contexte : Notre sortie (journée, participants et statuts), À préparer (liens vers l'existant) */
.msg-ctx { overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 18px; scrollbar-width: thin; }
.msg-ctx-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; }
.msg-ctx-h h2 { margin: 0; font: 800 19px/1.2 var(--f-display); letter-spacing: -.02em; }
.msg-ctx-jour { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--td2-border); border-radius: 10px; }
.msg-ctx-jour > .ico { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 8px; background: var(--td2-bg); color: var(--td2-action); }
.msg-ctx-jour > div { display: grid; gap: 4px; min-width: 0; font-size: 13px; color: var(--ink-2); }
.msg-ctx-jour b { font: 700 15px/1.25 var(--f-text); color: var(--ink); }
.msg-ctx-jour small { font-size: 12px; color: var(--ink-3); }
.msg-ctx-quand { display: inline-flex; align-items: center; gap: 5px; }
.msg-ctx-quand .ico { width: 14px; height: 14px; }
.msg-ctx-jour a { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-weight: 600; color: var(--td2-action); text-decoration: none; }
.msg-ctx-jour a:hover { text-decoration: underline; }
.msg-ctx-jour a .ico { width: 14px; height: 14px; }
.msg-ctx-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 20px 0 6px; }
.msg-ctx-sec h3, .msg-ctx-h3 { margin: 0; font: 800 16px/1.2 var(--f-display); letter-spacing: -.01em; }
.msg-ctx-h3 { margin: 22px 0 4px; }
.msg-ctx-sec a { font: 600 13px var(--f-text); color: var(--td2-action); text-decoration: none; white-space: nowrap; }
.msg-ctx-sec a:hover { text-decoration: underline; }
.msg-ctx-p { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.msg-ctx-p li { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.msg-ctx-p .tdm-av { width: 36px; height: 36px; font-size: 14px; }
.msg-ctx-n { flex: 1; min-width: 0; font: 600 14px var(--f-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-ctx-n small { font-weight: 500; color: var(--ink-3); }
.msg-ctx-p .td2-badge { font-size: 12px; padding: 3px 9px; }
.msg-ctx-ls { margin: 0; padding: 0; list-style: none; }
.msg-ctx-l { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 0; border: 0; border-top: 1px solid var(--td2-border); background: none;
  font: inherit; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.msg-ctx-ls li:first-child .msg-ctx-l { border-top: 0; }
.msg-ctx-l > .ico:first-child { flex: none; width: 22px; height: 22px; color: var(--ink-2); }
.msg-ctx-l > span:not(.tdm-nl) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.msg-ctx-l b { font: 600 14px var(--f-text); }
.msg-ctx-l small { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.msg-ctx-l > .ico:last-child { flex: none; width: 16px; height: 16px; color: var(--ink-3); }
.msg-ctx-l:hover b { color: var(--td2-action); }
.msg-ctx-l:focus-visible, .msg-ctx-sec a:focus-visible, .msg-ctx-jour a:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 2px; border-radius: 4px; }

@media (min-width: 1200px) {
  .msg-grid.a-ctx { grid-template-columns: 280px minmax(0, 1fr) 280px; }
  .msg-conv .tdm-infos, .msg-ctx-x { display: none !important; }
}
@media (max-width: 1199px) {
  .msg-grid { grid-template-columns: 260px minmax(0, 1fr); }
  .msg-ctx { position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; width: min(320px, 90%); box-shadow: var(--shadow-2); }
  .msg-grid:not([data-ctx=ouvert]) .msg-ctx { display: none; }
  .msg-page .page-head .lede { display: none; }
}
@media (max-width: 899px) {
  .msg-grid { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 210px); min-height: 420px; max-height: none; }
  .msg-grid[data-vue=conv] .msg-col, .msg-grid[data-vue=liste] .msg-conv { display: none; }
  .msg-conv .tdm-retour { display: grid; }
}
@media (max-width: 767px) {
  .msg-grid { height: calc(100dvh - 68px - 74px - 150px - env(safe-area-inset-bottom, 0px)); min-height: 340px; }
  .msg-conv .tdm-msgs { padding: 12px 10px 14px; }
  .msg-conv .tdm-bulle { max-width: 88%; }
  .msg-conv .tdm-ecrire textarea { font-size: 16px; }
}

/* Vitrine pour les visiteurs non connectés : présentation du chat + inscription */
.tdm-vitrine { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; }
.tdm-v-t { margin: 0; font: 800 19px/1.2 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.tdm-v-l { display: flex; flex-direction: column; gap: 10px; margin: 0 0 4px; padding: 0; list-style: none; }
.tdm-v-l li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.tdm-v-l .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--red-deep); }
.tdm-vitrine .btn { justify-content: center; width: 100%; }
.tdm-v-n { margin: 2px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-3); }

/* ---------- Mentions @pseudo (mentions.js) : surlignage dans les messages (panneau, messagerie.html, discussion.html,
   fil du convoi) et liste de saisie au-dessus du champ ---------- */
.tdm-mention, .tdm-bulle p .tdm-mention, .ds-bulle p .tdm-mention, .cv-m p .tdm-mention {
  padding: 0 3px; border-radius: 4px; background: var(--paper-2); color: var(--ink); font-weight: 700; text-decoration: none; }
a.tdm-mention:hover, .tdm-bulle p a.tdm-mention:hover, .ds-bulle p a.tdm-mention:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 2px; }
.tdm-mention.is-moi, .tdm-bulle p .tdm-mention.is-moi, .ds-bulle p .tdm-mention.is-moi, .cv-m p .tdm-mention.is-moi {
  background: #fde8e6; color: var(--red-hover); box-shadow: inset 0 0 0 1px rgba(217, 45, 32, .35); }
.tdm-m.is-pour-moi .tdm-bulle, .ds-m.is-pour-moi .ds-bulle, .cv-m.is-pour-moi { border-color: rgba(217, 45, 32, .45); }
.tdm-m.is-cible .tdm-bulle, .ds-m.is-cible .ds-bulle { animation: tdm-cible 2.4s ease-out 1; }
@keyframes tdm-cible { 0%, 40% { box-shadow: 0 0 0 3px rgba(217, 45, 32, .35); } 100% { box-shadow: 0 0 0 3px rgba(217, 45, 32, 0); } }
@media (prefers-reduced-motion: reduce) { .tdm-m.is-cible .tdm-bulle, .ds-m.is-cible .ds-bulle { animation: none; box-shadow: 0 0 0 3px rgba(217, 45, 32, .35); } }
.tdmn-ancre { position: relative; }
.tdmn-l { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 40; max-height: min(264px, 38vh); margin: 0; padding: 4px;
  overflow-y: auto; list-style: none; background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm, 8px); box-shadow: var(--shadow-2); }
.tdmn-l[hidden] { display: none; }
.tdmn-o { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 14.5px; color: var(--ink); }
.tdmn-o:hover { background: var(--paper); }
.tdmn-o[aria-selected="true"] { background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tdmn-av { display: grid; flex: none; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 50%;
  background: var(--ink); color: #fff; font: 700 13px/1 var(--f-text); }
.tdmn-av img { width: 100%; height: 100%; object-fit: cover; }
.tdmn-p { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

/* Téléphone : pas de vue plein écran de la messagerie, le widget suffit */
@media (max-width: 767px) {
  .tdm-ib[href="messagerie.html"], .tdm-pied-l a[href="messagerie.html"], .tdm-ct-menu a[href^="messagerie.html"] { display: none; }
}

/* ---------- Sondages (sondage dans un message : panneau, messagerie.html, discussion.html, fil du convoi) ----------
   Carte façon maquette 04 (td2-poll du pack v2) : question, « n votants », options avec barre de progression ; mon choix
   en rouge (pastille pleine + barre), les autres en gris ; « Clos » une fois fermé. Lisible dès 320 px. */
.tdm-bulle.tdp-bulle, .ds-bulle.tdp-bulle, .cv-m.tdp-bulle { width: 440px; max-width: 100%; padding: 12px 14px 6px; background: #fff;
  border: 1px solid var(--td2-border); border-radius: var(--td2-radius); }
.tdm-m.is-moi .tdm-bulle.tdp-bulle, .ds-m.is-moi .ds-bulle.tdp-bulle, .cv-m.is-moi.tdp-bulle { background: #fff; border-color: var(--td2-border); border-radius: var(--td2-radius); }
.tdm-m.is-groupe .tdm-bulle.tdp-bulle { max-width: calc(100% - 31px); }
.tdp { display: block; }
.tdp-h { display: flex; align-items: flex-start; gap: 10px; }
.tdp-h > div { min-width: 0; }
.tdp .tdp-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--td2-action); stroke-width: 2.4; }
.tdp .tdp-q { margin: 0; font: 700 15px/1.35 var(--f-text); color: var(--ink); overflow-wrap: anywhere; }
.tdp .tdp-s { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.tdp-clos { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--td2-neutral-bg); color: var(--td2-neutral); font: 700 11.5px/1.5 var(--f-text);
  text-transform: uppercase; letter-spacing: .04em; }
.tdp-l { margin: 6px 0 0; padding: 0; list-style: none; }
.tdp-o { display: block; width: 100%; min-height: 48px; margin: 0; padding: 8px 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.tdp-o:hover:not(:disabled) { background: var(--paper); }
.tdp-o:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 0; }
.tdp-o:disabled { cursor: default; color: var(--ink); }
.tdp-o-h { display: flex; align-items: center; gap: 10px; }
.tdp-coche { flex: none; width: 18px; height: 18px; border: 2px solid var(--ink-3); border-radius: 50%; }
.tdp-coche.is-carre { border-radius: 4px; }
.tdp-o.is-moi .tdp-coche { border-color: var(--td2-action); background: var(--td2-action); box-shadow: inset 0 0 0 3px #fff; }
.tdp-o.is-moi .tdp-coche.is-carre { box-shadow: inset 0 0 0 2px #fff; }
.tdp-o-t { flex: 1; min-width: 0; font: 600 14.5px/1.35 var(--f-text); overflow-wrap: anywhere; }
.tdp-o.is-moi .tdp-o-t { color: var(--td2-action); }
.tdp-o-n { flex: none; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdp-barre { display: block; height: 7px; margin: 7px 0 0 28px; overflow: hidden; border-radius: 10px; background: var(--paper-2); }
.tdp-barre > span { display: block; height: 100%; border-radius: 10px; background: #8b939c; }
.tdp-o.is-moi .tdp-barre > span { background: var(--red); }
@media (prefers-reduced-motion: no-preference) { .tdp-barre > span { transition: width .35s var(--ease); } }
.tdp[aria-busy=true] .tdp-o { opacity: .6; cursor: progress; }
.tdp .tdp-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 4px 0 0; padding: 4px 6px 0;
  border-top: 1px solid var(--td2-border); font-size: 12.5px; color: var(--ink-3); }
.tdp-lien { min-height: 36px; padding: 0 2px; border: 0; background: none; color: var(--ink-2); font: 600 12.5px var(--f-text); text-decoration: underline;
  text-decoration-color: var(--rule-strong); text-underline-offset: 3px; cursor: pointer; }
.tdp-lien:hover { color: var(--ink); text-decoration-color: var(--red); }
.tdp-lien:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 1px; border-radius: 4px; }
.tdp-lien[data-tdp-clore] { margin-left: auto; }

/* Bouton « Sondage » du composeur (panneau et messagerie.html ; discussion.html et convoi : formulaire « tdp-avec ») */
.tdp-btn { align-self: end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--td2-border); border-radius: 10px;
  background: #fff; color: var(--ink-2); cursor: pointer; }
.tdp-btn:hover { background: var(--paper); color: var(--ink); }
.tdp-btn:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 1px; }
.tdp-btn .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.tdm-ecrire { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.ds-ecrire.tdp-avec, .cv-ecrire.tdp-avec { grid-template-columns: 44px minmax(0, 1fr) auto; }
.ds-ecrire.tdp-avec .tdp-btn { height: 46px; }

/* Fenêtres : création et « Voir les votes » */
.tdp-dlg [hidden] { display: none !important; }
.tdp-dlg .act-f { max-height: min(86dvh, 720px); overflow-y: auto; }
.tdp-dlg .tdp-in { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: #fff;
  font: 500 16px var(--f-text); color: var(--ink); }
.tdp-dlg .tdp-in:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus); }
.tdp-fs { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.tdp-fs legend { padding: 0; margin-bottom: 6px; }
.tdp-reps { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.tdp-reps li { display: flex; gap: 6px; }
.tdp-moins { flex: none; width: 44px; height: 46px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink-2);
  font: 600 20px/1 var(--f-text); cursor: pointer; }
.tdp-moins:hover { background: var(--paper); color: var(--ink); }
.tdp-moins:focus-visible, .tdp-multi input:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 1px; }
.tdp-multi { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 500 14.5px var(--f-text); color: var(--ink); cursor: pointer; }
.tdp-multi input { width: 20px; height: 20px; margin: 0; accent-color: var(--red-deep); }
.tdp-qui { display: grid; gap: 14px; }
.tdp-qui h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; font: 700 15px/1.3 var(--f-text); overflow-wrap: anywhere; }
.tdp-qui h3 small { font: 500 12.5px var(--f-text); color: var(--ink-3); }
.tdp-qui ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tdp-qui li { padding: 4px 10px; border-radius: 99px; background: var(--paper-2); font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.tdp-qui p { margin: 0; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 767px) {
  .tdm-bulle.tdp-bulle, .ds-bulle.tdp-bulle, .cv-m.tdp-bulle { width: 100%; padding: 10px 10px 4px; }
  .tdp-o { padding: 8px 4px; }
  .tdp-barre { margin-left: 28px; }
}
@media (max-width: 359px) {
  .tdp-o-h { flex-wrap: wrap; row-gap: 2px; }
  .tdp-o-n { flex-basis: 100%; padding-left: 28px; }
}

/* nuit-convois (24/10) : carte d'un convoi dans un message (panneau, messagerie.html, discussion.html) — même bulle
   blanche que les sondages (.tdp-bulle) ; bouton « Convoi » du composeur à côté de « Sondage » ; fenêtre de choix. */
.tdcv { display: grid; gap: 8px; }
.tdcv-h { display: flex; align-items: flex-start; gap: 10px; }
.tdcv-h > .ico { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--td2-action); }
.tdcv-h > div { min-width: 0; }
.tdcv-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font: 700 15px/1.35 var(--f-text); color: var(--td2-ink); }
.tdcv-pub { padding: 1px 8px; font-size: 11.5px; }
.tdcv-s { margin: 1px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--td2-muted); overflow-wrap: anywhere; }
.tdcv-s::first-letter { text-transform: uppercase; }
.tdcv-l { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; color: var(--td2-ink); }
.tdcv-l li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.tdcv-l li > span { min-width: 0; overflow-wrap: anywhere; }
.tdcv-l li > span::first-letter { text-transform: uppercase; }
.tdcv-l .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--td2-muted); }
.tdcv-v, .tdcv-n { color: var(--td2-muted); }
.tdcv-n { margin: 0; font-size: 13.5px; line-height: 1.45; }
.tdcv-qui { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.tdcv-qui span { padding: 2px 9px; border-radius: 99px; background: var(--td2-neutral-bg); font-size: 12.5px; color: var(--td2-ink); overflow-wrap: anywhere; }
.tdcv-chef { margin: 0; font-size: 13px; color: var(--td2-muted); }
.tdcv-b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 8px; border-top: 1px solid var(--td2-border); }
.tdcv-b .btn.small { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.tdcv-b .tdp-lien { display: inline-flex; align-items: center; }
.tdcv.is-absent .tdcv-h > .ico, .tdcv.is-prive .tdcv-h > .ico { color: var(--td2-muted); }
.tdm-bulle .tdcv { padding-bottom: 6px; }
.tdcv-btn .ico { width: 21px; height: 21px; }
.tdm-ecrire.tdcv-avec { grid-template-columns: 44px 44px minmax(0, 1fr) 44px; }
.ds-ecrire.tdp-avec.tdcv-avec { grid-template-columns: 44px 44px minmax(0, 1fr) auto; }
.ds-ecrire.tdcv-avec .tdcv-btn { height: 46px; }
.tdcv-dlg .tdcv-fs { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tdcv-o { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--td2-border); border-radius: var(--td2-radius); cursor: pointer; }
.tdcv-o:has(input:checked) { border-color: var(--td2-ink); box-shadow: 0 0 0 1px var(--td2-ink); background: var(--td2-active-bg); }
.tdcv-o input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red-deep); }
.tdcv-o span { display: grid; gap: 2px; min-width: 0; }
.tdcv-o b { font: 650 14.5px/1.35 var(--f-text); color: var(--td2-ink); overflow-wrap: anywhere; }
.tdcv-o b::first-letter { text-transform: uppercase; }
.tdcv-o small { font-size: 12.5px; line-height: 1.4; color: var(--td2-muted); overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .tdm-ecrire.tdcv-avec { grid-template-columns: 40px 40px minmax(0, 1fr) 44px; gap: 6px; }
  .tdm-ecrire.tdcv-avec .tdp-btn { width: 40px; }
  .ds-ecrire.tdp-avec.tdcv-avec { grid-template-columns: 40px 40px minmax(0, 1fr) auto; gap: 6px; }
  .ds-ecrire.tdcv-avec .tdp-btn { width: 40px; }
}

/* Photos (photos.js, 24/10) : bouton « photo » en tête des outils du composeur (vignettes et aperçus : site.css) */
.tdm-ecrire.tdcv-avec.tph-avec { grid-template-columns: 44px 44px 44px minmax(0, 1fr) 44px; }
.tdm-ecrire.tph-avec .tph-btn { width: 44px; height: 44px; }
/* discussion.html et fil du convoi : outils à gauche (photo, sondage, convoi), champ, Envoyer ; champ et bouton placés
   explicitement (le bouton « Convoi » peut manquer) */
.ds-ecrire.tph-avec.tph-avec, .cv-ecrire.tph-avec.tph-avec { grid-template-columns: auto auto auto minmax(0, 1fr) auto; }
.ds-ecrire.tph-avec > textarea, .cv-ecrire.tph-avec > textarea { grid-column: 4; }
.ds-ecrire.tph-avec > [type=submit], .cv-ecrire.tph-avec > [type=submit] { grid-column: 5; }
.ds-ecrire.tph-avec .tdp-btn, .cv-ecrire.tph-avec .tdp-btn { width: 44px; height: 46px; }
@media (max-width: 400px) {
  .tdm-ecrire.tdcv-avec.tph-avec { grid-template-columns: 40px 40px 40px minmax(0, 1fr) 44px; gap: 6px; }
  .tdm-ecrire.tph-avec .tdp-btn { width: 40px; }
  .tdm-ecrire.tph-avec textarea { padding-left: 10px; padding-right: 10px; }
}
/* téléphone : le champ prend toute la largeur, les outils et « Envoyer » dessous */
@media (max-width: 560px) {
  .ds-ecrire.tph-avec.tph-avec, .cv-ecrire.tph-avec.tph-avec { grid-template-columns: 40px 40px 40px minmax(0, 1fr) auto; gap: 8px 6px; }
  .ds-ecrire.tph-avec > textarea, .cv-ecrire.tph-avec > textarea { grid-column: 1 / -1; order: -1; }
  .ds-ecrire.tph-avec > .tdr-rep-slot, .ds-ecrire.tph-avec > .tph-plateau,
  .cv-ecrire.tph-avec > .tdr-rep-slot, .cv-ecrire.tph-avec > .tph-plateau { order: -2; }
  .ds-ecrire.tph-avec > [type=submit], .cv-ecrire.tph-avec > [type=submit] { grid-column: -2 / -1; }
  .ds-ecrire.tph-avec .tdp-btn, .cv-ecrire.tph-avec .tdp-btn { width: 40px; height: 40px; }
}
/* Téléphone : pendant la saisie (champ actif, clavier ouvert), la bulle de messagerie s'efface pour ne pas recouvrir
   le bouton « Envoyer » d'un commentaire ou d'un formulaire (signalé par Olivier le 24/10) ; elle revient ensuite. */
@media (max-width: 767px) {
  /* champ actif HORS de la messagerie : toute la messagerie flottante s'efface (sa propre saisie n'est pas concernée) */
  body:has(:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus:not(.tdm *)) .tdm { visibility: hidden; }
}