/* ============================================================
   app-header.css — Unified app header for valerie-otero.github.io
   Used by all app pages. Each app provides its theme via the
   CSS variables below (override them in the app's <style> block).
   ============================================================ */

:root {
  /* Defaults — apps should override these in their own <style> */
  --app-primary:        #007aff;
  --app-primary-dark:   #0064d2;
  --app-accent:         #5ac8fa;
  --app-bg-nav:         rgba(255, 255, 255, 0.78);
  --app-bg-nav-solid:   #ffffff;
  --app-text-nav:       #111418;
  --app-text-muted:     #5b6470;
  --app-border:         rgba(0, 0, 0, 0.08);
  --app-shadow:         0 4px 24px rgba(0, 0, 0, 0.06);
  --app-radius:         12px;
}

/* Dark variant — apps with dark theme set [data-theme="dark"] on <html> or .app-nav */
.app-nav[data-theme="dark"],
html[data-theme="dark"] .app-nav {
  --app-bg-nav:        rgba(14, 16, 24, 0.78);
  --app-bg-nav-solid:  #0e1018;
  --app-text-nav:      #f3f4f6;
  --app-text-muted:    #9ca3af;
  --app-border:        rgba(255, 255, 255, 0.10);
  --app-shadow:        0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Make room under the fixed bar */
body.has-app-nav { padding-top: 68px; }

/* Generic .hidden helper used by app-header.js to toggle FR/EN content blocks
   (.lang-content.fr / .lang-content.en, #content-fr / #content-en). */
.hidden { display: none !important; }

/* Active state for inline language toggles outside of .app-nav (e.g. nav.lang on doc pages). */
nav.lang [data-lang-btn] { cursor: pointer; }
nav.lang [data-lang-btn].is-active { font-weight: 700; text-decoration: underline; }

/* ============================================================
   Bar
   ============================================================ */
.app-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 60px;
  background: var(--app-bg-nav);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text-nav);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1;
}

.app-nav-inner {
  max-width: 1180px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ============================================================
   Brand (logo + name + version)
   ============================================================ */
.app-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  flex: 0 0 auto;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.app-nav-brand img,
.app-nav-brand svg {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.app-nav-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.app-nav-version {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--app-text-muted);
  padding: 2px 6px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  text-transform: uppercase;
}

/* ============================================================
   Section links
   ============================================================ */
.app-nav-links {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: center;
}
.app-nav-links a {
  color: var(--app-text-muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 500;
  transition: color .15s ease, background .15s ease;
  white-space: nowrap;
}
.app-nav-links a:hover {
  color: var(--app-primary);
  background: color-mix(in srgb, var(--app-primary) 8%, transparent);
}

/* ============================================================
   Actions (right side: home, lang, CTA)
   ============================================================ */
.app-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.app-nav-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--app-text-muted);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  font-weight: 600;
  transition: all .15s ease;
  white-space: nowrap;
}
.app-nav-home:hover {
  color: var(--app-primary);
  border-color: var(--app-primary);
  background: color-mix(in srgb, var(--app-primary) 8%, transparent);
}

/* Lang switch */
.app-nav-lang {
  display: inline-flex;
  background: var(--app-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.app-nav-lang button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--app-text-muted);
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.app-nav-lang button:hover { color: var(--app-text-nav); }
.app-nav-lang button.is-active {
  background: var(--app-bg-nav-solid);
  color: var(--app-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* App Store CTA */
.app-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--app-primary);
  color: #fff !important;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--app-primary) 35%, transparent);
}
.app-nav-cta:hover {
  background: var(--app-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--app-primary) 45%, transparent);
}

/* ============================================================
   Language visibility — header items use [data-lang="fr|en"]
   ============================================================ */
html[lang="fr"] .app-nav [data-lang="en"],
html[lang="en"] .app-nav [data-lang="fr"] { display: none !important; }

/* Lang buttons are NOT toggled (both must always show) */
html[lang] .app-nav .app-nav-lang [data-lang-btn] { display: inline-flex !important; }

/* ============================================================
   Mobile menu (hamburger)
   ============================================================ */
.app-nav-burger {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--app-text-nav);
  font-size: 22px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
}
.app-nav-burger:hover { background: var(--app-border); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .app-nav-version { display: none; }
  .app-nav-links a { padding: 8px 9px; font-size: 13px; }
}
@media (max-width: 820px) {
  .app-nav-links { display: none; }
  .app-nav-burger { display: inline-flex; }
  .app-nav.is-open .app-nav-links {
    display: flex;
    position: absolute;
    top: 60px; left: 0; right: 0;
    background: var(--app-bg-nav-solid);
    border-bottom: 1px solid var(--app-border);
    box-shadow: var(--app-shadow);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px;
    gap: 2px;
  }
  .app-nav.is-open .app-nav-links a {
    padding: 12px 14px;
    border-radius: 10px;
  }
}
@media (max-width: 640px) {
  .app-nav-inner { padding: 0 14px; gap: 10px; }
  .app-nav-home span.label { display: none; }
  .app-nav-cta span.label { display: none; }
  .app-nav-name { display: none; }
}
@media (max-width: 480px) {
  .app-nav { height: 56px; }
  body.has-app-nav { padding-top: 64px; }
  .app-nav.is-open .app-nav-links { top: 56px; }
  .app-nav-lang button { padding: 5px 8px; font-size: 11px; }
}
