button.msw-trigger:focus {
    background: white;
}

button.msw-trigger {
    display: flex;
    background: white;
    border-radius: 10px;
    border: none;
    box-shadow: 0 0 20px 0 rgba(97, 127, 153, 0.10);
    
}

button.msw-trigger {
    color: #5E5E5E!important;
}

.msw-trigger__text {
    margin-right: 10px;
}

svg.msw-trigger__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    order: 1;
}

kbd.msw-trigger__shortcut {
    order: 2;
}

button.msw-trigger {
    transition: transform 0.3s ease-in-out;
}

button.msw-trigger:hover {
    background: white;
    transform: scale(0.99);
}

.tutorial-icon {
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.tutorial-icon:hover {
     transform: scale(0.99);
}

.header-search-btn {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  .header-search-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  @media all and (max-width: 768px) {
    .header-search-btn .msw-trigger__text {
        display: none;
    }

     .header-search-btn .msw-trigger {
        min-height: 40px;
        max-width: 40px;
        display: flex;
        justify-content: center;
    }
  }

  .single-ressource .header-search-btn {
    display: flex!important;
    opacity: 1!important;
    transform: translateY(0)!important;
    pointer-events: auto!important;
  }


/* ===================================================================
   Navbar : effet de blur (frosted glass) + "pill" rétractée au scroll
   -------------------------------------------------------------------
   La classe .scrolled est posée par header.js dès que window.scrollY
   dépasse 50px. On combine un fond blanc semi-transparent, un
   backdrop-filter pour l'effet "verre dépoli", et un rétrécissement
   en pill flottante centrée (max-width 1280px, top 20px, border-radius).
   =================================================================== */

/* On applique `left: 50%` + `transform: translate(-50%)` en PERMANENCE
   sur la navbar (pas seulement quand scrolled). En pleine largeur c'est
   visuellement équivalent à `left: 0`, mais ça évite que la navbar saute
   à gauche au moment où la classe `.scrolled` est retirée (le snap de
   `left: 50% → auto` provoquait un déplacement visible vers la gauche
   avant que `max-width` ne finisse sa transition). En les laissant
   constants, seules `top`, `max-width`, `border-radius`, `padding` et
   les propriétés de fond animent. */
.navBar {
    left: 50% !important;
    transform: translate(-50%);
    transition:
        background-color 0.3s ease,
        backdrop-filter 0.3s ease,
        -webkit-backdrop-filter 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        top 0.3s ease,
        max-width 0.3s ease,
        border-radius 0.3s ease,
        padding 0.3s ease;
    will-change: max-width, top;
}

.navBar.scrolled {
    top: 20px !important;
    max-width: 1280px;
    border-radius: 30px;
    padding: 0px 20px !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow:
        0 2px 8px rgba(97, 127, 153, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.navBar .e-con-inner {
    transition: padding 0.3s ease;
}

.navBar.scrolled .e-con-inner {
    padding: 10px 20px !important;
}

/* Adaptation mobile de la pill : marges latérales, top réduit,
   border-radius et paddings proportionnés à un petit écran. Le
   centrage (left: 50% + transform: translate(-50%)) reste hérité
   de la déclaration globale .navBar plus haut. */
@media all and (max-width: 768px) {
    .navBar.scrolled {
        top: 10px !important;
        max-width: calc(100% - 20px);
        padding: 0 12px !important;
        border-radius: 20px;
    }

    .navBar.scrolled .e-con-inner {
        padding: 8px 12px !important;
    }
}