/* =========================================================================
   VooX — Sous-menu du menu principal (Mag › Media, TV).
   Il s'ouvre au survol et au clavier, sous la forme d'une petite carte : une
   icône, le nom, une phrase. Couleurs, police et rayons sont ceux de la
   charte (voox.css) ; rien d'autre ne bouge.
   ========================================================================= */
.voox-nav .voox-a-sous{position:relative}
.voox-nav .voox-a-sous > a{display:inline-flex;align-items:center;gap:5px}
.voox-sous-fleche{transition:transform .25s;opacity:.7}
.voox-nav .voox-a-sous:hover > a .voox-sous-fleche,
.voox-nav .voox-a-sous:focus-within > a .voox-sous-fleche{transform:rotate(180deg);opacity:1}

.voox-nav .voox-sous{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);
  display:block;width:268px;margin:0;padding:8px;gap:0;list-style:none;z-index:60;
  background:#161B22;border:1px solid rgba(255,255,255,.12);border-radius:18px;
  box-shadow:0 24px 48px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  /* voox.css met les listes du menu en ligne : ici, une entrée par ligne. */
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
/* La petite pointe vers l'entrée du menu. */
.voox-nav .voox-sous::before{
  content:'';position:absolute;top:-7px;left:50%;width:12px;height:12px;
  transform:translateX(-50%) rotate(45deg);
  background:#161B22;border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);
  border-radius:3px 0 0 0;
}
/* Le trajet de la souris entre l'entrée et la carte garde le survol. */
.voox-nav .voox-a-sous::after{content:'';position:absolute;left:-14px;right:-14px;top:100%;height:14px}

.voox-nav .voox-a-sous:hover > .voox-sous,
.voox-nav .voox-a-sous:focus-within > .voox-sous{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}

.voox-nav .voox-sous li{display:block}
.voox-nav .voox-sous a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px;
  opacity:1;color:rgba(248,250,252,.92);transition:background .2s,transform .2s,color .2s;
}
.voox-nav .voox-sous a:hover{background:rgba(255,255,255,.07);transform:translateX(2px);color:#fff}
.voox-nav .voox-sous li.is-active a{background:rgba(255,45,155,.14);color:#fff}

.voox-sous-ico{
  flex:0 0 36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#fff;transition:background .2s,color .2s;
}
.voox-nav .voox-sous a:hover .voox-sous-ico{background:var(--voox-rose,#FF2D9B);color:#fff}
.voox-nav .voox-sous li.is-active .voox-sous-ico{background:var(--voox-rose,#FF2D9B)}

.voox-sous-texte{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.voox-sous-texte strong{font-size:14.5px;font-weight:600}
.voox-sous-texte small{font-size:12px;opacity:.62;font-weight:400}

@media (prefers-reduced-motion:reduce){
  .voox-nav .voox-sous,.voox-nav .voox-sous a,.voox-sous-fleche{transition:none}
}

/* =========================================================================
   VooX — Le nom du membre dans la barre : un sous-menu « Mon profil » et
   « Se déconnecter », dans la même carte sombre que le sous-menu du Mag.
   ========================================================================= */
.voox-compte-menu{position:relative}
.voox-compte-bouton{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;
}
.voox-compte-photo{
  width:28px;height:28px;border-radius:50%;object-fit:cover;display:block;
  border:1px solid rgba(248,250,252,.25);
}
.voox-compte-bouton .voox-sous-fleche{transition:transform .25s;opacity:.7}
.voox-compte-menu.is-ouvert .voox-compte-bouton .voox-sous-fleche{transform:rotate(180deg);opacity:1}

.voox-compte-liste{
  position:absolute;top:calc(100% + 12px);right:0;width:238px;z-index:60;padding:8px;
  background:#161B22;border:1px solid rgba(255,255,255,.12);border-radius:18px;
  box-shadow:0 24px 48px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.voox-compte-liste::before{
  content:'';position:absolute;top:-7px;right:22px;width:12px;height:12px;
  transform:rotate(45deg);background:#161B22;
  border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);
}
.voox-compte-menu.is-ouvert .voox-compte-liste,
.voox-compte-menu:focus-within .voox-compte-liste{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}

.voox-compte-liste a,
.voox-compte-liste button{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;
  border-radius:13px;background:none;text-align:left;cursor:pointer;
  font:600 14.5px/1.25 inherit;color:rgba(248,250,252,.92);text-decoration:none;
  transition:background .2s,transform .2s,color .2s;
}
.voox-compte-liste a:hover,
.voox-compte-liste button:hover{background:rgba(255,255,255,.07);transform:translateX(2px);color:#fff}
.voox-compte-liste form{margin:0}
.voox-compte-liste .voox-sous-ico{flex:0 0 32px;height:32px;border-radius:10px}
.voox-compte-liste a:hover .voox-sous-ico,
.voox-compte-liste button:hover .voox-sous-ico{background:var(--voox-rose,#FF2D9B);color:#fff}

@media (prefers-reduced-motion:reduce){
  .voox-compte-liste,.voox-compte-liste a,.voox-compte-liste button,.voox-compte-bouton .voox-sous-fleche{transition:none}
}