/* ForTradex Header Pro v4.1 */

/* ── Reset global : supprime tout espace entre le navigateur et la top bar ── */
html,body{margin-top:0 !important;padding-top:0 !important}

/* Compense la barre d'administration WordPress (32px desktop / 46px mobile) */
body.admin-bar #fth-wrap{margin-top:0}
body.admin-bar.logged-in #wpadminbar{z-index:99999}

#fth-wrap,#fth-wrap *{box-sizing:border-box;margin:0;padding:0}
#fth-wrap{font-family:'Segoe UI',system-ui,-apple-system,sans-serif}

/* ─────────────────────── TOP BAR ─────────────────────── */
.fth-topbar{
    background:var(--fth-topbar-bg,#000);
    color:var(--fth-topbar-text,#fff);
    display:flex;
    align-items:center;
    justify-content:var(--fth-topbar-justify,space-between);
    padding:7px var(--fth-m-topbar,32px);
    font-size:12.5px;
    gap:12px;
    flex-wrap:wrap;
    min-height:36px;
}
.fth-topbar-phone{display:flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.3px}
.fth-topbar-phone svg{flex-shrink:0}
.fth-topbar-slogan{font-style:italic;font-weight:400;letter-spacing:.5px;opacity:.88}

/* ─────────────────────── NAV BAR ─────────────────────── */
.fth-nav{
    background:var(--fth-nav-bg,#fff);
    border-bottom:1px solid #e5e7eb;
    position:sticky;
    top:0;
    z-index:9990;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
    transition:box-shadow .3s;
}
.fth-nav.fth-scrolled{box-shadow:0 2px 16px rgba(0,0,0,.1)}

.fth-nav-inner{
    max-width:1400px;
    margin:0 auto;
    padding:0 var(--fth-m-nav,24px);
    display:flex;
    align-items:stretch;   /* enfants à hauteur 100% */
    height:62px;
}

/* ── Logo ── */
.fth-logo{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none !important;
    flex-shrink:0;
    padding-right:20px;
    margin-right:4px;
    border-right:1px solid #e5e7eb;
    align-self:center;
    height:42px;
}
.fth-logo:hover{text-decoration:none !important}
.fth-logo-icon{display:flex;align-items:center}
.fth-logo-text{
    font-size:20px;font-weight:800;
    color:var(--fth-nav-text,#111);
    letter-spacing:-.4px;
    text-decoration:none !important;
}
.fth-logo-img{
    width:var(--fth-logo-w,auto);
    height:var(--fth-logo-h,44px);
    max-width:220px;
    object-fit:contain;
    display:block;
}

/* ────────────────────────────────────────────────────────
   MENU — liste principale
   • gap entre items = --fth-menu-gap  (espace réel en px)
   • padding lien    = 0 --fth-menu-pad-h
   • séparateur | via ::before (indépendant du gap)
───────────────────────────────────────────────────────── */
.fth-menu{
    display:flex;
    list-style:none;
    align-items:stretch;   /* li pleine hauteur */
    gap:var(--fth-menu-gap,0px); /* espace entre items */
    margin:0;
    padding:0;
    flex:1;
    height:100%;
}

.fth-menu-item{
    position:relative;
    display:flex;
    align-items:stretch;
}

/* Séparateur vertical | entre items */
.fth-menu-item + .fth-menu-item::before{
    content:'';
    display:block;
    width:1px;
    height:18px;
    background:#d1d5db;
    flex-shrink:0;
    align-self:center;
    /* Ce séparateur est DANS le gap — on le décale de -gap/2 si gap > 0 */
    margin-top:0;
}

/* ── Lien de menu ── */
.fth-menu-link{
    display:flex;
    align-items:center;
    gap:4px;
    text-decoration:none !important;
    color:var(--fth-nav-text,#374151);
    font-size:var(--fth-menu-fs,13px);
    font-weight:500;
    padding:0 var(--fth-menu-pad-h,14px);
    height:100%;
    border-top:2px solid transparent;
    border-bottom:2px solid transparent;
    border-left:none;
    border-right:none;
    outline:none;
    white-space:nowrap;
    transition:color .15s, background .15s, border-color .15s;
    background:transparent; /* TOUJOURS transparent par défaut — jamais le fond hover */
    letter-spacing:.01em;
    cursor:pointer;
}

/* ── Survol (item normal) ── */
.fth-menu-link:hover,
.fth-menu-link:focus-visible{
    text-decoration:none !important;
    color:var(--fth-nav-hover,#16a34a);
    background:var(--fth-nav-hover-bg,transparent);
    border-bottom-color:var(--fth-nav-hover-border,var(--fth-nav-hover,#16a34a));
    outline:none;
}

/*
 * ── ITEM ACTIF ──
 * Couvre TOUS les cas WordPress :
 *   .fth-active          → items manuels (fallback JSON)
 *   .current-menu-item   → menu WP, page exacte
 *   .current-menu-ancestor → menu WP, ancêtre du courant
 *   .current-menu-parent → menu WP, parent direct
 *   .current_page_item   → items de type page
 *   .current_page_ancestor → pages parentes
 *   .fth-menu-item-active → classe ajoutée par le Walker FTH
 *   [aria-current="page"] → attribut accessibilité
 */
.fth-menu .fth-active > .fth-menu-link,
.fth-menu .current-menu-item > .fth-menu-link,
.fth-menu .current-menu-ancestor > .fth-menu-link,
.fth-menu .current-menu-parent > .fth-menu-link,
.fth-menu .current_page_item > .fth-menu-link,
.fth-menu .current_page_ancestor > .fth-menu-link,
.fth-menu .fth-menu-item-active > .fth-menu-link,
.fth-menu-link.fth-active,
.fth-menu-link[aria-current="page"]{
    text-decoration:none !important;
    color:var(--fth-nav-active,#16a34a) !important;
    background:var(--fth-nav-active-bg,transparent) !important;
    border-bottom-color:var(--fth-nav-active,#16a34a) !important;
    font-weight:600;
}

/*
 * ── SURVOL sur ITEM ACTIF ──
 * Mêmes sélecteurs + :hover — garantit que le fond
 * survol s'applique à TOUS les items actifs sans exception.
 */
.fth-menu .fth-active > .fth-menu-link:hover,
.fth-menu .current-menu-item > .fth-menu-link:hover,
.fth-menu .current-menu-ancestor > .fth-menu-link:hover,
.fth-menu .current-menu-parent > .fth-menu-link:hover,
.fth-menu .current_page_item > .fth-menu-link:hover,
.fth-menu .current_page_ancestor > .fth-menu-link:hover,
.fth-menu .fth-menu-item-active > .fth-menu-link:hover,
.fth-menu-link.fth-active:hover,
.fth-menu-link[aria-current="page"]:hover{
    text-decoration:none !important;
    color:var(--fth-nav-active-hover,var(--fth-nav-active,#16a34a)) !important;
    background:var(--fth-nav-active-hover-bg,var(--fth-nav-active-bg,transparent)) !important;
    border-bottom-color:var(--fth-nav-active,#16a34a) !important;
}

/* Flèche sous-menu */
.fth-submenu-arrow{
    display:inline-block;
    vertical-align:middle;
    flex-shrink:0;
    transition:transform .2s;
    opacity:.5;
}
.fth-has-submenu:hover .fth-submenu-arrow,
.fth-has-submenu:focus-within .fth-submenu-arrow{transform:rotate(180deg)}

/* ── Boutons icônes ── */
.fth-search-btn,.fth-hamburger{
    background:none;border:none;cursor:pointer;
    color:var(--fth-nav-text,#374151);
    display:flex;align-items:center;
    padding:8px;border-radius:50%;
    transition:background .15s,color .15s;
    flex-shrink:0;
    align-self:center;
    margin-left:8px;
}
.fth-search-btn:hover,.fth-hamburger:hover{background:#f3f4f6;color:var(--fth-nav-active,#16a34a)}
.fth-hamburger{flex-direction:column;gap:5px;display:none}
.fth-hamburger span{display:block;width:21px;height:2px;background:currentColor;border-radius:2px;transition:all .3s}
.fth-hamburger[aria-expanded=true] span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.fth-hamburger[aria-expanded=true] span:nth-child(2){opacity:0}
.fth-hamburger[aria-expanded=true] span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ───────────────────────────────────────────────────────
   SOUS-MENUS
   Toutes les couleurs viennent des variables CSS :
   --fth-submenu-bg       fond du panneau
   --fth-submenu-text     couleur texte normal
   --fth-submenu-hover-bg fond au survol
   --fth-submenu-hover-text couleur texte au survol
─────────────────────────────────────────────────────── */
.fth-submenu{
    display:none;
    position:absolute;
    top:100%;      /* collé sous la navbar */
    left:0;
    min-width:220px;
    background:var(--fth-submenu-bg,#ffffff);
    border:1px solid #e5e7eb;
    border-top:2px solid var(--fth-nav-active,#16a34a);
    border-radius:0 0 6px 6px;
    box-shadow:0 6px 20px rgba(0,0,0,.10);
    padding:4px 0;
    list-style:none;
    z-index:9999;
    animation:fth-sub-in .15s ease;
}
@keyframes fth-sub-in{
    from{opacity:0;transform:translateY(-4px)}
    to{opacity:1;transform:translateY(0)}
}
/* Affichage au hover OU focus-within (accessibilité clavier) */
.fth-has-submenu:hover > .fth-submenu,
.fth-has-submenu:focus-within > .fth-submenu{
    display:block;
}
.fth-submenu-item{
    display:block;
    list-style:none;
}
.fth-submenu-link{
    display:flex;
    align-items:center;
    padding:var(--fth-submenu-pad-v,9px) 18px;
    text-decoration:none !important;
    color:var(--fth-submenu-text,#374151);
    font-size:var(--fth-submenu-fs,13px);
    font-weight:400;
    transition:background .12s,color .12s,border-color .12s;
    white-space:nowrap;
    border-left:3px solid transparent;
    background:var(--fth-submenu-bg,#ffffff);
}
.fth-submenu-link:hover,
.fth-submenu-link.fth-active,
.current-menu-item > .fth-submenu-link{
    background:var(--fth-submenu-hover-bg,#f0fdf4) !important;
    color:var(--fth-submenu-hover-text,#16a34a) !important;
    border-left-color:var(--fth-nav-active,#16a34a);
    text-decoration:none !important;
}

/* ─────────────────────── TICKER ─────────────────────── */
.fth-ticker-bar{background:var(--fth-ticker-bg,#000);color:var(--fth-ticker-text,#fff);height:38px;overflow:hidden;display:flex;align-items:center;position:relative}
.fth-ticker-bar::before,.fth-ticker-bar::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.fth-ticker-bar::before{left:0;background:linear-gradient(to right,var(--fth-ticker-bg,#000),transparent)}
.fth-ticker-bar::after{right:0;background:linear-gradient(to left,var(--fth-ticker-bg,#000),transparent)}
.fth-ticker-track{display:flex;align-items:center;white-space:nowrap;animation:fth-scroll var(--fth-ticker-speed,40s) linear infinite;will-change:transform}
.fth-ticker-track:hover{animation-play-state:paused}
@keyframes fth-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.fth-tick-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.4px;padding:0 22px;font-family:'Courier New',monospace}
.fth-tick-symbol{opacity:.65;font-weight:400;font-size:11px}
.fth-tick-price{font-weight:700}
.fth-tick-up .fth-tick-change{color:#4ade80}.fth-tick-down .fth-tick-change{color:#f87171}
.fth-tick-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;animation:fth-blink 2s ease-in-out infinite}
.fth-tick-up .fth-tick-dot{background:#4ade80}.fth-tick-down .fth-tick-dot{background:#f87171}
.fth-tick-sep{color:rgba(255,255,255,.15);font-size:16px;line-height:1;padding:0 4px}
.fth-tick-loading,.fth-tick-error{padding:0 32px;font-size:12px;opacity:.6}
.fth-tick-error{color:#f87171}
@keyframes fth-blink{0%,100%{opacity:1}50%{opacity:.2}}

/* ─────────────────────── HERO ─────────────────────── */
.fth-hero{background:var(--fth-hero-bg,#000);position:relative;overflow:hidden;min-height:var(--fth-hero-h,480px);width:100%}
.fth-slide{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;transition:opacity .85s ease;z-index:1}
.fth-slide.fth-slide-active{opacity:1;pointer-events:auto;z-index:2}
.fth-slide-inner{display:flex;align-items:center;height:100%;padding:var(--fth-m-hero-v,60px) var(--fth-m-hero-h,60px) calc(var(--fth-m-hero-v,60px) + 40px);gap:48px;max-width:1320px;margin:0 auto}
.fth-slide-left{flex:var(--fth-hero-left,55);min-width:0}
.fth-slide-right{flex:var(--fth-hero-right,45);display:flex;align-items:center;justify-content:center}
.fth-slide-title{font-size:clamp(24px,3.2vw,46px);font-weight:900;color:#fff;line-height:1.12;letter-spacing:-.5px;margin-bottom:16px;opacity:0;transform:translateY(22px);transition:opacity .55s ease .1s,transform .55s ease .1s}
.fth-slide-sub{font-size:15px;color:rgba(255,255,255,.72);line-height:1.7;margin-bottom:30px;opacity:0;transform:translateY(18px);transition:opacity .55s ease .22s,transform .55s ease .22s}
.fth-cta-btn{display:inline-block;background:var(--fth-cta-bg,#16a34a);color:var(--fth-cta-text,#fff);font-size:15px;font-weight:700;padding:13px 32px;border-radius:6px;text-decoration:none !important;cursor:pointer;border:none;opacity:0;transform:translateY(14px);transition:opacity .55s ease .36s,transform .55s ease .36s,background .2s,color .2s,box-shadow .2s}
.fth-cta-btn:hover{background:var(--fth-cta-bg-hover,#15803d);color:var(--fth-cta-text-hover,#fff);box-shadow:0 8px 28px rgba(0,0,0,.25);text-decoration:none !important}
.fth-cta-nolink{cursor:default;pointer-events:none}
.fth-slide-right img{max-width:100%;max-height:320px;object-fit:contain;border-radius:12px;opacity:0;transform:translateX(28px) scale(.96);transition:opacity .65s ease .15s,transform .65s ease .15s}
.fth-slide-svg{opacity:0;transform:translateX(28px) scale(.96);transition:opacity .65s ease .15s,transform .65s ease .15s}
.fth-slide-svg svg{width:100%;max-width:320px;height:auto}
.fth-slide.fth-slide-active .fth-slide-title,.fth-slide.fth-slide-active .fth-slide-sub,.fth-slide.fth-slide-active .fth-cta-btn{opacity:1;transform:translateY(0)}
.fth-slide.fth-slide-active .fth-slide-right img,.fth-slide.fth-slide-active .fth-slide-svg{opacity:1;transform:translateX(0) scale(1)}
.fth-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.fth-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28);border:none;cursor:pointer;padding:0;transition:background .3s,transform .3s;flex-shrink:0}
.fth-dot:hover{background:rgba(255,255,255,.55)}
.fth-dot.fth-dot-active{background:var(--fth-nav-active,#16a34a);transform:scale(1.3)}
.fth-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);color:#fff;font-size:26px;line-height:1;width:44px;height:44px;border-radius:50%;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:background .2s}
.fth-arrow:hover{background:rgba(255,255,255,.22)}
.fth-prev{left:20px}.fth-next{right:20px}

/* ─────────────────────── RESPONSIVE ─────────────────────── */
@media(max-width:1024px){
    .fth-menu-link{font-size:12.5px}
}
@media(max-width:960px){
    .fth-slide-right{display:none}
}
@media(max-width:768px){
    .fth-nav-inner{height:56px;align-items:center}
    .fth-menu{
        display:none;flex-direction:column;
        position:absolute;top:56px;left:0;right:0;
        background:var(--fth-nav-bg,#fff);
        box-shadow:0 8px 24px rgba(0,0,0,.12);
        padding:6px 0;z-index:9999;
        height:auto;gap:0;
    }
    .fth-menu.fth-open{display:flex}
    .fth-menu-item{width:100%;align-items:stretch;flex-direction:column}
    .fth-menu-item + .fth-menu-item::before{display:none}
    .fth-menu-link{
        height:44px;padding:0 20px;
        border-bottom:1px solid #f3f4f6 !important;
        border-top:none !important;
        width:100%;
    }
    .fth-menu-link:hover{background:#f9fafb}
    .fth-menu-link.fth-active,.current-menu-item > .fth-menu-link{background:#f0fdf4 !important}
    .fth-hamburger{display:flex}
    .fth-logo{border-right:none;padding-right:12px}
    .fth-hero{min-height:320px}
    .fth-slide-inner{padding:40px 20px 70px}
    .fth-slide-title{font-size:22px}
    /* Sous-menu mobile inline */
    .fth-submenu{
        position:static;display:none;
        border:none;border-top:1px solid #f0fdf4;
        border-radius:0;box-shadow:none;
        animation:none;padding:0;
        background:#fafafa;
    }
    .fth-has-submenu.fth-mobile-open > .fth-submenu{display:block}
    .fth-submenu-link{padding-left:36px;border-left:none;font-size:13px}
}

/* ─────────── TICKER v4 — Multi-Asset (Crypto + Forex + Métaux) ─────────── */
.fth-ticker-bar{
    background:var(--fth-ticker-bg,#000);
    color:var(--fth-ticker-text,#fff);
    overflow:hidden;
    height:var(--fth-ticker-h,36px);
    display:flex;
    align-items:center;
    position:relative;
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
    /* Masques dégradés gauche/droite */
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.fth-ticker-track{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    animation:fth-scroll var(--fth-ticker-speed,40s) linear infinite;
    gap:0;
    will-change:transform;
}
.fth-ticker-bar:hover .fth-ticker-track{
    animation-play-state:paused;
}
@keyframes fth-scroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* ── Items cliquables ── */
.fth-tick-item{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:0 14px;
    font-size:11.5px;
    font-weight:500;
    letter-spacing:.2px;
    white-space:nowrap;
    text-decoration:none!important;
    color:var(--fth-ticker-text,#fff);
    transition:background .2s,opacity .2s;
    height:var(--fth-ticker-h,36px);
    cursor:pointer;
    border-radius:0;
}
a.fth-tick-item:hover{
    background:rgba(255,255,255,.08);
    opacity:1;
    text-decoration:none!important;
}
a.fth-tick-item:hover .fth-tick-symbol{
    text-decoration:underline;
    text-underline-offset:2px;
}

.fth-tick-dot{
    width:6px;height:6px;border-radius:50%;flex-shrink:0;
    background:currentColor;opacity:.4;
}
.fth-tick-item.fth-tick-up .fth-tick-dot{background:#4ade80;opacity:1}
.fth-tick-item.fth-tick-down .fth-tick-dot{background:#f87171;opacity:1}

.fth-tick-symbol{
    color:var(--fth-ticker-text,#fff);
    opacity:.65;
    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}
.fth-tick-label{
    font-size:9.5px;
    opacity:.4;
    font-style:italic;
}
.fth-tick-price{
    font-weight:700;
    font-size:12px;
    font-family:'Courier New',Consolas,monospace;
    letter-spacing:.5px;
}
.fth-tick-arrow{
    font-size:8px;
    line-height:1;
}
.fth-tick-item.fth-tick-up .fth-tick-change,
.fth-tick-item.fth-tick-up .fth-tick-arrow{color:#4ade80}
.fth-tick-item.fth-tick-down .fth-tick-change,
.fth-tick-item.fth-tick-down .fth-tick-arrow{color:#f87171}
.fth-tick-change{font-size:10.5px;font-weight:600}

.fth-tick-sep{
    color:rgba(255,255,255,.18);
    font-size:8px;
    padding:0 2px;
    flex-shrink:0;
}
.fth-tick-loading,.fth-tick-error{
    padding:0 20px;
    font-size:11px;
    color:rgba(255,255,255,.45);
    font-style:italic;
    animation:fth-blink 1.2s ease-in-out infinite;
}
@keyframes fth-blink{0%,100%{opacity:.4}50%{opacity:1}}