/*
 * sticky-header.css — Module StickyHeader, MEMORA solutions <info@memora.ca>
 * ACTION: skin pilule/capsule au scroll, piloté par variables CSS.
 * RAISON: DRY, remplace les styles .scrolled inline, activable/désactivable.
 *
 * Publication : copier vers public/vendor/stickyheader/sticky-header.css
 * (le projet ne build pas d'assets — on sert depuis public/).
 */

/* =========================================================================
   Variables CSS (surchargeables par thème ou override :root dans le layout)
   ========================================================================= */
:root {
    /* Largeur max de la pilule — suffisamment large pour le méga menu */
    --mh-pill-maxw:  1200px;
    /* Arrondi de la pilule */
    --mh-radius:     9999px;
    /* Fond de la pilule (blanc translucide) */
    --mh-bg:         rgba(255, 255, 255, 0.92);
    /* Rayon de flou du fond */
    --mh-blur:       12px;
    /* Ombre portée de la pilule flottante */
    --mh-shadow:     0 8px 32px -12px rgba(0, 0, 0, 0.35);
    /* Bordure subtile de la pilule */
    --mh-border:     rgba(0, 0, 0, 0.08);
    /* Espace vertical (haut/bas) autour de la pilule quand active */
    --mh-gap:        10px;
    /* Padding horizontal interne de la pilule */
    --mh-pill-px:    24px;
    /* Durée et easing des transitions */
    --mh-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   Transitions sur l'état de BASE (jouent dans les deux sens : in ET out)
   ========================================================================= */
.mh-header {
    transition:
        background    var(--mh-transition),
        box-shadow    var(--mh-transition),
        padding       var(--mh-transition);
}

.mh-header__inner {
    /* overflow:visible garanti pour que le méga menu puisse déborder */
    overflow: visible;
    transition:
        background              var(--mh-transition),
        -webkit-backdrop-filter var(--mh-transition),
        backdrop-filter         var(--mh-transition),
        border-radius           var(--mh-transition),
        box-shadow              var(--mh-transition),
        max-width               var(--mh-transition),
        padding                 var(--mh-transition);
}

/* =========================================================================
   Logo — base 120px, rétrécit à 55px quand la pilule est active
   ========================================================================= */
.template-header-top .template-header-top-logo img {
    width:      120px !important;
    height:     120px !important;
    transition: width var(--mh-transition), height var(--mh-transition);
}

body.mh-stuck .template-header-top .template-header-top-logo img {
    width:  55px !important;
    height: 55px !important;
}

/* =========================================================================
   État PILULE — activé quand body.mh-stuck (ajouté par sticky-header.js)
   ========================================================================= */

/* Conteneur externe : fond transparent, pas d'ombre (elle passe sur la pilule) */
body.mh-stuck .mh-header {
    background:     transparent !important;
    box-shadow:     none !important;
    padding-top:    var(--mh-gap) !important;
    padding-bottom: var(--mh-gap) !important;
}

/* Conteneur interne : devient la pilule flottante centrée */
body.mh-stuck .mh-header__inner {
    max-width:              var(--mh-pill-maxw);
    margin:                 0 auto;
    padding-inline:         var(--mh-pill-px);
    border-radius:          var(--mh-radius);
    background:             var(--mh-bg) !important;
    -webkit-backdrop-filter: blur(var(--mh-blur));
    backdrop-filter:        blur(var(--mh-blur));
    box-shadow:             var(--mh-shadow);
    border:                 1px solid var(--mh-border);
}

/* =========================================================================
   Menu nav + bouton connexion — condensés quand pilule active
   ========================================================================= */
body.mh-stuck .sf-menu > li > a {
    font-size:      0.8em;
    padding-top:    2px !important;
    padding-bottom: 2px !important;
}

body.mh-stuck .sf-menu > li > a > .template-icon-menu {
    font-size:     0.65em !important;
    margin-bottom: 0 !important;
}

body.mh-stuck .edi-login-btn a {
    padding:   5px 10px !important;
    font-size: 0.75rem !important;
}

/* =========================================================================
   Mobile / tablette (≤ 991px) — pilule désactivée, barre condensée simple
   ========================================================================= */
@media (max-width: 991px) {
    body.mh-stuck .mh-header {
        background:     rgba(255, 255, 255, 0.96) !important;
        box-shadow:     0 2px 8px rgba(0, 0, 0, 0.1) !important;
        padding-top:    4px !important;
        padding-bottom: 4px !important;
    }

    body.mh-stuck .mh-header__inner {
        max-width:              100% !important;
        margin:                 0 !important;
        padding-inline:         0 !important;
        border-radius:          0 !important;
        background:             transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter:        none !important;
        box-shadow:             none !important;
        border:                 none !important;
    }
}

/* =========================================================================
   prefers-reduced-motion — zéro animation, bascule immédiate
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .mh-header,
    .mh-header__inner,
    .template-header-top .template-header-top-logo img {
        transition: none !important;
    }
}