/* Le Rond de Présentation — communauté Analyse Quinté */
:root {
  --fond:        #0e1512;
  --fond-2:      #131c18;
  --fond-3:      #18231e;
  --bord:        #24332c;
  --texte:       #e8f0ea;
  --texte-doux:  #93a89c;
  --vert:        #2fa96b;
  --vert-clair:  #4ede9a;
  --or:          #e2b344;
  --rouge:       #e05a4e;
  --bleu:        #5b9bd5;
  --rayon:       12px;
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.5 var(--police); -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ─── Connexion ─────────────────────────────────────────────────────────── */
.connexion {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(47,169,107,.16), transparent 60%),
    var(--fond);
}
.connexion-carte {
  width: min(560px, 100%); background: var(--fond-2); border: 1px solid var(--bord);
  border-radius: 18px; padding: 32px 28px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.marque { font-weight: 700; letter-spacing: .2px; color: var(--vert-clair); }
.marque-ico { font-size: 1.1em; }
.marque.petite { font-size: 14px; white-space: nowrap; }
.connexion h1 { margin: 14px 0 8px; font-size: 26px; line-height: 1.25; }
.accroche { margin: 0 0 20px; color: var(--texte-doux); }
.bandeau-loi {
  background: rgba(226,179,68,.10); border: 1px solid rgba(226,179,68,.35);
  color: #f0dda9; border-radius: var(--rayon); padding: 12px 14px;
  font-size: 13.5px; text-align: left; margin-bottom: 22px;
}
.bloc-google { display: grid; place-items: center; gap: 10px; min-height: 44px; }
#btn-google { min-height: 40px; }
.mention { margin: 0; font-size: 12.5px; color: var(--texte-doux); }
.erreur { color: var(--rouge); font-size: 13px; margin: 4px 0 0; }
.points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.points li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--texte-doux); }
.points span { width: 22px; text-align: center; }

/* ─── Cadre ─────────────────────────────────────────────────────────────── */
.app { height: 100dvh; display: flex; flex-direction: column; }
.entete {
  display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 56px;
  background: var(--fond-2); border-bottom: 1px solid var(--bord); flex: none;
}
.entete-centre { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.titre-salon { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presence { font-size: 12.5px; color: var(--texte-doux); white-space: nowrap; }
.ico-btn {
  background: none; border: 1px solid var(--bord); border-radius: 9px; padding: 6px 9px;
  cursor: pointer; line-height: 1;
}
.profil { position: relative; display: flex; align-items: center; gap: 8px; }
.profil img { border-radius: 50%; background: var(--fond-3); }
.profil #pseudo { font-size: 14px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lien { background: none; border: 0; color: var(--texte-doux); cursor: pointer; padding: 4px; }
.menu {
  position: absolute; right: 0; top: 42px; background: var(--fond-3); border: 1px solid var(--bord);
  border-radius: var(--rayon); min-width: 200px; padding: 6px; z-index: 30;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.menu button:hover { background: rgba(255,255,255,.06); }

.corps { flex: 1; min-height: 0; display: grid; grid-template-columns: 268px 1fr 340px; }
.colonne { min-height: 0; display: flex; flex-direction: column; }
.salons { background: var(--fond-2); border-right: 1px solid var(--bord); }
.course { background: var(--fond-2); border-left: 1px solid var(--bord); overflow-y: auto; }

.colonne-tete {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 12px 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-doux); border-bottom: 1px solid var(--bord); flex: none;
}
.liste-salons { overflow-y: auto; padding: 8px; flex: 1; }
.attente { color: var(--texte-doux); font-size: 13.5px; padding: 14px; }

.groupe-titre {
  display: flex; align-items: center; gap: 8px; padding: 12px 8px 6px;
  font-size: 12.5px; color: var(--or); font-weight: 650;
}
.groupe-titre .pays { color: var(--texte-doux); font-weight: 400; font-size: 11.5px; }
.salon-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 9px; padding: 8px 9px; cursor: pointer;
  color: var(--texte); line-height: 1.3;
}
.salon-item:hover { background: rgba(255,255,255,.05); }
.salon-item.actif { background: rgba(47,169,107,.18); box-shadow: inset 2px 0 0 var(--vert-clair); }
.salon-heure { font-variant-numeric: tabular-nums; color: var(--texte-doux); font-size: 12.5px; min-width: 42px; }
.salon-nom { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pastille { font-size: 10px; padding: 2px 6px; border-radius: 999px; background: var(--or); color: #201703; font-weight: 700; }
.pastille.vert { background: var(--vert); color: #04150c; }

/* ─── Messages ──────────────────────────────────────────────────────────── */
.chat { background: var(--fond); }
.messages { flex: 1; overflow-y: auto; padding: 16px 18px 8px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg img { border-radius: 50%; flex: none; background: var(--fond-3); }
.msg-corps { min-width: 0; }
.msg-tete { display: flex; align-items: baseline; gap: 8px; }
.msg-pseudo { font-weight: 650; font-size: 13.5px; }
.msg-pseudo.moi { color: var(--vert-clair); }
.msg-role { font-size: 10px; background: var(--bleu); color: #04121f; border-radius: 4px; padding: 1px 5px; font-weight: 700; }
.msg-heure { font-size: 11.5px; color: var(--texte-doux); }
.msg-texte { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-supprimer { background: none; border: 0; color: var(--texte-doux); cursor: pointer; font-size: 11px; }
.msg.systeme {
  background: rgba(224,90,78,.10); border: 1px solid rgba(224,90,78,.3);
  border-radius: var(--rayon); padding: 10px 12px; font-size: 13.5px; color: #f4c9c4;
}
.msg.systeme b { color: #fff; }
.separateur-jour {
  text-align: center; font-size: 11.5px; color: var(--texte-doux);
  border-top: 1px solid var(--bord); margin: 6px 0; line-height: 0;
}
.separateur-jour span { background: var(--fond); padding: 0 10px; }

.bandeau-ban {
  background: rgba(224,90,78,.16); border-bottom: 1px solid rgba(224,90,78,.4);
  padding: 11px 16px; font-size: 13.5px; color: #f6cdc8; flex: none;
}
.bandeau-ban b { color: #fff; }

.saisie { display: flex; gap: 8px; padding: 10px 14px 4px; align-items: flex-end; flex: none; }
.saisie textarea {
  flex: 1; resize: none; max-height: 140px; background: var(--fond-3);
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 11px 13px;
}
.saisie textarea:focus { outline: 2px solid rgba(47,169,107,.5); outline-offset: -1px; }
.saisie button {
  background: var(--vert); color: #04150c; border: 0; border-radius: var(--rayon);
  padding: 11px 16px; cursor: pointer; font-weight: 700;
}
.saisie button:disabled { opacity: .45; cursor: not-allowed; }
.sous-saisie {
  display: flex; gap: 12px; align-items: center; padding: 2px 16px 10px;
  font-size: 11.5px; color: var(--texte-doux); flex: none;
}
.retour { color: var(--rouge); flex: 1; }
.rappel { margin-left: auto; opacity: .75; white-space: nowrap; }

/* ─── Fiche course ──────────────────────────────────────────────────────── */
.fiche { padding: 14px; }
.fiche h2 { margin: 0 0 2px; font-size: 16px; }
.fiche .lieu { color: var(--or); font-size: 13px; margin: 0 0 10px; }
.faits { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fait { background: var(--fond-3); border: 1px solid var(--bord); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.avis-cotes {
  background: rgba(226,179,68,.10); border: 1px solid rgba(226,179,68,.3); color: #f0dda9;
  border-radius: 10px; padding: 9px 11px; font-size: 12px; margin-bottom: 12px;
}
table.partants { width: 100%; border-collapse: collapse; font-size: 13px; }
table.partants th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texte-doux); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--bord);
}
table.partants td { padding: 7px 4px; border-bottom: 1px solid rgba(36,51,44,.55); vertical-align: top; }
table.partants tr.np { opacity: .42; text-decoration: line-through; }
.num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--fond-3); border: 1px solid var(--bord); font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.num.favori { background: var(--or); color: #201703; border-color: var(--or); }
.nom-cheval { font-weight: 600; }
.sous-nom { color: var(--texte-doux); font-size: 11.5px; }
.cote { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.cote small { display: block; font-weight: 400; font-size: 10.5px; color: var(--texte-doux); }
.maj { font-size: 11px; color: var(--texte-doux); margin-top: 10px; }

/* ─── Fenêtres ──────────────────────────────────────────────────────────── */
.fenetre { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: grid; place-items: center; padding: 16px; z-index: 60; }
.fenetre-carte {
  position: relative; background: var(--fond-2); border: 1px solid var(--bord);
  border-radius: 16px; padding: 24px; width: min(600px, 100%); max-height: 85dvh; overflow-y: auto;
}
.fenetre-carte h2 { margin-top: 0; }
.fermer { position: absolute; top: 12px; right: 12px; background: none; border: 0; color: var(--texte-doux); font-size: 17px; cursor: pointer; }
.fenetre-carte ul { padding-left: 20px; }
.fenetre-carte li { margin-bottom: 7px; }
.champ-texte { width: 100%; background: var(--fond-3); border: 1px solid var(--bord); border-radius: 9px; padding: 10px 12px; margin: 10px 0; }
.bouton {
  background: var(--vert); color: #04150c; border: 0; border-radius: 9px;
  padding: 10px 18px; cursor: pointer; font-weight: 700;
}
.journal { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.journal th, .journal td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.etiq { border-radius: 5px; padding: 1px 6px; font-size: 11px; background: var(--fond-3); border: 1px solid var(--bord); }
.etiq.ban { background: rgba(224,90,78,.2); border-color: rgba(224,90,78,.45); }

.seulement-mobile { display: none; }

/* ─── Écrans étroits ────────────────────────────────────────────────────── */
@media (max-width: 1080px) { .corps { grid-template-columns: 230px 1fr 300px; } }
@media (max-width: 860px) {
  .seulement-mobile { display: block; }
  .marque.petite, .presence { display: none; }
  .corps { grid-template-columns: 1fr; }
  .salons, .course {
    position: fixed; inset: 56px 0 0 0; z-index: 40; display: none;
  }
  .salons.ouvert, .course.ouvert { display: flex; }
  .course.ouvert { overflow-y: auto; }
  .rappel { display: none; }
}

/* Les messages s'accrochent au bas de la zone, comme dans un vrai salon. */
.messages > :first-child { margin-top: auto; }
/* Le bouton de suppression (admin) ne se montre qu'au survol du message. */
.msg-supprimer { opacity: 0; transition: opacity .12s; }
.msg:hover .msg-supprimer, .msg-supprimer:focus { opacity: 1; }

/* ─── Groupes privés & annuaire ──────────────────────────────────────────── */
.bloc-groupes { border-bottom: 1px solid var(--bord); padding-bottom: 6px; flex: none; max-height: 34vh; display: flex; flex-direction: column; }
.bloc-groupes-tete {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px 4px; font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texte-doux);
}
.bloc-groupes-tete .lien { font-size: 17px; line-height: 1; color: var(--vert-clair); }
.liste-salons.compacte { padding: 0 8px; overflow-y: auto; }
.vide-groupes { color: var(--texte-doux); font-size: 12.5px; padding: 4px 9px 8px; }
.cadenas { font-size: 11px; opacity: .75; }

.membre-ligne {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  border-bottom: 1px solid rgba(36,51,44,.6);
}
.membre-ligne img { border-radius: 50%; background: var(--fond-3); flex: none; }
.membre-nom { font-weight: 600; font-size: 14px; }
.membre-meta { color: var(--texte-doux); font-size: 11.5px; }
.point {
  width: 8px; height: 8px; border-radius: 50%; background: #4a5a51; flex: none;
}
.point.actif { background: var(--vert-clair); box-shadow: 0 0 0 3px rgba(78,222,154,.18); }
.membre-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.etiq.admin { background: rgba(91,155,213,.2); border-color: rgba(91,155,213,.5); color: #bcd9f2; }
.etiq.exclu { background: rgba(224,90,78,.2); border-color: rgba(224,90,78,.5); color: #f6cdc8; }
.barre-outils { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.barre-outils input { flex: 1; }
.liste-choix { max-height: 42vh; overflow-y: auto; margin: 10px 0; border: 1px solid var(--bord); border-radius: 10px; }
.liste-choix label {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; cursor: pointer;
  border-bottom: 1px solid rgba(36,51,44,.6);
}
.liste-choix label:hover { background: rgba(255,255,255,.04); }
.liste-choix input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--vert); }
.bouton.secondaire { background: var(--fond-3); color: var(--texte); border: 1px solid var(--bord); }
.rangee-boutons { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

.menu button.danger { color: var(--rouge); }
.menu button.danger:hover { background: rgba(224,90,78,.14); }
.liens-legaux { margin: 18px 0 0; font-size: 12.5px; color: var(--texte-doux); }
.liens-legaux a { color: var(--texte-doux); }
.liens-legaux a:hover { color: var(--vert-clair); }

/* ─── Écran de choix du pseudo ───────────────────────────────────────────── */
.champ-pseudo { margin: 6px 0 16px; text-align: left; }
.champ-pseudo .champ-texte { font-size: 17px; padding: 13px 15px; }
.etat-pseudo { margin: 8px 2px 0; font-size: 13px; color: var(--texte-doux); min-height: 20px; }
.etat-pseudo.libre { color: var(--vert-clair); }
.etat-pseudo.pris { color: var(--rouge); }
#valider-pseudo-initial { width: 100%; padding: 13px; font-size: 15px; }
#valider-pseudo-initial:disabled { opacity: .4; cursor: not-allowed; }

/* Le retour du robot doit se VOIR : un refus affiché en 11,5 px au ras du bas
   passe inaperçu, et le membre croit que son message est parti. */
.retour:not(:empty) {
  font-size: 14.5px; font-weight: 650; line-height: 1.4;
  background: rgba(224,90,78,.15); border: 1px solid rgba(224,90,78,.45);
  border-radius: 9px; padding: 8px 13px; margin: 2px 0 4px;
}
.sous-saisie { align-items: center; }

/* Offre de lancement : gratuit pour les 100 premiers inscrits */
.places { color: var(--or); font-size: 14px; font-weight: 650; margin: 0 0 12px; }
.places.complet { color: var(--rouge); }


/* ─── Quinté : pronostic, résultats, bilan ──────────────────────────────── */
.fenetre-carte.large { width: min(860px, 100%); }
.q-cartes { display: grid; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--bord); }
.q-carte {
  display: grid; gap: 1px; text-align: left; background: var(--fond-3); border: 1px solid var(--bord);
  border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: 13px;
}
.q-carte:hover { border-color: var(--or); }
.q-carte span { color: var(--texte-doux); font-size: 12px; overflow-wrap: anywhere; }
.q-entree { width: 100%; margin: 0 0 12px; }
.q-titre { margin: 0 32px 12px 0; font-size: 20px; }
.q-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin-bottom: 16px; overflow-x: auto; }
.q-onglets button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer;
  color: var(--texte-doux); white-space: nowrap; font-weight: 600; font-size: 14px;
}
.q-onglets button.actif { color: var(--texte); border-bottom-color: var(--or); }
.q-date { margin: 0; color: var(--or); font-size: 13px; font-weight: 600; }
.q-course { margin: 2px 0; font-size: 20px; line-height: 1.25; }
.q-bloc { border-top: 1px solid var(--bord); margin-top: 14px; padding-top: 12px; }
.q-bloc h4, .q-tuile h4 { margin: 0 0 8px; font-size: 14px; }
.q-arrivee { background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px; }
.q-petit { color: var(--texte-doux); font-size: 12.5px; margin: 6px 0 0; }
.q-synthese { margin: 0; font-size: 14px; }
.q-nums { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.q-num {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 7px;
  background: var(--fond); border: 1px solid var(--bord); font-size: 13px; font-weight: 700;
}
.q-num.plein { background: var(--or); border-color: var(--or); color: #1b1503; }
.q-num.barre { text-decoration: line-through; color: var(--texte-doux); }
.q-num.grand { min-width: 44px; height: 44px; font-size: 20px; background: var(--or); border-color: var(--or); color: #1b1503; flex: none; }
.q-nums.petit .q-num { min-width: 22px; height: 22px; font-size: 12px; }
.q-base-ligne { display: flex; align-items: center; gap: 12px; }
.q-np { font-size: 11px; font-weight: 700; border: 1px solid var(--texte-doux); border-radius: 4px; padding: 0 4px; color: var(--texte-doux); }
.q-defile { overflow-x: auto; }
.q-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.q-table th { text-align: left; color: var(--texte-doux); font-weight: 600; font-size: 12px; padding: 4px 6px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.q-table td { padding: 6px; border-bottom: 1px solid var(--bord); }
.q-table .d { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-table tr.np { opacity: .55; }
.q-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.q-actions .bouton { width: auto; text-decoration: none; }
.q-mention { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--bord); font-size: 12.5px; color: var(--texte-doux); }
.q-ligne { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px 12px; margin-top: 8px; background: var(--fond-3); }
.q-ligne-tete { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13.5px; }
.q-ligne-tete span { flex: 1 1 200px; color: var(--texte-doux); overflow-wrap: anywhere; }
.q-ligne-tete a { color: var(--vert-clair); font-size: 12.5px; }
.q-ligne-corps { display: grid; gap: 5px; margin: 8px 0; font-size: 13.5px; }
.q-etiq { display: inline-block; width: 52px; color: var(--texte-doux); font-size: 12px; }
.q-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.q-chip { border: 1px solid var(--bord); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texte-doux); }
.q-chip.gagne { color: var(--texte); border-color: var(--vert); font-weight: 700; }
#q-plus { margin-top: 12px; width: 100%; }
.q-avis { background: rgba(226,179,68,.10); border: 1px solid rgba(226,179,68,.35); border-radius: var(--rayon); padding: 12px 14px; font-size: 14px; color: #f0dda9; }
.q-avis strong { display: block; margin-bottom: 2px; }
.q-heros { margin: 16px 0; }
.q-heros-montant { font-size: 38px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.q-heros p { margin: 4px 0 0; color: var(--texte-doux); font-size: 13.5px; }
.q-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.q-tuile { background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px; min-width: 0; }
.q-montant { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.q-courbe { position: relative; margin: 10px 0 0; }
.q-courbe svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.q-courbe text { fill: var(--texte-doux); font-size: 10px; font-variant-numeric: tabular-nums; }
.q-grille { stroke: var(--bord); stroke-width: 1; stroke-dasharray: 2 3; }
.q-axe0 { stroke: var(--texte-doux); stroke-width: 1; }
.q-trace { fill: none; stroke: var(--or); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.q-curseur { stroke: var(--texte-doux); stroke-width: 1; }
.q-point { fill: var(--or); stroke: var(--fond-3); stroke-width: 2; }
.q-bulle {
  position: absolute; top: -6px; width: 140px; white-space: nowrap; text-align: center; background: var(--fond); border: 1px solid var(--bord);
  border-radius: 6px; font-size: 11.5px; padding: 2px 4px; pointer-events: none; font-variant-numeric: tabular-nums;
}
.q-liste { margin: 0; padding-left: 18px; font-size: 13.5px; }
.q-liste li { margin-bottom: 5px; }
.q-methode { margin-top: 14px; border-top: 1px solid var(--bord); padding-top: 12px; font-size: 13.5px; }
.q-methode summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }

a.q-carte { color: inherit; text-decoration: none; }
.q-carte-pdf { border-color: rgba(226,179,68,.45); }
a.q-entree { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }


/* ─── Conversation : réponses, mentions, non-lus ────────────────────────── */
.chat { position: relative; }
.bandeau-reseau { background: rgba(224,90,78,.14); border-bottom: 1px solid rgba(224,90,78,.45); color: #f6c9c4; font-size: 13px; padding: 8px 14px; flex: none; }
.plus-anciens { align-self: center; background: var(--fond-3); border: 1px solid var(--bord); border-radius: 999px; padding: 4px 14px; font-size: 12.5px; color: var(--texte-doux); cursor: pointer; flex: none; }
.plus-anciens:hover { color: var(--texte); }
.msg-repondre { background: none; border: 0; color: var(--texte-doux); cursor: pointer; font-size: 11px; opacity: 0; transition: opacity .12s; padding: 0; }
.msg:hover .msg-repondre, .msg-repondre:focus { opacity: 1; }
@media (hover: none) { .msg-repondre, .msg-supprimer { opacity: 1; } }
.msg-citation {
  display: block; max-width: 100%; text-align: left; background: rgba(255,255,255,.04); border: 0; border-left: 2px solid var(--or);
  border-radius: 4px; color: var(--texte-doux); font-size: 12.5px; padding: 3px 8px; margin: 2px 0 4px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mention { color: var(--vert-clair); font-weight: 600; }
.mention.moi { color: #1b1503; background: var(--or); border-radius: 4px; padding: 0 3px; }
.msg.pour-moi { background: rgba(226,179,68,.09); box-shadow: inset 2px 0 0 var(--or); border-radius: 8px; padding: 6px 8px; }
.msg.eclaire { background: rgba(78,222,154,.16); border-radius: 8px; transition: background .3s; }
.vers-bas {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 5; background: var(--vert); color: #04150c; border: 0;
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 650; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.4); white-space: nowrap;
}
.barre-reponse { display: flex; align-items: center; gap: 10px; margin: 0 14px; padding: 6px 10px; background: var(--fond-3); border-left: 2px solid var(--or); border-radius: 6px; font-size: 12.5px; color: var(--texte-doux); flex: none; }
.barre-reponse span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-reponse button { background: none; border: 0; color: var(--texte-doux); cursor: pointer; padding: 2px 6px; }
.suggestions { position: absolute; left: 14px; bottom: 96px; z-index: 6; display: grid; min-width: 180px; max-width: calc(100% - 28px); background: var(--fond-2); border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.suggestions button { background: none; border: 0; text-align: left; padding: 8px 12px; font-size: 13.5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestions button:hover, .suggestions button:first-child { background: rgba(255,255,255,.06); }
.recherche-salons { padding: 8px 10px 0; flex: none; }
.recherche-salons input { width: 100%; background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.recherche-salons input:focus { outline: 0; border-color: var(--vert); }
.salon-item.finie .salon-nom, .salon-item.finie .salon-heure { opacity: .5; }
.salon-parle:empty { display: none; }
.salon-parle { font-size: 11px; color: var(--texte-doux); white-space: nowrap; flex: none; }
.salon-parle.non-lu { background: var(--vert-clair); color: #04150c; border-radius: 999px; min-width: 18px; text-align: center; padding: 0 5px; font-weight: 700; }
.salon-parle.mention { background: var(--or); color: #201703; border-radius: 999px; min-width: 18px; text-align: center; padding: 0 5px; font-weight: 800; }
#btn-menu.a-lire { box-shadow: inset 0 0 0 2px var(--vert-clair); }

/* Sans minmax(0, …), une ligne longue (citation, message) élargit toute la colonne et décale l'écran. */
.corps { grid-template-columns: 268px minmax(0, 1fr) 340px; }
@media (max-width: 1080px) { .corps { grid-template-columns: 230px minmax(0, 1fr) 300px; } }
@media (max-width: 860px) {
  .corps { grid-template-columns: minmax(0, 1fr); }
  .profil #pseudo { display: none; }
  .entete { gap: 6px; }
  .entete .ico-btn { flex: none; }
  .entete-centre { flex: 1 1 0; }
}
@media (max-width: 480px) { #btn-membres { display: none; } }
.chat, .msg { min-width: 0; }
.msg-corps { flex: 1 1 auto; min-width: 0; }
.msg-repondre { opacity: .55; }
.msg:hover .msg-repondre, .msg-repondre:focus { opacity: 1; color: var(--vert-clair); }
.retour.info { color: var(--vert-clair); }
.retour.info:not(:empty) { color: var(--vert-clair); background: rgba(78,222,154,.1); border-color: rgba(78,222,154,.4); }