.admin-panel{position:fixed;top:0;right:0;width:min(480px,100%);height:100vh;background:rgba(3,9,20,.96);backdrop-filter:blur(20px);border-left:1px solid rgba(89,163,255,.25);box-shadow:-10px 0 60px #0008;z-index:1000;overflow-y:auto;transform:translateX(100%);transition:transform .3s ease}
.admin-panel:not([hidden]){transform:translateX(0)}
.admin-panel-head{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid rgba(89,163,255,.15)}
.admin-panel-head h2{font-size:16px;font-weight:800;color:#eef4ff;margin:0}
.admin-close{background:none;border:0;color:#8f9db1;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:8px}
.admin-close:hover{color:#fff;background:rgba(255,255,255,.06)}
.admin-list{padding:16px 28px}
.admin-empty{color:#65748a;font-size:14px;text-align:center;padding:40px 0}
.admin-user{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid rgba(89,163,255,.1)}
.admin-user-info{display:flex;flex-direction:column;gap:3px}
.admin-user-info strong{color:#eef4ff;font-size:15px}
.admin-user-info span{color:#8f9db1;font-size:13px}
.admin-user-info small{color:#4a5868;font-size:11px}
.admin-user-actions{display:flex;gap:8px}
.admin-approve{padding:8px 16px;border:0;border-radius:8px;background:linear-gradient(90deg,#087cff,#13baff);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.admin-approve:hover{opacity:.88}
.admin-reject{padding:8px 16px;border:1px solid rgba(255,135,155,.3);border-radius:8px;background:transparent;color:#ff879b;font-size:13px;font-weight:700;cursor:pointer}
.admin-reject:hover{background:rgba(255,135,155,.08)}
.admin-pill{position:absolute;top:5%;right:calc(3.4% + 178px);display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid rgba(89,163,255,.25);border-radius:20px;background:rgba(3,9,20,.76);backdrop-filter:blur(12px);color:#eef4ff;font-size:13px;font-weight:700;cursor:pointer;pointer-events:auto;z-index:999;transition:all .2s}
.admin-pill[hidden]{display:none!important}
.admin-pill:hover{transform:translateY(-2px) scale(1.025);border-color:rgba(89,163,255,.55);box-shadow:0 0 30px rgba(89,163,255,.15)}.admin-pill:active{transform:translateY(0) scale(.99)}.admin-pill:focus-visible{outline:2px solid rgba(89,163,255,.7);outline-offset:3px}
.admin-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:linear-gradient(90deg,#087cff,#13baff);color:#fff;font-size:12px;font-weight:800}

@media (max-width: 700px){
  .admin-pill{
    top: calc(5% + 52px);
    right: 3.4%;
  }
}
.admin-count.has-pending{
  animation:admin-count-pulse 1.8s ease-in-out infinite;
}

@keyframes admin-count-pulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(19,186,255,0);
  }
  50%{
    transform:scale(1.12);
    box-shadow:0 0 18px rgba(19,186,255,.65);
  }
}.admin-users-pill{
  position:absolute;
  top:5%;
  right:calc(3.4% + 360px);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border:1px solid rgba(89,163,255,.25);
  border-radius:20px;
  background:rgba(3,9,20,.76);
  backdrop-filter:blur(12px);
  color:#eef4ff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  pointer-events:auto;
  z-index:999;
  transition:all .2s;
}

.admin-users-pill[hidden]{
  display:none!important;
}

.admin-users-pill:hover{
  transform:translateY(-2px) scale(1.025);
  border-color:rgba(89,163,255,.55);
  box-shadow:0 0 30px rgba(89,163,255,.15);
}

.admin-users-pill:active{
  transform:translateY(0) scale(.99);
}

.admin-users-pill:focus-visible{
  outline:2px solid rgba(89,163,255,.7);
  outline-offset:3px;
}

.admin-users-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:linear-gradient(90deg,#087cff,#13baff);
  color:#fff;
  font-size:12px;
  font-weight:800;
}

@media (max-width:700px){
  .admin-users-pill{
    top:calc(5% + 52px);
    right:3.4%;
  }
}
.logout-pill{
  position:absolute;
  top:5%;
  right:calc(3.4% + 720px);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border:1px solid rgba(89,163,255,.25);
  border-radius:20px;
  background:rgba(3,9,20,.76);
  backdrop-filter:blur(12px);
  color:#eef4ff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  pointer-events:auto;
  z-index:999;
  transition:all .2s;
}

.logout-pill:hover{
  transform:translateY(-2px) scale(1.025);
  border-color:rgba(89,163,255,.55);
  box-shadow:0 0 30px rgba(89,163,255,.15);
}

.logout-pill:active{
  transform:translateY(0) scale(.99);
}

.logout-pill:focus-visible{
  outline:2px solid rgba(89,163,255,.7);
  outline-offset:3px;
}

.logout-pill:disabled{
  opacity:.55;
  cursor:wait;
}

.logout-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(89,163,255,.12);
  color:#8fc8ff;
  font-size:14px;
  font-weight:800;
}

/* Accueil et contenus : boutons distincts pour éviter les chevauchements. */
.home-pill{position:absolute;top:5%;right:calc(3.4% + 154px);display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid rgba(89,163,255,.25);border-radius:20px;background:rgba(3,9,20,.76);backdrop-filter:blur(12px);color:#eef4ff;font-size:13px;font-weight:700;cursor:pointer;pointer-events:auto;z-index:999;text-decoration:none}.home-pill:hover{transform:translateY(-2px);border-color:rgba(89,163,255,.55)}.home-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(89,163,255,.12);color:#8fc8ff;font-size:16px}
.is-admin .notification-pill{display:none!important}
@media(min-width:701px){#adminUsersBtn{right:calc(3.4% + 510px)!important}#adminContentBtn{right:calc(3.4% + 356px)!important}body .notification-pill{right:calc(3.4% + 490px)!important}.home-pill{right:calc(3.4% + 154px)}}
@media(max-width:700px){.home-pill{top:5%;right:calc(3.4% + 48px);width:42px;min-width:42px;height:42px;padding:0;border-radius:50%;justify-content:center}.home-pill>span:not(.home-icon){display:none}.home-icon{margin:0}.logout-pill{right:3.4%}.notification-pill{right:calc(3.4% + 96px)}#adminContentBtn{right:calc(3.4% + 144px)}#adminUsersBtn{right:calc(3.4% + 192px)}}
@media(max-width:700px){body .notification-pill{top:5%!important;right:calc(3.4% + 96px)!important;width:42px!important;height:42px!important;pointer-events:auto!important}.home-pill{top:5%!important;right:calc(3.4% + 48px)!important}.logout-pill{top:5%!important;right:3.4%!important}#adminContentBtn{top:5%!important;right:calc(3.4% + 144px)!important}#adminUsersBtn{top:5%!important;right:calc(3.4% + 192px)!important}}

@media (max-width:700px){
  .logout-pill{
    top:calc(5% + 104px);
    right:3.4%;
  }
}

/* PORTAIL — boutons compacts mobile */
@media (max-width:700px){
  .admin-pill,
  .admin-users-pill,
  .logout-pill{
    top:5%;
    width:40px;
    min-width:40px;
    height:40px;
    padding:0;
    gap:0;
    justify-content:center;
    border-radius:50%;
    box-sizing:border-box;
  }

  .admin-pill{
    right:calc(3.4% + 96px);
  }

  .admin-users-pill{
    right:calc(3.4% + 48px);
  }

  .logout-pill{
    right:3.4%;
  }

  .admin-pill > span:not(.admin-count),
  .admin-users-pill > span:not(.admin-users-icon),
  .logout-pill > span:not(.logout-icon){
    display:none;
  }

  .admin-count{
    min-width:22px;
    height:22px;
    padding:0;
  }

  .admin-users-icon,
  .logout-icon{
    width:22px;
    height:22px;
    margin:0;
  }
}

/* PORTAIL — ordre des boutons PC */
@media (min-width:701px){
  .status-pill{
    right:calc(3.4% + 720px) !important;
  }

  .profile-pill{
    right:calc(3.4% + 540px) !important;
  }

  .admin-pill{
    right:calc(3.4% + 360px) !important;
  }

  .admin-users-pill{
    right:calc(3.4% + 178px) !important;
  }

  .logout-pill{
    right:3.4% !important;
  }
}

.profile-pill{
position:absolute;
z-index:1000;
top:5%;
right:calc(3.4% + 540px);
height:52px;
min-width:145px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:11px;
padding:0 17px;
border:1px solid rgba(180,120,255,.35);
border-radius:999px;
background:rgba(5,10,19,.76);
backdrop-filter:blur(12px);
color:#eef4ff;
font-size:16px;
font-weight:700;
cursor:pointer;
pointer-events:auto;
white-space:nowrap;
transition:all .2s;
}

.profile-pill:hover{
transform:translateY(-2px) scale(1.025);
border-color:rgba(180,120,255,.7);
box-shadow:0 0 30px rgba(180,120,255,.18);
}


.profile-icon{
font-size:16px;
}



@media (max-width:700px){

.status-pill{
    right:calc(3.4% + 192px);
    width:42px;
    min-width:42px;
    height:42px;
    padding:0;
    border-radius:50%;
    justify-content:center;
}

.status-text{
    display:none;
}

.profile-pill,
.admin-pill,
.admin-users-pill,
.logout-pill{
    width:42px;
    height:42px;
    padding:0;
    border-radius:50%;
    justify-content:center;
    gap:0;
}


.profile-pill > span:not(.profile-icon),
.admin-pill > span:not(.admin-count),
.admin-users-pill > span:not(.admin-users-icon),
.logout-pill > span:not(.logout-icon){
    display:none;
}


.profile-icon,
.admin-users-icon,
.logout-icon{
    font-size:16px;
}


.profile-pill{
    right:calc(3.4% + 144px);
}


.admin-pill{
    right:calc(3.4% + 96px);
}


.admin-users-pill{
    right:calc(3.4% + 48px);
}


.logout-pill{
    right:3.4%;
}

}

/* MOBILE - boutons portail uniquement en icônes */
@media (max-width:700px){

.profile-pill > span:not(.profile-icon),
.admin-pill > span:not(.admin-count),
.admin-users-pill > span:not(.admin-users-icon),
.logout-pill > span:not(.logout-icon){
  display:none;
}

.profile-pill,
.admin-pill,
.admin-users-pill,
.logout-pill{
  width:42px;
  min-width:42px;
  height:42px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

.profile-icon,
.admin-users-icon,
.logout-icon{
  margin:0;
}

}
/* MOBILE - alignement final bouton Online */
@media (max-width:700px){

.status-pill{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    padding:0 !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    right:calc(3.4% + 192px) !important;
}

.status-pill .status-indicator{
    display:flex !important;
}

}

.user-security {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:8px;
  font-size:12px;
  color:#8f9db1;
}

.user-security span:last-child {
  color:#ff879b;
  font-weight:700;
}


.user-unblock {
  padding:8px 16px;
  border:1px solid rgba(80,220,150,.35);
  border-radius:8px;
  background:transparent;
  color:#50dc96;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.user-unblock:hover {
  background:rgba(80,220,150,.12);
}

.user-unblock:disabled {
  opacity:.5;
  cursor:not-allowed;
}

/* Barre du portail — disposition finale mobile.
   Le bouton Contenus du modérateur reprend la place de la cloche ;
   la notification reste disponible juste à gauche de l'horloge. */
.content-pill{
  position:absolute;
  top:5%;
  right:calc(3.4% + 356px);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border:1px solid rgba(89,163,255,.25);
  border-radius:20px;
  background:rgba(3,9,20,.76);
  backdrop-filter:blur(12px);
  color:#eef4ff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  pointer-events:auto;
  z-index:999;
  transition:all .2s;
}
.content-pill[hidden]{display:none!important}
.content-pill:hover{transform:translateY(-2px) scale(1.025);border-color:rgba(89,163,255,.55)}

@media(max-width:700px){
  .content-pill{
    top:5%!important;
    right:calc(3.4% + 96px)!important;
    width:42px;
    min-width:42px;
    height:42px;
    padding:0;
    gap:0;
    justify-content:center;
    border-radius:50%;
    box-sizing:border-box;
  }
  .content-pill > span:not(.admin-users-icon){display:none}
  .content-pill .admin-users-icon{margin:0;font-size:16px}

  /* La cloche est sous la ligne d'actions, juste à côté de l'heure. */
  body .notification-pill{
    top:calc(5% + 54px)!important;
    right:calc(3.4% + 90px)!important;
    width:38px!important;
    height:38px!important;
  }

  /* L'administrateur conserve tous ses accès sans chevauchement. */
  .is-admin #adminContentBtn{top:calc(5% + 54px)!important;right:calc(3.4% + 46px)!important}
}

/* Administration : les sept actions ne tiennent pas sur une seule ligne.
   On réserve une seconde ligne aux deux écrans de gestion. */
@media(min-width:701px){
  .is-admin .admin-pill{top:5%!important;right:calc(3.4% + 340px)!important}
  .is-admin #adminUsersBtn{top:calc(5% + 54px)!important;right:calc(3.4% + 370px)!important}
  .is-admin #adminContentBtn{top:calc(5% + 54px)!important;right:calc(3.4% + 200px)!important}
  .is-admin .home-pill{top:5%!important;right:calc(3.4% + 154px)!important}
  .is-admin .logout-pill{top:5%!important;right:3.4%!important}
}

@media(max-width:700px){
  /* Même barre principale que pour un modérateur : statut, profil,
     contenus, accueil et déconnexion. */
  .is-admin #adminContentBtn{top:5%!important;right:calc(3.4% + 96px)!important}
  .is-admin .home-pill{top:5%!important;right:calc(3.4% + 48px)!important}
  .is-admin .logout-pill{top:5%!important;right:3.4%!important}

  /* Les outils uniquement administrateur occupent une ligne dédiée. */
  .is-admin .admin-pill{top:calc(5% + 54px)!important;right:calc(3.4% + 96px)!important}
  .is-admin #adminUsersBtn{top:calc(5% + 54px)!important;right:calc(3.4% + 48px)!important}
}

/* Modo mobile : Contenus remplace exactement la cloche dans la première ligne.
   La cloche est sur une ligne indépendante, près de l'horloge. */
@media(max-width:700px){
.is-modo #adminContentBtn{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    top:5%!important;
    right:calc(3.4% + 96px)!important;
    z-index:1005!important;
  }
  .is-modo .notification-pill{
    top:calc(5% + 54px)!important;
    right:calc(3.4% + 90px)!important;
    z-index:1004!important;
  }
}

@media(min-width:701px){.is-admin #adminPlanningBtn{top:calc(5% + 54px)!important;right:calc(3.4% + 560px)!important}}
@media(max-width:700px){.is-admin #adminPlanningBtn{top:calc(5% + 104px)!important;right:3.4%!important;width:42px!important;min-width:42px!important;height:42px!important;padding:0!important;justify-content:center!important;border-radius:50%!important}.is-admin #adminPlanningBtn>span:not(.admin-users-icon){display:none}}