/* ========== HEADER STYLES ========== */
header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, var(--header-grad-top) 0%, var(--header-grad-bottom) 100%);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 0 1.5rem;
    height: 64px;
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}

header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
    opacity: 0.85;
    box-shadow: 0 1px 8px rgba(var(--accent-rgb), 0.35);
    pointer-events: none;
}

/* Logo + Title */
.logo-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-container img {
    height: 50px;  /* Logo size */
}

.logo-container h1 {
    font-size: 1.4rem;
    color: var(--accent);
    margin: 0;
    white-space: nowrap;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Navigation */
nav ul {
    list-style: none;
    display: flex;
    gap: 0.2rem;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    align-items: center;
}

nav a {
    text-decoration: none;
    color: rgba(240,240,240,0.8);
    font-weight: 500;
    font-size: 0.88rem;
    padding: 6px 14px;
    border-radius: 8px;
    transition: all 0.18s ease;
    white-space: nowrap;
}

nav a:hover {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
}

/* Explorer button styled differently */
nav li.nav-explorer > a {
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    font-weight: 700;
}

nav li.nav-explorer > a:hover {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: var(--accent);
}

/* Explorer dropdown */
.nav-explorer {
    position: relative;
}

.explorer-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #0f0f0f;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 14px;
    padding: 20px;
    min-width: 520px;
    max-height: calc(100vh - 210px); /* 90px top clearance + 120px reserved for the anchor bar (max 110px + border) so scrolled content never ends up hidden behind it */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 2000;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(var(--accent-rgb), 0.04);
    animation: dropdownFadeIn 0.16s ease;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.explorer-dropdown.open {
    display: block;
}

/* Viscérale explorer content hidden by default; JS toggles inline display */
.explorer-content-viscerale {
    display: none;
}

.explorer-group {
    margin-bottom: 18px;
}

.explorer-group:last-child {
    margin-bottom: 0;
}

.explorer-group-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(var(--accent-rgb), 0.45);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    border-bottom: none;
}

.explorer-bones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.explorer-bone {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}

.explorer-bone.available {
    background: transparent;
    color: rgba(240,240,240,0.85);
    border: 1px solid rgba(255,255,255,0.12);
}

.explorer-bone.available:hover {
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.4);
}

.explorer-bone.soon {
    background: transparent;
    color: rgba(240,240,240,0.2);
    border: 1px solid rgba(255,255,255,0.05);
    cursor: not-allowed;
    font-style: italic;
}

/* Mobile hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
}

.hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transition: all 0.22s ease;
    transform-origin: center;
}

/* Groups the new mobile search icon with the hamburger so they sit
   adjacent on the right, rather than each being spaced independently
   by header's justify-content: space-between. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* .search-trigger-btn (from search-overlay.css) handles the actual visual
   styling — this class only controls WHEN it's shown. Desktop already has
   a search pill inline in #mainNav, so this one is mobile-only. */
.header-search-btn {
    display: none !important; /* search-overlay.css loads after this file
        and sets display:inline-flex on .search-trigger-btn — !important
        needed here so this actually wins on desktop */
}

/* Sizing for the inline SVG icon replacing the old search emoji inside
   the drawer's own "Rechercher" row — matches the emoji's original
   footprint/spacing so the row layout doesn't shift. */
.nav-ic-svg {
    width: 15px;
    height: 15px;
    margin-right: 8px;
    flex-shrink: 0;
    stroke: currentColor;
    vertical-align: -3px;
}

/* Mobile nav drawer */
@media (max-width: 767px) {
    .hamburger { display: flex; }
    .header-search-btn { display: inline-flex !important; }

    nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--panel-bg);
        border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
        padding: 16px;
        display: none;
        z-index: 999;
    }

    nav.open { display: block; }

    nav ul {
        flex-direction: column;
        gap: 4px;
    }

    nav a {
        display: block;
        font-size: 1rem;
        padding: 10px 14px;
    }

    .explorer-dropdown {
        position: static;
        min-width: unset;
        width: 100%;
        margin-top: 8px;
        border-radius: 8px;
    }
}


/* ========== Mobile adjustments ========== */
@media (max-width: 767px) {
    header {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        gap: 1rem;
    }

    .logo-container {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .logo-container img {
        height: 40px;
    }

    .logo-container h1 {
        font-size: 1.5rem;
    }

    nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        padding: 0;
    }

    nav a {
        font-size: 1rem;
        padding: 0.4rem 0.6rem;
    }
}


/* ========== Mobile tap effect ========== */
.bone-zone.tapped {
  animation: boneTap 0.4s ease forwards;
}


@keyframes boneTap {
  0%   { box-shadow: 0 0 0px 0px rgba(var(--accent-rgb), 0.8); }
  50%  { box-shadow: 0 0 30px 20px rgba(var(--accent-rgb), 0.4); }
  100% { box-shadow: 0 0 10px 8px rgba(var(--accent-rgb), 0); }
}

/* Grain texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Page fade-in transition */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
main {
    animation: pageFadeIn 0.35s ease both;
}

/* ================================================
   UPGRADED NAV & EXPLORER
   ================================================ */

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

nav ul {
    list-style: none;
    display: flex;
    gap: 0.2rem;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    align-items: center;
}

nav a {
    text-decoration: none;
    color: rgba(240,240,240,0.8);
    font-weight: 500;
    font-size: 0.88rem;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    transition: all 0.18s ease;
    white-space: nowrap;
}

nav a:hover {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
}

nav li.nav-explorer > a {
    color: rgba(240,240,240,0.8);
    border: 1px solid rgba(255,255,255,0.15);
    font-weight: 500;
}

nav li.nav-explorer > a:hover {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: var(--accent);
}

.nav-explorer { position: relative; }

.explorer-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #0f0f0f;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 14px;
    padding: 20px;
    min-width: 520px;
    max-height: calc(100vh - 210px); /* 90px top clearance + 120px reserved for the anchor bar (max 110px + border) so scrolled content never ends up hidden behind it */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 2000;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7);
    animation: dropdownFadeIn 0.16s ease;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.explorer-dropdown.open { display: block; }

.explorer-group { margin-bottom: 18px; }
.explorer-group:last-child { margin-bottom: 0; }

.explorer-group-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(var(--accent-rgb), 0.45);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    border-bottom: none;
}

.explorer-bones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.explorer-bone {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}

.explorer-bone.available {
    background: transparent;
    color: rgba(240,240,240,0.85);
    border: 1px solid rgba(255,255,255,0.12);
}

.explorer-bone.available:hover {
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.4);
}

.explorer-bone.soon {
    background: transparent;
    color: rgba(240,240,240,0.2);
    border: 1px solid rgba(255,255,255,0.05);
    cursor: not-allowed;
    font-style: italic;
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    margin-left: auto;
}

.hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transition: all 0.2s ease;
}

/* Grain texture */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Page fade-in */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
main { animation: pageFadeIn 0.35s ease both; }

/* Mobile nav */
@media (max-width: 767px) {
    .hamburger { display: flex; }

    nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--panel-bg);
        border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
        padding: 16px;
        display: none;
        z-index: 999;
    }

    nav.open { display: block; }

    nav ul { flex-direction: column; gap: 4px; }

    nav a { display: block; font-size: 1rem; padding: 10px 14px; }

    .explorer-dropdown {
        position: static;
        min-width: unset;
        width: 100%;
        margin-top: 8px;
        border-radius: 8px;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== HAMBURGER & MOBILE NAV FIXES ===== */

/* Hamburger above nav panel */
@media (max-width: 767px) {
    .hamburger { z-index: 1001 !important; position: relative !important; }
}

/* Hamburger → X animation */
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav link pill styles */
@media (max-width: 767px) {
    nav ul { flex-direction: column !important; gap: 8px !important; list-style: none; margin: 0; padding: 0; }

    nav a {
        display: block !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        color: #f4f4f4 !important;
        background: rgba(255,255,255,0.04) !important;
        border: 1px solid rgba(255,255,255,0.07) !important;
        transition: background 0.15s ease, color 0.15s ease;
    }

    nav a:hover { background: rgba(var(--accent-hover-rgb), 0.12) !important; color: var(--accent-hover) !important; }

    nav li.nav-explorer > a {
        background: rgba(255,255,255,0.04) !important;
        color: #f4f4f4 !important;
        border: 1px solid rgba(255,255,255,0.07) !important;
    }

    nav li.nav-explorer > a.explorer-open,
    nav li.nav-explorer > a:hover {
        background: rgba(var(--accent-hover-rgb), 0.12) !important;
        color: var(--accent-hover) !important;
        border-color: rgba(var(--accent-hover-rgb), 0.4) !important;
    }
}

/* Desktop nav — restore original styles (override any mobile bleed) */
@media (min-width: 768px) {
    nav a {
        display: inline !important;
        padding: 6px 14px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
        font-size: 0.88rem !important;
        color: rgba(240,240,240,0.8) !important;
        background: transparent !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
    }
    nav a:hover { color: var(--accent) !important; background: rgba(var(--accent-rgb), 0.08) !important; border-color: rgba(var(--accent-rgb), 0.4) !important; }
    nav a.nav-active { color: var(--accent) !important; border-color: var(--accent) !important; font-weight: 700 !important; }
    nav li.nav-explorer > a {
        color: rgba(240,240,240,0.8) !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
        font-weight: 500 !important;
        background: transparent !important;
    }
    nav li.nav-explorer > a:hover,
    nav li.nav-explorer > a.explorer-open {
        color: var(--accent) !important;
        background: rgba(var(--accent-rgb), 0.08) !important;
        border-color: var(--accent) !important;
        font-weight: 700 !important;
    }

    /* Donate — hollow accent pill matching the actual footer button
       (transparent-ish yellow fill, yellow border/text), with font
       treatment (size/weight/case) matching the rest of the nav pills
       rather than the footer's uppercase style. */
    nav a.nav-donate {
        background: rgba(var(--accent-rgb), 0.06) !important;
        border: 1px solid rgba(var(--accent-rgb), 0.4) !important;
        color: var(--accent) !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: normal !important;
    }
    nav a.nav-donate:hover {
        background: rgba(var(--accent-rgb), 0.14) !important;
        border-color: var(--accent) !important;
        color: var(--accent) !important;
    }

    /* #mainNav is a SIBLING of <header> now (see index.html/apropos.html
       comments — header's backdrop-filter was breaking #mainNav's fixed
       positioning on mobile when nested inside it). On desktop it used to
       get its position for free by being a flex child of header
       (justify-content: space-between). Now it needs it explicitly —
       fixed (not absolute) so it keeps tracking the sticky header
       correctly while scrolling, matching how it always visually behaved. */
    #mainNav {
        position: fixed !important;
        top: 0 !important;
        right: 1.5rem !important;
        left: auto !important;
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
        z-index: 1001 !important;
    }

    /* "Add to Home Screen" is a mobile-only feature by design — hide
       both the drawer entry and the banner on desktop. */
    #installDrawerItem,
    .install-banner {
        display: none !important;
    }
}

/* ================================================
   LANGUAGE SWITCHER (i18n)
   Added once at end of style.css — works for the
   homepage nav AND apropos.html since both share
   the exact same #mainNav ul markup.
   ================================================ */

.nav-lang { position: relative; }

.lang-pill {
    text-decoration: none;
    color: rgba(240,240,240,0.8);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    transition: all 0.18s ease;
    letter-spacing: 0.5px;
    display: inline-block;
}

.lang-pill:hover {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.35);
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #0f0f0f;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 12px;
    padding: 6px;
    min-width: 150px;
    z-index: 2000;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7);
    animation: dropdownFadeIn 0.16s ease;
}

.lang-dropdown.open { display: block; }

.lang-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: rgba(240,240,240,0.85);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lang-option:hover {
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
}

.lang-option.active {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    font-weight: 700;
}

/* Mobile: switcher becomes a full-width block like other nav pills */
@media (max-width: 767px) {
    .lang-pill { display: block !important; text-align: center; }
    .lang-dropdown {
        position: static;
        min-width: unset;
        width: 100%;
        margin-top: 6px;
    }
}

/* ================================================
   RTL SUPPORT (Arabic)
   Scoped to actual content blocks only — header, nav,
   logo, switcher and the skeleton diagram always stay
   in their normal LTR layout order. Arabic text itself
   still renders correctly RTL regardless of container
   direction (that's automatic per the Unicode bidi algo);
   this just right-aligns and sets reading direction for
   paragraphs/cards so it doesn't look reversed/ragged.
   ================================================ */
html.lang-ar .content-section p,
html.lang-ar .content-section li,
html.lang-ar .ap-hero-sub,
html.lang-ar .ap-card p,
html.lang-ar .ap-feature-text,
html.lang-ar .ap-placeholder,
html.lang-ar .ap-bones-note,
html.lang-ar .source-card p {
    direction: rtl;
    text-align: right;
}

html.lang-ar .lang-dropdown {
    direction: ltr; /* keep the switcher menu itself LTR */
}

/* ================================================
   MOBILE MENU REVAMP v4 — full-height off-canvas
   drawer sliding in from the right edge. Accueil /
   Explorer / À propos stack at the top; the language
   switcher (li.nav-lang, injected by i18n.js) and
   Nous soutenir are pinned to the bottom via
   margin-top: auto on a column flexbox — whatever
   sits between the top group and li.nav-lang in the
   ul just naturally fills the space above it.
   Wins via #mainNav specificity.
   ================================================ */

.nav-ic { font-style: normal; }

@media (max-width: 767px) {

    /* Full-height panel flush to the right edge, slides in via transform
       (not just fade) — feels like a real drawer, not a dropdown. */
    #mainNav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 64px;
        right: 0;
        left: auto;
        width: min(70vw, 300px);
        height: calc(100vh - 64px);
        height: calc(100dvh - 64px);
        background: var(--panel-bg);
        font-family: 'Poppins', sans-serif;
        border: none;
        border-left: 1px solid rgba(var(--accent-rgb), 0.18);
        padding: 14px 10px;
        padding-bottom: 110px; /* keep bottom pills clear of the anchor ad bar */
        box-shadow: -12px 0 40px rgba(0,0,0,0.5);
        transform: translateX(100%);
        transition: transform 0.24s cubic-bezier(.4,0,.2,1);
        z-index: 99999; /* must render above the anchor ad bar, which the
           drawer's bottom portion visually overlaps — anything lower risked
           the ad rendering on top of the expanded Explorer list */
        overflow-y: auto;
    }

    /* overscroll-behavior:contain used to sit here to stop the drawer's
       scroll from "chaining" into the page behind it once you hit the
       top/bottom of the list. Removed — on some mobile browsers it's a
       known source of the drawer's own scrolling getting blocked
       entirely rather than just contained, especially on a
       position:fixed element. body.nav-open below (overflow:hidden)
       already fully prevents the background page from scrolling while
       the drawer is open, so this isn't needed for that purpose. */

    /* The actual cause of "opening Explorer pushed other things": without
       this, touch-scrolling the expanded bone list on mobile could leak
       through and scroll the real page behind the drawer, dragging the
       fixed ad anchor bar / footer into view along with it. This is now
       the ONLY thing preventing that leak (see removed overscroll-behavior
       note above), so don't remove it without another fix in its place. */
    body.nav-open {
        overflow: hidden;
    }

    #mainNav.open {
        transform: translateX(0);
    }

    /* Dim page content behind the drawer — z-index bumped alongside
       #mainNav so it also fully covers the ad anchor bar, not just the
       normal page content, while the drawer is open. */
    body.nav-open::before {
        content: "";
        position: fixed;
        inset: 64px 0 0 0;
        background: rgba(0,0,0,0.55);
        z-index: 99998;
    }

    #mainNav ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    /* Language switcher + everything after it (Nous soutenir) used to be
       pinned to the bottom via "margin-top: auto" on a 100%-height flex
       container. That trick only works cleanly while everything fits
       without scrolling — combined with overflow-y:auto on #mainNav, it's
       a known source of unreliable/blocked touch-scrolling on some mobile
       browsers once content actually overflows (which is exactly what
       happens the moment a group opens). Removed in favor of plain
       top-to-bottom stacking, which scrolls reliably everywhere; the
       trade-off is FR / Nous soutenir sit right after À propos instead of
       being pushed to the very bottom when the drawer has extra room. */

    /* Explorer and language switcher only need full width WHILE OPEN
       (so the bone grid / language list has room) — when closed, they
       stay content-width like every other pill, no dead empty space. */
    #mainNav li.nav-explorer:has(.explorer-dropdown.open),
    #mainNav li.nav-lang:has(.lang-dropdown.open) {
        align-self: stretch !important;
        width: 100% !important;
    }

    /* Pill-card rows — Accueil / À propos / FR — same card language as Explorer & hamburger */
    #mainNav ul li > a:not(#explorerBtn),
    .lang-pill {
        display: flex !important;
        align-items: center;
        text-align: left !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--card-border) !important;
        border-radius: 10px !important;
        padding: 15px 14px !important;
        line-height: 1.25 !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        color: #eee !important;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    #mainNav ul li > a:not(#explorerBtn):hover,
    .lang-pill:hover {
        background: rgba(var(--accent-rgb), 0.08) !important;
        border-color: rgba(var(--accent-rgb), 0.3) !important;
        color: var(--accent) !important;
    }
    /* Current page (Accueil / À propos) reads as a filled accent pill */
    #mainNav ul li > a.nav-active:not(#explorerBtn) {
        background: rgba(var(--accent-rgb), 0.1) !important;
        border-color: var(--accent) !important;
        color: var(--accent) !important;
    }

    /* Donate — solid filled accent pill, set apart from the grey nav items */
    .nav-donate-item {
        margin-top: 0;
        padding-top: 10px;
        border-top: 1px solid var(--card-border);
    }
    #mainNav ul li > a:not(#explorerBtn).nav-donate {
        background: rgba(var(--accent-rgb), 0.06) !important;
        border: 1px solid rgba(var(--accent-rgb), 0.4) !important;
        color: var(--accent) !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        padding: 13px 14px !important;
        justify-content: center;
    }
    #mainNav ul li > a:not(#explorerBtn).nav-donate:hover {
        background: rgba(var(--accent-rgb), 0.14) !important;
        border-color: var(--accent) !important;
        color: var(--accent) !important;
    }

    .nav-ic {
        color: var(--accent);
        display: inline-block;
        width: 16px;
        margin-right: 8px;
        text-align: center;
        font-size: 0.85em;
        flex-shrink: 0;
    }

    /* Explorer — solid pill that toggles its own group list */
    #mainNav li.nav-explorer {
        padding: 0;
    }
    #mainNav ul li.nav-explorer > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 15px 14px !important;
        border-radius: 10px !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        background: transparent !important;
        color: var(--accent) !important;
        border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
    }
    #mainNav ul li.nav-explorer > a.explorer-open {
        background: rgba(var(--accent-rgb), 0.15) !important;
        color: var(--accent) !important;
        border-color: var(--accent) !important;
    }
    #mainNav ul li.nav-explorer > a.explorer-open .nav-ic {
        color: var(--accent);
    }
    #mainNav ul li.nav-explorer > a::after {
        content: "";
        width: 7px;
        height: 7px;
        flex-shrink: 0;
        margin-left: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.18s ease;
    }
    #mainNav ul li.nav-explorer > a.explorer-open::after {
        transform: rotate(-135deg);
    }
    #mainNav ul li.nav-explorer > a > .nav-label {
        display: flex;
        align-items: center;
    }

    /* Explorer's group list — hidden until the pill is tapped */
    #mainNav .explorer-dropdown {
        display: none;
        position: static !important;
        min-width: unset !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        animation: none !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    #mainNav .explorer-dropdown.open {
        display: block;
        margin: 6px 0 0 !important;
    }

    .explorer-group { margin-bottom: 8px !important; }
    .explorer-group:last-child { margin-bottom: 0 !important; }

    .explorer-group-title {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 12px;
        margin-bottom: 0 !important;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 10px;
        color: var(--accent) !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.03em;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

    .explorer-group.group-open .explorer-group-title {
        background: rgba(var(--accent-rgb), 0.08);
        border-color: rgba(var(--accent-rgb), 0.3);
        border-radius: 10px 10px 0 0;
    }

    .explorer-group-title span {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .explorer-group-title span::before {
        content: "";
        width: 3px;
        height: 12px;
        border-radius: 2px;
        background: var(--accent);
        flex-shrink: 0;
    }

    .explorer-group-title::after {
        content: "";
        width: 7px;
        height: 7px;
        flex-shrink: 0;
        border-right: 2px solid rgba(var(--accent-rgb), 0.65);
        border-bottom: 2px solid rgba(var(--accent-rgb), 0.65);
        transform: rotate(45deg);
        transition: transform 0.18s ease;
    }

    .explorer-group.group-open .explorer-group-title::after {
        transform: rotate(-135deg);
    }

    .explorer-bones {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        max-height: 0;
        overflow: hidden;
        padding: 8px 0 0 !important;
        background: rgba(255,255,255,0.015);
        border: 1px solid var(--card-border);
        border-top: none;
        border-radius: 0 0 10px 10px;
        transition: max-height 0.22s ease;
    }

    .explorer-group.group-open .explorer-bones {
        max-height: 480px;
        padding: 8px 8px !important;
    }

    .explorer-bone {
        display: block !important;
        text-align: left;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--card-border) !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        color: #ddd !important;
    }
    .explorer-bone:hover {
        background: rgba(var(--accent-rgb), 0.08) !important;
        border-color: rgba(var(--accent-rgb), 0.3) !important;
        color: var(--accent) !important;
    }

    /* Language switcher — flat row + inline flat sublist. Scoped to
       #mainNav (the drawer) specifically — this used to be a bare
       .lang-dropdown/.lang-option selector, which meant these !important
       rules also hijacked the intro gate's language dropdown (a
       completely different floating-card widget, not part of the
       drawer), stripping its background/border/shadow and forcing it
       into flat full-width drawer styling it was never meant to have. */
    #mainNav .lang-dropdown {
        position: static !important;
        width: 100% !important;
        min-width: unset !important;
        margin-top: 0 !important;
        background: transparent !important;
        border: none !important;
        border-top: 1px solid rgba(255,255,255,0.05);
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    #mainNav .lang-option {
        font-family: 'Poppins', sans-serif !important;
        padding: 10px 11px 10px 22px !important;
        border-radius: 0 !important;
        border-top: 1px solid var(--card-bg) !important;
    }

    /* Smoother hamburger → X */
    .hamburger { transition: background 0.2s ease, border-color 0.2s ease; }
    .hamburger span {
        border-radius: 3px;
        transition: transform 0.32s cubic-bezier(.65,0,.35,1), opacity 0.16s ease 0.05s;
    }
    .hamburger.active,
    .hamburger.is-open {
        background: rgba(var(--accent-rgb), 0.1);
        border-color: rgba(var(--accent-rgb), 0.45);
    }
}

/* ================================================
   HEADER LAYOUT FIX — old legacy mobile rules
   ("RESPONSIVE DESIGN" ~line 906 and "Mobile
   adjustments" ~line 987) set header to
   flex-direction: column on mobile. That's dead
   code from before the hamburger/#mainNav redesign
   — it stacked the logo and hamburger into two
   rows, dropping the hamburger down next to the
   nav panel's first item instead of beside the
   logo. Forcing it back to a single row here.
   ================================================ */
@media (max-width: 767px) {
    header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        padding: 0 1.5rem !important;
        gap: 0 !important;
    }
}

/* ========== ADD TO HOME SCREEN — banner, drawer entry, instructions modal ========== */

/* Drawer entry icon spacing matches the other nav-ic icons already used
   (Accueil, Explorer, etc.) — no extra rule needed beyond hiding it on
   desktop (done above) since #mainNav li a's base styling covers it. */

.install-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
    animation: pageFadeIn 0.3s ease both;
}

.install-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.install-banner-text strong {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
}

.install-banner-text span {
    color: rgba(240,240,240,0.75);
    font-size: 0.78rem;
    line-height: 1.3;
}

.install-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.install-banner-cta {
    background: linear-gradient(90deg, var(--accent-hover), var(--accent-hover-2));
    color: var(--panel-bg);
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.install-banner-close {
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: rgba(240,240,240,0.6);
    width: 30px;
    height: 30px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.install-banner-close:hover {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.4);
}

@media (min-width: 768px) {
    .install-banner { display: none !important; }
}

/* Instructions modal — shown when no native install prompt is available
   (iOS Safari always, some Android browsers sometimes) */
.install-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: pageFadeIn 0.2s ease both;
}

.install-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--panel-bg);
    border: 1px solid var(--card-border);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}

.install-modal h3 {
    color: var(--accent);
    font-size: 1rem;
    margin-bottom: 8px;
}

.install-modal p {
    color: rgba(240,240,240,0.85);
    font-size: 0.88rem;
    line-height: 1.5;
}

.install-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    color: rgba(240,240,240,0.6);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.install-modal-close:hover { color: var(--accent); }

html.lang-ar .install-modal-close { right: auto; left: 14px; }
html.lang-ar .install-modal h3,
html.lang-ar .install-modal p { text-align: right; }
html.lang-ar .install-banner-text strong,
html.lang-ar .install-banner-text span { text-align: right; }

/* ========== FEEDBACK TYPE MODAL — "problem or idea?" prompt shown
   before the feedback link actually opens an email app ========== */
.feedback-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: pageFadeIn 0.2s ease both;
}

.feedback-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--panel-bg);
    border: 1px solid var(--card-border);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}

.feedback-modal h3 {
    color: var(--accent);
    font-size: 1rem;
    margin-bottom: 8px;
}

.feedback-modal p {
    color: rgba(240,240,240,0.85);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 18px;
}

.feedback-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feedback-modal-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    color: #f0f0f0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.feedback-modal-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.feedback-modal-btn:hover {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: var(--accent);
}

.feedback-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    color: rgba(240,240,240,0.6);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.feedback-modal-close:hover { color: var(--accent); }

html.lang-ar .feedback-modal-close { right: auto; left: 14px; }
html.lang-ar .feedback-modal h3,
html.lang-ar .feedback-modal p { text-align: right; }
html.lang-ar .feedback-modal-btn { text-align: right; }