/* ============================================================
   Sidebar (admin + compte) — composant unique, code propre.
   Classes .sb-* dédiées. Les `!important` ne servent qu'à
   neutraliser la règle globale button{} du site (padding/width
   /margin/overflow en !important) — sinon aucun hack.
   ============================================================ */

.sb {
  /* Réglages fluides (s'adaptent à l'écran ET au zoom) */
  --sb-bg: #222222;
  --sb-pad-y: clamp(10px, 1.5vh, 18px);
  --sb-item-py: clamp(7px, 1.15vh, 12px);
  --sb-item-px: 20px;
  --sb-gap: clamp(9px, 1.3vh, 15px);
  --sb-icon: clamp(18px, 2.4vh, 24px);
  --sb-font: clamp(0.92rem, 1.7vh, 1.05rem);

  box-sizing: border-box;
  /* Largeur en valeurs directes (PAS via une var : une var ne transitionne pas). */
  flex: 0 0 clamp(175px, 15vw, 245px);
  width: clamp(175px, 15vw, 245px);
  min-width: 0;                 /* sinon min-width:auto bloque le collapse à l'étroit */
  background-color: var(--sb-bg);
  border-radius: 0 15px 15px 0;
  padding: var(--sb-pad-y) 0;

  position: sticky;             /* `top` posé dynamiquement par useStickyTop */
  align-self: flex-start;
  overflow-x: hidden;
  overflow-y: auto;             /* scroll interne seulement si trop petit écran */
  scrollbar-width: none;        /* pas de scrollbar visible (évite le décalage) */

  transition: flex-basis 0.28s ease, width 0.28s ease;
}
.sb::-webkit-scrollbar { display: none; }

.sb--compte { --sb-bg: #000000; }

/* --- Mode réduit : largeur = icône + padding des 2 côtés.
   Ainsi l'icône (fixe à padding-left) est PILE centrée sans jamais bouger. --- */
.sb--collapsed {
  flex-basis: calc(var(--sb-icon) + var(--sb-item-px) * 2);
  width: calc(var(--sb-icon) + var(--sb-item-px) * 2);
}

/* --- Éléments (toggle + liens + bouton déconnexion : même style) --- */
.sb-toggle,
.sb-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--sb-gap);
  width: 100% !important;                 /* bat button{width:35%} */
  margin: 0 !important;                   /* bat button{margin:20px 0} */
  background: none !important;
  border: none;
  color: #ffffff;
  font-family: inherit;
  font-size: var(--sb-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;                        /* clippe le label pendant le collapse */
}

.sb-item {
  padding: var(--sb-item-py) var(--sb-item-px) !important;  /* bat button{padding !important} */
}
.sb-toggle {
  padding: 0 var(--sb-item-px) var(--sb-item-py) var(--sb-item-px) !important;
}

.sb-item:hover { color: #ffffff; }
/* Actif (page courante) = fond gris foncé sur toute la ligne (icône + texte).
   !important pour battre le `background:none !important` posé plus haut. */
.sb-item--active { background-color: #434343 !important; }

/* Icônes PNG (taille fluide) */
.sb-toggle img,
.sb-item img {
  flex-shrink: 0;
  width: var(--sb-icon);
  height: auto;
  display: block;
}

.sb-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.18s ease;
}

/* Soulignement animé (survol + actif) — élément dédié (pas de ::after
   pour éviter le button::after global). */
.sb-underline {
  position: absolute;
  left: 0;
  right: 0;            /* pleine largeur de l'item (comme le survol) */
  bottom: 0;
  height: 2px;
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
  pointer-events: none;
}
/* Underline blanc animé au SURVOL uniquement (l'actif, lui, a le fond gris). */
.sb-item:hover .sb-underline { transform: scaleX(1); }

.sb-logout-form {
  margin: 0 !important;
  width: 100%;
}

/* ============================================================
   Mode réduit : SEUL le texte disparaît (fade) et la boîte
   rétrécit. Les icônes NE BOUGENT PAS (padding-left inchangé) ;
   le texte est simplement clippé par la boîte qui rétrécit.
   ============================================================ */
.sb--collapsed .sb-label { opacity: 0; }

/* ============================================================
   Petit écran : sidebar auto-réduite en icônes.
   ============================================================ */
@media (max-width: 768px) {
  .sb {
    flex-basis: calc(var(--sb-icon) + var(--sb-item-px) * 2);
    width: calc(var(--sb-icon) + var(--sb-item-px) * 2);
  }
  .sb .sb-label { opacity: 0; }
}

/* ============================================================
   Sidebar ADMIN pleine hauteur (.sb--plein) : logo en haut,
   toujours ouverte (aucun collapse / hamburger), déconnexion en bas.
   ============================================================ */
.sb--plein {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    flex: 0 0 210px;
    width: 210px;
    display: flex;
    flex-direction: column;
    border-radius: 0 15px 15px 0;
    padding: 16px 0 18px;
    transition: none;              /* pas d'animation d'ouverture/fermeture */
}
.sb--plein .sb-logout-form {
    margin-top: auto !important;   /* déconnexion collée en bas */
}

/* Logo NOEFA en haut (clic = retour accueil) */
.sb-logo {
    display: block;
    padding: 6px 10px 16px;
    text-decoration: none;
}
.sb-logo img {
    width: 100%;
    max-width: 180px;   /* logo gardé à ~180px malgré la barre plus étroite */
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Icône SVG d'un item (ex. « Retour au site ») — même taille que les PNG. */
.sb-item svg {
    flex-shrink: 0;
    width: var(--sb-icon);
    height: var(--sb-icon);
    display: block;
}

/* Petit séparateur sous le bouton « Retour au site ». */
.sb-sep {
    height: 1px;
    margin: 8px 18px;
    background-color: rgba(255, 255, 255, 0.12);
}

/* La sidebar admin reste toujours déployée, même sur petit écran. */
@media (max-width: 768px) {
    .sb--plein {
        flex-basis: 245px;
        width: 245px;
    }
    .sb--plein .sb-label {
        opacity: 1;
    }
}