/**
 * Header — d314.io v5
 * À enqueue via functions.php du thème enfant
 */

/* ── BASE ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

body {
    font-family:var(--font-family-primary);
    font-size:var(--font-size-base); color:var(--text-primary);
    background:var(--bg-primary);
    -webkit-font-smoothing:antialiased;
    padding-top:52px; /* compense le header fixed */
}

/* ── HEADER ── */
.hd {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    height:52px;
    background:rgba(19,19,31,.82);
    border-bottom:1px solid var(--border-subtle);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:background .2s, border-color .2s;
}
.hd.scrolled {
    background:rgba(19,19,31,.97);
    border-bottom-color:var(--border-medium);
}

.hd-inner {
    max-width:1200px; margin:0 auto;
    padding:0 40px; height:100%;
    display:flex; align-items:center; gap:0;
}

/* ── LOGO ── */
.hd-logo {
    all:unset; cursor:pointer;
    display:flex; align-items:center; gap:9px;
    padding:5px 8px; border-radius:8px;
    transition:background .12s; flex-shrink:0;
    text-decoration:none;
}
.hd-logo:hover { background:rgba(255,255,255,.04); }

.hd-logo-mark {
    width:28px; height:28px; border-radius:7px;
    background:var(--primary-color);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-family-mono);
    font-size:var(--font-size-md); font-weight:var(--font-weight-bold); color:#fff;
    flex-shrink:0;
}
.hd-logo-name { font-size:var(--font-size-sm); font-weight:var(--font-weight-extrabold); letter-spacing:-.3px; color:var(--text-primary); }
.hd-logo-name em { color:var(--primary-color); font-style:normal; }

/* ── NAV ── */
.hd-nav { display:flex; align-items:center; gap:2px; margin-left:28px; }

.hd-nav-link {
    all:unset; cursor:pointer;
    font-size:12.5px; font-weight:var(--font-weight-semibold);
    color:var(--text-secondary); padding:6px 12px; border-radius:7px;
    text-decoration:none;
    transition:color .12s, background .12s;
    white-space:nowrap;
}
.hd-nav-link:hover  { color:var(--text-primary); background:rgba(255,255,255,.05); }
.hd-nav-link.active { color:var(--text-primary); background:rgba(255,255,255,.07); }
.hd-nav-link.on-math { color:var(--primary-color); background:rgba(99,102,241,.12); }

/* ── CTA ── */
.hd-cta { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }

.hd-btn-ghost {
    all:unset; cursor:pointer; box-sizing:border-box;
    font-family:var(--font-family-mono);
    font-size:11.5px; font-weight:var(--font-weight-semibold);
    color:var(--text-secondary);
    border:1px solid rgba(255,255,255,.07);
    padding:6px 14px; border-radius:7px;
    text-decoration:none;
    transition:color .12s, border-color .12s, background .12s;
    display:inline-flex; align-items:center;
}
.hd-btn-ghost:hover { color:var(--text-primary); border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.04); }

.hd-btn-primary {
    all:unset; cursor:pointer; box-sizing:border-box;
    font-family:var(--font-family-mono);
    font-size:11.5px; font-weight:var(--font-weight-bold);
    color:#fff; background:var(--primary-color);
    border:1px solid rgba(99,102,241,.5);
    padding:6px 14px; border-radius:7px;
    text-decoration:none;
    transition:background .12s, transform .1s;
    display:inline-flex; align-items:center; gap:6px;
}
.hd-btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); }

/* ── USER BUTTON ── */
.hd-user { position:relative; }

.hd-user-btn {
    all:unset; cursor:pointer; box-sizing:border-box;
    display:flex; align-items:center; gap:9px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    border-radius:9px; padding:5px 11px 5px 6px;
    transition:background .12s, border-color .12s;
}
.hd-user-btn:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.13); }

.hd-avatar {
    width:26px; height:26px; border-radius:7px;
    background:var(--primary-color);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-family-mono);
    font-size:10px; font-weight:var(--font-weight-bold); color:#fff;
    flex-shrink:0;
}
.hd-user-name {
    font-size:12.5px; font-weight:var(--font-weight-semibold); color:var(--text-primary);
    max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hd-chevron { color:var(--text-muted); transition:transform .15s; flex-shrink:0; }
.hd-user-btn.open .hd-chevron { transform:rotate(180deg); }

/* ── DROPDOWN ── */
.hd-dropdown {
    position:absolute; top:calc(100% + 8px); right:0;
    background:var(--surface-card);
    border:1px solid var(--border-medium);
    border-radius:11px; min-width:196px;
    box-shadow:0 16px 48px rgba(0,0,0,.5);
    opacity:0; visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .15s, transform .15s, visibility .15s;
    z-index:1010; overflow:hidden;
}
.hd-dropdown.open { opacity:1; visibility:visible; transform:translateY(0); }

.hd-dd-header { padding:12px 14px 10px; border-bottom:1px solid var(--border-subtle); }
.hd-dd-uname  { font-size:12.5px; font-weight:var(--font-weight-bold); color:var(--text-primary); margin-bottom:2px; }
.hd-dd-email  { font-size:var(--font-size-xs); color:var(--text-muted); }

.hd-dd-item {
    all:unset; cursor:pointer; box-sizing:border-box;
    width:100%; display:flex; align-items:center; gap:10px;
    padding:9px 14px; font-size:12.5px; color:var(--text-secondary);
    transition:color .12s, background .12s;
    text-decoration:none;
}
.hd-dd-item:hover  { color:var(--text-primary); background:rgba(255,255,255,.04); }
.hd-dd-item.danger { color:var(--danger-color); }
.hd-dd-item.danger:hover { color:#f9a8d4; background:rgba(244,114,182,.06); }

.hd-dd-sep { height:1px; background:var(--border-subtle); margin:4px 0; }
.hd-dd-ico { color:currentColor; flex-shrink:0; }

/* ── MOBILE TOGGLE ── */
.hd-mobile-toggle {
    all:unset; cursor:pointer; box-sizing:border-box;
    display:none; flex-direction:column; gap:4px;
    padding:7px; border-radius:7px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    margin-left:auto; flex-shrink:0;
}
.hd-toggle-line {
    width:18px; height:2px; border-radius:1px;
    background:var(--text-secondary); transition:all .2s;
}
.hd-mobile-toggle.open .hd-toggle-line:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.hd-mobile-toggle.open .hd-toggle-line:nth-child(2) { opacity:0; }
.hd-mobile-toggle.open .hd-toggle-line:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ── MOBILE MENU ── */
.hd-mobile-menu {
    display:none;
    background:var(--bg-secondary);
    border-top:1px solid var(--border-subtle);
    padding:16px 20px 20px;
}
.hd-mobile-menu.open { display:block; }

.hd-mobile-nav { display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.hd-mobile-nav .hd-nav-link { padding:9px 12px; display:block; font-size:var(--font-size-base); }

.hd-mobile-cta { display:flex; flex-direction:column; gap:7px; }
.hd-mobile-cta .hd-btn-ghost,
.hd-mobile-cta .hd-btn-primary { justify-content:center; }

.hd-mobile-user { display:flex; flex-direction:column; gap:10px; }
.hd-mobile-user-info {
    display:flex; align-items:center; gap:11px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border-subtle);
    border-radius:10px; padding:10px 13px;
}
.hd-mobile-user-name  { font-size:var(--font-size-base); font-weight:var(--font-weight-bold); color:var(--text-primary); }
.hd-mobile-user-email { font-size:var(--font-size-xs); color:var(--text-muted); }

.hd-mobile-logout {
    all:unset; cursor:pointer; box-sizing:border-box;
    font-family:var(--font-family-mono);
    font-size:11.5px; font-weight:var(--font-weight-semibold);
    color:var(--danger-color);
    border:1px solid rgba(244,114,182,.25);
    padding:7px 14px; border-radius:7px;
    display:flex; align-items:center; justify-content:center; gap:7px;
    transition:background .12s, border-color .12s;
}
.hd-mobile-logout:hover { background:rgba(244,114,182,.07); border-color:rgba(244,114,182,.4); }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
    .hd-inner  { padding:0 16px; }
    .hd-nav    { display:none; }
    .hd-cta    { display:none; }
    .hd-mobile-toggle { display:flex; }
}