/* =====================================================================
   PAGES COMMUNAUTE (fil.html, profil.html)
   Memes couleurs que la carte ; le mode nuit est repris du choix fait sur
   la carte (classe theme-nuit posee avant le premier rendu).
   ===================================================================== */
:root{
  --fond:#f2f5f8; --surf:#ffffff; --surf2:#eef2f6; --surf3:#e1e8ef;
  --bord:rgba(16,24,40,.10); --bord-fort:rgba(16,24,40,.20);
  --txt:#101828; --txt2:#5c6b80; --txt3:#8494a6;
  --prim:#0e7c7b; --prim-h:#0a6362; --sur-prim:#ffffff;
  --accent:#0e7c7b; --accent2:#d9822b; --accent-fond:#e7f2f2;
  --danger:#d64545; --btn2:#1d2939; --sur-btn2:#ffffff; --lien:#0e7c7b;
  --ombre:0 10px 28px rgba(16,24,40,.10);
  --r:16px; --r2:12px; --r3:10px;
}
:root.theme-nuit{
  --fond:#0b1017; --surf:#151b24; --surf2:#1f2833; --surf3:#2a3442;
  --bord:rgba(255,255,255,.12); --bord-fort:rgba(255,255,255,.24);
  --txt:#e9eef5; --txt2:#9fadbf; --txt3:#7f8ea1;
  --prim:#2aa8a6; --prim-h:#37bfbc; --sur-prim:#07211f;
  --accent:#2aa8a6; --accent2:#e59a48; --accent-fond:#13302f;
  --danger:#e5484d; --btn2:#2a3442; --sur-btn2:#e9eef5; --lien:#4fd1cd;
  --ombre:0 10px 28px rgba(0,0,0,.45);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--fond); color:var(--txt); font:400 15px/1.5 'Inter',system-ui,-apple-system,sans-serif; }
a{ color:var(--lien); }
[hidden]{ display:none !important; }
button{ font-family:inherit; }

/* ---- Barre du haut ---- */
.cm-barre{ position:sticky; top:0; z-index:20; background:var(--surf); background:color-mix(in srgb, var(--surf) 92%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--bord); }
.cm-barre-in{ max-width:640px; margin:0 auto; display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:58px; }
.cm-retour{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--txt); font-weight:700; font-size:14px;
  padding:9px 12px 9px 8px; border-radius:999px; min-height:42px; }
.cm-retour:hover{ background:var(--surf2); }
.cm-nav{ margin-left:auto; display:flex; gap:4px; }
.cm-nav a{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--txt2); font-weight:600; font-size:14px;
  padding:8px 13px; border-radius:999px; min-height:42px; position:relative; }
.cm-nav a:hover{ background:var(--surf2); color:var(--txt); }
.cm-nav a.on{ background:var(--prim); color:var(--sur-prim); }
.cm-nav .cm-av{ width:24px; height:24px; font-size:11px; }
.cm-pastille{ position:absolute; top:2px; right:2px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--accent2);
  color:#fff; font:700 10.5px/17px 'Inter',sans-serif; text-align:center; }
.cm-langue{ width:auto; flex:0 0 auto; border:1px solid var(--bord-fort); background:var(--surf); color:var(--txt2); border-radius:999px; padding:7px 8px;
  font:600 12px 'Inter',sans-serif; min-height:38px; }

/* ---- Colonne ---- */
.cm-page{ max-width:640px; margin:0 auto; padding:16px 12px 60px; }
.cm-titre{ font-size:22px; font-weight:800; margin:6px 4px 14px; }
.cm-bloc{ background:var(--surf); border:1px solid var(--bord); border-radius:var(--r); padding:16px; margin-bottom:14px; }
.cm-petit{ font-size:12.5px; color:var(--txt2); line-height:1.5; margin:10px 0 0; }
.cm-msg{ margin:0 0 14px; padding:10px 12px; border-radius:var(--r3); background:var(--accent-fond); font-size:13.5px; }
.cm-msg.err{ background:rgba(214,69,69,.12); color:var(--danger); }

/* ---- Champs et boutons ---- */
.cm-champ{ display:block; margin-bottom:12px; }
.cm-champ > span{ display:block; font-size:12px; font-weight:600; color:var(--txt2); margin-bottom:5px; }
input, textarea, select{ width:100%; min-width:0; border:1px solid var(--bord-fort); background:var(--surf); color:var(--txt);
  border-radius:var(--r3); padding:11px 12px; font:500 15px 'Inter',sans-serif; }
textarea{ resize:vertical; min-height:84px; line-height:1.45; }
input:focus, textarea:focus, select:focus{ outline:2px solid var(--accent); outline-offset:0; border-color:transparent; }
.cm-deux{ display:flex; gap:10px; }
.cm-deux > *{ flex:1 1 0; min-width:0; }
.cm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--prim); color:var(--sur-prim); border:none;
  border-radius:999px; padding:10px 18px; font:700 14px 'Inter',sans-serif; cursor:pointer; min-height:44px; white-space:nowrap;
  text-decoration:none; touch-action:manipulation; }
.cm-btn:hover{ background:var(--prim-h); }
.cm-btn:disabled{ opacity:.55; cursor:default; }
.cm-btn.sombre{ background:var(--btn2); color:var(--sur-btn2); }
.cm-btn.clair{ background:var(--surf2); color:var(--txt); }
.cm-lien{ background:none; border:none; color:var(--lien); font:600 13.5px 'Inter',sans-serif; cursor:pointer; padding:8px 2px;
  text-decoration:underline; min-height:40px; touch-action:manipulation; }
.cm-lien.danger{ color:var(--txt3); }
.cm-lien.danger:hover{ color:var(--danger); }
.cm-ligne{ display:flex; gap:8px; }
.cm-ou{ display:flex; align-items:center; gap:10px; margin:16px 0 12px; color:var(--txt3); font-size:12.5px; }
.cm-ou::before, .cm-ou::after{ content:''; flex:1; height:1px; background:var(--bord); }
.cm-google{ min-height:44px; display:flex; justify-content:center; color:var(--txt2); font-size:13px; }

/* ---- Onglets ---- */
.cm-onglets{ display:flex; gap:6px; margin:0 0 12px; overflow-x:auto; padding-bottom:2px; }
.cm-onglet{ border:1px solid var(--bord-fort); background:var(--surf); color:var(--txt2); border-radius:999px; padding:8px 14px;
  font:600 13px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; min-height:40px; touch-action:manipulation; }
.cm-onglet.on{ background:var(--prim); color:var(--sur-prim); border-color:var(--prim); }
.cm-onglet b:empty{ display:none; }
.cm-onglet b{ display:inline-block; min-width:18px; margin-left:4px; padding:0 5px; border-radius:9px; background:var(--accent2); color:#fff; font-size:11px; line-height:18px; }

/* ---- Avatar ---- */
.cm-av{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--accent-fond); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; font:800 16px 'Inter',sans-serif; overflow:hidden; }
.cm-av img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Enregistrer, onglets prives ---- */
.cm-act.cm-signet{ margin-left:auto; }
.cm-act.cm-signet.on{ color:var(--accent); }
.cm-onglet .cm-cadenas{ display:inline-flex; vertical-align:-1px; margin-right:5px; opacity:.75; }
.cm-note-prive{ display:flex; align-items:center; gap:6px; margin:0 4px 10px; font-size:12.5px; }

/* ---- Onglet Reperes ---- */
.cm-rep-tete{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
.cm-rep-tete .cm-note-prive{ margin:0; }
.cm-rep-barre{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:14px 0 4px; padding:10px 12px; border-radius:var(--r2); background:var(--surf2); }
.cm-rep-barre .cm-btn{ min-height:40px; padding:8px 14px; font-size:13px; }
.cm-rep-tout, .cm-rep-gtitre{ display:flex; align-items:center; gap:9px; cursor:pointer; min-height:40px; font-size:14px; }
.cm-reperes input[type=checkbox]{ width:20px; height:20px; flex:0 0 auto; accent-color:var(--accent); margin:0; }
.cm-rep-groupe{ margin-top:14px; }
.cm-rep-gtitre{ padding:4px 4px; border-bottom:1px solid var(--bord); }
.cm-rep-gtitre b{ font-size:14.5px; }
.cm-rep-n{ margin-left:auto; font:600 12px ui-monospace,Menlo,Consolas,monospace; color:var(--txt2); }
.cm-reperes .cm-repere{ padding:8px 4px; gap:10px; }
.cm-reperes .cm-repere-txt{ text-decoration:none; color:inherit; min-width:0; }

/* ---- Administration ---- */
.cm-bandeau-admin{ display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:11px 14px; border-radius:var(--r2); background:rgba(217,130,43,.13);
  color:var(--accent2); font-weight:700; font-size:14px; text-decoration:none; min-height:44px; }
.cm-epingle{ flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; font:700 11.5px 'Inter',sans-serif; color:var(--accent); background:var(--accent-fond); padding:4px 9px; border-radius:999px; }
.cm-sup.petit{ width:32px; height:32px; margin-left:auto; }
.cm-adm-haut{ display:flex; align-items:center; gap:8px; }
.cm-adm-haut .cm-onglets{ flex:1 1 auto; min-width:0; margin-bottom:12px; }
.cm-adm-haut .cm-lien{ flex:0 0 auto; margin-bottom:12px; }
.cm-stats{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; margin-bottom:14px; }
.cm-stat{ background:var(--surf); border:1px solid var(--bord); border-radius:var(--r2); padding:12px 14px; display:flex; flex-direction:column; gap:2px; }
.cm-stat b{ font-size:24px; line-height:1.1; }
.cm-stat span{ font-size:12.5px; color:var(--txt2); }
.cm-adm-filtres{ margin-bottom:12px; }
.cm-adm-filtres select{ flex:0 0 auto; width:auto; }
.cm-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cm-tag{ font:700 11.5px 'Inter',sans-serif; padding:3px 9px; border-radius:999px; background:var(--surf2); color:var(--txt2); }
.cm-tag.ok{ background:var(--accent-fond); color:var(--accent); }
.cm-tag.rouge{ background:rgba(214,69,69,.13); color:var(--danger); }
.cm-membre .cm-note{ margin-top:8px; }
.cm-sous-titre{ font-size:16px; margin:18px 4px 10px; }
.cm-journal-ligne{ display:flex; flex-wrap:wrap; gap:4px 10px; padding:9px 2px; border-top:1px solid var(--bord); font-size:13.5px; }
.cm-journal-ligne:first-child{ border-top:none; }
.cm-journal-date{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--txt2); }

/* ---- Encadre Abonnement du profil ---- */
.cm-abo{ border-color:var(--accent); }
.cm-abo.ok{ background:var(--accent-fond); }
.cm-abo .cm-ok{ margin:0; }
.cm-abo .cm-sous-titre{ margin:0 0 4px; }
.cm-abo .cm-note{ margin-bottom:12px; }
.cm-abo #cm-code-acces{ text-transform:uppercase; letter-spacing:.08em; }

/* ---- Traduire ---- */
.cm-traduire{ display:inline-block; background:none; border:none; padding:6px 0 0; color:var(--txt2); font:600 12.5px 'Inter',sans-serif;
  cursor:pointer; min-height:30px; touch-action:manipulation; }
.cm-traduire:hover{ color:var(--lien); text-decoration:underline; }
.cm-traduire.petit{ display:block; padding:2px 0 0; min-height:24px; font-size:12px; }

/* ---- Badge du compte officiel ---- */
.cm-badge{ display:inline-flex; vertical-align:-2px; margin-left:4px; color:#1d9bf0; flex:0 0 auto; }
.cm-qui span.cm-badge, .cm-com span.cm-badge{ color:#1d9bf0; overflow:visible; }
h1 .cm-badge{ vertical-align:-1px; }
h1 .cm-badge svg{ width:20px; height:20px; }

/* ---- Publication ---- */
.cm-carte{ background:var(--surf); border:1px solid var(--bord); border-radius:var(--r); padding:14px 14px 8px; margin-bottom:12px; }
.cm-tete{ display:flex; align-items:center; gap:10px; }
.cm-qui{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.cm-qui b{ font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-qui span{ font-size:12.5px; color:var(--txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.cm-qui:hover b{ text-decoration:underline; }
.cm-etat{ flex:0 0 auto; font:700 11.5px 'Inter',sans-serif; color:var(--accent2); background:rgba(217,130,43,.13); padding:4px 9px; border-radius:999px; }
.cm-sup{ flex:0 0 auto; width:40px; height:40px; border:none; background:none; color:var(--txt3); border-radius:var(--r3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.cm-sup:hover{ color:var(--danger); background:var(--surf2); }
.cm-texte{ margin:10px 0 0; font-size:15px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.cm-photo{ display:block; width:100%; max-height:520px; object-fit:cover; border-radius:var(--r2); margin-top:10px; cursor:zoom-in;
  background:var(--surf2); border:1px solid var(--bord); }
.cm-photo.grand{ max-height:none; object-fit:contain; cursor:zoom-out; }
.cm-ou-carte{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:var(--accent-fond); color:var(--accent);
  border-radius:999px; padding:7px 12px; font:600 13px 'Inter',sans-serif; text-decoration:none; max-width:100%; min-height:36px; }
.cm-ou-carte span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-pied{ display:flex; gap:4px; margin-top:6px; }
.cm-act{ display:inline-flex; align-items:center; gap:6px; border:none; background:none; color:var(--txt2); border-radius:999px;
  padding:7px 11px; font:600 13.5px 'Inter',sans-serif; cursor:pointer; min-height:40px; touch-action:manipulation; }
.cm-act:hover{ background:var(--surf2); }
.cm-act.on{ color:var(--danger); }
.cm-act.on svg{ fill:currentColor; }
.cm-coms{ margin:4px 0 8px; padding:10px 12px; border-radius:var(--r2); background:var(--surf2); display:flex; flex-direction:column; gap:10px; }
.cm-com{ display:flex; gap:9px; font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.cm-com .cm-av{ width:28px; height:28px; font-size:12px; }
.cm-com a{ color:inherit; font-weight:700; text-decoration:none; }
/* nom de l'auteur sur une ligne, commentaire en dessous */
.cm-com-corps{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; flex:1 1 auto; }
.cm-com-texte{ display:block; white-space:pre-wrap; }
.cm-note, .cm-vide{ margin:0; font-size:13.5px; color:var(--txt2); line-height:1.5; }
.cm-vide{ padding:28px 10px; text-align:center; }
.cm-mod{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:12px 0 6px; }
.cm-choix{ flex:1 0 100%; font-size:12.5px; color:var(--txt2); }

/* ---- Ecrire (toujours ouvert, comme Threads / X) ---- */
/* Zone d'ecriture du fil : discrete, comme une carte du fil (pas de cadre colore) */
.cm-ecrire-titre{ margin:0 0 8px; font:600 13.5px 'Inter',sans-serif; color:var(--txt2); }
.cm-ecrire-bloc .cm-ecrire-haut textarea{ background:transparent; border:none; border-bottom:1px solid var(--bord); border-radius:0; padding:8px 2px; min-height:44px; }
.cm-ecrire-bloc .cm-ecrire-haut textarea:focus{ outline:none; border-bottom-color:var(--txt2); }
.cm-ecrire{ display:flex; flex-direction:column; gap:10px; }
.cm-ecrire-haut{ display:flex; gap:12px; align-items:flex-start; }
.cm-ecrire-haut textarea{ border:none; background:none; padding:9px 0 4px; min-height:48px; font-size:17px; line-height:1.45; resize:none; overflow:hidden; }
.cm-ecrire-haut textarea:focus{ outline:none; }
.cm-ecrire-opt, .cm-ecrire-bas, .cm-ecrire > .cm-note, .cm-ecrire > .cm-petit{ margin-left:52px; }
.cm-ecrire-opt{ display:flex; gap:8px; }
.cm-ecrire-opt input, .cm-ecrire-opt select{ flex:1 1 0; min-width:0; padding:8px 10px; font-size:13.5px; border-radius:999px; background:var(--surf2); border-color:transparent; }
.cm-ecrire-bas{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; border-top:1px solid var(--bord); padding-top:10px; }
.cm-ecrire-bas .cm-btn{ margin-left:auto; }
.cm-icone{ width:42px; height:42px; border:none; background:none; color:var(--accent); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cm-icone:hover{ background:var(--accent-fond); }
.cm-precis{ display:flex; gap:4px; }
.cm-precis label{ display:flex; align-items:center; cursor:pointer; }
.cm-precis input{ position:absolute; opacity:0; width:1px; height:1px; }
.cm-precis span{ padding:7px 11px; border-radius:999px; font:600 12.5px 'Inter',sans-serif; color:var(--txt2); border:1px solid var(--bord-fort); min-height:36px; display:inline-flex; align-items:center; }
.cm-precis input:checked + span{ background:var(--accent-fond); color:var(--accent); border-color:var(--accent); }
.cm-precis input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.cm-ecrire > .cm-petit{ margin-top:0; font-size:11.5px; }
.cm-apercus{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin-left:52px; }
.cm-apercus[hidden]{ display:none; }
.cm-apercu-w{ position:relative; }
.cm-apercu{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; }
.cm-apercu-x{ position:absolute; top:4px; right:4px; width:26px; height:26px; border-radius:50%; border:none; background:rgba(0,0,0,.65); color:#fff; font:700 16px/1 sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cm-icone:disabled{ opacity:.35; cursor:default; background:none; }
/* Photos d'une publication : 1 grande, ou une grille pour 2 a 4 */
.cm-photos{ display:grid; gap:4px; margin-top:10px; border-radius:var(--r2); overflow:hidden; }
.cm-photos .cm-photo{ margin-top:0; border-radius:0; }
.cm-photos.n1 .cm-photo{ border-radius:var(--r2); }
.cm-photos.n2, .cm-photos.n4{ grid-template-columns:1fr 1fr; }
.cm-photos.n3{ grid-template-columns:1fr 1fr; }
.cm-photos.n3 .cm-photo:first-child{ grid-column:1 / -1; }
.cm-photos.n2 .cm-photo, .cm-photos.n3 .cm-photo, .cm-photos.n4 .cm-photo{ height:220px; max-height:none; }
.cm-photos .cm-photo.grand{ grid-column:1 / -1; height:auto; }
.cm-lieu-seul{ margin:8px 0 0; font-size:13px; color:var(--txt2); }
.cm-boutons{ display:flex; justify-content:flex-end; align-items:center; gap:14px; flex-wrap:wrap; }

/* ---- Profil ---- */
.cm-profil{ display:flex; gap:16px; align-items:center; }
.cm-profil .cm-av{ width:88px; height:88px; font-size:34px; }
.cm-profil-txt{ min-width:0; flex:1; }
.cm-profil h1{ font-size:22px; margin:0; line-height:1.25; overflow-wrap:anywhere; }
.cm-profil .cm-ville{ color:var(--txt2); font-size:14px; margin-top:2px; }
.cm-apropos{ margin:14px 0 0; font-size:15px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.cm-photo-btn{ position:relative; border:none; padding:0; background:none; cursor:pointer; border-radius:50%; }
.cm-photo-btn .cm-crayon{ position:absolute; right:0; bottom:0; width:28px; height:28px; border-radius:50%; background:var(--prim); color:var(--sur-prim);
  display:flex; align-items:center; justify-content:center; border:2px solid var(--surf); }
.cm-actions-profil{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:14px; }
.cm-repere{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-top:1px solid var(--bord); text-decoration:none; color:inherit; min-height:52px; }
.cm-repere:first-child{ border-top:none; }
.cm-repere:hover{ background:var(--surf2); }
.cm-pastille-coul{ flex:0 0 auto; width:16px; height:16px; border-radius:50%; box-shadow:0 0 0 2px var(--surf), 0 0 0 3px var(--bord-fort); }
.cm-repere-txt{ flex:1; min-width:0; }
.cm-repere-txt b{ display:block; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-repere-txt span{ font-size:12px; color:var(--txt2); font-family:ui-monospace,Menlo,Consolas,monospace; }
.cm-reglages{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; }
.cm-ok{ color:var(--accent); font-weight:600; font-size:13.5px; margin:8px 0 0; }

@media (max-width:520px){
  .cm-barre-in{ padding:6px 8px; gap:4px; }
  .cm-retour span{ display:none; }
  .cm-nav a{ padding:8px 10px; }
  .cm-page{ padding:12px 8px 60px; }
  .cm-carte{ border-radius:14px; padding:12px 12px 6px; }
  .cm-profil .cm-av{ width:72px; height:72px; font-size:28px; }
  .cm-deux{ flex-direction:column; gap:0; }
  .cm-ecrire-opt, .cm-ecrire-bas, .cm-apercus, .cm-ecrire > .cm-note, .cm-ecrire > .cm-petit{ margin-left:0; }
  .cm-photos.n2 .cm-photo, .cm-photos.n3 .cm-photo, .cm-photos.n4 .cm-photo{ height:150px; }
  .cm-ecrire-opt{ flex-direction:column; }
}

/* ===== v26 : pastilles, menu « ⋯ », traduire en haut, texte replie, reponses, signaler, notifications, carnet ===== */
.cm-pastille{ background:var(--danger); box-shadow:0 0 0 2px var(--surf); }
.cm-tete-droite{ flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:2px; }
.cm-tete .cm-traduire{ padding:6px 8px; border-radius:999px; min-height:36px; }
.cm-tete .cm-traduire:hover{ background:var(--surf2); text-decoration:none; }
.cm-menu-w{ position:relative; }
.cm-menu-btn{ width:40px; height:40px; border:none; background:none; color:var(--txt2); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; touch-action:manipulation; }
.cm-menu-btn:hover, .cm-menu-btn[aria-expanded="true"]{ background:var(--surf2); color:var(--txt); }
.cm-menu{ position:absolute; right:0; top:42px; z-index:30; min-width:220px; max-width:calc(100vw - 32px); background:var(--surf); border:1px solid var(--bord-fort);
  border-radius:var(--r2); box-shadow:0 12px 32px rgba(16,24,40,.18); padding:6px; display:flex; flex-direction:column; }
.cm-menu[hidden]{ display:none; }
.cm-menu-item{ text-align:left; background:none; border:none; color:var(--txt); font:600 14px 'Inter',sans-serif; padding:11px 12px; border-radius:var(--r3); cursor:pointer; min-height:44px; }
.cm-menu-item:hover{ background:var(--surf2); }
.cm-menu-item.danger{ color:var(--danger); }
.cm-texte.replie{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; line-clamp:6; overflow:hidden; }
.cm-suite{ background:none; border:none; padding:4px 0 2px; color:var(--lien); font:600 14px 'Inter',sans-serif; cursor:pointer; min-height:32px; }
.cm-suite:hover{ text-decoration:underline; }
.cm-com.rep{ margin-left:34px; }
.cm-com.rep .cm-av{ width:24px; height:24px; font-size:11px; }
.cm-com-actions{ display:flex; flex-wrap:wrap; gap:0 14px; }
.cm-com-actions .cm-traduire.petit{ display:inline-block; }
.cm-rep-puce{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--txt2); margin-bottom:-4px; }
.cm-rep-puce[hidden]{ display:none; }
.cm-rep-puce .cm-lien{ padding:2px 8px; font-size:16px; line-height:1; min-height:28px; }
.cm-modal-fond{ position:fixed; inset:0; z-index:100; background:rgba(8,12,18,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.cm-modal{ width:100%; max-width:420px; max-height:calc(100vh - 32px); overflow:auto; background:var(--surf); border-radius:var(--r); padding:18px; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.cm-modal .cm-sous-titre{ margin-top:0; }
.cm-motif{ display:flex; align-items:center; gap:10px; padding:9px 4px; font-size:14px; cursor:pointer; min-height:40px; }
.cm-motif input{ width:18px; height:18px; flex:0 0 auto; margin:0; accent-color:var(--accent); }
.cm-modal textarea{ margin-top:8px; }
.cm-modal .cm-boutons{ display:flex; justify-content:flex-end; gap:12px; margin-top:12px; }
.cm-carte-une{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-fond); }
.cm-notifs{ padding:6px; }
.cm-notif{ display:flex; gap:12px; align-items:flex-start; padding:12px 10px; border-radius:var(--r2); text-decoration:none; color:inherit; }
.cm-notif + .cm-notif{ border-top:1px solid var(--bord); }
.cm-notif:hover{ background:var(--surf2); }
.cm-notif.nouveau{ background:var(--accent-fond); }
.cm-notif .cm-av{ width:36px; height:36px; }
.cm-av-ok{ font-weight:800; }
.cm-notif-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cm-notif-txt b{ font-size:14px; font-weight:600; }
.cm-notif-ex{ font-size:13px; color:var(--txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-notif-date{ font-size:12px; color:var(--txt3); }
.cm-stats-carnet{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
.cm-jscan-ligne{ padding:12px 2px; border-top:1px solid var(--bord); display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.cm-jscan-txt{ flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cm-jscan-txt b{ font-size:14px; }
.cm-jscan-txt span{ font-size:13px; color:var(--txt2); }
.cm-jscan-act{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.cm-jscan-act .cm-btn{ min-height:38px; padding:8px 14px; }
.cm-jscan-avis{ flex:1 0 100%; display:flex; flex-direction:column; gap:4px; padding:4px 0 0; }
.cm-jscan-avis[hidden]{ display:none; }
.cm-jscan-un{ display:flex; align-items:center; gap:8px; font-size:13px; color:inherit; text-decoration:none; padding:5px 4px; border-radius:var(--r3); }
.cm-jscan-un:hover{ background:var(--surf2); }
.cm-publier-fiche{ color:var(--accent); }
.cm-boutons-g{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.cm-interrupteur{ display:flex; align-items:flex-start; gap:10px; font-size:14px; font-weight:600; cursor:pointer; padding:4px 0; }
.cm-interrupteur input{ width:20px; height:20px; flex:0 0 auto; margin:1px 0 0; accent-color:var(--accent); }
.cm-carte-profil{ height:280px; border-radius:var(--r2); overflow:hidden; border:1px solid var(--bord); background:var(--surf2); }
.cm-pop p{ margin:0 0 6px; font:13px/1.4 'Inter',sans-serif; }
.cm-signal.traite{ opacity:.7; }
.cm-signal-contenu{ background:var(--surf2); border-radius:var(--r3); padding:8px 10px; font-size:14px; }
@media (max-width:520px){
  .cm-com.rep{ margin-left:22px; }
  .cm-carte-profil{ height:220px; }
  .cm-tete .cm-traduire{ padding:6px 4px; font-size:12px; }
}
.cm-bloc > .cm-sous-titre:first-child{ margin-top:0; }
/* Photo dans un commentaire */
.cm-com-photo{ display:block; max-width:min(260px, 100%); max-height:220px; object-fit:cover; border-radius:var(--r3); margin-top:6px; border:1px solid var(--bord); background:var(--surf); cursor:zoom-in; }
.cm-com-photo.grand{ max-width:100%; max-height:none; object-fit:contain; cursor:zoom-out; }
.cm-carte-com .cm-com-photo{ margin-top:10px; }
.cm-com-form .cm-com-photo-btn{ width:40px; height:40px; flex:0 0 auto; }
.cm-com-form .cm-com-photo-btn.on{ background:var(--accent-fond); }
.cm-com-apercu{ position:relative; align-self:flex-start; margin-bottom:-4px; }
.cm-com-apercu[hidden]{ display:none; }
.cm-com-apercu img{ display:block; width:84px; height:84px; object-fit:cover; border-radius:var(--r3); border:1px solid var(--bord); }

/* compteur de caracteres du champ « Partager une trouvaille » */
.cm-compteur { margin: 4px 2px 0; text-align: right; font-size: 12px; color: var(--txt2); }
.cm-compteur.plein { color: var(--danger); font-weight: 600; }

/* ---- Mise en forme des publications : barre d'outils, apercu, polices ---- */
.cm-outils{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:6px 0 0 52px; }
.cm-outil{ min-width:34px; height:32px; padding:0 8px; border:1px solid var(--bord); border-radius:var(--r); background:var(--surf); color:var(--txt);
  font:inherit; font-size:14px; cursor:pointer; line-height:1; }
.cm-outil:hover{ background:var(--surf2); }
.cm-outil:focus-visible, .cm-police:focus-visible{ outline:2px solid var(--prim); outline-offset:1px; }
.cm-outil-f_gras{ font-weight:800; }
.cm-outil-f_ital{ font-style:italic; font-family:Georgia, 'Times New Roman', serif; }
.cm-outil-f_barre{ text-decoration:line-through; }
.cm-police{ width:auto; flex:0 1 auto; height:32px; max-width:100%; padding:0 8px; border:1px solid var(--bord); border-radius:var(--r); background:var(--surf); color:var(--txt); font:inherit; font-size:13.5px; }
.cm-apercu-texte{ margin:8px 0 0 52px; padding:10px 12px; border:1px dashed var(--bord-fort); border-radius:var(--r); background:var(--surf2);
  white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; line-height:1.5; color:var(--txt); }
.cm-apercu-titre{ display:block; margin-bottom:4px; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--txt2); font-family:inherit; font-style:normal; }
.cm-texte strong, .cm-com-texte strong, .cm-apercu-texte strong{ font-weight:700; }
.cm-texte s, .cm-com-texte s, .cm-apercu-texte s{ text-decoration-thickness:1.5px; }
/* polices au choix (polices du systeme : rien a telecharger) */
.police-serif{ font-family:Georgia, 'Times New Roman', Times, serif !important; }
.police-mono{ font-family:'Courier New', Courier, 'Liberation Mono', monospace !important; }
.police-manus{ font-family:'Segoe Print', 'Bradley Hand', 'Snell Roundhand', 'Comic Sans MS', cursive !important; }
@media (max-width:520px){ .cm-outils, .cm-apercu-texte{ margin-left:0; } }

/* ===== v31 : barre (retour, carte, feed, profil, cloche, langue, roue), bulle, menu, parametres ===== */
.cm-barre-in{ max-width:760px; }
.cm-retour{ border:none; background:none; cursor:pointer; font-family:inherit; }
.cm-nav{ margin-left:auto; }
.cm-barre-outils{ position:relative; display:flex; align-items:center; gap:4px; }
.cm-icone-barre{ position:relative; width:42px; height:42px; flex:0 0 auto; border:none; border-radius:50%; background:none; color:var(--txt2);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; touch-action:manipulation; }
.cm-icone-barre:hover, .cm-icone-barre[aria-expanded="true"]{ background:var(--surf2); color:var(--txt); }
.cm-icone-barre.on{ background:var(--prim); color:var(--sur-prim); }
.cm-icone-barre:focus-visible, .cm-nav a:focus-visible, .cm-retour:focus-visible{ outline:2px solid var(--prim); outline-offset:2px; }
.cm-icone-barre[hidden]{ display:none; }
.cm-icone-barre .cm-pastille{ top:1px; right:1px; }
/* bulle des notifications et menu des reglages : sous la barre, a droite */
.cm-bulle, .cm-menu-reglages{ position:absolute; right:0; top:48px; z-index:40; background:var(--surf); border:1px solid var(--bord-fort);
  border-radius:var(--r); box-shadow:0 14px 40px rgba(0,0,0,.18); }
.cm-bulle{ width:360px; max-width:calc(100vw - 16px); padding:10px; display:flex; flex-direction:column; gap:8px; }
.cm-bulle-tete{ display:flex; align-items:center; justify-content:space-between; padding:2px 6px; font-size:15px; }
.cm-bulle-liste{ max-height:min(60vh, 440px); overflow-y:auto; overscroll-behavior:contain; }
.cm-bulle-liste .cm-vide{ padding:18px 10px; }
.cm-bulle-gerer{ width:100%; min-height:42px; }
.cm-menu-reglages{ min-width:250px; padding:6px; display:flex; flex-direction:column; }
.cm-menu-reglages .cm-menu-item{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; }
.cm-menu-ic{ display:inline-flex; width:20px; justify-content:center; color:var(--txt2); flex:0 0 auto; }
.cm-menu-item.danger .cm-menu-ic{ color:var(--danger); }
.cm-menu-sep{ height:1px; background:var(--bord); margin:5px 6px; }
/* lignes de notification (bulle et page) */
.cm-notif-ligne{ display:flex; align-items:center; gap:4px; border-radius:var(--r2); }
.cm-notif-ligne + .cm-notif-ligne{ border-top:1px solid var(--bord); }
.cm-notif-ligne.nouveau{ background:var(--accent-fond); }
.cm-notif-ligne .cm-notif{ flex:1 1 auto; min-width:0; }
.cm-notif-ligne .cm-notif + .cm-notif{ border-top:none; }
.cm-notif-ligne .cm-notif.nouveau{ background:none; }
.cm-notif-suppr{ flex:0 0 auto; width:40px; height:40px; border:none; background:none; color:var(--txt3); border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; margin-right:4px; }
.cm-notif-suppr:hover{ background:var(--surf2); color:var(--danger); }
.cm-notifs-haut{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:0 4px 10px; }
.cm-onglets-petits{ margin:0; }
.cm-notifs-act{ display:flex; gap:14px; }
.cm-notifs-act [hidden]{ display:none; }
.cm-notifs-prefs{ display:inline-block; margin:2px 4px; }
.cm-lien-param{ display:inline-block; margin:14px 4px 0; text-decoration:none; }
/* page parametres */
.cm-param .cm-sous-titre{ margin:0 0 12px; }
.cm-param-ligne{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 0; }
.cm-param-ligne + .cm-param-ligne{ border-top:1px solid var(--bord); }
.cm-param-lab{ display:flex; flex-direction:column; gap:2px; font-weight:600; font-size:14px; }
.cm-param-lab small{ font-weight:400; color:var(--txt2); }
.cm-segment{ display:inline-flex; padding:3px; gap:3px; border-radius:999px; background:var(--surf2); border:1px solid var(--bord); }
.cm-segment-b{ border:none; background:none; color:var(--txt2); font:600 13.5px 'Inter',sans-serif; padding:8px 14px; min-height:38px; border-radius:999px; cursor:pointer; }
.cm-segment-b.on{ background:var(--surf); color:var(--txt); box-shadow:0 1px 3px rgba(0,0,0,.14); }
.cm-segment-b:focus-visible{ outline:2px solid var(--prim); outline-offset:1px; }
.cm-p-langue{ width:auto; min-width:150px; }
.cm-param-photo{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.cm-param-photo .cm-av{ width:64px; height:64px; font-size:24px; }
.cm-param-photo-txt{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.cm-param-form .cm-btn{ margin-top:6px; }
.cm-param-form input[readonly]{ opacity:.75; }
.cm-param-inter{ padding:8px 0; }
.cm-param-sous{ margin:0 0 6px; }
.cm-param-sous .cm-sous-titre{ font-size:14px; margin:0 0 6px; }
.cm-param-export{ border-top:1px solid var(--bord); margin-top:10px; padding-top:10px; }
.cm-param-export .cm-btn{ margin-top:8px; }
.cm-param-lien{ display:flex; align-items:center; gap:10px; padding:12px 4px; text-decoration:none; color:var(--txt); font-weight:600; font-size:14px; border-radius:var(--r3); }
.cm-param-lien + .cm-param-lien{ border-top:1px solid var(--bord); }
.cm-param-lien:hover{ background:var(--surf2); }
.cm-param-suppr{ margin-top:10px; }
.cm-param-suppr-conf{ margin-top:6px; padding:12px; border:1px solid var(--danger); border-radius:var(--r2); }
.cm-param-suppr-conf[hidden]{ display:none; }
.cm-btn.danger{ background:var(--danger); color:#fff; }
/* traduction en cours : petits points animes */
.cm-traduire.en-cours{ cursor:progress; color:var(--txt2); }
.cm-traduire.en-cours::after{ content:''; display:inline-block; width:12px; height:12px; margin-left:6px; vertical-align:-2px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent; animation:cm-tourne .8s linear infinite; }
.cm-traduire.meme{ color:var(--txt3); cursor:default; }
@keyframes cm-tourne{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .cm-traduire.en-cours::after{ animation:none; } }
@media (max-width:560px){
  .cm-nav a:not(.on) span{ display:none; }
  .cm-nav a{ padding:8px 10px; }
  .cm-icone-barre{ width:40px; height:40px; }
  .cm-langue{ padding:6px 4px; }
  .cm-bulle, .cm-menu-reglages{ position:fixed; left:8px; right:8px; top:60px; width:auto; max-width:none; }
}
@media (max-width:400px){
  .cm-nav a span{ display:none; }
  .cm-nav{ gap:2px; }
  .cm-barre-in{ gap:2px; }
}

/* =====================================================================
   v32 : audience, abonnements, messages prives, carnet
   ===================================================================== */
/* audience d'une publication (badge dans l'en-tete, choix a l'ecriture) */
.cm-aud{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--txt2); background:var(--surf2);
  border-radius:999px; padding:3px 8px; margin-left:6px; white-space:nowrap; align-self:center; }
.cm-aud svg{ flex:0 0 auto; }
.cm-aud-moi{ color:var(--accent2); }
.cm-audience{ width:auto; flex:0 1 auto; min-height:40px; border-radius:999px; padding:6px 10px; font:600 13px 'Inter',sans-serif; margin-left:auto; }
.cm-audience + .cm-btn{ margin-left:8px; }
.cm-aud-choix{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid var(--bord); background:var(--surf); color:var(--txt);
  border-radius:var(--r2); padding:12px 14px; margin:0 0 8px; cursor:pointer; font:inherit; min-height:52px; }
.cm-aud-choix span{ display:flex; flex-direction:column; }
.cm-aud-choix small{ color:var(--txt2); font-size:12.5px; }
.cm-aud-choix.on{ border-color:var(--prim); background:var(--accent-fond); }
.cm-aud-choix:hover{ background:var(--surf2); }
/* abonnes, abonnements, suivre */
.cm-social{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:12px; font-size:14px; color:var(--txt2); }
.cm-social-n{ border:none; background:none; padding:4px 0; font:inherit; color:var(--txt2); }
button.cm-social-n{ cursor:pointer; }
button.cm-social-n:hover{ text-decoration:underline; }
.cm-social-n b{ color:var(--txt); margin-right:3px; }
.cm-social-dem{ color:var(--accent2); font-weight:700; }
.cm-actions-social{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.cm-actions-social .cm-btn{ min-width:120px; }
.cm-btn-msg{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.cm-partager-ouvrir{ display:flex; align-items:center; gap:12px; width:100%; border:none; background:none; color:var(--txt3); font:inherit; font-size:15px; cursor:text; text-align:left; padding:2px; min-height:44px; }
.cm-modal-liste{ max-width:460px; }
.cm-ls-ligne{ display:flex; align-items:center; gap:8px; padding:8px 0; }
.cm-ls-ligne + .cm-ls-ligne{ border-top:1px solid var(--bord); }
.cm-ls-qui{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; text-decoration:none; color:var(--txt); }
.cm-ls-qui b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-ls-ligne .cm-btn{ min-height:36px; padding:6px 14px; }
.cm-demandes .cm-sous-titre{ margin:0 0 6px; }
.cm-param-listes{ border-top:1px solid var(--bord); margin-top:6px; padding-top:4px; }
.cm-param-listes .cm-param-lien{ width:100%; border:none; background:none; cursor:pointer; font-family:inherit; text-align:left; }
/* carnet : compteurs remis a zero, selection des scans */
.cm-stats-w{ margin-bottom:14px; }
.cm-stats-w .cm-stats{ margin-bottom:6px; }
.cm-stats-pied{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 14px; font-size:12.5px; color:var(--txt2); padding:0 2px; }
.cm-stats-pied .cm-lien{ font-size:12.5px; }
.cm-jscan-case{ width:20px; height:20px; flex:0 0 auto; accent-color:var(--prim); margin:0; }
.cm-jscan-ligne .cm-jscan-txt{ flex:1 1 220px; min-width:0; }
.cm-jscan .cm-rep-barre{ margin-bottom:4px; }
/* administration : conversation signalee */
.cm-adm-conv{ margin:10px 0; padding:10px; border:1px solid var(--bord-fort); border-radius:var(--r2); background:var(--surf2); max-height:420px; overflow:auto; }
.cm-adm-msg{ padding:6px 0; border-top:1px solid var(--bord); }
.cm-adm-msg b{ font-size:12px; color:var(--txt2); }
.cm-adm-msg p{ margin:2px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---- Page Messages : deux volets (conversations | conversation) ---- */
body[data-page="messages"] .cm-barre-in{ max-width:1040px; }
.cm-page.cm-page-msgs{ max-width:1040px; padding:12px 12px 0; }
.cm-msgs{ display:grid; grid-template-columns:minmax(260px, 340px) 1fr; height:calc(100vh - 58px - 24px); height:calc(100dvh - 58px - 24px); min-height:420px;
  background:var(--surf); border:1px solid var(--bord); border-radius:var(--r); overflow:hidden; }
.cm-msgs-gauche{ position:relative; display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--bord); }
.cm-msgs-tete{ display:flex; align-items:center; gap:10px; padding:12px 12px 8px; }
.cm-msgs-moi .cm-av{ width:34px; height:34px; font-size:14px; }
.cm-msgs-titre{ flex:1 1 auto; margin:0; font-size:20px; font-weight:800; }
.cm-msgs-nouveau, .cm-msgs-retour{ width:40px; height:40px; border:none; border-radius:50%; background:none; color:var(--txt); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.cm-msgs-nouveau:hover, .cm-msgs-retour:hover{ background:var(--surf2); }
.cm-msgs-recherche{ display:flex; align-items:center; gap:8px; margin:0 12px 8px; padding:0 14px; background:var(--surf2); border-radius:999px; min-height:42px; color:var(--txt3); }
.cm-msgs-recherche input{ border:none; background:none; padding:10px 0; min-height:40px; font-size:15px; color:var(--txt); flex:1 1 auto; min-width:0; outline:none; }
.cm-msgs-recherche:focus-within{ box-shadow:0 0 0 2px var(--prim); }
.cm-msgs-loupe{ display:inline-flex; flex:0 0 auto; }
.cm-msgs-liste, .cm-msgs-contacts{ overflow-y:auto; }
.cm-msgs-liste{ flex:0 1 auto; }
.cm-msgs-contacts{ flex:1 1 auto; min-height:0; padding-bottom:84px; }
.cm-msgs-gauche{ overflow-y:auto; }
.cm-msgs-conv, .cm-msgs-contact{ display:flex; align-items:center; gap:12px; padding:10px 14px; text-decoration:none; color:var(--txt); width:100%; border:none; background:none;
  font:inherit; text-align:left; cursor:pointer; position:relative; min-height:64px; }
.cm-msgs-conv:hover, .cm-msgs-contact:hover{ background:var(--surf2); }
.cm-msgs-conv.on{ background:var(--accent-fond); }
.cm-msgs-conv .cm-av, .cm-msgs-contact .cm-av{ width:46px; height:46px; font-size:18px; flex:0 0 auto; }
.cm-msgs-contact{ min-height:56px; }
.cm-msgs-contact .cm-av{ width:40px; height:40px; font-size:16px; }
.cm-msgs-conv-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cm-msgs-conv-l1{ display:flex; align-items:baseline; gap:8px; }
.cm-msgs-conv-l1 b{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-msgs-date{ flex:0 0 auto; font-size:12.5px; color:var(--txt3); }
.cm-msgs-apercu{ font-size:14px; color:var(--txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-msgs-conv.non-lu .cm-msgs-apercu{ color:var(--txt); font-weight:700; }
.cm-msgs-point{ width:10px; height:10px; border-radius:50%; background:var(--prim); flex:0 0 auto; }
.cm-msgs-sous{ font-size:13px; font-weight:700; color:var(--txt2); text-transform:uppercase; letter-spacing:.04em; margin:14px 14px 4px; }
.cm-msgs-vide{ padding:28px 18px; text-align:center; }
.cm-msgs-vide b{ display:block; font-size:20px; margin-bottom:6px; }
.cm-msgs-vide p{ color:var(--txt2); margin:0 0 14px; font-size:14px; }
.cm-msgs-fab{ display:none; position:absolute; right:16px; bottom:16px; width:58px; height:58px; border:none; border-radius:50%; background:var(--prim); color:var(--sur-prim);
  box-shadow:0 8px 22px rgba(0,0,0,.25); cursor:pointer; align-items:center; justify-content:center; z-index:2; }
.cm-msgs-fab svg{ width:24px; height:24px; }
/* volet droit */
.cm-msgs-droite{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.cm-msgs-choisir{ margin:auto; text-align:center; padding:24px; color:var(--txt2); max-width:340px; }
.cm-msgs-grand svg{ width:44px; height:44px; color:var(--txt3); }
.cm-msgs-ctete{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--bord); min-height:60px; }
.cm-msgs-retour{ display:none; }
.cm-msgs-qui{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; text-decoration:none; color:var(--txt); }
.cm-msgs-qui .cm-av{ width:40px; height:40px; font-size:16px; flex:0 0 auto; }
.cm-msgs-qui > div{ display:flex; flex-direction:column; min-width:0; }
.cm-msgs-qui b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-msgs-chiffre{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--txt3); }
.cm-msgs-fil{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:4px; overscroll-behavior:contain; }
.cm-msgs-jour{ align-self:center; font-size:12px; font-weight:600; color:var(--txt3); margin:12px 0 6px; text-transform:capitalize; }
.cm-msgs-bulle{ position:relative; max-width:min(78%, 520px); padding:8px 12px 6px; border-radius:18px; overflow-wrap:anywhere; }
.cm-msgs-bulle p{ margin:0; white-space:pre-wrap; font-size:15px; line-height:1.4; }
.cm-msgs-bulle.moi{ align-self:flex-end; background:var(--prim); color:var(--sur-prim); border-bottom-right-radius:6px; cursor:pointer; }
.cm-msgs-bulle.autre{ align-self:flex-start; background:var(--surf2); color:var(--txt); border-bottom-left-radius:6px; }
.cm-msgs-heure{ display:block; text-align:right; font-size:11px; opacity:.7; margin-top:2px; }
.cm-msgs-suppr{ display:none; position:absolute; left:-44px; top:50%; transform:translateY(-50%); width:36px; height:36px; border:none; border-radius:50%;
  background:var(--surf2); color:var(--danger); cursor:pointer; align-items:center; justify-content:center; }
.cm-msgs-bulle.moi:hover .cm-msgs-suppr, .cm-msgs-bulle.sel .cm-msgs-suppr, .cm-msgs-suppr:focus-visible{ display:inline-flex; }
.cm-msgs-vu{ align-self:flex-end; font-size:11.5px; color:var(--txt3); margin:0 4px 2px; }
.cm-msgs-anciens{ align-self:center; margin-bottom:8px; }
.cm-msgs-bas{ border-top:1px solid var(--bord); padding:8px 10px; padding-bottom:max(8px, env(safe-area-inset-bottom)); }
.cm-msgs-form{ display:flex; align-items:flex-end; gap:8px; }
.cm-msgs-form textarea{ flex:1 1 auto; resize:none; min-height:44px; max-height:160px; border-radius:22px; padding:11px 16px; font-size:15px; line-height:1.4; margin:0; }
.cm-msgs-envoyer{ width:44px; height:44px; flex:0 0 auto; border:none; border-radius:50%; background:var(--prim); color:var(--sur-prim); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.cm-msgs-envoyer:disabled{ opacity:.4; cursor:default; }
.cm-msgs-ferme{ margin:4px 6px; font-size:13.5px; color:var(--txt2); text-align:center; }
.cm-msgs-ctete .cm-menu{ right:0; left:auto; }
/* fenetre « Nouvelle discussion » */
.cm-msgs-nouvelle{ max-width:460px; padding:12px 0 6px; display:flex; flex-direction:column; max-height:min(640px, calc(100vh - 32px)); }
.cm-msgs-ntete{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 12px 10px; }
.cm-msgs-ntete .cm-sous-titre{ margin:0; font-size:17px; }
.cm-msgs-ntete .cm-lien{ justify-self:start; }
.cm-msgs-nouvelle .cm-msgs-recherche{ margin:0 12px 6px; }
.cm-msgs-nliste{ overflow-y:auto; flex:1 1 auto; min-height:120px; border-top:1px solid var(--bord); }
/* telephone : un volet a la fois, comme une appli */
@media (max-width:760px){
  .cm-page.cm-page-msgs{ padding:0; }
  .cm-msgs{ grid-template-columns:1fr; border:none; border-radius:0; height:calc(100vh - 58px); height:calc(100dvh - 58px); }
  .cm-msgs-gauche{ border-right:none; }
  .cm-msgs-droite{ display:none; }
  .cm-msgs.conv-ouverte .cm-msgs-gauche{ display:none; }
  .cm-msgs.conv-ouverte .cm-msgs-droite{ display:flex; }
  .cm-msgs-retour{ display:inline-flex; }
  .cm-msgs-fab{ display:inline-flex; position:fixed; bottom:max(18px, env(safe-area-inset-bottom)); }
  .cm-msgs-nouveau{ display:none; }
  .cm-msgs-bulle{ max-width:84%; }
  .cm-msgs-nouvelle{ max-width:none; height:100%; max-height:none; border-radius:0; }
  .cm-modal-fond:has(.cm-msgs-nouvelle){ padding:0; align-items:stretch; }
}
@media (max-width:400px){
  .cm-retour span{ display:none; }
}
.cm-jscan .cm-rep-tout span, .cm-reperes .cm-rep-tout span{ white-space:nowrap; }
/* admin : messages par jour */
.cm-adm-msgs .cm-sous-titre{ margin:0 0 12px; }
.cm-adm-jours{ display:flex; align-items:flex-end; gap:4px; height:130px; padding-top:6px; }
.cm-adm-jour{ flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px; }
.cm-adm-barre{ display:block; width:100%; max-width:26px; min-height:2px; background:var(--prim); border-radius:4px 4px 0 0; }
.cm-adm-n{ font-size:10.5px; font-weight:700; color:var(--txt2); }
.cm-adm-j{ font-size:10px; color:var(--txt3); white-space:nowrap; }