/* ====== HEADER WRAPPER ====== */
.n8-hdrwrap {
    position:fixed; top:0; left:0; right:0; z-index:10000;
    transition:transform 0.3s ease, opacity 0.2s ease;
    will-change:transform,opacity;
}

/* ====== TOPBAR — fade crossfade ====== */
.n8-topbar { height:32px; background:#111; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.n8-topbar__msg { position:absolute; color:#fff; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; opacity:0; white-space:nowrap; }
.n8-topbar__msg a { color:#fff; text-decoration:none; }
.n8-topbar__msg a:hover { text-decoration:underline; }
.n8-topbar__msg--1 { animation:topfade1 8s ease-in-out infinite; }
.n8-topbar__msg--2 { animation:topfade2 8s ease-in-out infinite; }
@keyframes topfade1 { 0%,5%{opacity:0} 10%,45%{opacity:1} 50%,100%{opacity:0} }
@keyframes topfade2 { 0%,50%,55%{opacity:0} 60%,95%{opacity:1} 100%{opacity:0} }
@media(max-width:768px) { .n8-topbar{height:28px;} .n8-topbar__msg{font-size:9px;} }

/* ====== HEADER BAR ====== */
*,*::before,*::after{box-sizing:border-box;}
.n8h { background:rgba(255,255,255,0.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #e0e0e0; height:60px; }
.n8h__inner { max-width:1400px; margin:0 auto; display:flex; align-items:center; padding:0 20px; height:60px; position:relative; }

/* Logo */
.n8h__logo { display:flex; align-items:center; flex-shrink:0; z-index:10; }
.n8h__logo img { border-radius:50%; display:block; }
.n8h__logo-text { display:none; font-family:"Bebas Neue",Impact,sans-serif; font-size:22px; letter-spacing:3px; color:#1a2744; margin-left:8px; }
@media(min-width:1025px) { .n8h__logo-text{display:inline;} }

/* Desktop nav */
.n8h__desknav { display:none; flex:1; justify-content:center; gap:20px; }
.n8h__desklink { display:flex; align-items:center; gap:2px; font-family:"Bebas Neue",Impact,sans-serif; font-size:15px; letter-spacing:1px; text-transform:uppercase; text-decoration:none; color:#1a2744; transition:color 0.2s; line-height:60px; }
.n8h__desklink:hover { color:#2d3f5e; }
.n8h__chevron { margin-left:3px; opacity:0.4; transition:transform 0.25s, opacity 0.2s; flex-shrink:0; }
.n8h__dd { position:relative; display:flex; align-items:center; }
.n8h__dd-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px); background:#fff; border:1px solid #e0e0e0; border-radius:10px; box-shadow:0 12px 40px rgba(26,39,68,0.10); padding-top:8px; padding-bottom:8px; min-width:200px; z-index:100; opacity:0; pointer-events:none; transition:opacity 0.2s, transform 0.2s; }
.n8h__dd::after { content:""; position:absolute; top:100%; left:0; right:0; height:16px; }
/* Hover ouvre via JS (.dd-open) au lieu de :hover pour gérer le délai */
.n8h__dd.dd-open .n8h__dd-menu { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.n8h__dd.dd-open .n8h__chevron { opacity:1; transform:rotate(180deg); }
.n8h__dd-item { display:block; padding:9px 20px; font-family:"Inter",sans-serif; font-size:13px; font-weight:500; color:#1a2744; text-decoration:none; white-space:nowrap; transition:background 0.15s, color 0.15s; }
.n8h__dd-item:hover { background:#f8f9fb; color:#2d3f5e; }
@media(max-width:1024px) { .n8h__dd-menu{display:none;} }
@media(min-width:1025px) { .n8h__desknav{display:flex;} }

/* Burger — NO CIRCLE */
.n8h__burger { display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:8px; z-index:10; margin-right:auto; background:none!important; border:none!important; box-shadow:none!important; outline:none!important; border-radius:0!important; -webkit-tap-highlight-color:transparent; }
.n8h__burger:focus,.n8h__burger:active,.n8h__burger:hover { background:none!important; outline:none!important; box-shadow:none!important; }
.n8h__burger span { display:block; width:22px; height:2px; background:#1a2744; transition:all 0.25s; }
.n8h__burger:active span { background:#2d3f5e; }
@media(min-width:1025px) { .n8h__burger{display:none;} }
@media(max-width:1024px) { .n8h__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);} }

/* Icons */
.n8h__icons { display:flex; align-items:center; gap:14px; margin-left:auto; }
.n8h__icon { color:#1a2744!important; display:flex; transition:color 0.2s; position:relative; cursor:pointer; background:none; border:none; padding:0; -webkit-tap-highlight-color:transparent; }
.n8h__icon:hover { color:#2d3f5e!important; }
.n8h__badge { position:absolute; top:-6px; right:-8px; background:#1a2744; color:#fff!important; font-size:10px; font-weight:700; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:"Inter",sans-serif; }

/* Desktop search — FIXED SIZE */
.n8h__search { display:none; position:relative; }
@media(min-width:1025px) { .n8h__search{display:flex;align-items:center;} }
.n8h__search-form { display:flex; align-items:center; background:#f8f9fb; border:1px solid #e0e0e0; border-radius:20px; padding:4px 4px 4px 12px; gap:8px; }
.n8h__search-btn { background:none; border:none!important; cursor:pointer; padding:5px; display:flex; align-items:center; justify-content:center; transition:color 0.2s; flex-shrink:0; outline:none!important; box-shadow:none!important; -webkit-tap-highlight-color:transparent; }
.n8h__search-btn:hover { color:#1a2744; }
.n8h__search-btn:focus,.n8h__search-btn:active { outline:none!important; box-shadow:none!important; background:none; }
.n8h__search-input { border:none!important; border-bottom:none!important; background:none; outline:none!important; box-shadow:none!important; text-decoration:none!important; font-family:"Inter",sans-serif; font-size:13px; color:#1a2744; width:150px; -webkit-appearance:none; }
.n8h__search-input:focus { border:none!important; border-bottom:none!important; outline:none!important; box-shadow:none!important; }
.n8h__search-input::placeholder { color:#ccc; opacity:1; }

/* Desktop autocomplete results */
.n8h__search-results { position:absolute; top:100%; left:0; right:0; min-width:320px; background:#fff; border:1px solid #e0e0e0; border-radius:0 0 12px 12px; box-shadow:0 8px 24px rgba(0,0,0,0.08); max-height:400px; overflow-y:auto; display:none; z-index:9999; }

/* Mobile search toggle — hidden on desktop */
.n8h__mob-search-btn { display:flex; }
@media(min-width:1025px) { .n8h__mob-search-btn{display:none;} }

/* ====== ICON DROPDOWNS — click toggle on ALL formats ====== */
.n8h__icon-wrap { position:relative; display:flex; align-items:center; }
.n8h__dropdown { position:absolute; top:calc(100% + 14px); right:-12px; width:260px; background:#fff; border:1px solid #e0e0e0; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,0.12); padding:24px; z-index:99999; opacity:0; pointer-events:none; transition:opacity 0.2s, transform 0.2s; transform:translateY(6px); display:none; }
.n8h__icon-wrap::after { content:""; position:absolute; top:100%; left:0; right:0; height:16px; }
/* .show = ouvert via JS (clic) — fonctionne sur TOUS les formats */
.n8h__dropdown.show { display:block!important; opacity:1; pointer-events:auto; transform:translateY(0); }
.n8h__cart-drop { width:320px; padding:0; max-height:400px; overflow-y:auto; }
.n8h__cart-drop .n8h__dropdown-empty { padding:24px; }
.n8h__cart-drop .woocommerce-mini-cart { padding:12px; margin:0; list-style:none; }
.n8h__cart-drop .woocommerce-mini-cart-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f0f0f0; font-size:13px; font-family:"Inter",sans-serif; }
.n8h__cart-drop .woocommerce-mini-cart-item img { width:48px; height:48px; object-fit:cover; border-radius:6px; }
.n8h__cart-drop .woocommerce-mini-cart__buttons { padding:12px; display:flex; gap:8px; }
.n8h__cart-drop .woocommerce-mini-cart__buttons a { flex:1; text-align:center; padding:10px; border-radius:8px; font-family:"Bebas Neue",sans-serif; font-size:14px; letter-spacing:1px; text-decoration:none; text-transform:uppercase; }
.n8h__cart-drop .woocommerce-mini-cart__total { padding:8px 12px; font-weight:600; border-top:1px solid #eee; }
.n8h__dropdown-empty { text-align:center; }
.n8h__dropdown-empty svg { margin-bottom:12px; opacity:0.3; }
.n8h__dropdown-empty p { font-family:"Inter",sans-serif; font-size:13px; color:#888; margin:0 0 12px; }
.n8h__dropdown-empty a { font-family:"Inter",sans-serif; font-size:12px; color:#1a2744; text-decoration:underline; }
.n8h__dropdown-empty a:hover { color:#2d3f5e; }
.n8h__dropdown-goto { border-top:1px solid #e0e0e0; margin-top:16px; padding-top:12px; text-align:center; }
.n8h__dropdown-goto a { font-family:"Inter",sans-serif; font-size:12px; color:#1a2744; text-decoration:none; font-weight:500; transition:color 0.15s; }
.n8h__dropdown-goto a:hover { color:#2d3f5e; }
.n8h__account-name { font-family:"Bebas Neue",sans-serif; font-size:16px; color:#1a2744; letter-spacing:1px; margin:0; }
.n8h__account-email { font-family:"Inter",sans-serif; font-size:12px; color:#888; margin:4px 0 12px; }
.n8h__account-links { border-top:1px solid #e0e0e0; padding-top:12px; display:flex; flex-direction:column; gap:8px; }
.n8h__account-links a { font-family:"Inter",sans-serif; font-size:13px; color:#1a2744; text-decoration:none; transition:color 0.15s; }
.n8h__account-links a:hover { color:#2d3f5e; }
/* Dropdown close button (visible on all formats) */
.n8h__dropdown-close { position:absolute; top:8px; right:8px; background:none!important; border:none!important; padding:4px; cursor:pointer; opacity:0.4; outline:none!important; box-shadow:none!important; -webkit-tap-highlight-color:transparent; z-index:1; }
.n8h__dropdown-close:hover { opacity:0.8; }

/* Mobile/tablet: fixed position under header */
@media(max-width:1024px) {
    .n8h__dropdown.show { position:fixed; top:92px; right:12px; left:auto; width:calc(100vw - 24px); max-width:300px; transform:none; }
}
@media(max-width:768px) { .n8h__dropdown.show{top:88px;} }

/* ====== MOBILE SEARCH SLIDE ====== */
.n8-mobile-search { background:#fff; border-bottom:1px solid #e0e0e0; padding:0 16px; max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.n8-mobile-search.open { max-height:200px; padding:12px 16px; }
.n8-mobile-search__form { display:flex; align-items:center; gap:10px; background:#f8f9fb; border:1px solid #e0e0e0; border-radius:10px; padding:10px 14px; }
.n8-mobile-search__input { flex:1; border:none; background:none; outline:none; font-family:"Inter",sans-serif; font-size:15px; color:#1a2744; }
.n8-mobile-search__input::placeholder { color:#aaa; }
.n8-mobile-search__close { background:none; border:none; padding:4px; cursor:pointer; opacity:0.5; -webkit-tap-highlight-color:transparent; }
.n8-mobile-search__close:hover { opacity:1; }
.n8-search-results { background:#fff; border:1px solid #e0e0e0; border-top:none; border-radius:0 0 10px 10px; max-height:350px; overflow-y:auto; display:none; margin:0 -16px; padding:0; box-shadow:0 8px 20px rgba(0,0,0,0.06); }
@media(min-width:1025px) { .n8-mobile-search{display:none!important;} }

/* ====== AUTOCOMPLETE RESULTS (shared) ====== */
.n8-ac-item { display:flex; align-items:center; gap:12px; padding:10px 16px; text-decoration:none; border-bottom:1px solid #f0f0f0; transition:background 0.15s; }
.n8-ac-item:hover { background:#f8f9fb; }
.n8-ac-item:last-child { border-bottom:none; }
.n8-ac-img { width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.n8-ac-info { flex:1; display:flex; flex-direction:column; }
.n8-ac-title { font-family:"Inter",sans-serif; font-size:13px; color:#1a2744; font-weight:500; }
.n8-ac-sub { font-size:11px; color:#888; }
.n8-ac-price { font-family:"Space Mono",monospace; font-size:12px; color:#1a2744; font-weight:700; }
.n8-ac-badge { font-family:"Space Mono",monospace; font-size:9px; background:#888; color:#fff; padding:2px 8px; border-radius:4px; letter-spacing:0.5px; text-transform:uppercase; flex-shrink:0; }
.n8-ac-empty { padding:20px 16px; text-align:center; font-size:13px; color:#888; font-family:"Inter",sans-serif; }

/* ====== MOBILE SIDE PANEL ====== */
.n8h__overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:99998; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.n8h__overlay.open { opacity:1; pointer-events:auto; }
.n8h__side { position:fixed; top:0; left:0; bottom:0; width:80vw; max-width:320px; background:#fff; z-index:99999; transform:translateX(-100%); transition:transform 0.3s ease; overflow-y:auto; display:flex; flex-direction:column; box-shadow:4px 0 24px rgba(0,0,0,0.15); }
.n8h__side.open { transform:translateX(0); }

/* Side header */
.n8h__side-header { display:flex; align-items:center; justify-content:space-between; padding:20px 20px 16px; border-bottom:1px solid #eee; }
.n8h__side-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.n8h__side-logo img { border-radius:50%; }
.n8h__side-logo span { font-family:"Bebas Neue",sans-serif; font-size:22px; letter-spacing:3px; color:#1a2744; text-shadow:1px 1px 0 #00ff88,-1px -1px 0 #ff0044,0.5px -0.5px 0 #06f; }
/* Close — SVG, NO CIRCLE */
.n8h__side-close { background:none!important; border:none!important; box-shadow:none!important; outline:none!important; padding:6px; cursor:pointer; -webkit-tap-highlight-color:transparent; opacity:0.6; transition:opacity 0.2s; }
.n8h__side-close:hover,.n8h__side-close:focus,.n8h__side-close:active { background:none!important; outline:none!important; box-shadow:none!important; opacity:1; }

/* Mobile nav */
.n8h__mnav { list-style:none; padding:0; margin:0; flex:1; overflow-y:auto; }
.n8h__mnav-item { border-bottom:1px solid #f0f0f0; }
.n8h__mnav-link { display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 20px; font-family:"Bebas Neue",sans-serif; font-size:18px; letter-spacing:2px; color:#1a2744; text-decoration:none; text-transform:uppercase; background:none; border:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
a.n8h__mnav-link { justify-content:flex-start; }
.n8h__mnav-chev { opacity:0.4; transition:transform 0.3s ease, opacity 0.2s; }
.n8h__mnav-has-sub.open .n8h__mnav-chev { transform:rotate(180deg); opacity:1; }
.n8h__mnav-sub { max-height:0; overflow:hidden; transition:max-height 0.3s ease; padding:0 20px; }
.n8h__mnav-has-sub.open .n8h__mnav-sub { max-height:300px; }
.n8h__mnav-sub a { display:block; padding:10px 0 10px 12px; font-family:"Inter",sans-serif; font-size:14px; color:#4a5568; text-decoration:none; border-bottom:1px solid #f8f8f8; transition:color 0.15s; }
.n8h__mnav-sub a:last-child { border-bottom:none; }
.n8h__mnav-sub a:hover { color:#1a2744; }

/* Side footer */
.n8h__side-footer { padding:16px 20px 24px; border-top:1px solid #eee; display:flex; flex-direction:column; gap:16px; }
.n8h__side-socials { display:flex; gap:16px; }
.n8h__side-socials a { color:#aaa; display:flex; transition:color 0.2s; }
.n8h__side-socials a:hover { color:#1a2744; }
.n8h__side-logout { font-family:"Inter",sans-serif; font-size:13px; color:#aaa; text-decoration:none; transition:color 0.15s; }
.n8h__side-logout:hover { color:#1a2744; }

/* ====== GLOBAL NO-CIRCLE RESET ====== */
.n8h__icon-wrap,
.n8h__icon-wrap button,
.n8h__icon-wrap a,
.n8h__burger,
.n8h__mob-search-btn,
.n8h__side-close,
.n8h__dropdown-close,
.n8-mobile-search__close,
.n8h__mnav-link {
    background:none!important; border:none!important; box-shadow:none!important;
    outline:none!important; -webkit-tap-highlight-color:transparent!important;
}
.n8h__icon-wrap:focus, .n8h__icon-wrap:active,
.n8h__icon-wrap button:focus, .n8h__icon-wrap button:active,
.n8h__icon-wrap a:focus, .n8h__icon-wrap a:active,
.n8h__burger:focus, .n8h__burger:active,
.n8h__mob-search-btn:focus, .n8h__mob-search-btn:active,
.n8h__side-close:focus, .n8h__side-close:active,
.n8h__dropdown-close:focus, .n8h__dropdown-close:active,
.n8-mobile-search__close:focus, .n8-mobile-search__close:active,
.n8h__mnav-link:focus, .n8h__mnav-link:active {
    background:none!important; outline:none!important; box-shadow:none!important;
}

/* Body padding — !important to override Blocksy/Elementor reset */
body { padding-top:92px!important; }
@media(max-width:768px) { body{padding-top:88px!important;} }
/* NOSK8 custom templates already handle spacing in their main elements */
body.page-template-page-nosk8-home,
body.page-template-page-nosk8-faq,
body.page-template-page-nosk8-legal { padding-top:0!important; }

/* ====== FAVORIS HEADER ====== */
/* État liked géré par nosk8-heart.css (.n8h__fav-liked) */
.n8h__fav-content { max-height:320px; overflow-y:auto; }
.n8h__fav-empty { text-align:center; padding:24px 16px; }
.n8h__fav-empty svg { margin-bottom:8px; }
.n8h__fav-empty p { font-size:13px; color:#888; margin:0; }
.n8h__fav-section { padding:8px 0; }
.n8h__fav-heading { font-family:'Bebas Neue',sans-serif; font-size:11px; letter-spacing:2px; color:#888; margin:0; padding:4px 16px 6px; }
.n8h__fav-list { display:flex; flex-direction:column; }
.n8h__fav-item { display:flex; align-items:center; gap:10px; padding:6px 16px; text-decoration:none; transition:background 0.15s; }
.n8h__fav-item:hover { background:rgba(26,39,68,0.04); }
.n8h__fav-thumb { width:36px; height:36px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.n8h__fav-name { font-family:'Inter',sans-serif; font-size:12px; color:#1a2744; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.n8h__fav-price { font-family:'Space Mono',monospace; font-size:11px; color:#1a2744; font-weight:700; white-space:nowrap; }
.n8h__cart-qty { font-family:'Space Mono',monospace; font-size:10px; color:#fff; background:#1a2744; border-radius:10px; padding:1px 7px; min-width:18px; text-align:center; flex-shrink:0; }

/* ====== FAVORIS ARTICLES (coeur sur cartes) ====== */
.n8-art-fav {
    position:absolute; top:10px; right:10px; z-index:10;
    background:transparent!important; border:none!important; border-radius:0!important; padding:0; -webkit-appearance:none; appearance:none;
    width:auto; height:auto; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all 0.2s; box-shadow:none!important; outline:none!important;
}
.n8-art-fav svg { width:22px; height:22px; color:rgba(255,255,255,0.7); stroke:currentColor; fill:none; transition:all 0.2s; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.n8-art-fav:hover svg { color:#cc2936; }
.n8-art-fav.active svg { color:#cc2936; fill:#cc2936; stroke:#cc2936; }
.n8-art-fav--wide { top:14px; right:14px; }
.n8-art-fav--wide svg { width:26px; height:26px; }