/* room.css — NÉO-BRUTALISM (scopé sur body.neo)
   Compatible avec tes classes actuelles. */

body.neo{
  margin:0;
  min-height:100vh;
  background:#f4f4f4;
  color:#0b0b0b;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


/* Message ADMIN */
body.neo .public-room__author{
  background:#fff;
  border:2px dashed #000;
  padding: 10px;
}

/* 


/* Header */
body.neo .site-header{
  width:100%;
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
  background:#f4f4f4;
  border-bottom:4px solid #000;
  position: sticky;
  top: 0;
  z-index: 5;
}

body.neo .logo-img{
  height:72px;
  width:auto;
  display:block;
}

/* Conteneur page */
body.neo .page{
  width:100%;
  max-width: 920px;
  padding:16px;
  box-sizing:border-box;
}

/* En-tête salon */
body.neo .room-header{
  margin: 14px 0 16px;
  background:#ffffff;
  border:4px solid #000;
  box-shadow: 10px 10px 0 #000;
  padding: 14px;
}

body.neo .room-header h1{
  margin:0 0 8px;
  font-size:var(--fs-26);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

body.neo .room-header p{
  margin:0;
  font-size:13px;
  font-weight: 900;
  text-transform: uppercase;
}

/* Messages */
body.neo .public-room__messages{
  max-height:none;
  overflow:visible;
  padding-right:0;
  margin-bottom:18px;
  background:#00b0d4;             /* cyan = flux */
  border:4px solid #000;
  box-shadow: 12px 12px 0 #000;
  padding: 10px 14px;
}




/* ===== Fix affichage meta (pseudo + heure) ===== */
body.neo .public-room__meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  line-height:1.1;
}

body.neo .public-room__author{
  max-width:70%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:inline-block;
}


/* Heure à droite, jamais sur 2 lignes */
body.neo .public-room__meta time{
  margin-left:auto;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
  opacity:.9;
}

/* Mobile : on enlève le séparateur */
@media (max-width:420px){
  body.neo .public-room__author{ max-width:60%; }


  body.neo .public-room__meta time{
  font-size: 11px;
  opacity: .75;
}

body.neo .public-room__likes{
  font-size: 8px;
}

}






body.neo .public-room__list{
  list-style:none;
  margin:0;
  padding:0;
}

body.neo .public-room__item{
  padding: 10px 15px;
  border-bottom: 3px dotted #000;
}

body.neo .public-room__meta{
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 4px;
}


/* Mobile : flex wrap sur public-room__meta trés petit écran */
@media (max-width:200px){
  body.neo .public-room__meta{
flex-wrap: wrap;  }
}

body.neo .public-room__author{
  font-weight: 900;
  padding: 5px 10px;
}

body.neo .public-room__sep{
  margin:0 0.25rem;
}

body.neo .public-room__body{
  font-size: 14px;
  padding-top: 5px;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Likes */
body.neo .public-room__likes{
  margin-left: 8px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 0;
  background:#fff;
  color:#000;
  border: 3px solid #000;
  font-weight: 900;
}

/* Images dans messages */
body.neo .public-room__image-wrap{ margin-top: 6px; }

body.neo .public-room__image{
  max-width:60%;
  height:auto;
  border-radius:0;
  display:block;
  border: 4px solid #000;
}

/* CTA bar */
body.neo .cta-bar{
  margin: 16px 0;
  padding: 14px;
  background:#ffe600;             /* jaune = action/info */
  border:4px solid #000;
  box-shadow: 10px 10px 0 #000;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

body.neo .cta-bar a.btn{
  display:inline-block;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius:0;
  background:#fff;
  color:#000;
  text-decoration:none;
  font-weight:900;
  text-transform: uppercase;
  border:4px solid #000;
  box-shadow: 6px 6px 0 #000;
}

body.neo .cta-bar a.btn:hover{
  transform: translate(-1px,-1px);
  box-shadow: 8px 8px 0 #000;
}
body.neo .cta-bar a.btn:active{
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 #000;
}

/* Ton lien “répondre” (tu l’avais en hotpink) */
body.neo .link_response{
  color:#000;
  border: 4px solid #000;
  padding: 10px 14px;
  border-radius: 0;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  background:#ff3b30;            /* rouge punch */
  box-shadow: 6px 6px 0 #000;
  display:inline-block;
}

body.neo .link_response:hover{
  transform: translate(-1px,-1px);
  box-shadow: 8px 8px 0 #000;
}

@media (max-width: 420px){
  body.neo{
    overflow-x:hidden;
  }
  body.neo .logo-img{ height: 62px; }
  body.neo .page{ padding: 12px; }
  body.neo .public-room__image{ max-width: 85%; }
}