/* assets/css/account-header.css
 * Styles du popover "Mon compte" présent dans le header sur TOUTES les pages.
 * Extrait depuis account.css pour permettre à account.css de rester
 * chargé uniquement sur les pages /account/.
 */

/* ---------- Header account (icon + popover) ---------- */
.account-menu{
  position:relative;
  display:flex;
  align-items:center;
  margin-right:10px
}

.account-btn{
  width:28px;
  height:28px;
  border:1px solid rgba(0,0,0,.90);
  background:rgba(255,255,255,.06);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}

.account-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.10);
  animation: jello-horizontal 0.9s both;
}

.account-btn svg{
  width:15px;
  height:15px;
  fill:currentColor;
  opacity:.95;
}

.account-popover{
  position:absolute;
  top:56px;
  right:0;
  width:280px;
  z-index:50;
  background:rgba(20,20,20,.92);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  padding:14px;
  color:#fff
}
.account-popover[hidden]{display:none}

.account-popover__head{padding:6px 2px 12px}
.account-popover__title{font-weight:600;font-size:14px;letter-spacing:.2px}
.account-popover__sub{opacity:.75;font-size:12px;margin-top:2px}

.account-form{display:flex;flex-direction:column;gap:8px}
.account-label{font-size:12px;opacity:.85;color:#fff}
.account-input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  outline:none
}
.account-input:focus{
  border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.08)
}

.account-submit{
  margin-top:4px;
  padding:11px 12px;
  border:0;
  border-radius:12px;
  background:#fff;
  color:#111;
  font-weight:600;
  cursor:pointer
}
.account-submit:disabled{opacity:.55;cursor:not-allowed}

.account-row{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.account-forgot,.account-register{
  font-size:12px;
  text-decoration:none;
  opacity:.85;
  color:#fff;
  cursor:pointer;
}
.account-forgot:hover,.account-register:hover{opacity:1;text-decoration:underline}

.account-msg{min-height:16px;font-size:12px;opacity:.95;margin-top:6px;color:#fff}
.account-msg.is-error{color:#ffb3b3}
.account-msg.is-ok{color:#b7ffcf}

.account-popover__actions{display:flex;flex-direction:column;gap:8px}
.account-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  cursor:pointer
}
.account-link:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28)}
.account-link--danger{background:rgba(255,80,80,.12);border-color:rgba(255,80,80,.25)}
.account-link--danger:hover{background:rgba(255,80,80,.18);border-color:rgba(255,80,80,.35)}
.account-logout-form{margin:0}

/* Bouton visible à côté de l'icône quand connecté */
.account-quickbtn{
  height:28px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.90);
  background:rgba(255,255,255,.06);
  color:#111;
  text-decoration:none;
  font-weight:600;
  font-size:12px;
  letter-spacing:.2px;
  margin-left:10px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.account-quickbtn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.10);
}