/* ==========================================================================
   AUTHENTIFICATION ET BUREAU (app/Views/auth/, app/Views/bureau/)
   --------------------------------------------------------------------------
   Même charte que l'accueil : bleu nuit, bleus lumineux, titres « Exo 2 »,
   unités rem de l'échelle fluide définie dans app.css.
   ========================================================================== */

.account{
  display:flex;align-items:center;justify-content:center;
  padding:3rem 1.5rem;
}

.account__card{
  width:100%;max-width:32rem;
  padding:2.6rem 2.8rem;
  border:1px solid rgba(105,170,245,.35);border-radius:.8rem;
  background:linear-gradient(160deg,rgba(18,52,108,.82),rgba(7,24,58,.9));
  box-shadow:0 0 2.4rem rgba(0,0,0,.45),inset 0 0 1.2rem rgba(80,150,240,.12);
}
.account__card--wide{max-width:42rem}

.account__title{
  margin:0;
  font-family:"Exo 2","Noto Sans",sans-serif;
  font-style:italic;font-weight:700;font-size:2.2rem;line-height:1.1;
  text-shadow:0 .1rem .6rem rgba(0,0,0,.6);
}
.account__lead{margin-top:.6rem;font-size:1.05rem;color:var(--text-soft)}

.account__alert{
  margin-top:1.4rem;padding:.85rem 1.1rem;
  border:1px solid rgba(255,120,120,.55);border-radius:.5rem;
  background:rgba(120,20,30,.45);
  font-size:1rem;color:#ffdede;
}
.account__notice{
  margin-top:1.4rem;padding:.85rem 1.1rem;
  border:1px solid rgba(110,200,140,.55);border-radius:.5rem;
  background:rgba(20,90,50,.45);
  font-size:1rem;color:#dcffe8;
}

.account__form{display:flex;flex-direction:column;gap:1.15rem;margin-top:1.6rem}

.account__switch{margin-top:1.6rem;font-size:1rem;color:var(--text-soft);text-align:center}
.account__switch a{color:var(--blue-400);text-decoration:underline}
.account__switch a:hover{color:#7cc0ff}
.account__help{margin-top:.8rem;font-size:.9rem;overflow-wrap:anywhere}

.account__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem}
.account__actions form{margin:0}

/* ---------- Champs ---------- */
.field{display:flex;flex-direction:column;gap:.45rem}
.field__label{font-size:1rem;font-weight:600}
.field__input{
  width:100%;height:3.2rem;padding:0 1rem;
  border:1.5px solid var(--blue-line);border-radius:.5rem;
  background:rgba(4,16,40,.75);
  color:var(--text);font:inherit;font-size:1.05rem;
  transition:border-color .2s,box-shadow .2s;
}
.field__input:focus{outline:none;border-color:#6cc0ff;box-shadow:0 0 0 .2rem rgba(60,160,255,.35)}
.field__input[aria-invalid="true"]{border-color:#ff8a8a}
.field__error{font-size:.92rem;color:#ffb3b3}
.field__hint{font-size:.88rem;color:var(--text-mute)}
.field__link{color:var(--blue-400);text-decoration:underline}
.field__link:hover{color:#7cc0ff}

.check{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;font-size:1rem}
.check__input{width:1.25rem;height:1.25rem;margin:.1rem 0 0;flex:none;accent-color:var(--blue-500)}
.check__label a{color:var(--blue-400);text-decoration:underline}

/* ---------- Boutons ---------- */
.btn-auth{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3.4rem;padding:0 1.8rem;
  border:1.5px solid #46a8ff;border-radius:.5rem;
  background:linear-gradient(180deg,#2e9bff,#0b6fdc);
  box-shadow:0 0 1.4rem rgba(30,140,255,.45),inset 0 1px 0 rgba(255,255,255,.3);
  color:#fff;font:inherit;font-size:1.15rem;font-weight:700;
  cursor:pointer;transition:filter .2s;
}
.btn-auth:hover{filter:brightness(1.12)}
.btn-auth:focus-visible{outline:.15rem solid #fff;outline-offset:.15rem}
.btn-auth--ghost{
  border-color:var(--blue-line);
  background:rgba(8,28,66,.6);box-shadow:none;
  font-weight:600;
}
.btn-auth--ghost:hover{filter:none;background:rgba(30,100,200,.45)}

/* ---------- Validation en deux étapes (auth/two-step) ---------- */
.field__input--code{font-size:1.4rem;letter-spacing:.3em;text-align:center}
.two-step__methods{
  display:flex;flex-direction:column;gap:.7rem;
  margin-top:1.6rem;padding-top:1.4rem;
  border-top:1px solid rgba(90,150,230,.25);
}
.two-step__methods form{margin:0}
.two-step__method{width:100%;min-height:3rem;font-size:1rem}

/* ---------- Champ piège anti-robot (inscription) : hors écran, ignoré des lecteurs d'écran ---------- */
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- Données du joueur (bureau) ---------- */
.stats{margin:1.8rem 0 0;display:grid;gap:.1rem}
.stats__row{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.75rem 0;border-bottom:1px solid rgba(90,150,230,.25);
}
.stats dt{color:var(--text-mute)}
.stats dd{margin:0;font-weight:600;text-align:right}

/* ==========================================================================
   TABLETTE / MOBILE
   ========================================================================== */
@media (max-width:1100px){
  .account{padding:2rem 1.25rem}
  .account__card{padding:2rem 1.6rem}
  .account__title{font-size:1.9rem}
}
@media (max-width:560px){
  .account{padding:1.25rem .75rem;align-items:flex-start}
  .account__card{padding:1.6rem 1.2rem}
  .account__actions{flex-direction:column;align-items:stretch}
  .account__actions .btn-auth{width:100%}
  .stats__row{flex-direction:column;gap:.2rem}
  .stats dd{text-align:left}
}