/* ============================================================
   Auto-Hide Header — visible au repos, masqué au scroll bas,
   révélé au scroll haut.
   ------------------------------------------------------------
   Usage : sur la section Elementor, Avancé > Classes CSS,
   ajouter `coteaux-header-autohide`.

   Variables CSS :
     --coteaux-header-top         : offset top (admin bar) — posé par le JS
     --coteaux-header-duration    : durée du slide (default 350ms)
     --coteaux-header-easing      : courbe (default cubic-bezier doux)

   Attributs HTML pris en charge par le JS (sur la section) :
     data-autohide-threshold="80"   -> px de scroll avant de masquer
     data-autohide-delta="6"        -> ignore les micro-scrolls (px)
   ============================================================ */

/* Double-classe + !important pour battre les sélecteurs Elementor
   (`.e-con`, `.elementor-element`) qui imposent `position: relative`. */
.coteaux-header-autohide.coteaux-header-autohide {
    position: fixed !important;
    top: var(--coteaux-header-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: translate3d(0, 0, 0);
    transition: transform var(--coteaux-header-duration, 350ms) var(--coteaux-header-easing, cubic-bezier(0.22, 1, 0.36, 1));
    will-change: transform;
}

/* État masqué : on translate vers le haut de toute sa hauteur.
   Combiné avec top:32px (admin bar), ça finit pile derrière l'admin bar / hors viewport. */
.coteaux-header-autohide.coteaux-header-autohide.is-hidden {
    transform: translate3d(0, -100%, 0);
}

/* Le body reçoit un padding-top égal à la hauteur du header pour que
   le contenu en flow ne passe pas dessous. Variable posée par le JS. */
body.coteaux-has-autohide-header {
    padding-top: var(--coteaux-header-height, 0px);
}

/* Neutralise les vestiges du sticky Elementor au cas où il resterait actif. */
.coteaux-header-autohide.elementor-sticky--active,
.coteaux-header-autohide.elementor-sticky--effects {
    transform: translate3d(0, 0, 0) !important;
}
.coteaux-header-autohide.is-hidden.elementor-sticky--active,
.coteaux-header-autohide.is-hidden.elementor-sticky--effects {
    transform: translate3d(0, -100%, 0) !important;
}
.coteaux-header-autohide + .elementor-sticky__spacer {
    display: none !important;
}

/* Respecte les utilisateurs qui demandent moins d'animation. */
@media (prefers-reduced-motion: reduce) {
    .coteaux-header-autohide.coteaux-header-autohide {
        transition: none;
    }
}