/* ============================================================
   NAVIGATION UNIFIEE + DESIGN SYSTEM - ÉlyséeScope 2027
   Injectee par nav.js sur toutes les pages
   Structure :
     1. Design tokens (variables CSS unifiees)
     2. Header fixe (56px)
     3. Menu principal fixe (40px)
     4. Barre de recherche fixe (48px)
     5. Espacement du contenu
     6. Bottom nav mobile (60px)
     7. Footer unifie
     8. Responsive
   ============================================================ */


/* ---- 0. DESIGN TOKENS ---- */
/* Applied on body to override page-specific :root definitions */
body.has-anchors {
    --bg: #f5f4f0;
    --deep: #eae8e3;
    --blue: #2563eb;
    --blue-dark: #1e40af;
    --sky: #0369a1;
    --gold: #92400e;
    --gold-bg: rgba(146,64,14,0.08);
    --gold-border: rgba(146,64,14,0.2);
    --white: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --card: #ffffff;
    --border: #dddbd6;
    --shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.06);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06);
    --nav-h: 144px;  /* 56 header + 40 menu + 48 search */
    --sidebar-w: 228px;
}


/* ---- 1. HEADER ---- */
/* Reset: prevent individual page CSS from affecting injected nav */
nav.es-header { padding: 0 !important; margin: 0 !important; width: 100% !important; }
nav.es-bottom-nav { top: auto !important; padding: 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; margin: 0 !important; }

.es-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: 56px;
    background: rgba(245,244,240,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid #dddbd6;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.es-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    gap: 1rem;
}
.es-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #111827;
    flex-shrink: 0;
    white-space: nowrap;
    transition: color 0.15s;
}
.es-logo:hover {
    color: #2563eb;
}
.es-logo-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #2563eb, #1e40af);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.es-header-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.es-hl {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.es-hl:hover { color: #111827; background: rgba(0,0,0,0.05); }
.es-hl.active { color: #2563eb; background: rgba(37,99,235,0.08); font-weight: 600; }

/* Radar + Eclaireur specific */
.es-hl--radar { color: #0369a1; }
.es-hl--radar:hover { background: rgba(3,105,161,0.08); }
.es-hl--radar.active { color: #0369a1; background: rgba(3,105,161,0.08); font-weight: 600; }
.es-hl--eclaireur { color: #92400e; }
.es-hl--eclaireur:hover { background: rgba(146,64,14,0.08); }
.es-hl--eclaireur.active { color: #92400e; background: rgba(146,64,14,0.08); font-weight: 600; }


/* ---- 2. MENU PRINCIPAL ---- */
.es-main-menu {
    position: fixed;
    top: 56px; /* below header */
    left: 0;
    right: 0;
    z-index: 195;
    height: 40px;
    background: rgba(245,244,240,0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid #eae8e3;
    display: flex;
    align-items: center;
}
.es-menu-inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.es-menu-inner::-webkit-scrollbar { display: none; }
.es-menu-pill {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    padding: 0.22rem 0.7rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.13s, background 0.13s;
    border: 1px solid transparent;
}
.es-menu-pill:hover {
    color: #111827;
    background: rgba(0,0,0,0.05);
}
.es-menu-pill.active {
    color: #2563eb;
    background: rgba(37,99,235,0.08);
    border-color: rgba(37,99,235,0.2);
    font-weight: 600;
}


/* Espaces électoraux — accent doré dans le menu principal */
.es-menu-pill--electoral {
    color: #92400e;
    font-weight: 600;
}
.es-menu-pill--electoral:hover {
    color: #78350f;
    background: rgba(146,64,14,0.08);
}
.es-menu-pill--electoral.active {
    color: #92400e;
    background: rgba(146,64,14,0.1);
    border-color: rgba(146,64,14,0.3);
    font-weight: 700;
}

/* Séparateur vertical entre espaces électoraux et menu contenu */
.es-menu-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: #dddbd6;
    margin: 0 0.4rem;
    flex-shrink: 0;
    align-self: center;
    vertical-align: middle;
}

/* ---- 3. BARRE DE RECHERCHE ---- */
.es-search-bar {
    position: fixed;
    top: 96px; /* 56 header + 40 menu */
    left: 0;
    right: 0;
    z-index: 190;
    height: 48px;
    background: rgba(245,244,240,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid #dddbd6;
    display: flex;
    align-items: center;
}
.es-search-inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.es-search-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #dddbd6;
    border-radius: 8px;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    width: 100%;
    max-width: 480px;
    font-family: 'DM Sans', -apple-system, sans-serif;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: left;
}
.es-search-btn:hover {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}
.es-search-btn svg {
    color: #9ca3af;
    flex-shrink: 0;
}
.es-search-placeholder {
    color: #9ca3af;
    font-size: 0.85rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---- 3b. ANCRES CONTEXTUELLES (legacy, hidden now) ---- */
.es-anchors-bar {
    display: none !important;
}


/* ---- 4. ESPACEMENT DU CONTENU ---- */
/*
   Hauteur totale de la nav fixe :
     56 header + 40 menu + 48 recherche = 144px
   --nav-h est mis a jour par body.has-anchors (toujours applique).
*/
:root {
    --nav-h: 144px;
}

/* Override for pages that still define smaller --nav-h in :root */
body.has-anchors .page,
body.has-anchors .layout,
body.has-anchors .wrapper {
    padding-top: 144px;
}

body.has-anchors .page-header,
body.has-anchors .skeleton-wrap {
    padding-top: calc(144px + 1.5rem) !important;
}

/* Spacer injecte par nav.js : masque (on utilise les espacements pages + --nav-h) */
.es-nav-spacer {
    display: none;
}


/* ---- 5. BOTTOM NAV MOBILE ---- */
.es-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(245,244,240,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid #dddbd6;
    flex-direction: row;
    align-items: stretch;
}
.es-bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: #9ca3af;
    padding: 0.25rem 0;
    position: relative;
    transition: color 0.15s;
    min-width: 0;
}
.es-bn-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2.5px;
    background: #2563eb;
    border-radius: 0 0 3px 3px;
    opacity: 0;
    transition: opacity 0.15s;
}
.es-bn-item.active { color: #2563eb; }
.es-bn-item.active::before { opacity: 1; }
.es-bn-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.es-bn-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.es-bn-label {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 2px;
}


/* ---- 6. FOOTER UNIFIE ---- */
.es-site-footer {
    background: #111827;
    color: #d1d5db;
    padding: 3rem 1.5rem 2rem;
    margin-top: 3rem;
    font-family: 'DM Sans', -apple-system, sans-serif;
}
.es-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}
.es-footer-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: -0.4px;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.es-footer-logo:hover {
    color: #93c5fd;
}
.es-footer-tagline {
    font-size: 0.88rem;
    color: #9ca3af;
    margin-bottom: 1.5rem;
}
.es-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1.5rem;
}
.es-footer-links a {
    font-size: 0.82rem;
    font-weight: 500;
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.15s;
}
.es-footer-links a:hover {
    color: #ffffff;
}
.es-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.25rem;
}
.es-footer-bottom p {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.6;
}
.es-footer-year {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: #2563eb;
    margin-top: 0.5rem;
}

/* Footer needs margin-left on pages with sidebar */
.layout + .es-site-footer,
.sidebar ~ .es-site-footer {
    margin-left: 0;
}


/* ---- 7. SHARED SIDEBAR STYLES ---- */
/* Standard sidebar base - pages that use sidebars should apply these classes */
.es-sidebar,
.sidebar {
    position: fixed;
    top: var(--nav-h, 144px);
    left: 0;
    width: var(--sidebar-w, 228px);
    height: calc(100vh - var(--nav-h, 144px));
    overflow-y: auto;
    background: #f5f4f0;
    border-right: 1px solid #dddbd6;
    padding: 1.5rem 0 2rem;
    z-index: 100;
    scrollbar-width: thin;
    scrollbar-color: #dddbd6 transparent;
}
.es-sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar { width: 4px; }
.es-sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb { background: #dddbd6; border-radius: 2px; }

/* Sidebar group heading */
.sidebar-group {
    margin-bottom: 0.25rem;
}
.sidebar-group-label {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6b7280;
    padding: 0.65rem 1.25rem 0.35rem;
    opacity: 0.7;
}

/* Sidebar item */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 1.25rem;
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border-radius: 0;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    position: relative;
    border-left: 2px solid transparent;
    line-height: 1.3;
}
.sidebar-item:hover {
    color: #111827;
    background: rgba(0,0,0,0.03);
}
.sidebar-item.active {
    color: #111827;
    font-weight: 600;
    background: rgba(37,99,235,0.06);
    border-left-color: #2563eb;
}
.sidebar-item .item-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #dddbd6;
    transition: background 0.15s;
}
.sidebar-item.active .item-dot,
.sidebar-item:hover .item-dot {
    background: #2563eb;
}
.sidebar-item.external::after {
    content: '\2197';
    font-size: 0.7rem;
    margin-left: auto;
    opacity: 0.4;
}
.sidebar-divider {
    height: 1px;
    background: #dddbd6;
    margin: 0.75rem 1.25rem;
    opacity: 0.5;
}

/* Main content when sidebar is present */
.main-content {
    margin-left: var(--sidebar-w, 228px);
    flex: 1;
    min-width: 0;
}

/* Content section (consistent spacing) */
.content-section {
    padding: 3rem 2.5rem;
    border-bottom: 1px solid #dddbd6;
}
.content-section:last-of-type {
    border-bottom: none;
}

/* Section headings (consistent typography) */
.section-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.eyebrow-icon {
    font-size: 1.1rem;
}
.eyebrow-label {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #2563eb;
}
.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #111827;
    margin-bottom: 0.5rem;
}
.section-desc {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 0.95rem;
    color: #6b7280;
    max-width: 620px;
    line-height: 1.65;
    margin-bottom: 2rem;
}


/* ---- 8. RESPONSIVE ---- */
@media (max-width: 768px) {
    .es-bottom-nav { display: flex; }
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

    /* Update CSS var for mobile nav height */
    body.has-anchors {
        --nav-h: 138px; /* 52 header + 38 menu + 48 search */
    }

    .es-header { height: 52px; }
    .es-header-inner { padding: 0 1rem; gap: 0.5rem; }
    .es-logo { font-size: 0.95rem; }
    .es-logo-icon { width: 24px; height: 24px; border-radius: 6px; }
    .es-logo-icon svg { width: 18px; height: 18px; }

    /* Header links - min touch target */
    .es-hl {
        font-size: 0.78rem;
        padding: 0.4rem 0.6rem;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        border-radius: 8px;
    }

    /* Main menu on mobile */
    .es-main-menu { top: 52px; height: 38px; }
    .es-menu-inner { padding: 0 0.75rem; gap: 0.2rem; }
    .es-menu-pill { font-size: 0.75rem; padding: 0.18rem 0.55rem; }

    /* Search bar below menu */
    .es-search-bar { top: 90px; height: 48px; } /* 52 + 38 */
    .es-search-inner { padding: 0 1rem; }
    .es-search-btn { max-width: 100%; min-height: 38px; }

    /* Legacy anchors */
    .es-anchors-bar { top: 98px; }
    .es-anchors-inner { padding: 0 0.75rem; gap: 0.25rem; }

    .es-nav-spacer { height: 98px; }
    body.has-anchors .es-nav-spacer { height: 138px; }

    /* Override padding for mobile */
    body.has-anchors .page,
    body.has-anchors .layout,
    body.has-anchors .wrapper {
        padding-top: 138px;
    }
    body.has-anchors .page-header,
    body.has-anchors .skeleton-wrap {
        padding-top: calc(138px + 1rem) !important;
    }

    /* Sidebar hidden on mobile */
    .sidebar, .es-sidebar {
        display: none;
    }
    .main-content {
        margin-left: 0;
    }

    /* Footer mobile */
    .es-site-footer {
        padding: 2rem 1.25rem 1.5rem;
        margin-left: 0 !important;
    }
    .es-footer-links {
        gap: 0.4rem 1rem;
    }

    /* Bottom nav items - better tap targets */
    .es-bn-item {
        gap: 3px;
        padding: 0.35rem 0;
        -webkit-tap-highlight-color: transparent;
    }
    .es-bn-icon {
        width: 24px;
        height: 24px;
    }
    .es-bn-icon svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.8;
    }

    /* Chat bubble above bottom nav on mobile */
    #es-chat-bubble {
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 14px) !important;
    }
    #es-chat-panel {
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 76px) !important;
    }
}


/* ---- SUPPRIME LES ANCIENS ELEMENTS DE NAV (pages individuelles) ---- */

/* Ancienne barre de nav superieure (pages HTML individuelles) */
nav.top-nav,
.top-nav {
    display: none !important;
}
/* Pages avec <nav><div class="inner">...</div></nav> */
nav:has(> div.inner) {
    display: none !important;
}

/* Ancien burger menu / drawer */
#burgerMenuBtn,
#hamburgerBtn,
.burger-menu-btn,
.hamburger,
#burgerDrawer,
.burger-drawer,
#burgerOverlay,
.burger-overlay,
.sidebar-overlay {
    display: none !important;
}

/* Ancienne barre de pills de la homepage */
#section-pills-nav {
    display: none !important;
}

/* Anciennes bottom nav individuelles des pages */
.mobile-bottom-nav,
#mobileBottomNav {
    display: none !important;
}

/* Supprimer la mobile search bar injectee par global-search.js */
#gsMobileBar,
.gs-mobile-bar {
    display: none !important;
}

/* Hide old page-specific footers (nav.js also hides them via JS) */
footer:not(.es-site-footer):not(.es-bottom-nav) {
    display: none !important;
}