/**
 * Albasy Marketplace — BugFix v5.5.0 (Rev 3 — Audit complet)
 * ════════════════════════════════════════════════════════════════
 * Correctifs après audit immersif complet :
 *
 *  ① Variable --ape-topbar-h: 64px → 60px (cause du gap)
 *  ② Navbar z-index + visibilité garantie
 *  ③ alb-reveal : conflit transition/animation résolu
 *     + toutes variantes (--left/--right/--scale) couvertes
 *  ④ Aurora page-header : fond jaune démesuré + inset:-50%
 *  ⑤ Fond body blanc + containers
 *  ⑥ Sidebar Dokan min-height:100vh → auto
 *  ⑦ alb-about-tabs-nav : fallback hardcodé 64px corrigé
 *
 * NB : BugFix A (padding-top:0 dans ape-hide-hf) et
 *      BugFix B (dépendance CSS) sont corrigés dans leurs
 *      fichiers source respectifs.
 *
 * Chargé EN DERNIER — ape-hide-hf en dépend explicitement.
 * @package Albasy_Marketplace @version 5.5.0-r3
 * ════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════
   ① Variable hauteur navbar — correction racine
   ─────────────────────────────────────────────────────────────
   ape-frontend.css déclare --ape-topbar-h:64px.
   La navbar .alb-tb fait réellement 60px.
   En corrigeant la variable ici (:root a priorité sur :root
   antérieur grâce au chargement en dernier), TOUS les calc()
   qui l'utilisent se recalculent automatiquement.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --ape-topbar-h:  60px;
    --alb-navbar-h:  60px;
}

/* Cas résistant : fallback hardcodé dans ape-frontend.css l.2106 */
.alb-about-tabs-nav {
    top: calc(60px + 10px) !important; /* était calc(var(--ape-topbar-h, 64px) + 10px) */
}
body.admin-bar .alb-about-tabs-nav {
    top: calc(60px + 32px + 10px) !important;
}


/* ═══════════════════════════════════════════════════════════════
   ② Navbar — positionnement, z-index, visibilité
   ═══════════════════════════════════════════════════════════════ */

header.alb-tb,
.alb-tb {
    position:    fixed      !important;
    top:         0          !important;
    left:        0          !important;
    right:       0          !important;
    width:       100%       !important;
    height:      60px       !important;
    z-index:     9000       !important;
    background:  #ffffff    !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow:  0 2px 16px rgba(0,0,0,.06) !important;
    box-sizing:  border-box !important;
    display:     flex       !important;
    visibility:  visible    !important;
    overflow:    visible    !important; /* ne jamais clipper les dropdowns */
}

body.admin-bar header.alb-tb,
body.admin-bar .alb-tb              { top: 32px !important; }

@media (max-width: 782px) {
    body.admin-bar header.alb-tb,
    body.admin-bar .alb-tb          { top: 46px !important; }
}

/* Dropdowns/search — jamais clippés */
.alb-tb .alb-dd,
.alb-tb .alb-srch-res,
.alb-tb .alb-mob-srch               { position: absolute !important; z-index: 9001 !important; }

/* Filet de sécurité multi-contexte */
body.alb-plugin-page   header.alb-tb,
body.woocommerce       header.alb-tb,
body.woocommerce-page  header.alb-tb,
body.woocommerce-account header.alb-tb {
    display:    flex    !important;
    height:     60px    !important;
    visibility: visible !important;
}


/* ═══════════════════════════════════════════════════════════════
   ③ alb-reveal — correction définitive
   ─────────────────────────────────────────────────────────────
   PROBLÈME A : ut() ajoute .alb-reveal dynamiquement après
   l'init de l'IntersectionObserver → éléments jamais observés.
   PROBLÈME B : albasy-animations.css déclare transition sur
   opacity+transform. Quand on ajoute animation:forward au même
   sélecteur, la transition CSS est prioritaire sur l'animation
   pour les propriétés communes → l'animation forward ne joue pas.
   SOLUTION : supprimer la transition sur .alb-reveal et utiliser
   exclusivement l'animation (qui a son propre easing) + .is-visible.
   ═══════════════════════════════════════════════════════════════ */

/* Base — écrase albasy-animations.css */
.alb-reveal {
    opacity:    0;
    transform:  translateY(24px);
    transition: none !important; /* CRITIQUE : supprimer la transition pour laisser l'animation agir */
    will-change: opacity, transform;
}

/* Variantes directionnelles — toujours présentes */
.alb-reveal.alb-reveal--left  { transform: translateX(-32px); }
.alb-reveal.alb-reveal--right { transform: translateX( 32px); }
.alb-reveal.alb-reveal--scale { transform: scale(.92);        }

/* JS a réussi à observer → animation fluide */
.alb-reveal.is-visible {
    opacity:   1      !important;
    transform: none   !important;
    animation: none   !important;
    transition: opacity .45s ease, transform .45s ease !important; /* remettre transition pour is-visible */
}

/*
 * FALLBACK CSS GARANTI (fonctionne sans JS ni IntersectionObserver)
 * animation:forwards → l'état final (opacity:1) persiste même sans .is-visible
 * Le délai de 0.6s laisse le temps au JS de gérer correctement les éléments
 * qui SONT dans le viewport au chargement.
 */
@keyframes alb-force-visible {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

.alb-reveal:not(.is-visible) {
    animation: alb-force-visible 0.35s ease 0.6s forwards;
}

/* Variantes : même fallback avec leur transform initial */
.alb-reveal.alb-reveal--left:not(.is-visible) {
    animation: none;
    animation: alb-force-visible-left 0.35s ease 0.6s forwards;
}
.alb-reveal.alb-reveal--right:not(.is-visible) {
    animation: alb-force-visible-right 0.35s ease 0.6s forwards;
}
.alb-reveal.alb-reveal--scale:not(.is-visible) {
    animation: alb-force-visible-scale 0.35s ease 0.6s forwards;
}

@keyframes alb-force-visible-left  { from { opacity:0; transform:translateX(-32px); } to { opacity:1; transform:none; } }
@keyframes alb-force-visible-right { from { opacity:0; transform:translateX( 32px); } to { opacity:1; transform:none; } }
@keyframes alb-force-visible-scale { from { opacity:0; transform:scale(.92);        } to { opacity:1; transform:none; } }

/* Stagger delays — conservés mais recalculés sur l'animation fallback */
.alb-reveal[data-delay="1"]:not(.is-visible) { animation-delay: 0.65s; }
.alb-reveal[data-delay="2"]:not(.is-visible) { animation-delay: 0.70s; }
.alb-reveal[data-delay="3"]:not(.is-visible) { animation-delay: 0.75s; }
.alb-reveal[data-delay="4"]:not(.is-visible) { animation-delay: 0.80s; }
.alb-reveal[data-delay="5"]:not(.is-visible) { animation-delay: 0.85s; }
.alb-reveal[data-delay="6"]:not(.is-visible) { animation-delay: 0.90s; }
.alb-reveal[data-delay="7"]:not(.is-visible) { animation-delay: 0.95s; }
.alb-reveal[data-delay="8"]:not(.is-visible) { animation-delay: 1.00s; }

/*
 * PRIORITÉ ABSOLUE — éléments above-the-fold : visibles immédiatement
 * (page headers, hero, trust bar — jamais masqués même 1ms)
 */
.alb-page-header,
.alb-page-header.alb-reveal,
.acd-page-header,
.acd-page-header.alb-reveal,
.alb-page-hero-card.alb-reveal,
.alb-vendor-hero.alb-reveal,
.alb-trust-bar,
.alb-trust-bar.alb-reveal,
.alb-hero.alb-reveal {
    opacity:   1    !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* prefers-reduced-motion — tout visible immédiatement */
@media (prefers-reduced-motion: reduce) {
    .alb-reveal,
    .alb-reveal:not(.is-visible) {
        opacity:   1    !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ④ Aurora page-header — fond jaune maîtrisé
   ─────────────────────────────────────────────────────────────
   alb-effects.css applique gradient #FFD600 + animation 8s +
   ::before { inset:-50% } qui déborde du conteneur.
   ═══════════════════════════════════════════════════════════════ */

.alb-page-header {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        rgba(255,249,196,0.28) 40%,
        rgba(232,245,233,0.18) 70%,
        #ffffff 100%
    ) !important;
    background-size: 100% 100% !important;
    animation:    none  !important;
    padding:      1.75rem 1.5rem !important;
    margin-bottom: 1.5rem  !important;
    height:       auto    !important;
    min-height:   0       !important;
    overflow:     hidden  !important;
    position:     relative !important;
    box-sizing:   border-box !important;
    border-radius: 14px   !important;
}

.alb-page-header::before,
.alb-aurora-bg::before {
    inset:     0    !important; /* était -50% : débordait hors conteneur */
    animation: none !important;
    background: radial-gradient(
        ellipse at 30% 50%, rgba(255,214,0,.08) 0%, transparent 55%
    ) !important;
    pointer-events: none !important;
}

.alb-page-header > *,
.alb-aurora-bg > * { position: relative !important; z-index: 1 !important; }

/* Combo acd-page-header + alb-aurora-bg (addresses, security, profile…) */
.acd-page-header,
.acd-page-header.alb-page-header,
.acd-page-header.alb-aurora-bg,
.alb-page-header.alb-aurora-bg {
    background: linear-gradient(
        135deg, #fafafa 0%, rgba(255,253,231,0.45) 50%, #fafafa 100%
    ) !important;
    background-size: 100% 100% !important;
    animation: none !important;
    padding: 1.5rem !important;
    height: auto !important;
    min-height: 0 !important;
}

.alb-aurora-bg {
    background: linear-gradient(135deg, #fff 0%, rgba(255,249,196,0.20) 50%, #fff 100%) !important;
    background-size: 100% 100% !important;
    animation: none !important;
    overflow: hidden !important;
    position: relative !important;
}

.alb-page-hero-card {
    min-height: 0       !important;
    height:     auto    !important;
    padding:    2rem 1.5rem !important;
}
@media (min-width: 640px) {
    .alb-page-hero-card { min-height: 180px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   ⑤ Fond body + containers
   ═══════════════════════════════════════════════════════════════ */

body,
body.alb-plugin-page,
body.woocommerce,
body.woocommerce-page,
body.woocommerce-account,
body.woocommerce-checkout,
body.woocommerce-cart {
    background-color: #ffffff !important;
    background-image: none    !important;
}

body.alb-plugin-page .site-content,
body.alb-plugin-page #content,
body.alb-plugin-page #primary,
body.alb-plugin-page .site-main,
body.alb-plugin-page main,
body.alb-plugin-page .entry-content,
body.alb-plugin-page article.page {
    background-color: transparent !important;
    background-image: none !important;
    min-height: 0   !important;
    height:     auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   ⑥ Sidebar Dokan — min-height:100vh → auto
   ═══════════════════════════════════════════════════════════════ */

.dokan-dashboard-wrap .dokan-dash-sidebar {
    min-height: 0    !important;
    height:     auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    header.alb-tb, .alb-tb { height: 60px !important; }

    .alb-page-header,
    .acd-page-header { padding: 1.25rem 1rem !important; margin-bottom: 1rem !important; }

    .alb-page-hero-card { padding: 1.5rem 1rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   ⑧ Remplacement blocs jaunes — titres de pages propres
   ─────────────────────────────────────────────────────────────
   Les alb-page-hero-card / alb-aurora-bg sont remplacés par
   h2.alb-page-title : titre simple, sobre, sans fond coloré.
   ═══════════════════════════════════════════════════════════════ */

h2.alb-page-title {
    font-family:    var(--alb-font-display, 'Playfair Display', serif);
    font-size:      clamp(1.3rem, 3.5vw, 1.75rem);
    font-weight:    700;
    color:          var(--alb-text, #212121);
    margin:         0 0 1.25rem 0;
    padding:        0;
    line-height:    1.2;
    background:     none;
    border:         none;
    animation:      none;
}

h2.alb-page-title .alb-count {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    background:     var(--alb-yellow, #FFD600);
    color:          #212121;
    font-size:      .75rem;
    font-weight:    700;
    font-family:    var(--alb-font-body, 'DM Sans', sans-serif);
    min-width:      22px;
    height:         22px;
    border-radius:  999px;
    padding:        0 6px;
    margin-left:    8px;
    vertical-align: middle;
}

/* Vendor dashboard — conteneur neutre sans fond jaune */
.alb-vdash-summary {
    background:     #ffffff;
    border:         1px solid #f0f0f0;
    border-radius:  14px;
    padding:        1.25rem 1.5rem;
    margin-bottom:  1.25rem;
    box-shadow:     0 1px 8px rgba(0,0,0,.04);
}

/* Supprimer tout fond jaune résiduel sur les anciens conteneurs */
.alb-page-hero-card,
.alb-aurora-bg,
.acd-page-header,
.alb-payout-header,
.alb-lc__hero {
    background:     none !important;
    background-image: none !important;
    animation:      none !important;
    min-height:     0   !important;
    height:         auto !important;
}
.alb-page-hero-card::before,
.alb-aurora-bg::before,
.acd-page-header::before {
    display: none !important;
}