/* ==========================================================================
   360RTF — La communauté.
   Les couleurs, les polices et les rayons viennent de rtf.css : rien n'est
   redefini ici, tout est herite. Cette feuille ne decrit que la mise en page
   des salons, du fil et de la saisie.
   ========================================================================== */

/* Le navigateur cache un element porteur de [hidden] par un display:none de
   faible poids : la moindre regle display: de cette feuille l emporterait, et
   la pastille a zero, l apercu de photo ou le bandeau de reponse resteraient
   visibles. Une seule regle, en tete, tranche pour tout le module. */
.rtf-chat [hidden],
.rtf-chat-pastille[hidden]{display:none !important}

.rtf-chat{
  --chat-fil:72vh;
  --chat-rail:288px;
  max-width:1240px;
  margin:0 auto;
  padding:calc(var(--rtf-entete) + 40px) 20px 60px; /* l en-tete du site est fixe : on passe dessous sinon */
}

/* --------------------------------------------------------------------------
   En-tete
   -------------------------------------------------------------------------- */

.rtf-chat-tete{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:26px;
}

.rtf-chat-surtitre{
  font-family:var(--rtf-label);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--rtf-accent);
  margin:0 0 6px;
}

.rtf-chat-titre{
  font-size:clamp(30px,4.4vw,46px);
  margin:0;
}

.rtf-chat-retour{
  font-family:var(--rtf-label);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rtf-ink-muted);
  text-decoration:none;
  border-bottom:1px solid var(--rtf-line);
  padding-bottom:3px;
  transition:color .22s var(--rtf-ease),border-color .22s var(--rtf-ease);
}
.rtf-chat-retour:hover{color:var(--rtf-accent);border-color:var(--rtf-accent)}

/* --------------------------------------------------------------------------
   La grille : le rail des salons, puis le salon ouvert
   -------------------------------------------------------------------------- */

/* Trois blocs, deux colonnes : le rail des salons et le panneau latéral
   l'un sous l'autre à gauche, le salon ouvert à droite sur toute la hauteur.
   L'ordre du HTML — rail, salon, panneau — est celui du téléphone, et c'est
   celui qu'un lecteur d'écran suit. */
.rtf-chat-grille{
  display:grid;
  grid-template-columns:var(--chat-rail) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.rtf-chat-salons{grid-column:1;grid-row:1}
.rtf-chat-vue{grid-column:2;grid-row:1 / span 2}
.rtf-chat-cote{grid-column:1;grid-row:2;min-width:0}

/* --------------------------------------------------------------------------
   Le rail
   -------------------------------------------------------------------------- */

/* Pas de position:sticky ici. Le rail et le panneau des participants
   partagent la colonne de gauche : un rail collant glisse par-dessus le
   panneau des qu on descend, et recouvre la liste. Le fil ayant son propre
   defilement, la page bouge de toute facon tres peu. */
.rtf-chat-salons{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:calc(100vh - 260px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--rtf-line) transparent;
  padding-right:2px;
}
.rtf-chat-salons::-webkit-scrollbar{width:8px}
.rtf-chat-salons::-webkit-scrollbar-thumb{background:var(--rtf-line);border-radius:99px}

/* Le titre qui sépare les salons du club de ceux des sorties */
.rtf-chat-famille{
  margin:12px 0 2px;
  padding:0 2px;
  font-family:var(--rtf-label);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rtf-ink-muted);
}

/* Un salon de sortie déjà passée : présent, lisible, mais éteint */
.rtf-chat-salon.est-clos{opacity:.7}
.rtf-chat-salon.est-clos .rtf-chat-salon-txt small{font-style:italic}

/* Le renvoi vers la fiche de la sortie, dans l'en-tête du salon */
.rtf-chat-vers-sortie{
  flex:0 0 auto;
  font-family:var(--rtf-label);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rtf-ink-muted);
  text-decoration:none;
  border:1px solid var(--rtf-line);
  border-radius:999px;
  padding:7px 14px;
  white-space:nowrap;
  transition:color .2s var(--rtf-ease),border-color .2s var(--rtf-ease);
}
.rtf-chat-vers-sortie:hover{color:var(--rtf-accent);border-color:var(--rtf-accent)}

.rtf-chat-salon{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  padding:14px 14px;
  background:var(--rtf-panel);
  border:1px solid var(--rtf-line);
  border-left:3px solid transparent;
  border-radius:var(--rtf-r-md);
  color:var(--rtf-ink);
  cursor:pointer;
  font-family:inherit;
  transition:border-color .2s var(--rtf-ease),background .2s var(--rtf-ease),transform .12s var(--rtf-ease);
}
.rtf-chat-salon:hover{background:var(--rtf-panel-2);border-left-color:var(--rtf-ink-muted)}
.rtf-chat-salon:active{transform:translateY(1px)}

.rtf-chat-salon.est-actif{background:var(--rtf-panel-2);border-left-color:var(--rtf-accent)}
.rtf-chat-salon.est-or.est-actif{border-left-color:var(--rtf-or)}
.rtf-chat-salon.est-neutre.est-actif{border-left-color:var(--rtf-ink-muted)}

.rtf-chat-salon-i{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:var(--rtf-r-sm);
  background:rgba(255,255,255,.04);
  color:var(--rtf-ink-muted);
}
.rtf-chat-salon.est-actif .rtf-chat-salon-i{color:var(--rtf-accent)}
.rtf-chat-salon.est-or .rtf-chat-salon-i{color:var(--rtf-or)}

/* La photo de la sortie remplace l icone : on reconnait un week-end a son
   paysage bien avant de lire son titre. */
.rtf-chat-salon-i.est-photo{
  padding:0;
  overflow:hidden;
  background:var(--rtf-canvas-2);
  border:1px solid var(--rtf-line);
}
.rtf-chat-salon-i.est-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.85) brightness(.85);
  transition:filter .22s var(--rtf-ease);
}
.rtf-chat-salon:hover .rtf-chat-salon-i.est-photo img,
.rtf-chat-salon.est-actif .rtf-chat-salon-i.est-photo img{filter:none}
.rtf-chat-salon.est-actif .rtf-chat-salon-i.est-photo{border-color:var(--rtf-accent)}
.rtf-chat-salon.est-or.est-actif .rtf-chat-salon-i.est-photo{border-color:var(--rtf-or)}

.rtf-chat-salon-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.rtf-chat-salon-txt b{
  font-family:var(--rtf-display);
  font-weight:800;
  font-size:19px;
  letter-spacing:.01em;
  line-height:1.1;
}
/* Deux morceaux sur une ligne etroite : le resume cede la place, l effectif
   jamais. Sans ce partage, « Le salon de tous les membres du club… » mangeait
   le nombre, qui est justement l information qu on vient chercher. */
.rtf-chat-salon-txt small{
  display:flex;
  align-items:baseline;
  font-size:12px;
  color:var(--rtf-ink-muted);
  line-height:1.3;
  min-width:0;
}

.rtf-chat-salon-quoi{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* L effectif du groupe, a droite de la date ou du resume. */
.rtf-chat-salon-qui{
  flex:0 0 auto;
  white-space:nowrap;
  color:var(--rtf-ink);
  opacity:.75;
}
.rtf-chat-salon-quoi + .rtf-chat-salon-qui::before{
  content:"·";
  margin:0 5px;
  opacity:.55;
}
.rtf-chat-salon.est-or .rtf-chat-salon-qui{color:var(--rtf-or)}

.rtf-chat-salon-n{
  min-width:22px;
  height:22px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--rtf-accent-solid);
  color:#fff;
  font-family:var(--rtf-label);
  font-size:11px;
  font-weight:700;
}
.rtf-chat-salon-n.est-mention{background:var(--rtf-or-solid);color:#15140e}

.rtf-chat-salon.est-ferme{
  cursor:default;
  opacity:.55;
  border-style:dashed;
}
.rtf-chat-salon.est-ferme:hover{background:var(--rtf-panel);border-left-color:transparent}

.rtf-chat-passer{
  display:block;
  padding:11px 14px;
  border:1px solid var(--rtf-or-solid);
  border-radius:var(--rtf-r-sm);
  background:var(--rtf-or-sourd);
  color:var(--rtf-or);
  font-family:var(--rtf-label);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  transition:background .2s var(--rtf-ease);
}
.rtf-chat-passer:hover{background:rgba(227,197,103,.18);color:var(--rtf-or)}

/* La presence */

.rtf-chat-presence{
  margin-top:10px;
  padding:14px;
  background:var(--rtf-panel);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-md);
}
.rtf-chat-presence-titre{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  font-family:var(--rtf-label);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rtf-ink-muted);
}
.rtf-chat-point{
  width:8px;height:8px;border-radius:50%;
  background:var(--rtf-ok);
  box-shadow:0 0 0 3px var(--rtf-ok-sourd);
}
.rtf-chat-presence ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rtf-chat-presence li{
  display:flex;align-items:center;gap:6px;
  padding:4px 9px 4px 4px;
  border-radius:999px;
  background:var(--rtf-panel-2);
  font-size:12.5px;
  color:var(--rtf-ink);
}

/* --------------------------------------------------------------------------
   Le salon ouvert
   -------------------------------------------------------------------------- */

.rtf-chat-vue{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--rtf-panel);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-md);
  overflow:hidden;
  position:relative;
}

.rtf-chat-vue-tete{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--rtf-line);
  background:var(--rtf-canvas-2);
}
.rtf-chat-vue-tete h2{font-size:23px;margin:0 0 3px}
.rtf-chat-vue-tete p{margin:0;font-size:13px;color:var(--rtf-ink-muted);line-height:1.4}

.rtf-chat-etat{
  margin:0;
  flex:0 0 auto;
  font-family:var(--rtf-label);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rtf-ink-muted);
  text-align:right;
}

/* --------------------------------------------------------------------------
   Le fil
   -------------------------------------------------------------------------- */

.rtf-chat-fil{
  height:var(--chat-fil);
  min-height:340px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:18px 20px 8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  scrollbar-width:thin;
  scrollbar-color:var(--rtf-line) transparent;
  overscroll-behavior:contain;
}
.rtf-chat-fil::-webkit-scrollbar{width:10px}
.rtf-chat-fil::-webkit-scrollbar-thumb{background:var(--rtf-line);border-radius:99px;border:3px solid var(--rtf-panel)}

.rtf-chat-chargement,
.rtf-chat-vide{
  margin:auto;
  text-align:center;
  color:var(--rtf-ink-muted);
  font-size:14px;
  max-width:36ch;
  line-height:1.6;
}

.rtf-chat-plus{
  align-self:center;
  margin:4px 0 12px;
  padding:8px 16px;
  background:transparent;
  border:1px solid var(--rtf-line);
  border-radius:999px;
  color:var(--rtf-ink-muted);
  font-family:var(--rtf-label);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.rtf-chat-plus:hover{color:var(--rtf-ink);border-color:var(--rtf-ink-muted)}

.rtf-chat-jour{
  align-self:center;
  margin:14px 0 10px;
  padding:3px 12px;
  border-radius:999px;
  background:var(--rtf-canvas-2);
  border:1px solid var(--rtf-line);
  font-family:var(--rtf-label);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rtf-ink-muted);
}

/* Un message */

.rtf-chat-msg{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:12px;
  padding:7px 8px 7px 4px;
  border-radius:var(--rtf-r-sm);
  position:relative;
  transition:background .18s var(--rtf-ease);
}
.rtf-chat-msg:hover{background:rgba(255,255,255,.02)}
.rtf-chat-msg.est-suite{padding-top:1px}
/* L avatar reste dans la grille, invisible : le retirer ferait glisser la
   colonne de texte dans ses 38 px, et le message se lirait lettre par lettre. */
.rtf-chat-msg.est-suite .rtf-chat-av{visibility:hidden}
.rtf-chat-msg.est-suite .rtf-chat-meta{display:none}
.rtf-chat-msg.est-mention{background:var(--rtf-or-sourd);box-shadow:inset 2px 0 0 var(--rtf-or)}
.rtf-chat-msg.est-neuf{animation:rtf-chat-entre .34s var(--rtf-ease) both}

@keyframes rtf-chat-entre{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

.rtf-chat-av{
  width:38px;height:38px;
  border-radius:50%;
  overflow:hidden;
  background:var(--rtf-panel-2);
  border:1px solid var(--rtf-line);
  display:grid;place-items:center;
  font-family:var(--rtf-label);
  font-size:12.5px;
  font-weight:700;
  color:var(--rtf-ink-muted);
  flex:0 0 38px;
}
.rtf-chat-av img{width:100%;height:100%;object-fit:cover;display:block}
.rtf-chat-av.est-premium{border-color:var(--rtf-or-solid);color:var(--rtf-or)}
.rtf-chat-av.est-bureau{border-color:var(--rtf-accent-solid);color:var(--rtf-accent)}

.rtf-chat-corps-col{min-width:0}

.rtf-chat-meta{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 3px;
}
.rtf-chat-nom{
  font-family:var(--rtf-display);
  font-weight:800;
  font-size:17px;
  letter-spacing:.01em;
}
/* Le nom prend une teinte propre a chaque membre, comme WhatsApp : dix
   teintes lisibles sur fond sombre, sans rouge (la marque) ni or (Premium).
   Le rang se lit sur l anneau de l avatar, jamais sur le nom. Ce sont les
   seules couleurs definies dans cette feuille, elles n ont pas d autre usage. */
.rtf-chat-nom.teinte-1{color:#FF9B6A}  /* corail */
.rtf-chat-nom.teinte-2{color:#8AD860}  /* vert pomme */
.rtf-chat-nom.teinte-3{color:#6EDBA0}  /* menthe */
.rtf-chat-nom.teinte-4{color:#3EC8B0}  /* turquoise */
.rtf-chat-nom.teinte-5{color:#4FD3E6}  /* cyan */
.rtf-chat-nom.teinte-6{color:#6CB4FF}  /* bleu ciel */
.rtf-chat-nom.teinte-7{color:#8FA3FF}  /* pervenche */
.rtf-chat-nom.teinte-8{color:#B48CFF}  /* violet */
.rtf-chat-nom.teinte-9{color:#E39BFF}  /* mauve */
.rtf-chat-nom.teinte-10{color:#FF8FBF} /* rose */
.rtf-chat-badge{
  font-family:var(--rtf-label);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid currentColor;
}
.rtf-chat-badge.est-premium{color:var(--rtf-or)}
.rtf-chat-badge.est-bureau{color:var(--rtf-accent)}
.rtf-chat-badge.est-role{color:var(--rtf-ok)}
.rtf-chat-heure{font-size:11.5px;color:var(--rtf-ink-muted);font-variant-numeric:tabular-nums}

.rtf-chat-cite{
  margin:0 0 5px;
  padding:6px 10px;
  border-left:2px solid var(--rtf-line);
  background:rgba(255,255,255,.02);
  border-radius:0 var(--rtf-r-sm) var(--rtf-r-sm) 0;
  font-size:12.5px;
  color:var(--rtf-ink-muted);
  cursor:pointer;
}
.rtf-chat-cite:hover{border-left-color:var(--rtf-accent);color:var(--rtf-ink)}
.rtf-chat-cite b{color:var(--rtf-ink);font-weight:600}

.rtf-chat-texte{
  margin:0;
  font-size:15px;
  line-height:1.55;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}
.rtf-chat-texte a{color:var(--rtf-accent);text-decoration:underline;text-underline-offset:2px}
.rtf-chat-mention{
  color:var(--rtf-accent);
  background:rgba(255,26,26,.08);
  padding:0 3px;
  border-radius:3px;
  font-weight:600;
}
.rtf-chat-mention.est-moi{color:var(--rtf-or);background:var(--rtf-or-sourd)}

.rtf-chat-efface{
  margin:0;
  font-size:13.5px;
  font-style:italic;
  color:var(--rtf-ink-muted);
}

.rtf-chat-image{
  margin:8px 0 0;
  max-width:min(420px,100%);
  border-radius:var(--rtf-r-sm);
  overflow:hidden;
  border:1px solid var(--rtf-line);
  display:block;
}
.rtf-chat-image img{display:block;width:100%;height:auto;cursor:zoom-in}

/* Les reactions */

.rtf-chat-reacs{
  list-style:none;
  margin:7px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.rtf-chat-reac{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 9px;
  border-radius:999px;
  background:var(--rtf-panel-2);
  border:1px solid var(--rtf-line);
  color:var(--rtf-ink-muted);
  font-size:12.5px;
  font-family:var(--rtf-body);
  cursor:pointer;
  line-height:1.7;
  transition:border-color .18s var(--rtf-ease),background .18s var(--rtf-ease);
}
.rtf-chat-reac:hover{border-color:var(--rtf-ink-muted);color:var(--rtf-ink)}
.rtf-chat-reac.est-moi{border-color:var(--rtf-accent);background:rgba(255,26,26,.10);color:var(--rtf-ink)}
.rtf-chat-reac b{font-weight:600;font-variant-numeric:tabular-nums}

/* Les outils d un message : reveles au survol, toujours atteignables au clavier */

.rtf-chat-outils{
  position:absolute;
  top:-10px;
  right:8px;
  display:flex;
  gap:2px;
  padding:3px;
  background:var(--rtf-canvas-2);
  border:1px solid var(--rtf-line);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s var(--rtf-ease);
  z-index:3;
}
.rtf-chat-msg:hover .rtf-chat-outils,
.rtf-chat-msg:focus-within .rtf-chat-outils,
.rtf-chat-outils.est-ouvert{opacity:1;pointer-events:auto}

.rtf-chat-outil{
  width:28px;height:28px;
  display:grid;place-items:center;
  border:0;
  background:transparent;
  border-radius:50%;
  color:var(--rtf-ink-muted);
  cursor:pointer;
  font-size:14px;
  line-height:1;
  padding:0;
}
.rtf-chat-outil:hover{background:var(--rtf-panel-2);color:var(--rtf-ink)}
.rtf-chat-outil.est-danger:hover{color:var(--rtf-ko)}
/* La gomme du bureau : l effacement sans trace se distingue de la corbeille,
   rouge d emblee et non au survol seulement. */
.rtf-chat-outil.est-total{color:var(--rtf-ko)}
.rtf-chat-outil.est-total:hover{background:var(--rtf-ko-sourd);color:var(--rtf-ko)}

/* Le choix d une reaction */

.rtf-chat-palette{
  position:absolute;
  top:22px;
  right:8px;
  display:flex;
  gap:2px;
  padding:5px;
  background:var(--rtf-canvas-2);
  border:1px solid var(--rtf-line);
  border-radius:999px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  z-index:5;
}
.rtf-chat-palette button{
  width:32px;height:32px;
  border:0;background:transparent;
  border-radius:50%;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  padding:0;
  transition:transform .14s var(--rtf-ease),background .14s var(--rtf-ease);
}
.rtf-chat-palette button:hover{background:var(--rtf-panel-2);transform:scale(1.18)}

/* --------------------------------------------------------------------------
   Le bouton « nouveaux messages »
   -------------------------------------------------------------------------- */

.rtf-chat-descendre{
  position:absolute;
  left:50%;
  bottom:132px;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--rtf-accent);
  background:var(--rtf-accent-solid);
  color:#fff;
  font-family:var(--rtf-label);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  z-index:4;
}
.rtf-chat-descendre .rtf-i{transform:rotate(90deg)}

/* --------------------------------------------------------------------------
   La saisie
   -------------------------------------------------------------------------- */

.rtf-chat-saisie{
  border-top:1px solid var(--rtf-line);
  background:var(--rtf-canvas-2);
  padding:12px 16px 14px;
}

.rtf-chat-reponse,
.rtf-chat-photo-apercu{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:9px;
  padding:7px 10px;
  background:var(--rtf-panel);
  border:1px solid var(--rtf-line);
  border-left:2px solid var(--rtf-accent);
  border-radius:var(--rtf-r-sm);
  font-size:12.5px;
  color:var(--rtf-ink-muted);
}
.rtf-chat-reponse span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtf-chat-reponse b{color:var(--rtf-ink)}
.rtf-chat-photo-apercu img{height:56px;width:auto;border-radius:var(--rtf-r-sm);display:block}

.rtf-chat-x{
  width:24px;height:24px;
  flex:0 0 24px;
  border:0;background:transparent;
  color:var(--rtf-ink-muted);
  font-size:19px;
  line-height:1;
  cursor:pointer;
  border-radius:50%;
  padding:0;
}
.rtf-chat-x:hover{background:var(--rtf-panel-2);color:var(--rtf-ko)}

.rtf-chat-ligne{
  display:flex;
  align-items:flex-end;
  gap:9px;
}

.rtf-chat-joindre{
  width:42px;height:42px;
  flex:0 0 42px;
  display:grid;place-items:center;
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-sm);
  background:var(--rtf-panel);
  color:var(--rtf-ink-muted);
  cursor:pointer;
  transition:color .2s var(--rtf-ease),border-color .2s var(--rtf-ease);
}
.rtf-chat-joindre:hover{color:var(--rtf-accent);border-color:var(--rtf-accent)}
.rtf-chat-lu{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.rtf-chat-zone{position:relative;flex:1;min-width:0}

.rtf-chat-zone textarea{
  width:100%;
  min-height:42px;
  max-height:180px;
  resize:none;
  padding:11px 14px;
  background:var(--rtf-panel);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-sm);
  color:var(--rtf-ink);
  font-family:var(--rtf-body);
  font-size:15px;
  line-height:1.45;
  transition:border-color .2s var(--rtf-ease);
}
.rtf-chat-zone textarea:focus{border-color:var(--rtf-accent);outline:none}
.rtf-chat-zone textarea::placeholder{color:var(--rtf-ink-muted);opacity:.75}

.rtf-chat-envoyer{
  width:42px;height:42px;
  flex:0 0 42px;
  display:grid;place-items:center;
  border:0;
  border-radius:var(--rtf-r-sm);
  background:var(--rtf-accent-solid);
  color:#fff;
  cursor:pointer;
  transition:background .2s var(--rtf-ease),opacity .2s var(--rtf-ease);
}
.rtf-chat-envoyer:hover{background:var(--rtf-accent-hover)}
.rtf-chat-envoyer[disabled]{opacity:.4;cursor:not-allowed}

.rtf-chat-erreur{
  margin:9px 0 0;
  padding:8px 12px;
  border-left:2px solid var(--rtf-ko);
  background:var(--rtf-ko-sourd);
  border-radius:0 var(--rtf-r-sm) var(--rtf-r-sm) 0;
  font-size:13px;
  color:var(--rtf-ink);
}

/* La saisie fermee : annonces, suspension, formule insuffisante */

.rtf-chat-ferme-saisie{
  border-top:1px solid var(--rtf-line);
  background:var(--rtf-canvas-2);
  padding:16px 20px;
  margin:0;
  font-size:13.5px;
  color:var(--rtf-ink-muted);
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.5;
}
.rtf-chat-ferme-saisie .rtf-i{flex:0 0 auto;color:var(--rtf-ink-muted)}

/* Le menu des @mentions */

.rtf-chat-mentions{
  position:absolute;
  left:0;
  bottom:calc(100% + 6px);
  width:min(320px,100%);
  max-height:232px;
  overflow-y:auto;
  list-style:none;
  margin:0;
  padding:5px;
  background:var(--rtf-panel-2);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-md);
  box-shadow:0 16px 38px rgba(0,0,0,.55);
  z-index:8;
}
.rtf-chat-mentions li{
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 9px;
  border-radius:var(--rtf-r-sm);
  cursor:pointer;
  font-size:14px;
}
.rtf-chat-mentions li.est-vise,
.rtf-chat-mentions li:hover{background:var(--rtf-accent-solid);color:#fff}
.rtf-chat-mentions .rtf-chat-av{width:26px;height:26px;flex:0 0 26px;font-size:10px}

/* --------------------------------------------------------------------------
   La visionneuse d une photo
   -------------------------------------------------------------------------- */

.rtf-chat-loupe{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(5,6,8,.92);
  border:0;
  cursor:zoom-out;
}
.rtf-chat-loupe img{max-width:100%;max-height:100%;border-radius:var(--rtf-r-sm);display:block}

/* --------------------------------------------------------------------------
   L ecran ferme
   -------------------------------------------------------------------------- */

.rtf-chat-ferme{
  max-width:560px;
  margin:calc(var(--rtf-entete) + 40px) auto 70px;
  padding:44px 32px;
  text-align:center;
  background:var(--rtf-panel);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-md);
}
.rtf-chat-ferme-i{
  display:grid;place-items:center;
  width:64px;height:64px;
  margin:0 auto 20px;
  border-radius:50%;
  background:var(--rtf-canvas-2);
  border:1px solid var(--rtf-line);
  color:var(--rtf-accent);
}
.rtf-chat-ferme h1{font-size:clamp(26px,4vw,34px);margin:0 0 14px}
.rtf-chat-ferme p{color:var(--rtf-ink-muted);line-height:1.65;margin:0 0 22px}
.rtf-chat-ferme-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0}

/* --------------------------------------------------------------------------
   La pastille du menu principal
   -------------------------------------------------------------------------- */

.rtf-chat-pastille{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  margin-left:6px;
  padding:0 5px;
  border-radius:999px;
  background:var(--rtf-accent-solid);
  color:#fff;
  font-family:var(--rtf-label);
  font-size:10px;
  font-weight:700;
  line-height:1;
  vertical-align:middle;
}
.rtf-chat-pastille.est-mention{background:var(--rtf-or-solid);color:#15140e}

/* --------------------------------------------------------------------------
   Tablette et telephone
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  .rtf-chat{--chat-rail:236px}
  /* La place manque : on garde l effectif, qui est l information neuve, et
     on laisse tomber la date — elle est repetee dans l en-tete du salon.
     Sauf quand il n y a pas d effectif a montrer (un membre ne voit pas
     celui du club) : la ligne serait alors vide, on garde le resume. */
  .rtf-chat-salon-quoi{display:none}
  .rtf-chat-salon-txt small.est-seul .rtf-chat-salon-quoi{display:block}
  .rtf-chat-salon-quoi + .rtf-chat-salon-qui::before{content:none;margin:0}
}

@media (max-width:860px){
  .rtf-chat{--chat-fil:64vh;padding:calc(var(--rtf-entete) + 26px) 14px 40px}
  .rtf-chat-grille{grid-template-columns:1fr;gap:12px}
  .rtf-chat-salons{grid-column:1;grid-row:1}
  .rtf-chat-vue{grid-column:1;grid-row:2}
  .rtf-chat-cote{grid-column:1;grid-row:3}

  .rtf-chat-salons{
    position:static;
    flex-direction:row;
    gap:8px;
    max-height:none;
    overflow-x:auto;
    overflow-y:visible;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .rtf-chat-salons::-webkit-scrollbar{display:none}
  /* Le titre « Les sorties » n a pas sa place dans une rangee : sur telephone
     il devient une simple coupure, un trait entre les salons du club et ceux
     des sorties. Le texte reste dans la page pour les lecteurs d ecran. */
  .rtf-chat-famille{
    align-self:stretch;
    flex:0 0 1px;
    width:1px;
    margin:6px 6px;
    padding:0;
    border:0;
    background:var(--rtf-line);
    font-size:0;
    line-height:0;
    letter-spacing:0;
    color:transparent;
    overflow:hidden;
  }
  .rtf-chat-vers-sortie{padding:6px 11px;font-size:10px}
  .rtf-chat-salon{
    width:auto;
    flex:0 0 auto;
    padding:10px 14px;
    border-left:1px solid var(--rtf-line);
    border-bottom:3px solid transparent;
  }
  .rtf-chat-salon.est-actif{border-left-color:var(--rtf-line);border-bottom-color:var(--rtf-accent)}
  .rtf-chat-salon.est-or.est-actif{border-bottom-color:var(--rtf-or)}
  .rtf-chat-salon-i{display:none}
  .rtf-chat-salon-i.est-photo{
    display:block;
    width:26px;
    height:26px;
    flex:0 0 26px;
    border-radius:var(--rtf-r-sm);
  }
  .rtf-chat-salon-txt b{font-size:16px;white-space:nowrap}
  .rtf-chat-salon-txt small{display:block;font-size:11px}
  .rtf-chat-passer{flex:0 0 auto;white-space:nowrap;align-self:center}
  .rtf-chat-presence{display:none}

  .rtf-chat-vue-tete p{display:none}
  .rtf-chat-vue-tete{padding:12px 15px}
  .rtf-chat-vue-tete h2{font-size:20px;margin:0}

  .rtf-chat-fil{padding:14px 12px 6px}
  .rtf-chat-msg{grid-template-columns:32px minmax(0,1fr);gap:9px}
  .rtf-chat-av{width:32px;height:32px;flex:0 0 32px;font-size:11px}
  .rtf-chat-texte{font-size:14.5px}
  .rtf-chat-outils{opacity:1;pointer-events:auto;top:-8px;right:2px}
  .rtf-chat-descendre{bottom:120px}
  .rtf-chat-saisie{padding:10px 12px 12px}
}

@media (max-width:480px){
  .rtf-chat{--chat-fil:58vh}
  .rtf-chat-tete{margin-bottom:16px}
  .rtf-chat-retour{display:none}
  .rtf-chat-image{max-width:100%}
}

/* --------------------------------------------------------------------------
   Moins de mouvement
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .rtf-chat-msg.est-neuf{animation:none}
  .rtf-chat-palette button:hover{transform:none}
  .rtf-chat *{transition-duration:.01ms !important}
}

/* --------------------------------------------------------------------------
   Le panneau de moderation (suspendre l acces)
   -------------------------------------------------------------------------- */

.rtf-chat-ferme select,
.rtf-chat-ferme input[type=text]{
  width:100%;
  padding:11px 13px;
  background:var(--rtf-canvas-2);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-sm);
  color:var(--rtf-ink);
  font-family:var(--rtf-body);
  font-size:14.5px;
}
.rtf-chat-ferme select:focus,
.rtf-chat-ferme input[type=text]:focus{border-color:var(--rtf-accent);outline:none}
.rtf-chat-ferme select{appearance:none;-webkit-appearance:none;cursor:pointer}

/* Un message d information dans la zone d erreur : meme place, autre ton. */
.rtf-chat-erreur.est-ok{
  border-left-color:var(--rtf-ok);
  background:var(--rtf-ok-sourd);
}

/* Les icones au trait des outils d un message. */
.rtf-chat-outil svg{display:block}

/* L onglet qui quitte l espace membre : meme rang que les autres, mais il ne
   sera jamais « actif » — il mene ailleurs. */
.rtf-espace-onglets a.est-ailleurs{display:inline-flex;align-items:center}

/* --------------------------------------------------------------------------
   Les participants d une sortie
   -------------------------------------------------------------------------- */

.rtf-chat-roster{
  margin-top:10px;
  padding:14px;
  background:var(--rtf-panel);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-md);
}
.rtf-chat-roster ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}

.rtf-chat-part{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 6px 4px 4px;
  border-radius:var(--rtf-r-sm);
  font-size:13px;
  position:relative;
}
.rtf-chat-part:hover{background:var(--rtf-panel-2)}
.rtf-chat-part .rtf-chat-av{width:26px;height:26px;flex:0 0 26px;font-size:10px}

/* Le point vert se pose sur l avatar : une seule marque, lisible d un coup */
.rtf-chat-part.est-en-ligne .rtf-chat-av{box-shadow:0 0 0 2px var(--rtf-panel),0 0 0 4px var(--rtf-ok)}
.rtf-chat-part.est-hors{opacity:.45}
.rtf-chat-part.est-hors .rtf-chat-part-nom{text-decoration:line-through}

.rtf-chat-part-nom{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rtf-chat-part-note{
  flex:0 0 auto;
  font-family:var(--rtf-label);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rtf-ink-muted);
  border:1px solid var(--rtf-line);
  border-radius:999px;
  padding:1px 6px;
}
.rtf-chat-part-badge{flex:0 0 auto}

.rtf-chat-part-poste-zone{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:5px;
}
.rtf-chat-part-poste,
.rtf-chat-part-poste-libelle{
  flex:0 0 auto;
  max-width:118px;
  font-family:var(--rtf-body);
  font-size:11px;
  padding:2px 5px;
  border-radius:var(--rtf-r-sm);
  border:1px solid var(--rtf-line);
  background:var(--rtf-canvas-2);
  color:var(--rtf-ink);
}
.rtf-chat-part-poste-libelle{width:100px}
.rtf-chat-part-poste-libelle::placeholder{color:var(--rtf-ink-muted)}

.rtf-chat-part-btn{
  flex:0 0 auto;
  width:22px;height:22px;
  display:grid;place-items:center;
  border:1px solid var(--rtf-line);
  border-radius:50%;
  background:transparent;
  color:var(--rtf-ink-muted);
  font-size:14px;
  line-height:1;
  padding:0;
  cursor:pointer;
}
.rtf-chat-part-btn:hover{border-color:var(--rtf-accent);color:var(--rtf-accent)}

.rtf-chat-roster-note{
  margin:12px 0 0;
  padding-top:10px;
  border-top:1px solid var(--rtf-line);
  font-size:11.5px;
  line-height:1.45;
  color:var(--rtf-ink-muted);
}

@media (max-width:860px){
  /* Le panneau passe sous le fil : la liste reste consultable, sans rompre
     la bande horizontale des salons. */
  .rtf-chat-roster ul{
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px;
  }
  .rtf-chat-part{
    width:auto;
    padding:4px 10px 4px 4px;
    border-radius:999px;
    background:var(--rtf-panel-2);
  }
  .rtf-chat-part-nom{flex:0 0 auto}
  .rtf-chat-part-poste-zone{flex-basis:100%;margin-top:4px}
  .rtf-chat-part-poste,.rtf-chat-part-poste-libelle{max-width:none;flex:1}
}

/* --------------------------------------------------------------------------
   Le trait « nouveaux messages », a la WhatsApp
   -------------------------------------------------------------------------- */

.rtf-chat-msg.est-premier-neuf{margin-top:28px}
.rtf-chat-msg.est-premier-neuf::after{
  content:"";
  position:absolute;
  left:4px;right:4px;top:-14px;
  height:1px;
  background:var(--rtf-accent);
  opacity:.4;
}
.rtf-chat-msg.est-premier-neuf::before{
  content:"Nouveaux messages";
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  padding:2px 10px;
  background:var(--rtf-panel);
  color:var(--rtf-accent);
  font-family:var(--rtf-label);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  z-index:2;
}

/* --------------------------------------------------------------------------
   Le panneau de moderation
   -------------------------------------------------------------------------- */

.rtf-chat-moderation{max-height:88vh;overflow-y:auto}
.rtf-chat-moderation h1{font-size:26px;margin-bottom:12px}

.rtf-chat-mod-etat{
  margin:0 0 20px;
  padding:9px 12px;
  border-radius:var(--rtf-r-sm);
  background:var(--rtf-ok-sourd);
  border-left:2px solid var(--rtf-ok);
  font-size:13px;
  color:var(--rtf-ink);
}
.rtf-chat-mod-etat.est-sanction{
  background:var(--rtf-ko-sourd);
  border-left-color:var(--rtf-ko);
}

.rtf-chat-mod-titre{
  margin:22px 0 6px;
  font-family:var(--rtf-label);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rtf-ink-muted);
  font-weight:600;
}
.rtf-chat-mod-aide{
  margin:0 0 12px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--rtf-ink-muted);
}
.rtf-chat-mod-champs{display:grid;gap:9px;margin-bottom:12px}
.rtf-chat-mod-actions{display:flex;flex-wrap:wrap;gap:8px}
.rtf-chat-mod-actions .rtf-btn{padding:11px 16px;font-size:11.5px}
.rtf-chat-mod-actions .rtf-btn-ghost.est-danger{color:var(--rtf-ko);border-color:var(--rtf-ko)}
.rtf-chat-mod-actions .rtf-btn-ghost.est-danger:hover{background:var(--rtf-ko-sourd);color:var(--rtf-ko)}

.rtf-chat-mod-fermer{
  display:block;
  width:100%;
  margin-top:24px;
  padding:10px;
  background:transparent;
  border:0;
  border-top:1px solid var(--rtf-line);
  color:var(--rtf-ink-muted);
  font-family:var(--rtf-label);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.rtf-chat-mod-fermer:hover{color:var(--rtf-ink)}