/* ================================================================
   Smart Scroll Header & Back to Top — CSS Frontend
   Variables injectées depuis PHP via wp_add_inline_style
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   Variables par défaut (écrasées par les valeurs admin)
   ──────────────────────────────────────────────────────────────── */
:root {
    --ssh-btn-bg:        #2b2b2b;
    --ssh-btn-color:     #ffffff;
    --ssh-btn-size:      48px;
    --ssh-btn-radius:    50%;
    --ssh-btn-side:      right;
    --ssh-btn-offset-h:  24px;
    --ssh-btn-offset-v:  24px;
    --ssh-btn-icon-size: 22px;
    --ssh-anim-duration: 300ms;
}

/* ────────────────────────────────────────────────────────────────
   HEADER — Classes gérées par JS
   ──────────────────────────────────────────────────────────────── */

/* Si le header n'est pas déjà sticky, le plugin le rend sticky */
.ssh-header-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
}

/* Base : transition fluide */
.ssh-header {
    transition:
        transform var(--ssh-anim-duration) cubic-bezier(0.4, 0, 0.2, 1),
        opacity   var(--ssh-anim-duration) cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow var(--ssh-anim-duration) ease;
    will-change: transform;
}

/* Header visible (scroll vers le haut) */
.ssh-header.ssh-header-visible {
    transform: translateY(0);
    opacity: 1;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
}

/* Header masqué (scroll vers le bas) */
.ssh-header.ssh-header-hidden {
    transform: translateY(-105%);
    opacity: 0;
    box-shadow: none;
    pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────
   BOUTON BACK TO TOP
   ──────────────────────────────────────────────────────────────── */
.ssh-back-to-top {
    /* Positionnement fixe */
    position: fixed;
    bottom:   var(--ssh-btn-offset-v);
    z-index:  9998;

    /* Par défaut à droite ; JS peut basculer via CSS var */
    right: var(--ssh-btn-offset-h);

    /* Dimensions & forme */
    width:         var(--ssh-btn-size);
    height:        var(--ssh-btn-size);
    border-radius: var(--ssh-btn-radius);

    /* Couleurs */
    background-color: var(--ssh-btn-bg);
    color:            var(--ssh-btn-color);

    /* Mise en page interne */
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    border:          none;
    cursor:          pointer;
    outline:         none;

    /* Ombre */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);

    /* Transitions */
    transition:
        opacity    var(--ssh-anim-duration) cubic-bezier(0.4, 0, 0.2, 1),
        transform  var(--ssh-anim-duration) cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.2s ease,
        box-shadow 0.2s ease;

    will-change: opacity, transform;
}

/* Icône SVG */
.ssh-back-to-top svg {
    width:  var(--ssh-btn-icon-size);
    height: var(--ssh-btn-icon-size);
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

/* Placement à gauche (quand btn_side = left) */
.ssh-back-to-top[style*="left"],
body.ssh-btn-left .ssh-back-to-top {
    right: auto !important;
    left:  var(--ssh-btn-offset-h) !important;
}

/* ── États ───────────────────────────────────────────────────────*/

/* Caché */
.ssh-back-to-top.ssh-hidden {
    opacity:         0;
    transform:       translateY(20px) scale(0.85);
    pointer-events:  none;
    visibility:      hidden;
}

/* Visible */
.ssh-back-to-top.ssh-visible {
    opacity:         1;
    transform:       translateY(0) scale(1);
    pointer-events:  auto;
    visibility:      visible;
}

/* Hover */
.ssh-back-to-top:hover {
    transform:        translateY(-3px) scale(1.07);
    box-shadow:       0 8px 24px rgba(0, 0, 0, 0.28);
    filter:           brightness(1.12);
}

/* Clic / active */
.ssh-back-to-top:active,
.ssh-back-to-top.ssh-btn-active {
    transform:  translateY(0) scale(0.93);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Focus (accessibilité clavier) */
.ssh-back-to-top:focus-visible {
    outline:        3px solid var(--ssh-btn-bg);
    outline-offset: 3px;
    filter:         brightness(1.15);
}

/* ────────────────────────────────────────────────────────────────
   Responsive — réduire légèrement sur mobile
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ssh-back-to-top {
        --ssh-btn-size:       42px;
        --ssh-btn-icon-size:  19px;
        --ssh-btn-offset-h:   16px;
        --ssh-btn-offset-v:   16px;
    }
}

/* ────────────────────────────────────────────────────────────────
   Préférence : pas d'animation (accessibilité)
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ssh-header,
    .ssh-back-to-top {
        transition: none !important;
    }
}