/* 8.5. @media screen and (max-width: 380px) (Très petits mobiles - ex: Galaxy S8+) */
@media screen and (max-width: 380px) {
    .search-login-container {
        gap: 5px;
        padding-right: 5px;
    }
    .login-button {
        padding: 6px 8px;
        font-size: 0.85em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .login-button .login-button-text { /* Si le texte est dans un span */
        display: none; /* Cache le texte, garde l'icône */
    }
    .login-button .fa-sign-in-alt {
        margin-right: 0;
        font-size: 1.1em; /* Ajuster taille icône si texte caché */
    }
    .login-button { /* Ajuster padding pour icône seule */
        padding: 8px; 
    }
    /* Réduire taille autres éléments si besoin */
    .search-container .search-button,
    #sound-controls #btn-mute {
        padding: 5px; /* Ajuster si width/height fixes */
    }
    #theme-toggle-button.theme-switch { /* Theme switcher encore plus petit */
        width: 40px;
        height: 30px;
    }
    #theme-toggle-button.theme-switch .theme-switch-thumb {
        width: 22px;
        height: 22px;
    }
    #theme-toggle-button.theme-switch.dark-active .theme-switch-thumb {
        left: 4px !important;
    }
    #theme-toggle-button.theme-switch.light-active .theme-switch-thumb {
        left: calc(40px - 22px - 4px) !important; /* 14px */
    }
}

/* Règle spécifique pour menu user sur desktop via :hover */
@media screen and (min-width: 769px) { 
    .user-menu-container:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* ==========================================================
   CORRECTIF ANIMATION SÉQUENTIELLE
   ========================================================== */

.content-is-exiting {
    animation: simple-fade-out-up 0.3s ease-in forwards;
}

.content-is-entering {
    animation: simple-fade-in 0.4s ease-out forwards;
}

@keyframes simple-fade-out-up {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-50%); /* L'élément glissera vers le haut de toute sa hauteur */
    }
}

@keyframes simple-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Wisps: blending par thème */
html.dark-mode  .nav-button > .nv-wisps { mix-blend-mode: lighten; }
html.light-mode .nav-button > .nv-wisps { mix-blend-mode: normal !important; }

/* Le bouton crée son propre stacking context */
.nav-button { position: relative; isolation: isolate; }

/* Canvas sous le texte */
.nav-button > .nv-wisps {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Libellé au-dessus du canvas */
.nav-button > .nv-label {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* TECHTALK micro-patch — Skip link */
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus {
  left: 8px; top: 8px; z-index: 10000;
  padding: .5rem 1rem; background: #000; color: #fff; border-radius: .5rem;
}