/* === HELIX MEGAMENU : LOGOUT ICON ONLY === */

/* cible précisément le lien dans le menu Helix */
#sp-header .sp-megamenu-parent > .sp-menu-item > a.menu-logout{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* cache le texte de façon robuste même si Helix force la typo */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;

  /* fixe la largeur/hauteur du “bouton” */
  width: 44px;              /* ajuste si tu veux plus petit */
  height: 44px;

  /* garde le style Helix (couleur etc.) */
  color: inherit;
}

/* icône SVG au centre */
#sp-header .sp-megamenu-parent > .sp-menu-item > a.menu-logout::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

  width: 18px;
  height: 18px;

  background: currentColor;
  -webkit-mask: url("/media/custom/logout.svg") no-repeat center / contain;
  mask: url("/media/custom/logout.svg") no-repeat center / contain;

  opacity: .95;
  transition: opacity .15s ease;
}

#sp-header .sp-megamenu-parent > .sp-menu-item > a.menu-logout:hover::before{
  opacity: .65;
}

/* tooltip custom (optionnel, sinon tu as déjà title="dec") */
#sp-header .sp-megamenu-parent > .sp-menu-item > a.menu-logout::after{
  content: "Déconnexion";
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);

  background: #222;
  color: #fff;

  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 999999;
}

#sp-header .sp-megamenu-parent > .sp-menu-item > a.menu-logout:hover::after{
  opacity: 1;
}