/* LBF App : la messagerie, entre WhatsApp et LinkedIn (10/11/2026, 23 h 55 ; remplace la version « à la façon de WhatsApp » de 20 h 15).
   Isma (10/11, 23 h 15, capture d'une conversation) : « c'est bien de reprendre les codes de WhatsApp, mais là en l'occurrence ça
   fait vide et pas très beau. Je pense qu'on peut être beaucoup plus efficient. Trouver un mixte entre le style de WhatsApp et le
   sérieux de LinkedIn ».
   - De WhatsApp : les bulles, l'heure et les coches dans la bulle (sur la dernière ligne quand elle a la place), les suites de
     messages serrées, la barre d'écriture en pilule, le micro qui devient l'envoi.
   - De LinkedIn : fond uni sans motifs, en-tête blanc (photo, nom, titre), carte de la personne en haut du fil, jours entre deux
     filets, bulles des autres en blanc à fin contour, tes messages en aubergine (la couleur du Club), filtres Toutes, Non lues,
     Épinglées, étoile des membres du Club sur la photo.
   Admins d'abord : classe dm-wa sur <html> (lbf-app-dm-wa.php, option lbf_dm_wa). Ce fichier est chargé pour tous : tout ce qui
   change l'écran est sous html.dm-wa, sauf le début (éléments ajoutés par app.js, cachés ou neutres sans la classe, et l'écran du
   premier message, pour tous). Aucun tiret long. */
.cm-tk,.cp-av,.dm-club,.dm-flt{display:none}
.dm-avw{position:relative;flex:none;display:flex}
/* L'écran du premier message (chDmFirst d'app.js, pour tous) */
.dm-fst{max-width:420px;margin:14px auto 4px;padding:0 16px;text-align:center}
.dm-fst b{display:block;margin-bottom:4px;font-size:14px;color:var(--ink)}
.dm-fst p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}

html.dm-wa #chatp{--dmw-bg:#F4EFE8;--dmw-me:#3D3552;--dmw-acc:#FFC7A0;--dmw-line:#E7DFD5;--dmw-sub:#857C93;--dmw-tx:#2B2636}

/* En-tête (liste et conversation) : blanc, retour sans cadre, photo et nom alignés sur la colonne du fil */
html.dm-wa #chatp:has(.cp-body>.dm-th,.cp-body>.dmx) .cp-top{gap:8px;padding:calc(var(--top) + 8px) max(10px,calc((100% - 776px)/2)) 8px max(4px,calc((100% - 784px)/2));background:#fff;border-bottom:1px solid var(--dmw-line)}
html.dm-wa #chatp:has(.cp-body>.dm-th,.cp-body>.dmx) .cp-top>.vbtn[data-chat="back"]{width:36px;height:40px;border:0;border-radius:10px;background:none;color:var(--ink,#3D3552)}
html.dm-wa #chatp:has(.cp-body>.dm-th,.cp-body>.dmx) .cp-top>.vbtn[data-chat="back"] svg{width:22px;height:22px}
html.dm-wa #chatp .cp-av:not(:empty){display:flex;flex:none}
html.dm-wa #chatp .cp-avb{position:relative;display:flex;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
html.dm-wa #chatp .cp-avb .av{width:40px;height:40px;font-size:14px;box-shadow:none;transform:none}
html.dm-wa #chatp:has(.cp-body>.dm-th) .cp-tt b{font-size:16px;font-weight:700;color:var(--ink,#3D3552)}
html.dm-wa #chatp:has(.cp-body>.dm-th) .cp-tt span{font-size:12.5px;color:var(--dmw-sub)}
html.dm-wa #chatp:has(.cp-body>.dm-th) .cp-act .vbtn{border:0;background:none}
/* l'étoile des membres du Club sur la photo (en-tête et liste) */
html.dm-wa #chatp .dm-club{position:absolute;right:-3px;bottom:-3px;display:block;width:18px;height:18px;line-height:0;border-radius:5px;box-shadow:0 0 0 2px #fff}
html.dm-wa #chatp .dm-club svg{width:18px;height:18px}
html.dm-wa #chatp .cp-avb .dm-club{right:-2px;bottom:-2px;width:15px;height:15px;border-radius:4px}
html.dm-wa #chatp .cp-avb .dm-club svg{width:15px;height:15px}

/* Le fil : fond uni, colonne de 760 px au plus */
html.dm-wa #chatp .cp-body:has(>.dm-th){background:var(--dmw-bg)}
html.dm-wa #chatp .dm-th{max-width:760px;margin:0 auto;padding:4px 2px 10px}
html.dm-wa #chatp .dm-th .cm{margin-top:12px}
html.dm-wa #chatp .dm-th .cm.grp{margin-top:2px}
html.dm-wa #chatp .dm-th .cm-av,html.dm-wa #chatp .dm-th .cm-avs,html.dm-wa #chatp .dm-th .cm-n{display:none}
/* bulles : blanc à fin contour pour l'autre, aubergine pour toi ; dans une suite, les coins du côté de l'auteur se resserrent */
html.dm-wa #chatp .dm-th .cm-b{max-width:min(82%,560px);min-width:62px;padding:7px 11px 5px;border:1px solid var(--dmw-line);border-radius:16px;background:#fff;box-shadow:0 1px 1px rgba(61,53,82,.04)}
html.dm-wa #chatp .dm-th .cm.mine .cm-b{background:var(--dmw-me);border-color:var(--dmw-me);color:#fff;box-shadow:none}
html.dm-wa #chatp .dm-th .cm.grp:not(.mine) .cm-b{border-top-left-radius:5px}
html.dm-wa #chatp .dm-th .cm:not(.mine):has(+.cm.grp:not(.mine)) .cm-b{border-bottom-left-radius:5px}
html.dm-wa #chatp .dm-th .cm.grp.mine .cm-b{border-top-right-radius:5px}
html.dm-wa #chatp .dm-th .cm.mine:has(+.cm.grp.mine) .cm-b{border-bottom-right-radius:5px}
html.dm-wa #chatp .dm-th .cm-tx{font-size:15px;line-height:1.42;color:var(--dmw-tx)}
html.dm-wa #chatp .dm-th .cm.mine .cm-tx{color:#fff}
html.dm-wa #chatp .dm-th .cm.mine .cm-tx a{color:var(--dmw-acc)}
/* l'heure et les coches dans la bulle, sur la dernière ligne du texte quand elle a la place (comme WhatsApp) */
html.dm-wa #chatp .dm-th .cm-t{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin:2px -3px 0 12px;font-size:11px;line-height:14px;color:var(--dmw-sub)}
html.dm-wa #chatp .dm-th .cm.mine .cm-t{color:rgba(255,255,255,.62)}
html.dm-wa #chatp .dm-th .cm-b:has(>.cm-tx+.cm-t) .cm-t{position:absolute;right:9px;bottom:5px;margin:0}
html.dm-wa #chatp .dm-th .cm-b:has(>.cm-tx+.cm-t) .cm-tx::after{content:"";display:inline-block;width:38px;height:1px}
html.dm-wa #chatp .dm-th .cm.mine .cm-b:has(>.cm-tx+.cm-t) .cm-tx::after{width:56px}
html.dm-wa #chatp .dm-th .cm-b:has(>.cm-tx+.cm-t):has(.cm-ed) .cm-tx::after{width:96px}
html.dm-wa #chatp .dm-th .cm.mine .cm-b:has(>.cm-tx+.cm-t):has(.cm-ed) .cm-tx::after{width:112px}
html.dm-wa #chatp .dm-th .cm-tk{display:inline-flex;color:inherit}
html.dm-wa #chatp .dm-th .cm-tk svg{width:17px;height:11px}
html.dm-wa #chatp .dm-th .cm-tk.k1 svg{width:12px;height:12px}
html.dm-wa #chatp .dm-th .cm-tk.k3{color:var(--dmw-acc)}
html.dm-wa #chatp .dm-th .dm-vu{display:none}
/* étiquette (Demande de contact...), citation d'un message, réactions, fichiers, vocaux, transcription */
html.dm-wa #chatp .dm-th .cm-q{display:inline-block;margin:0 0 5px;padding:2px 8px;border:0;border-radius:6px;background:rgba(61,53,82,.07);color:var(--ink2,#4D4360);font-size:11.5px;font-weight:600}
html.dm-wa #chatp .dm-th .cm.mine .cm-q{background:rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
html.dm-wa #chatp .dm-th .cm-qr{box-shadow:none;background:rgba(61,53,82,.06);border-radius:10px}
html.dm-wa #chatp .dm-th .cm-qr b{color:var(--ink,#3D3552)}
html.dm-wa #chatp .dm-th .cm.mine .cm-qr{background:rgba(255,255,255,.12)}
html.dm-wa #chatp .dm-th .cm.mine .cm-qr b{color:var(--dmw-acc)}
html.dm-wa #chatp .dm-th .cm.mine .cm-qr span{color:rgba(255,255,255,.78)}
html.dm-wa #chatp .dm-th .cm-re{margin-top:4px}
html.dm-wa #chatp .dm-th .cm-re span{background:#fff;border:1px solid var(--dmw-line);box-shadow:none;color:var(--dmw-tx)}
html.dm-wa #chatp .dm-th .cm.mine .cm-re span{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);color:#fff}
html.dm-wa #chatp .dm-th .cm-re span.me{border-color:var(--or,#E8833A)}
html.dm-wa #chatp .dm-th .cm-imgs{border-radius:10px}
html.dm-wa #chatp .dm-th .cm.mine .cm-file{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
html.dm-wa #chatp .dm-th .cm.mine .cm-file b{color:#fff}
html.dm-wa #chatp .dm-th .cm.mine .cm-file span{color:rgba(255,255,255,.7)}
html.dm-wa #chatp .dm-th .cm.mine .cm-file svg,html.dm-wa #chatp .dm-th .cm.mine .cm-au svg{color:var(--dmw-acc)}
html.dm-wa #chatp .dm-th .cm.mine .cm-au i{color:rgba(255,255,255,.7)}
html.dm-wa #chatp .dm-th .cm.mine .cm-vtr{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9)}
html.dm-wa #chatp .dm-th .cm.mine .cm-vtr span{color:rgba(255,255,255,.65)}
html.dm-wa #chatp .dm-th .cm.mine .cm-vtrb{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
html.dm-wa #chatp .dm-th .cm.mine .cm-delx{color:rgba(255,255,255,.7)}
/* les jours entre deux filets, en petites capitales */
html.dm-wa #chatp .dm-th .cm-day{display:flex;align-items:center;gap:12px;margin:18px 6px 6px;text-align:center}
html.dm-wa #chatp .dm-th .cm-day::before,html.dm-wa #chatp .dm-th .cm-day::after{content:"";flex:1;height:1px;background:rgba(61,53,82,.13)}
html.dm-wa #chatp .dm-th .cm-day span{padding:0;border-radius:0;background:none;box-shadow:none;color:var(--dmw-sub);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
/* la personne en haut du fil : une carte blanche compacte, photo à gauche */
html.dm-wa #chatp .dm-th .dm-who{display:block;padding:12px 8px 4px}
html.dm-wa #chatp .dm-th .dm-whob{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:1px;align-content:center;align-items:center;width:100%;max-width:440px;margin:0 auto;padding:12px 14px;border:1px solid var(--dmw-line);border-radius:12px;background:#fff;text-align:left;box-shadow:none}
html.dm-wa #chatp .dm-th .dm-whob .av{grid-row:1/4;width:52px;height:52px;font-size:18px;box-shadow:none;transform:none}
html.dm-wa #chatp .dm-th .dm-whob b{font-size:15.5px;color:var(--ink,#3D3552)}
html.dm-wa #chatp .dm-th .dm-whob span{max-width:none;font-size:12.5px;color:var(--dmw-sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.dm-wa #chatp .dm-th .dm-whob em{font-size:12.5px}
html.dm-wa #chatp .dm-th .cp-hint{margin:14px auto;max-width:360px;padding:0 12px;background:none;box-shadow:none;color:var(--dmw-sub);font-size:13px;text-align:center}
html.dm-wa #chatp .dm-th .dm-meta{margin:3px 4px 4px;font-size:11.5px;color:var(--dmw-sub)}
html.dm-wa #chatp .dm-th .dm-lock{max-width:520px;margin:14px auto 16px;border:1px solid var(--dmw-line);border-radius:12px;background:#fff;color:var(--dmw-tx);font-size:14px}
html.dm-wa #chatp .dm-th .dm-typing{margin-left:6px}
html.dm-wa #chatp .dm-fst p{color:var(--dmw-sub)}

/* La barre d'écriture : blanche, champ en pilule, trombone discret, micro et envoi dans un rond aubergine */
html.dm-wa #chatp .cp-comp.cm-dreply,html.dm-wa #chatp .cp-comp.cm-dfirst{background:#fff;border-top:1px solid var(--dmw-line);padding:8px 10px calc(var(--bot) + 8px)}
html.dm-wa #chatp :is(.cm-dreply,.cm-dfirst) .cp-row{gap:6px;align-items:flex-end}
html.dm-wa #chatp :is(.cm-dreply,.cm-dfirst) .cp-row textarea{min-height:42px;padding:10px 15px;border:1px solid transparent;border-radius:21px;background:var(--dmw-bg);font-size:15px;box-shadow:none}
html.dm-wa #chatp :is(.cm-dreply,.cm-dfirst) .cp-row textarea:focus{border-color:rgba(61,53,82,.28);background:#fff}
html.dm-wa #chatp :is(.cm-dreply,.cm-dfirst) .cp-ib:not(.cp-mic){width:40px;height:42px;background:none;color:var(--dmw-sub);box-shadow:none}
html.dm-wa #chatp :is(.cm-dreply,.cm-dfirst) .cp-mic,html.dm-wa #chatp :is(.cm-dreply,.cm-dfirst) .cp-send{width:42px;height:42px;border-radius:50%;background:var(--dmw-me);color:#fff;box-shadow:none}
html.dm-wa #chatp :is(.cm-dreply,.cm-dfirst) .cp-mic svg{width:21px;height:21px}
html.dm-wa #chatp :is(.cm-dreply,.cm-dfirst) .cp-row.edit .cp-ib:not(.cp-mic){display:none}

/* La liste des conversations : recherche en pilule, filtres, photo de 48 px avec l'étoile du Club, filets, pastille orange */
html.dm-wa #chatp .dmx{max-width:760px;margin:0 auto;gap:0;padding:4px 0 24px}
html.dm-wa #chatp .dmx .dm-srch{margin:8px 14px;height:40px;border:0;border-radius:20px;background:#F1ECE5}
html.dm-wa #chatp .dmx .dm-srch:focus-within{background:#fff;box-shadow:0 0 0 1px rgba(61,53,82,.28)}
html.dm-wa #chatp .dm-flt{display:flex;gap:8px;padding:0 14px 8px;overflow-x:auto;scrollbar-width:none}
html.dm-wa #chatp .dm-flt::-webkit-scrollbar{display:none}
html.dm-wa #chatp .dm-flt button{flex:none;height:32px;padding:0 14px;border:1px solid var(--dmw-line);border-radius:16px;background:#fff;font:600 13px var(--font);color:var(--ink,#3D3552);cursor:pointer}
html.dm-wa #chatp .dm-flt button.on{background:var(--dmw-me);border-color:var(--dmw-me);color:#fff}
html.dm-wa #chatp .dm-flt button i{margin-left:5px;font-style:normal;opacity:.7}
html.dm-wa #chatp .dmx .dm-fe{margin:28px 12px}
html.dm-wa #chatp .dmx .dm-it{position:relative;min-height:70px;padding:9px 16px;gap:13px;border-radius:0}
html.dm-wa #chatp .dmx .dm-it::after{content:"";position:absolute;left:77px;right:0;bottom:0;height:1px;background:#EEE7DF}
html.dm-wa #chatp .dmx .dm-it .av{width:48px;height:48px;font-size:16px;box-shadow:none;transform:none}
html.dm-wa #chatp .dmx .dm-it:hover{background:#F8F4EF}
html.dm-wa #chatp .dmx .dm-l1 b{font-size:15.5px;font-weight:650;color:var(--ink,#3D3552)}
html.dm-wa #chatp .dmx .dm-l1 i{font-size:12px;color:var(--dmw-sub)}
html.dm-wa #chatp .dmx .dm-l2{font-size:13.5px;color:var(--dmw-sub)}
html.dm-wa #chatp .dmx .dm-it.unr .dm-l1 b{font-weight:800}
html.dm-wa #chatp .dmx .dm-it.unr .dm-l1 i{color:#D4561A;font-weight:700}
html.dm-wa #chatp .dmx .dm-it.unr .dm-l2{color:var(--ink,#3D3552);font-weight:600}
html.dm-wa #chatp .dmx .dm-n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#D4561A;font-size:11.5px;line-height:20px}
html.dm-wa #chatp .dmx .dm-n.dm-mk{min-width:10px;width:10px;height:10px;padding:0}

/* ===== Discussions de groupe et suggestions de la recherche (11/11/2026, pour tous ; app.js, lbf-app-groupes.php) ===== */
.grp-av{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#3D3552;color:#fff;font-weight:800;font-size:14px;letter-spacing:.02em;flex:0 0 auto;line-height:1}
.grp-av b{font-weight:800}
.grp-av i{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:#E8621A;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.grp-av i svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.grp-av.lg{width:72px;height:72px;font-size:24px}
.grp-av.lg i{width:26px;height:26px}
.grp-av.lg i svg{width:15px;height:15px}
.grp-av.new{background:#E8621A}
.grp-av.new svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round}
html.dm-wa .dm-avw .grp-av{width:48px;height:48px;font-size:16px}
.cm-sys{display:flex;justify-content:center;margin:10px 0}
.cm-sys span{max-width:86%;text-align:center;font-size:12.5px;line-height:1.35;color:#6E6886;background:rgba(61,53,82,.07);border-radius:10px;padding:5px 10px}
.grp-pick{padding-bottom:12px}
.grp-nm{display:block;margin:4px 0 12px}
.grp-nm span{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6E6886;margin:0 0 6px}
.grp-nm input{width:100%;box-sizing:border-box;border:1px solid rgba(61,53,82,.18);border-radius:12px;padding:12px 14px;font-size:16px;background:#fff;color:#1A1924}
.grp-nm input:focus{outline:none;border-color:#E8621A;box-shadow:0 0 0 3px rgba(232,98,26,.15)}
.grp-sel{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.grp-sel:empty{display:none}
.grp-chip{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:#3D3552;color:#fff;font-size:13px;font-weight:650;padding:6px 10px 6px 12px;cursor:pointer}
.grp-chip i{font-style:normal;opacity:.8}
.grp-it .grp-ck{margin-left:auto;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(61,53,82,.25);display:grid;place-items:center;color:transparent;flex:0 0 auto}
.grp-it .grp-ck svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.grp-it.sel .grp-ck{background:#E8621A;box-shadow:none;color:#fff}
.grp-go{position:sticky;bottom:0;z-index:2;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(244,239,232,0),#F4EFE8 35%)}
.grp-go .btn{width:100%}
.grp-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 14px}
.grp-acts .btn svg{width:16px;height:16px;margin-right:6px;vertical-align:-3px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.grp-mem{cursor:pointer;align-items:center}
.grp-mav{position:relative;border:0;background:none;padding:0;flex:0 0 auto;cursor:pointer}
span.grp-mav{cursor:default}
.grp-adm{font-style:normal;font-size:11px;font-weight:800;color:#A13D12;background:#FDEBDD;border-radius:999px;padding:2px 8px;margin-left:6px}
.grp-rm{margin-left:auto;color:#B42318;font-size:13px;white-space:nowrap}
.grp-rm.arm{font-weight:800}
.grp-leave{display:block;width:100%;margin:18px 0 8px;color:#B42318}
.grp-leave.arm{background:#B42318;color:#fff;border-color:#B42318}
.dm-sg .dm-wr{margin-left:auto;font-size:13px;font-weight:750;color:#D4561A;white-space:nowrap}
.dm-sg mark{background:#FFE3CC;color:inherit;border-radius:3px}
/* Groupes : le nom et la photo de chacun (masqués dans les conversations à deux de la version entre WhatsApp et LinkedIn) */
html.dm-wa #chatp .grp-th .cm-av,html.dm-wa #chatp .grp-th .cm-avs{display:block}
html.dm-wa #chatp .grp-th .cm-n{display:block;font-size:12.5px;font-weight:750;color:#A13D12;margin:0 0 2px}
/* 11/11/2026, vers 1 h 30 : groupes v2 (photo du groupe, infos à la façon de WhatsApp, médias, autorisations), vidéos des
   messages, appareil photo dans la barre d'écriture, sourdine (Isma, 0 h 45, 0 h 47, 0 h 50 et 0 h 59). Pour tous. */
.grp-av.ph{background:#E9E3DA}
.grp-av.ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.grp-av.xl{width:112px;height:112px;font-size:36px}
.grp-av.xl i{width:30px;height:30px;right:2px;bottom:2px}
.grp-av.xl i svg{width:17px;height:17px}
.dm-l3{display:block;margin:1px 0;font-size:12.5px;line-height:1.3;color:#857C93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-mi{display:inline-flex;margin-right:4px;vertical-align:-2px;color:#9A93A8}
.dm-mi svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dm-n.mut,html.dm-wa #chatp .dmx .dm-n.mut{background:#B9B2C4}
#chatp:has(.grp-th) #cpsub{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chatp:has(.grp-th) .cp-tt{min-width:0;cursor:pointer}
/* Infos du groupe */
.grp-info{padding-bottom:28px}
.gi-top{display:flex;flex-direction:column;align-items:center;padding:20px 16px 6px;text-align:center}
.gi-ph{position:relative;display:inline-flex;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
span.gi-ph{cursor:default}
.gi-phw{position:relative;display:inline-flex}
.gi-phw.ed .grp-av i{display:none}
.gi-cam{position:absolute;right:0;bottom:2px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:#3D3552;color:#fff;box-shadow:0 0 0 3px #F4EFE8;cursor:pointer}
.gi-cam svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gi-nm{display:flex;align-items:center;justify-content:center;gap:4px;max-width:100%;margin:12px 0 2px;font-size:21px;line-height:1.25;font-weight:800;color:#3D3552}
.gi-nm span{overflow-wrap:anywhere}
.gi-pen{display:inline-grid;flex:none;padding:5px;border:0;border-radius:8px;background:none;color:#857C93;cursor:pointer}
.gi-pen svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gi-sub{margin:0;font-size:14px;color:#857C93}
.gi-acts{display:flex;justify-content:center;gap:10px;margin:16px 0 4px}
.gi-acts button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:86px;padding:12px 10px 10px;border:1px solid #E7DFD5;border-radius:14px;background:#fff;color:#3D3552;font:650 12.5px var(--font,inherit);cursor:pointer}
.gi-acts button svg{width:22px;height:22px;stroke:#E8621A;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gi-acts button.on{background:#F4EFE8}
.gi-acts button.on svg{stroke:#857C93}
.gi-card{margin:12px 14px 0;overflow:hidden;border:1px solid #E7DFD5;border-radius:14px;background:#fff}
.gi-h{margin:0;padding:13px 16px 6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#857C93}
.gm>.gi-h{padding:16px 14px 8px}
.gi-dtx{margin:0;padding:14px 16px 4px;font-size:15px;line-height:1.5;color:#2B2636;overflow-wrap:anywhere}
.gi-dtx.gi-none{color:#857C93}
.gi-link{display:block;width:100%;padding:10px 16px;border:0;background:none;color:#C2541A;font:700 14px var(--font,inherit);text-align:left;cursor:pointer}
.gi-cr{margin:0;padding:2px 16px 13px;font-size:12.5px;color:#857C93}
.gi-desc>.gi-link:first-child{padding-top:14px}
.gi-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:0;border-top:1px solid #F0EAE2;background:none;color:#2B2636;font:inherit;text-align:left;cursor:pointer}
.gi-card>.gi-row:first-child,.gi-h+.gi-row{border-top:0}
.gi-rt{flex:1;min-width:0;font-size:15px;font-weight:600}
.gi-rv{flex:none;font-size:13.5px;color:#857C93;white-space:nowrap}
.gi-row>svg{flex:none;width:18px;height:18px;stroke:#B9B2C4;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gi-red,.gi-red .gi-rt{color:#B42318}
.gi-red>svg{stroke:#B42318}
.gi-mems .dm-it{border-radius:0}
.gi-addm .grp-av{width:40px;height:40px}
.grp-mem{cursor:pointer}
.gi-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0 3px 3px}
.gi-strip[hidden]{display:none}
.gm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0 14px}
.gm-t{position:relative;display:block;aspect-ratio:1;padding:0;overflow:hidden;border:0;border-radius:4px;background:#E9E3DA;cursor:pointer}
.gm-t img,.gm-t video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.gm-play{position:absolute;inset:0;display:grid;place-items:center}
.gm-play svg{width:38px;height:38px}
.gm-docs{display:flex;flex-direction:column;gap:6px;padding:0 14px}
.gm-doc{margin:0}
.gm-au{flex-wrap:wrap}
.gm-au em{flex-basis:100%;font-size:12px;font-style:normal;color:#857C93}
.grp-shs{margin:6px 0 4px}
.grp-menu .btn.red,.grp-menu .btn.red svg{color:#B42318;stroke:#B42318}
.grp-menu .btn.arm{border-color:#B42318;background:#B42318;color:#fff}
.grp-menu .btn.arm svg{stroke:#fff}
.grp-nm textarea{display:block;width:100%;box-sizing:border-box;min-height:120px;padding:12px 14px;border:1px solid rgba(61,53,82,.18);border-radius:12px;background:#fff;color:#1A1924;font:16px/1.45 var(--font,inherit);resize:vertical}
.grp-nm textarea:focus{outline:none;border-color:#E8621A;box-shadow:0 0 0 3px rgba(232,98,26,.15)}
.grp-edh{margin:0 0 8px;text-align:left}
/* Vidéos dans les bulles et dans la visionneuse */
.cm-vid{max-width:280px;margin:4px 0 2px;overflow:hidden;border-radius:12px;background:#000}
.cm-vid video{display:block;width:100%;max-height:360px;background:#000}
.cp-lb video{display:none;max-width:100%;max-height:100%}
.cp-lb.vid video{display:block}
.cp-lb.vid img{display:none}
.cp-chip.vid img{object-fit:cover}
.cp-chip.busy b{color:#857C93;font-weight:600}
/* Appareil photo de la barre d'écriture : sur téléphone, tant qu'on n'écrit pas */
.cp-row.has .cp-cam,.cp-row.edit .cp-cam{display:none}
@media (hover:hover) and (pointer:fine){.cp-cam{display:none!important}}
/* Barre d'écriture des groupes comme celle des messages privés (version entre WhatsApp et LinkedIn) */
html.dm-wa #chatp .cp-comp.cm-greply{background:#fff;border-top:1px solid var(--dmw-line);padding:8px 10px calc(var(--bot) + 8px)}
html.dm-wa #chatp .cm-greply .cp-row{gap:6px;align-items:flex-end}
html.dm-wa #chatp .cm-greply .cp-row textarea{min-height:42px;padding:10px 15px;border:1px solid transparent;border-radius:21px;background:var(--dmw-bg);font-size:15px;box-shadow:none}
html.dm-wa #chatp .cm-greply .cp-row textarea:focus{border-color:rgba(61,53,82,.28);background:#fff}
html.dm-wa #chatp .cm-greply .cp-ib:not(.cp-mic){width:40px;height:42px;background:none;color:var(--dmw-sub);box-shadow:none}
html.dm-wa #chatp .cm-greply .cp-mic,html.dm-wa #chatp .cm-greply .cp-send{width:42px;height:42px;border-radius:50%;background:var(--dmw-me);color:#fff;box-shadow:none}
html.dm-wa #chatp .cm-greply .cp-mic svg{width:21px;height:21px}
html.dm-wa #chatp .grp-th .cm-vid{border-radius:10px}
html.dm-wa #chatp .grp-info,html.dm-wa #chatp .gm{max-width:760px}
/* 11/11/2026, 1 h 40 : créneau horaire de sourdine (Isma, 1 h 24 : « par défaut de 18h à 9h avec la possibilité de régler ») */
.grp-win{margin:18px 0 4px;padding-top:14px;border-top:1px solid #F0EAE2}
.grp-win .gi-h{padding:0 0 8px}
.grp-winst{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14.5px;font-weight:650;color:#3D3552}
.grp-winst svg{flex:none;width:18px;height:18px;stroke:#E8621A;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.grp-winst.sub{font-size:13.5px;font-weight:400;line-height:1.45;color:#857C93}
.grp-winr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grp-winr label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#857C93}
.grp-winr input{box-sizing:border-box;width:100%;height:48px;padding:0 12px;border:1px solid rgba(61,53,82,.18);border-radius:12px;background:#fff;color:#1A1924;font:600 17px var(--font,inherit)}
.grp-winr input:focus{outline:none;border-color:#E8621A;box-shadow:0 0 0 3px rgba(232,98,26,.15)}
.grp-winb{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.grp-winb .btn{width:100%}
/* 11/11/2026, 1 h 40 (Isma, 1 h 33 : « que le non lu soit un peu plus visible et que la sourdine soit précisée pour tous ») */
/* 11/11/2026, 2 h (Isma, 1 h 52 : « les messages non lus ne ressortent pas trop ») : fond pêche franc, pastille à gauche, même en sourdine (pastille grise) */
:is(html,html.dm-wa) #chatp .dmx .dm-it.unr{position:relative;background:#FFE7D4}
:is(html,html.dm-wa) #chatp .dmx .dm-it.unr:hover{background:#FFDFC7}
:is(html,html.dm-wa) #chatp .dmx .dm-it.unr::after{background:#F5CFB2}
:is(html,html.dm-wa) #chatp .dmx .dm-it.unr::before{content:"";position:absolute;left:5px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#E8621A}
:is(html,html.dm-wa) #chatp .dmx .dm-it.unr[data-dmmute]{background:#FFF0E5}
:is(html,html.dm-wa) #chatp .dmx .dm-it.unr[data-dmmute]::before{background:#B9B2C4}
:is(html,html.dm-wa) #chatp .dmx .dm-it.unr .dm-l1 b{font-weight:800;color:#1A1924}
:is(html,html.dm-wa) #chatp .dmx .dm-it.unr .dm-l2{font-weight:650;color:#2B2636}
:is(html,html.dm-wa) #chatp .dmx .dm-it.unr .dm-l1 i{font-weight:800;color:#D4561A}
:is(html,html.dm-wa) #chatp .dmx .dm-n{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:#E8621A;color:#fff;font-size:12px;font-weight:800;line-height:22px;text-align:center;box-shadow:0 2px 6px -2px rgba(232,98,26,.55)}
:is(html,html.dm-wa) #chatp .dmx .dm-n.dm-mk{min-width:12px;width:12px;height:12px;padding:0}
:is(html,html.dm-wa) #chatp .dmx .dm-n.mut{background:#B9B2C4;box-shadow:none}
.dm-mi{gap:3px;align-items:center;margin-right:6px;font-size:12px;font-style:normal;font-weight:650;color:#9A93A8;white-space:nowrap}
.dm-mi i{font-style:normal}
.dm-mi svg{width:15px;height:15px}
.dm-mi::after{content:'·';margin-left:5px;color:#C9C3D3}
.gi-acts button svg[viewBox]{flex:none}
/* 11/11/2026, 1 h 45 : infos d'un message (Isma, 1 h 34 : « envoyé, lu, à quelle heure », comme WhatsApp) */
.mi-prev{margin:10px 0 14px;padding:10px 14px;border-radius:14px 14px 4px 14px;background:#3D3552;color:#fff;font-size:14.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;max-height:160px;overflow:hidden}
.mi-sec{margin:0 0 14px;border:1px solid #E7DFD5;border-radius:14px;background:#fff;overflow:hidden}
.mi-h{display:flex;align-items:center;gap:8px;margin:0;padding:11px 14px;border-bottom:1px solid #F0EAE2;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#857C93}
.mi-tk .cm-tk{display:inline-flex!important;color:#9A93A8}
.mi-tk.k3 .cm-tk{color:#E8621A}
.mi-tk svg{width:18px;height:12px}
.mi-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid #F6F1EA}
.mi-h+.mi-row{border-top:0}
.mi-row b{flex:1;min-width:0;font-size:15px;font-weight:650;color:#2B2636;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mi-row i{flex:none;font-size:13px;font-style:normal;color:#857C93}
.mi-none{margin:0;padding:12px 14px;font-size:14px;color:#857C93}
.mi-sent{margin:4px 2px 8px;font-size:13.5px;color:#857C93}
#chatp .dm-th .cm.mine .cm-b{cursor:pointer}
/* 11/11/2026, 1 h 50 : zoom à deux doigts dans la visionneuse des photos */
#cplb{touch-action:none;overscroll-behavior:contain}
#cplb img{transform-origin:0 0;will-change:transform;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* 11/11/2026, 1 h 55 (Isma, 1 h 50) : sur téléphone, l'appui long sur un message ouvre le menu (Infos, Copier…)
   sans que le téléphone sélectionne du texte. Les champs restent sélectionnables. */
@media (hover:none),(pointer:coarse){
  #cpbody .cm,#cpbody .cm *,.dm-act,.dm-act *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  #cpbody textarea,#cpbody input{-webkit-user-select:text;user-select:text}
}
/* 11/11/2026, vers 20 h (Isma, 19 h 33, capture de WhatsApp sur ordinateur : « une petite icône pour pouvoir réagir avec un émoji
   [...] et puis une petite flèche aussi pour pouvoir faire répondre au message ») : au survol d'une bulle (ordinateur), l'émoji et
   la flèche ; la barre des réactions en pilule ; qui a réagi ; glisser vers la droite pour répondre (téléphone). Pour tous
   (app.js : cm-hv, dm-act-bar, rx-l, cm-swi ; lbf-app-grp-react.php pour les groupes). */
.cm-hv{display:none}
@media (hover:hover) and (pointer:fine){
  #chatp .dm-th .cm-hv{position:absolute;top:50%;left:calc(100% + 6px);z-index:3;display:flex;flex-direction:row-reverse;gap:4px;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .12s ease}
  #chatp .dm-th .cm.mine .cm-hv{left:auto;right:calc(100% + 6px);flex-direction:row}
  #chatp .dm-th .cm:hover .cm-hv,#chatp .dm-th .cm.hvon .cm-hv,#chatp .dm-th .cm-hv:focus-within{opacity:1;pointer-events:auto}
  #chatp .dm-th .cm-hvb{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#fff;color:#6E6684;box-shadow:0 1px 3px rgba(26,25,36,.2);cursor:pointer;transition:color .12s ease,transform .12s ease}
  #chatp .dm-th .cm-hvb:hover{color:#3D3552;transform:scale(1.06)}
  #chatp .dm-th .cm-hvb:focus-visible{outline:2px solid #3D3552;outline-offset:1px}
  #chatp .dm-th .cm-hvb svg{width:18px;height:18px}
}
.dm-act.dm-act-bar{background:transparent}
.dm-act-bar .dm-act-m,.dm-act-bar .dm-act-m:has(.dm-act-re){min-width:0;padding:5px 6px;border-radius:999px;box-shadow:0 10px 28px rgba(26,25,36,.2);animation:rxpop .14s ease}
.dm-act-bar .dm-act-re{gap:2px;margin:0;padding:0;border:0}
@keyframes rxpop{from{opacity:0;transform:translateY(4px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.dm-act-bar .dm-act-m{animation:none}}
#chatp .dm-th .cm-re[data-cmre]{cursor:pointer}
#chatp .dm-th .cm-re[data-cmre]:focus-visible{outline:2px solid #3D3552;outline-offset:2px;border-radius:8px}
.rx-l{margin:12px 0 6px;border:1px solid #E7DFD5;border-radius:14px;background:#fff;overflow:hidden}
.rx-r{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid #F3EDE5}
.rx-r:first-child{border-top:0}
.rx-e{flex:none;width:28px;font-size:22px;line-height:1;text-align:center}
.rx-r b{flex:1;min-width:0;font-size:15px;font-weight:650;color:#2B2636;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rx-x{flex:none;padding:6px 12px;border:1px solid rgba(61,53,82,.2);border-radius:999px;background:#fff;color:#3D3552;font:650 13px var(--font,inherit);cursor:pointer}
.rx-x:hover{border-color:#3D3552}
#chatp .dm-th .cm{position:relative}
#chatp .cp-body:has(>.dm-th){overflow-x:hidden}
.cm-swi{position:absolute;left:-36px;top:50%;display:grid;place-items:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:rgba(61,53,82,.1);color:#3D3552;opacity:0;pointer-events:none;transition:background .15s ease,color .15s ease,transform .15s ease}
.cm-swi svg{width:17px;height:17px}
.cm-swi.go{background:#3D3552;color:#fff;transform:scale(1.08)}
/* la citation et l'étiquette sans liseré, pour tous (comme la version entre WhatsApp et LinkedIn) */
#chatp .dm-th .cm-qr{box-shadow:none;border-radius:10px;background:rgba(61,53,82,.07)}
#chatp .dm-th .cm-qr.me{background:rgba(232,98,26,.1)}
#chatp .cm-q{border-left:0;border-radius:6px;background:rgba(61,53,82,.07)}

/* 11/11/2026, vers 22 h 30 (Isma, 22 h 20) : une image seule plus haute que sa bulle montre son haut (et non son milieu),
   avec un fondu en bas et « Voir en entier » (classe cut et étiquette cm-cut posées par app.js) ; la toucher ouvre la visionneuse. */
.cm-imgs .cm-img{position:relative}
.cm-imgs .cm-img img{object-position:50% 0}
.cm-imgs .cm-img.cut::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(180deg,rgba(26,25,36,0),rgba(26,25,36,.5));pointer-events:none}
.cm-imgs .cm-img .cm-cut{position:absolute;left:50%;bottom:10px;z-index:1;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 20px);padding:6px 12px;border-radius:999px;background:rgba(26,25,36,.78);color:#fff;font:600 12.5px/1.2 var(--font,system-ui,-apple-system,sans-serif);white-space:nowrap;pointer-events:none}
.cm-imgs .cm-img .cm-cut svg{width:14px;height:14px;flex:none}