/* login.css — NÉO-BRUTALISM (scopé sur body.neo)
   Compatible avec ton HTML actuel: .site-header, .logo-img, #betaBanner, .container_text_login_01, .card, .errors, .pass-wrap, .toggle-pass, .btn + snippet public rooms. */

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

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

body.neo .logo-img{
  height: 90px;
  width:var(--w-auto);
  display:block;
}

body.neo .logo-note{
  position: relative;
  margin-left: 22px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
}

/* La main */
body.neo .logo-note::before{
  content: "👈";
  position: absolute;
  left: -28px;
  top: -80%;
  transform: translateY(-50%);
  font-size: 18px;
    animation: poke 0.8s infinite alternate;

}

@keyframes poke{
  from { transform: translateY(0); }
  to   { transform: translateY(4px); }
}













/* Layout */
body.neo main#main-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 12px 10px 40px;
  gap: 14px;
}

/* Bannière beta */
body.neo #betaBanner{
  width: min(960px, 94%);
  margin-top: 10px;
  background:#ffe600;
  color:#000;
  text-align:center;
  padding: 12px 14px;
  font-size: 14px;
  border:4px solid #000;
  box-shadow: 10px 10px 0 #000;
}

body.neo #betaBanner strong{
  color:#000;
  text-decoration: underline;
}

/* Titres */
body.neo h1{
  width: min(960px, 94%);
  margin: 0;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

body.neo h2{
  margin: 0 0 10px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Bloc intro */
body.neo .container_text_login_01{
  width: min(960px, 94%);
  padding: 16px;
  background: #ffffff;
  border: 4px solid #000;
  box-shadow: 10px 10px 0 #000;
}

body.neo .text_login_01{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

/* Card login */
body.neo .card{
  width: min(520px, 94%);
  max-width: 520px;
  margin: 0;
  padding: 18px;
  background:#4fb2c6;           /* cyan = action/login */
  color:#000;
  border:4px solid #000;
  border-radius: 0;
  box-shadow: 12px 12px 0 #000;
   transform: rotate(-0.7deg); 
}



.card{
  animation: pop 0.25s ease-out;
}
@keyframes pop{
  from{ transform: scale(0.96); }
  to{ transform: scale(1); }
}

/* Erreurs */
body.neo .errors{
  background:#fff;
  color:#000;
  padding: 12px;
  border: 4px solid #000;
  margin-bottom: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

/* Labels / Inputs */
body.neo label{
  display:block;
  font-size: 13px;
  font-weight: 900;
  margin: 10px 0 6px;
  color:#000;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.public-room__cta
{   transform: rotate(+0.3deg); 
}

/* Ton HTML a <label>...<input>...</label> donc l'input est dedans */
body.neo input{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 12px;
  border-radius: 0;
  border: 3px solid #000;
  background:#fff;
  color:#000;
  outline: none;
  font-size: 14px;
}

body.neo input:focus{
  outline: 4px solid #000;
  outline-offset: 2px;
}

/* Mot de passe: bouton voir */
body.neo .pass-wrap{
  position:relative;
}

body.neo .toggle-pass{
  position:absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background:#000;
  border:3px solid #000;
  color:#fff;
  cursor:pointer;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

body.neo .toggle-pass:focus{
  outline: 4px solid #fff;
  outline-offset: 2px;
}

/* Bouton */
body.neo .btn{
  width:100%;
  margin-top: 14px;
  padding: 14px 12px;
  border: 4px solid #000;
  border-radius: 0;
  background:#ffffff;
  color:#000;
  font-weight: 900;
  cursor:pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 6px 6px 0 #000;
}

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

body.neo .btn:active{
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

body.neo .btn:disabled{
  opacity: .65;
  cursor: not-allowed;
  box-shadow: none;
}

/* Lien register */
body.neo .fonnter_link_register{
  margin-top: 14px;
  font-size: 14px;
  text-align:center;
  font-weight: 900;
  text-transform: uppercase;
}

body.neo a{
  color:#000;
  text-decoration: underline;
  font-weight: 900;
}

/* --- Snippet salons publics (tu l’inclus sur login.php) --- */
body.neo .public-rooms{
  width: min(520px, 94%);
  max-width: 520px;
  margin: 10px 0 0;
  padding: 16px;
  background:#ff5b52;          /* rouge = contenu/rooms */
  color:#000;
  border:4px solid #000;
  border-radius: 0;
  box-shadow: 12px 12px 0 #000;
  transform: rotate(0.7deg);
}

body.neo .public-rooms h1,
body.neo .public-rooms h3{
  margin: 0 0 10px;
  font-size: 18px;
  text-transform: uppercase;
}

body.neo .public-room{
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 3px solid #000;
}

body.neo .public-room__messages{
  max-height: 260px;
  overflow-y: auto;
  padding-right: 6px;
}

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

body.neo .public-room__item{
  padding: 8px 0;
  border-bottom: 2px dotted #000;
}

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

body.neo .public-room__author{
  font-weight: 900;
}

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

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

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

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;
}

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

/* Mobile */
@media (max-width: 400px){
  body.neo{
    overflow-x: hidden;
  }
  body.neo .logo-img{
    height: 70px;
  }
  body.neo .card,
  body.neo .public-rooms,
  body.neo .container_text_login_01{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}