/* ========== GLOBAL STYLES ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;  /* NEW FONT */
    background-color: #121212;
    color: #f0f0f0;
    line-height: 1.6;
}

/* ========== HEADER STYLES ========== */
header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #232323 0%, #161616 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%, #ffd700 30%, #ffd700 70%, transparent 100%);
    opacity: 0.85;
    box-shadow: 0 1px 8px rgba(255,215,0,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: #ffd700;
    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: #ffd700;
    background: rgba(255,215,0,0.08);
}

/* Explorer button styled differently */
nav li.nav-explorer > a {
    color: #ffd700;
    border: 1px solid rgba(255,215,0,0.3);
    font-weight: 700;
}

nav li.nav-explorer > a:hover {
    background: rgba(255,215,0,0.12);
    border-color: #ffd700;
}

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

.explorer-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #0f0f0f;
    border: 1px solid rgba(255,215,0,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(255,215,0,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(255,215,0,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(255,215,0,0.08);
    color: #ffd700;
    border-color: rgba(255,215,0,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: #ffd700;
    border-radius: 2px;
    transition: all 0.22s ease;
    transform-origin: center;
}

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

    nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: #111;
        border-bottom: 1px solid rgba(255,215,0,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;
    }
}

/* ========== MAIN CONTENT ========== */
main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    padding: 3rem 2rem;
}

/* === SKELETON: outer shell owns border/radius/glow, holds image-container + footer bar stacked === */

.skeleton-shell {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  background-color: #262626;
  border: 1px solid #3a3a3a;
  border-radius: 14px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  max-width: 520px;
  width: auto;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.skeleton-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ffd700 50%, transparent);
  opacity: 0.85;
  z-index: 5;
}

.skeleton-shell:hover {
  border-color: rgba(255,215,0,0.3);
  box-shadow: 0 14px 34px rgba(0,0,0,0.4);
  transform: translateY(-3px);
  cursor: pointer;
}
.skeleton-shell:active {
  transform: translateY(-1px);
}

.skeleton-container {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;
  box-sizing: border-box;
  width: auto;
}

.skeleton-container img,
.skeleton-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 85vh;
  border-radius: 10px;
  transition: transform 0.25s ease;
}

@media (max-width: 768px) {
  .skeleton-shell {
    max-width: 92vw;
    border-width: 1px;
  }
  .skeleton-container {
    padding: 4px 0 0;
  }

  .skeleton-container img,
  .skeleton-img {
    width: 92vw;
    max-width: none;
    max-height: 92vh;
    height: auto;
  }
}

@media (min-width: 1200px) {
  .skeleton-shell {
    max-width: 480px;
  }
  .skeleton-container img {
    max-height: 70vh;
  }
}


/* ===== Skeleton footer bar (holds Mode toggle) — dedicated strip below the image, no overlap ever ===== */
.skeleton-footer {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 8px;
  margin-top: 4px;
  background: #232323;
  z-index: 60;
}

/* thin yellow gradient hairline separating image from footer bar — echoes header line */
.skeleton-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #ffd700 30%, #ffd700 70%, transparent 100%);
  opacity: 0.6;
}

.mode-toggle-btn {
  position: static;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(22,22,22,0.95);
  border: 2px solid #ffd700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.mode-toggle-btn .mode-label {
  font-size: 11px;
  line-height: 1;
  color: #ffd700;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.mode-toggle-btn:hover,
.mode-toggle-btn:focus {
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(245,213,53,0.18), 0 4px 8px rgba(0,0,0,0.6);
  outline: none;
}

@media (max-width: 420px) {
  .skeleton-footer { padding: 8px 0 6px; }
  .mode-toggle-btn { padding: 5px 12px; }
  .mode-toggle-btn .mode-label { font-size: 9px; }
}

/* Organ image (Viscérale mode) — overlays skeleton-img exactly, hidden by default.
   IMPORTANT: default is display:none here (not the [hidden] attribute) so JS can
   toggle it reliably via inline style without any specificity conflicts. */
.skeleton-container .organ-img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* Organ clickable zones — same interaction language as .bone-zone, hidden by default */
.organ-zone {
  position: absolute;
  display: none;
  z-index: 50;
  border-radius: 12%;
  cursor: pointer;
  pointer-events: auto;
  background: transparent;
  box-shadow: none;
  transition: box-shadow 0.15s ease;
}

.organ-zone:hover {
  box-shadow: 0 0 20px 9px rgb(245, 213, 53);
}

.organ-zone.tapped {
  animation: boneTap 0.4s ease forwards;
}

/* TTX zone — chest/lungs region */
.zone-ttx {
  left: 50%;
  top: 24%;
  width: 32%;
  height: 12%;
  transform: translate(-50%, -50%);
}

/* ASP zone — abdomen/intestines region */
.zone-asp {
  left: 50%;
  top: 40%;
  width: 28%;
  height: 14%;
  transform: translate(-50%, -50%);
}

/* Base clickable zone style */
.bone-zone {
    position: absolute;
    display: block;
    background: rgb(255, 217, 0); /* semi-transparent yellow */
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

/* Glow on hover */
.bone-zone:hover {
    opacity: 0.6;
    box-shadow: 0 0 10px #FFD700;
}

/* ===== Switch-view button styling + label ===== */
.switch-view-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 60;
  width: 48px;
  height: 52px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(22,22,22,0.95);
  border: 2px solid #ffd700;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

/* Icon color */
.switch-view-btn svg path {
  stroke: #ffd700;
}

/* small label under icon */
.switch-view-btn .switch-label {
  font-size: 10px;
  line-height: 1;
  color: #ffd700;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

/* hover/focus on the button itself: scale + subtle glow */
.switch-view-btn:hover,
.switch-view-btn:focus {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(245,213,53,0.18), 0 4px 8px rgba(0,0,0,0.6);
  outline: none;
}

/* remove focus ring default but keep accessibility focus visible */
.switch-view-btn:focus {
  box-shadow: 0 8px 28px rgba(245,213,53,0.22);
}

/* --- IMPORTANT: prevent the image from getting hover effects while hovering the button --- */
/* the button sits BEFORE the image in the DOM, so we target the sibling img */
.skeleton-container .switch-view-btn:hover ~ img,
.skeleton-container .switch-view-btn:focus ~ img,
.skeleton-container .switch-view-btn:active ~ img {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* small tweak for tiny screens so button doesn't cover too much */
@media (max-width: 420px) {
  .switch-view-btn { width: 42px; height: 46px; top: 6px; right: 6px; padding: 5px; }
  .switch-view-btn .switch-label { font-size: 9px; }
}

/* rotate icon when .rotating is applied to the button */
.switch-view-btn svg {
  transition: transform 0.42s cubic-bezier(.2,.9,.2,1);
  transform-origin: 50% 50%;
}

/* rotate 180deg while the button has the class */
.switch-view-btn.rotating svg {
  transform: rotate(180deg);
}

/* subtle extra micro-rotate while pressing (optional) */
.switch-view-btn:active svg {
  transform: scale(0.98) rotate(0deg);
}

/* fade helpers already exist — keep them (no change) */
.skeleton-img.fade-out { opacity: 0.22; transition: opacity 180ms linear; }
.skeleton-img.fade-in { opacity: 1; transition: opacity 220ms linear; }

/* Content section — v3: no icons, thin top accent, editorial stat row with dividers */
.content-section {
  position: relative;
  flex: 1 1 300px;
  max-width: 600px;
  background-color: #262626;
  border: 1px solid #3a3a3a;
  border-radius: 14px;
  padding: 38px 36px;
  box-sizing: border-box;
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.content-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ffd700 50%, transparent);
  opacity: 0.85;
}

.content-section:hover {
  border-color: rgba(255,215,0,0.3);
  box-shadow: 0 14px 34px rgba(0,0,0,0.4);
  transform: translateY(-3px);
}

.content-overline {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 10px;
}

.content-stat-grid {
  list-style: none;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: stretch;
}

.content-stat-grid li {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 18px;
  border-left: 1px solid rgba(255,255,255,0.1);
}

.content-stat-grid li:first-child {
  padding-left: 0;
  border-left: none;
}

.content-stat-grid .stat-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffd700;
  line-height: 1.2;
}

.content-stat-grid .stat-label {
  font-size: 0.7rem;
  color: rgba(240,240,240,0.5);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Responsive tweaks */
@media (min-width: 768px) {
  .skeleton-img {
    max-height: 600px;
  }
}

@media (max-width: 767px) {
  .skeleton-img {
    max-height: 75vh;
  }
  .content-section {
    padding: 28px 24px;
  }
  .content-stat-grid li {
    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .content-stat-grid {
    gap: 4px;
  }
  .content-stat-grid li {
    padding: 0 8px;
  }
  .content-stat-grid .stat-value {
    font-size: 1.05rem;
  }
  .content-stat-grid .stat-label {
    font-size: 0.6rem;
    letter-spacing: 0.15px;
    line-height: 1.25;
  }
}

.content-section h2 {
    font-size: 1.85rem;
    margin-bottom: 0.85rem;
    color: #ffd700;  /* Accent yellow */
    line-height: 1.25;
}

.content-section p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(240,240,240,0.8);
}

/* ========== FOOTER ========== */
.site-footer {
    background: linear-gradient(180deg, #161616 0%, #101010 100%);
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
    margin-top: 2rem;
    padding: 0;
}

.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #ffd700 30%, #ffd700 70%, transparent 100%);
    opacity: 0.6;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.6rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.footer-brand {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.footer-logo-img { height: 26px; margin-bottom: 0; opacity: 0.95; }
.footer-logo-mobile { margin-bottom: 0; }
.footer-logo-mobile .logo-icon { height: 26px; width: 26px; }
.footer-logo-mobile .logo-text { font-size: 0.95rem; }

.footer-tagline {
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(240,240,240,0.42);
    margin: 0;
    letter-spacing: 0.01em;
}

.footer-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.1), transparent);
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.footer-support {
    color: #ffd700 !important;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255,215,0,0.4);
    background: rgba(255,215,0,0.06);
    transition: all 0.18s ease;
    white-space: nowrap;
}

.footer-support:hover {
    background: rgba(255,215,0,0.14);
    border-color: #ffd700;
    box-shadow: 0 0 16px rgba(255,215,0,0.15);
    transform: translateY(-1px);
    text-decoration: none;
}

.footer-copy {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(240,240,240,0.3);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem 1.25rem;
        gap: 1rem;
    }
    .footer-brand { max-width: 100%; align-items: center; }
    .footer-divider { width: 60%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); }
    .footer-right { align-items: center; }
}

/* ========== HOVER EFFECTS ========== */

/* Navbar link glow on hover */
nav a:hover {
    color: #ffd700;
    text-shadow: 0 0 5px #ffd700;
}

/* Skeleton image zoom on hover */
.skeleton-section img:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* Placeholder for future buttons */
button {
    background-color: #ffd700;
    color: #121212;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease;
}

button:hover {
    transform: scale(1.05);
}

/* ========== ANIMATIONS ========== */

/* Fade-in effect */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main, footer, header {
    animation: fadeIn 0.6s ease-in-out;
}

/* ========== RESPONSIVE DESIGN ========== */

/* For tablets and larger screens */
@media (min-width: 768px) {
    body {
        font-size: 1.1rem;
    }

    header {
        padding: 1.5rem 3rem;
    }

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

    main {
        padding: 4rem 3rem;
    }

    .content-section h2 {
        font-size: 2.2rem;
    }

    .skeleton-section img {
        width: 350px;
    }
}

/* For large desktop screens */
@media (min-width: 1200px) {
    main {
        max-width: 1400px;
        margin: 0 auto;
    }

    body {
        font-size: 1.2rem;
    }

    .skeleton-section img {
        width: 400px;
    }
}

/* For small screens (phones) */
@media (max-width: 767px) {
    header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    main {
        flex-direction: column;
        align-items: center;
        padding: 2rem 1rem;
    }

    .skeleton-section img {
        width: 90%;
    }

    .content-section {
        text-align: left;
    }

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

/* ========== POLISH: Shadows, Animations, Icons ========== */

/* Slight shadow for cards/images */
.skeleton-section img,
footer {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Hover effect for skeleton image */
.skeleton-section img:hover {
    transform: scale(1.03);
    border-color: #ffd700;
}

/* Nav hover effect already exists, we just make it smoother */
nav a:hover {
    color: #ffd700;
    transform: scale(1.05);
}

/* Add a light glow on headings */
.content-section h2 {
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
}

/* Make skeleton image bigger and clearer */
.skeleton-section img {
    width: 350px;
    max-width: 100%;
    border: 3px solid #444;
    border-radius: 12px;
    background-color: #1c1c1c;
    padding: 10px;
}

/* Larger skeleton on large screens */
@media (min-width: 1200px) {
    .skeleton-section img {
        width: 450px;
    }
}

/* Clearer display on mobile */
@media (max-width: 767px) {
    .skeleton-section img {
        width: 100%;
    }
}

/* ========== Mobile adjustments ========== */
@media (max-width: 768px) {
    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;
    }
}

/* ========== Scroll Animation ========== */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========== Scroll Animation ========== */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 600px) {
  .content-section h2 {
    font-size: 1.4rem;
    line-height: 1.3;
    text-align: left;
  }

  .content-section p {
    font-size: 0.98rem;
    line-height: 1.55;
    text-align: left;
  }

  .content-feature-list li {
    font-size: 0.78rem;
    padding: 5px 12px;
  }

  .skeleton-container img {
    max-width: 250px;
  }
}

/* Base clickable area */
.bone-zone {
  position: absolute;
  z-index: 50;
  display: block;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  background: transparent; /* completely invisible background */
  box-shadow: none; /* no shadow by default */
  transition: box-shadow 0.15s ease;
}

/* Glow effect on hover */
.bone-zone:hover {
  box-shadow: 0 0 20px 9px rgb(245, 213, 53); /* yellow glow */
}

/* Debug mode so you can see it while adjusting */
.bone-zone.debug {
  background: rgba(255, 217, 0, 0.5) !important;
  outline: 2px solid rgba(255, 217, 0, 0.8) !important;
  opacity: 1 !important;
}

/* Skull clickable zone - adjust if needed */
.zone-crane {
  left: 50%;
  top: 4%;
  width: 18%;
  height: 5%;
  transform: translate(-50%, -50%);
}

.view-post .zone-crane {
  left: 49%;
  top: 5%;
  width: 17%;
  height: 7%;
  transform: translate(-50%, -50%);
}

.zone-clavicule {
  left: 50%;   /* adjust this % to move horizontally */
  top: 18%;    /* adjust this % to move vertically */
  width: 43%;  /* adjust size */
  height: 3%;
  transform: translate(-50%, -50%);
}

/* =========================== Humérus Zones =========================== */
.zone-humerus-left,
.zone-humerus-right {
  position: absolute;
  cursor: pointer;
  z-index: 3;
  opacity: 0; /* invisible but clickable */
  transition: opacity 0.2s;
}

/* Adjust these to fit your skeleton image precisely */
.zone-humerus-left {
  top: 20%;    /* vertical position */
  left: 21%;   /* horizontal position */
  width: 8%;   /* width of clickable area */
  height: 16%; /* height of clickable area */
}

.zone-humerus-right {
  top: 20%;
  right: 21%;
  width: 8%;
  height: 16%;
}

/* --- ÉPAULE DROITE clickable zone --- */
.zone-epaule-droite {
  position: absolute;
  right: 21%;   /* adjust horizontally */
  top: 17%;     /* vertical position */
  width: 13%;    /* size of clickable circle */
  height: 6%;
  cursor: pointer;
  background: rgba(255, 215, 0, 0.25); /* transparent golden glow */
  border-radius: 50%;
  transition: background 0.2s ease;
}

/* --- ÉPAULE GAUCHE clickable zone --- */
.zone-epaule-gauche {
  position: absolute;
  left: 21%;    /* mirror horizontally */
  top: 17%;
  width: 13%;
  height: 6%;
  cursor: pointer;
  background: rgba(255, 215, 0, 0.25);
  border-radius: 50%;
  transition: background 0.2s ease;
}

/* === SCAPULA ZONES (posterior view only) === */
.hide-ant {
  display: none;
}

.zone-scapula-droite {
  position: absolute;
  right: 34%;
  top: 18%;
  width: 8%;
  height: 8%;
  border-radius: 30%;
  opacity: 1;
}

.zone-scapula-gauche {
  position: absolute;
  left: 34%;
  top: 18%;
  width: 8%;
  height: 8%;
  border-radius: 30%;
  opacity: 1;
}

/* === coude ZONES === */
.hide-ant {
  display: none;
}

.zone-coude-left {
  position: absolute;
  left: 18%;
  top: 34%;
  width: 10%;
  height: 5%;
}

.zone-coude-right {
  position: absolute;
  right: 18%;
  top: 34%;
  width: 10%;
  height: 5%;
}

/* Coude — POST view position corrections */
.view-post .zone-coude-left {
  position: absolute;
  left: 20%;
  top: 36%;
  width: 10%;
  height: 5%;
}

.view-post .zone-coude-right {
  position: absolute;
  right: 20%;
  top: 36%;
  width: 10%;
  height: 5%;
}

/* === avantbras ZONES === */
.hide-ant {
  display: none;
}

.zone-avantbras-left {
  position: absolute;
  left: 13%;
  top: 37%;
  width: 10%;
  height: 13%;
  transform: rotate(15deg);
}

.zone-avantbras-right {
  position: absolute;
  right: 13%;
  top: 37%;
  width: 10%;
  height: 13%;
  transform: rotate(-15deg);
}

/* avantbras — POST view position corrections */
.view-post .zone-avantbras-left {
  position: absolute;
  left: 21%;
  top: 41%;
  width: 8%;
  height: 11%;
  transform: rotate(0deg); 
}

.view-post .zone-avantbras-right {
  position: absolute;
  right: 21%;
  top: 41%;
  width: 8%;
  height: 11%;
  transform: rotate(0deg); 
}

/* === poignet ZONES === */
.hide-ant {
  display: none;
}

.zone-poignet-left {
  position: absolute;
  left: 9%;
  top: 48%;
  width: 9%;
  height: 4%;
}

.zone-poignet-right {
  position: absolute;
  right: 9%;
  top: 48%;
  width: 9%;
  height: 4%;
}

/* poignet — POST view position corrections */
.view-post .zone-poignet-left {
  position: absolute;
  left: 20%;
  top: 51%;
  width: 7%;
  height: 3%;
}

.view-post .zone-poignet-right {
  position: absolute;
  right: 23%;
  top: 51%;
  width: 7%;
  height: 3%;
}

/* === main ZONES === */
.hide-ant {
  display: none;
}

.zone-main-left {
  position: absolute;
  left: 4%;
  top: 51%;
  width: 12%;
  height: 7%;
  transform: rotate(11deg); 
}

.zone-main-right {
  position: absolute;
  right: 4%;
  top: 51%;
  width: 12%;
  height: 7%;
  transform: rotate(-11deg); 
}

/* main — POST view position corrections */
.view-post .zone-main-left {
  position: absolute;
  left: 22%;
  top: 53%;
  width: 8%;
  height: 6%;
  transform: rotate(-10deg); 
}

.view-post .zone-main-right {
  position: absolute;
  right: 24%;
  top: 53%;
  width: 8%;
  height: 6%;
  transform: rotate(10deg); 
}

/* bassin clickable zone */
.zone-bassin {
  left: 50%;
  top: 45%;
  width: 30%;
  height: 10%;
  transform: translate(-50%, -50%);
}

/* === hanche ZONES === */
.hide-ant {
  display: none;
}

.zone-hanche-left {
  position: absolute;
  left: 32%;
  top: 46%;
  width: 10%;
  height: 6%;
  transform: rotate(11deg); 
}

.zone-hanche-right {
  position: absolute;
  right: 32%;
  top: 46%;
  width: 10%;
  height: 6%;
  transform: rotate(-11deg); 
}

/* === femur ZONES === */
.hide-ant {
  display: none;
}

.zone-femur-left {
  position: absolute;
  left: 34%;
  top: 52%;
  width: 7%;
  height: 20%;
  transform: rotate(-8deg); 
}

.zone-femur-right {
  position: absolute;
  right: 33%;
  top: 52%;
  width: 7%;
  height: 20%;
  transform: rotate(8deg); 
}

/* === genou ZONES === */
.hide-ant {
  display: none;
}

.zone-genou-left {
  position: absolute;
  left: 34%;
  top: 69%;
  width: 12%;
  height: 6%;
  transform: rotate(-10deg); 
}

.zone-genou-right {
  position: absolute;
  right: 34%;
  top: 69%;
  width: 12%;
  height: 6%;
  transform: rotate(10deg); 
}

/* === jambe ZONES === */
.hide-ant {
  display: none;
}

.zone-jambe-left {
  position: absolute;
  left: 37%;
  top: 74%;
  width: 8%;
  height: 18%;
  transform: rotate(-9deg);
}

.zone-jambe-right {
  position: absolute;
  right: 37%;
  top: 74%;
  width: 8%;
  height: 18%;
  transform: rotate(9deg);
}

/* jambe — POST view position corrections */

.view-post .zone-jambe-left {
  position: absolute;
  left: 36%;
  top: 74%;
  width: 8%;
  height: 18%;
  transform: rotate(0deg);
}

.view-post .zone-jambe-right {
  position: absolute;
  right: 36%;
  top: 74%;
  width: 8%;
  height: 18%;
  transform: rotate(0deg);
}

/* === cheville ZONES === */
.hide-ant {
  display: none;
}

.zone-cheville-left {
  position: absolute;
  left: 40%;
  top: 91%;
  width: 8%;
  height: 4%;
}

.zone-cheville-right {
  position: absolute;
  right: 40%;
  top: 91%;
  width: 8%;
  height: 4%; 
}

/* cheville — POST view position corrections */

.view-post .zone-cheville-left {
  position: absolute;
  left: 37%;
  top: 93%;
  width: 9%;
  height: 4%;
}

.view-post .zone-cheville-right {
  position: absolute;
  right: 37%;
  top: 93%;
  width: 9%;
  height: 4%;
}

/* === pied ZONES === */
.hide-ant {
  display: none;
}

.zone-pied-left {
  position: absolute;
  left: 38%;
  top: 94%;
  width: 10%;
  height: 5%;
}

.zone-pied-right {
  position: absolute;
  right: 38%;
  top: 94%;
  width: 10%;
  height: 5%;
}

/* pied — POST view position corrections */

.view-post .zone-pied-left {
  position: absolute;
  left: 34%;
  top: 96%;
  width: 10%;
  height: 3%;
}

.view-post .zone-pied-right {
  position: absolute;
  right: 34%;
  top: 96%;
  width: 10%;
  height: 3%;
}

/* === sternum ZONE === */
.hide-post {
  display: none;
}

.zone-sternum {
  position: absolute;
  left: 46%;
  top: 20%;
  width: 8%;
  height: 13%;
}

/* === massiffacial ZONE === */
.hide-post {
  display: none;
}

.zone-massiffacial {
  position: absolute;
  left: 43%;
  top: 7%;
  width: 14%;
  height: 7%;
}

/* === cervical ZONE === */
.hide-post {
  display: none;
}

.zone-cervical {
  position: absolute;
  left: 46%;
  top: 13%;
  width: 8%;
  height: 6%;
}

.view-post .zone-cervical {
  position: absolute;
  left: 45%;
  top: 10%;
  width: 9%;
  height: 8%;
}

/* === dorsal ZONE === */
.hide-post {
  display: none;
}

.zone-dorsal {
  position: absolute;
  left: 46%;
  top: 17%;
  width: 8%;
  height: 15%;
}

/* === lombaire ZONE === */
.hide-post {
  display: none;
}

.zone-lombaire {
  position: absolute;
  left: 46%;
  top: 33%;
  width: 8%;
  height: 10%;
}

.view-post .zone-lombaire {
  position: absolute;
  left: 45%;
  top: 30%;
  width: 10%;
  height: 12%;
}

/* === grilcostal ZONES === */
.hide-ant {
  display: none;
}

.zone-grilcostal-left {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 17%;
  height: 16%;
}

.zone-grilcostal-right {
  position: absolute;
  right: 30%;
  top: 20%;
  width: 17%;
  height: 16%;
}

/* grilcostal — POST view position corrections */

.view-post .zone-grilcostal-left {
  position: absolute;
  left: 30%;
  top: 25%;
  width: 17%;
  height: 9%;
}

.view-post .zone-grilcostal-right {
  position: absolute;
  right: 30%;
  top: 25%;
  width: 17%;
  height: 9%;
}

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


@keyframes boneTap {
  0%   { box-shadow: 0 0 0px 0px rgba(255, 215, 0, 0.8); }
  50%  { box-shadow: 0 0 30px 20px rgba(255, 215, 0, 0.4); }
  100% { box-shadow: 0 0 10px 8px rgba(255, 215, 0, 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: #ffd700;
    background: rgba(255,215,0,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(255,215,0,0.08);
    border-color: rgba(255,215,0,0.4);
    color: #ffd700;
}

.nav-explorer { position: relative; }

.explorer-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #0f0f0f;
    border: 1px solid rgba(255,215,0,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(255,215,0,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(255,215,0,0.08);
    color: #ffd700;
    border-color: rgba(255,215,0,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: #ffd700;
    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: #111;
        border-bottom: 1px solid rgba(255,215,0,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(253,216,53,0.12) !important; color: #fdd835 !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(253,216,53,0.12) !important;
        color: #fdd835 !important;
        border-color: rgba(253,216,53,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: #ffd700 !important; background: rgba(255,215,0,0.08) !important; border-color: rgba(255,215,0,0.4) !important; }
    nav a.nav-active { color: #ffd700 !important; border-color: #ffd700 !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: #ffd700 !important;
        background: rgba(255,215,0,0.08) !important;
        border-color: #ffd700 !important;
        font-weight: 700 !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: #ffd700;
    background: rgba(255,215,0,0.08);
    border-color: rgba(255,215,0,0.35);
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #0f0f0f;
    border: 1px solid rgba(255,215,0,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(255,215,0,0.08);
    color: #ffd700;
}

.lang-option.active {
    background: rgba(255,215,0,0.12);
    color: #ffd700;
    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 v3 — panel flush to header/
   right edge, real Explorer toggle, accordion
   groups, colors matched to the site's #ffd700
   accent. Wins via #mainNav specificity.
   ================================================ */

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

@media (max-width: 767px) {

    /* Panel attached to header + right edge — no gaps, content-fit width */
    #mainNav {
        display: block;
        position: fixed;
        top: 64px;
        right: 0;
        left: auto;
        width: min(54vw, 200px);
        max-height: calc(100vh - 184px); /* 64px header clearance + 120px reserved for the anchor bar (max 110px + border) */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #111;
        font-family: 'Poppins', sans-serif;
        border: none;
        border-left: 1px solid rgba(255,215,0,0.18);
        border-bottom: 1px solid rgba(255,215,0,0.18);
        border-radius: 0 0 0 16px;
        padding: 8px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.4);
        transform-origin: top right;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        pointer-events: none;
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
        z-index: 999;
    }

    #mainNav.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Dim page content behind the card */
    body.nav-open::before {
        content: "";
        position: fixed;
        inset: 64px 0 0 0;
        background: rgba(0,0,0,0.5);
        z-index: 998;
    }

    #mainNav ul { gap: 8px !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: rgba(255,255,255,0.03) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 10px !important;
        padding: 13px 12px !important;
        line-height: 1.25 !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 0.85rem !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(255,215,0,0.08) !important;
        border-color: rgba(255,215,0,0.3) !important;
        color: #ffd700 !important;
    }
    /* Current page (Accueil / À propos) reads as a filled accent pill */
    #mainNav ul li > a.nav-active:not(#explorerBtn) {
        background: rgba(255,215,0,0.1) !important;
        border-color: #ffd700 !important;
        color: #ffd700 !important;
    }

    .nav-ic {
        color: #ffd700;
        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: 13px 12px !important;
        border-radius: 10px !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        background: transparent !important;
        color: #ffd700 !important;
        border: 1px solid rgba(255,215,0,0.3) !important;
    }
    #mainNav ul li.nav-explorer > a.explorer-open {
        background: rgba(255,215,0,0.15) !important;
        color: #ffd700 !important;
        border-color: #ffd700 !important;
    }
    #mainNav ul li.nav-explorer > a.explorer-open .nav-ic {
        color: #ffd700;
    }
    #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: 0 !important; }

    .explorer-group-title {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 11px 11px;
        margin-bottom: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.05);
        color: #ffd700 !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.03em;
    }

    .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: #ffd700;
        flex-shrink: 0;
    }

    .explorer-group-title::after {
        content: "";
        width: 7px;
        height: 7px;
        flex-shrink: 0;
        border-right: 2px solid rgba(255,215,0,0.65);
        border-bottom: 2px solid rgba(255,215,0,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: 0 !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.22s ease;
    }

    .explorer-group.group-open .explorer-bones {
        max-height: 480px;
    }

    .explorer-bone {
        display: block !important;
        text-align: left;
        padding: 10px 11px 10px 22px !important;
        border-radius: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.03);
        font-family: 'Poppins', sans-serif !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        color: #ddd !important;
        background: transparent !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }
    .explorer-bone:hover {
        background: rgba(255,215,0,0.06) !important;
        color: #ffd700 !important;
    }

    /* Language switcher — flat row + inline flat sublist */
    .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;
    }
    .lang-option {
        font-family: 'Poppins', sans-serif !important;
        padding: 10px 11px 10px 22px !important;
        border-radius: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.03) !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(255,215,0,0.1);
        border-color: rgba(255,215,0,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;
    }
}

/* ================================================
   DONATE MODAL — "Nous soutenir" popup
   Triggered from footer (index/apropos) + intro overlay.
   Same dark/gold visual language as the rest of the site.
   ================================================ */
.donate-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8,8,8,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.donate-overlay.open { display: flex; }
body.donate-open { overflow: hidden; }

.donate-modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #1b1b1b 0%, #131313 100%);
    border: 1px solid rgba(255,215,0,0.18);
    border-radius: 16px;
    padding: 28px 26px 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02);
    animation: donateModalIn 0.22s cubic-bezier(0.4,0,0.2,1);
}
@keyframes donateModalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.donate-modal::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #ffd700 30%, #ffd700 70%, transparent 100%);
    opacity: 0.85;
}

.donate-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: rgba(240,240,240,0.7);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}
.donate-close-btn:hover {
    color: #ffd700;
    border-color: rgba(255,215,0,0.4);
    background: rgba(255,215,0,0.08);
}

.donate-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    padding-right: 30px;
}

.donate-intro-text {
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(240,240,240,0.65);
    margin: 0 0 20px;
}

.donate-rip-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.donate-field { margin-bottom: 12px; }
.donate-field:last-child { margin-bottom: 0; }

.donate-field-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,215,0,0.75);
    margin-bottom: 4px;
}

.donate-field-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f4f4f4;
    word-break: break-word;
}

.donate-rip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.donate-copy-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #111;
    background: linear-gradient(90deg, #fdd835, #f0c828);
    border: none;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.donate-copy-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(253,216,53,0.3); }
.donate-copy-btn:active { transform: translateY(0); }
.donate-copy-btn.copied { background: linear-gradient(90deg, #4caf50, #43a047); color: #fff; }

.donate-card-section {
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.donate-card-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(240,240,240,0.5);
    margin: 0 0 12px;
}

.donate-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #111;
    background: linear-gradient(90deg, #fdd835, #f0c828);
    border: none;
    padding: 13px 20px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(253,216,53,0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.donate-card-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(253,216,53,0.35); }

.donate-card-btn.is-disabled {
    background: rgba(255,255,255,0.06);
    color: rgba(240,240,240,0.45);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 480px) {
    .donate-modal { padding: 24px 18px 20px; }
    .donate-rip-row { flex-direction: column; align-items: flex-start; }
    .donate-copy-btn { width: 100%; justify-content: center; }
}

/* RTL — Arabic text alignment inside the donate modal, same convention
   as the rest of the site's scoped RTL rules. */
html.lang-ar .donate-title,
html.lang-ar .donate-intro-text,
html.lang-ar .donate-field-label,
html.lang-ar .donate-field-value,
html.lang-ar .donate-card-title {
    direction: rtl;
    text-align: right;
}
html.lang-ar .donate-close-btn { left: 14px; right: auto; }
html.lang-ar .donate-title { padding-right: 0; padding-left: 30px; }