/* 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: 0.375rem 0.5rem;
        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; 
    }
    .search-container .search-button {
        padding: 5px;
    }
    #settings-toggle {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    .settings-panel {
        width: 200px;
        padding: 12px;
    }
    #theme-toggle-button.theme-switch {
        --reactor-cut: 5px;
        --reactor-inner-cut: 3px;
        width: 40px;
        height: 30px;
    }
    #theme-toggle-button.theme-switch .theme-switch-thumb {
        width: 20px;
        height: 20px;
    }
    #theme-toggle-button.theme-switch .hex-border {
        inset: 2px;
    }
    #theme-toggle-button.theme-switch .theme-switch-icon svg {
        width: 9px;
        height: 9px;
    }
    #theme-toggle-button.theme-switch .reactor-glow {
        width: 24px;
        height: 24px;
    }
    #theme-toggle-button.theme-switch .hex-border polygon {
        stroke-width: 4;
    }
    #theme-toggle-button.theme-switch.dark-active .theme-switch-thumb {
        left: 3px !important;
    }
    #theme-toggle-button.theme-switch.light-active .theme-switch-thumb {
        left: calc(100% - 20px - 3px) !important;
    }
    #theme-toggle-button.theme-switch.dark-active .reactor-glow {
        left: 0 !important;
    }
    #theme-toggle-button.theme-switch.light-active .reactor-glow {
        left: calc(100% - 24px) !important;
    }
}

/* 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: perspective(800px) translateZ(0);
    }
    to {
        opacity: 0;
        transform: perspective(800px) translateZ(-150px);
    }
}

@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; }

/* 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;
}