/* ============================================================
   SHARED STYLES — Move to France
   Used across index.html, guide.html, unlock.html
   ============================================================ */

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #f5f5f5;
  color: #030213;
  overflow-x: hidden;
  line-height: 1.5;
  font-size: 16px;
  min-height: 100vh;
}
::selection { background: #2563eb; color: #fff; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* DESIGN TOKENS */
:root {
  --primary: #030213;
  --primary-dark: #000;
  --primary-light: #E3F2FD;
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;

  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-light: #eff6ff;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  --secondary: #C75B00;
  --success: #16a34a;
  --warning: #C75B00;
  --error: #dc2626;

  --on-primary: #fff;
  --surface: #ffffff;
  --background: #f5f5f5;
  --on-surface: #030213;
  --on-surface-medium: #4b5563;
  --on-surface-light: #6b7280;

  --outline: rgba(0,0,0,0.1);
  --outline-solid: #e5e7eb;
  --outline-light: #f3f4f6;

  --muted: #ececf0;
  --muted-fg: #6b7280;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-2: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-3: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);

  --radius: 0.625rem;
  --radius-sm: calc(0.625rem - 4px);
  --radius-md: calc(0.625rem - 2px);
  --radius-lg: 0.625rem;
}

/* APP BAR */
.appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--outline-solid);
  padding: 0 24px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
}
.appbar-logo {
  font-size: 1rem; font-weight: 700; color: var(--on-surface);
  text-decoration: none; display: flex; align-items: center; gap: 10px;
}
.appbar-logo .logo-icon {
  width: 32px; height: 32px; border-radius: var(--radius-md); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.appbar-logo .logo-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.appbar-logo .logo-text { display: flex; align-items: baseline; gap: 4px; }
.appbar-logo .logo-text span { color: var(--blue-600); }
.appbar-actions { display: flex; align-items: center; gap: 4px; }
.appbar-link {
  font-size: 0.8125rem; font-weight: 500; color: var(--on-surface-medium);
  text-decoration: none; padding: 6px 14px; border-radius: var(--radius-md);
  transition: all 0.15s;
}
.appbar-link:hover { background: var(--outline-light); color: var(--on-surface); }

/* APPBAR BUTTONS */
.appbar-btn-primary {
  font-size: 0.75rem; font-weight: 600; font-family: inherit;
  color: #fff; background: var(--blue-600);
  padding: 7px 14px; border-radius: 6px; border: none;
  text-decoration: none; cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.appbar-btn-primary:hover { background: var(--blue-700); }
.appbar-btn-ghost {
  font-size: 0.75rem; font-weight: 500; font-family: inherit;
  color: var(--on-surface-medium); background: transparent;
  padding: 7px 14px; border-radius: 6px;
  border: 1px solid var(--outline-solid);
  text-decoration: none; cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.appbar-btn-ghost:hover { border-color: #6b7280; color: var(--on-surface); }

/* NAV PROFILE (signed-in user) */
.nav-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 4px 12px 4px 4px;
  border-radius: 100px;
  transition: background 0.15s;
  color: var(--on-surface);
  font-size: 0.8125rem;
  font-weight: 500;
}
.nav-profile:hover { background: var(--outline-light); }
.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.nav-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* NAV (unlock page) */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--outline-solid);
  padding: 0 24px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-size: 1rem; font-weight: 700; color: var(--on-surface);
  text-decoration: none; display: flex; align-items: center; gap: 10px;
}
.nav-logo .logo-icon {
  width: 32px; height: 32px; border-radius: var(--radius-md); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.nav-logo .logo-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-logo .logo-text { display: flex; align-items: baseline; gap: 4px; }
.nav-logo .logo-text span { color: var(--blue-600); }
.nav-right { display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-size: 0.8125rem; font-weight: 500; color: var(--on-surface-medium); text-decoration: none;
  padding: 6px 14px; border-radius: var(--radius-md); transition: all 0.15s;
}
.nav-link:hover { background: var(--outline-light); color: var(--on-surface); }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; font-size: 0.875rem; font-weight: 500; font-family: inherit;
  text-decoration: none; border: none; cursor: pointer;
  border-radius: var(--radius-md); transition: all 0.15s;
  line-height: 1.5; height: 36px;
}
.btn-filled { background: var(--primary); color: var(--on-primary); }
.btn-filled:hover { background: var(--primary); opacity: 0.9; }
.btn-blue { background: var(--blue-600); color: #fff; }
.btn-blue:hover { background: var(--blue-700); }
.btn-outlined { border: 1px solid var(--outline-solid); color: var(--on-surface); background: #fff; }
.btn-outlined:hover { background: var(--outline-light); }
.btn-tonal { background: var(--blue-light); color: var(--blue-700); }
.btn-tonal:hover { background: var(--blue-100); }
.btn-text { background: transparent; color: var(--blue-600); padding: 6px 12px; }
.btn-text:hover { background: var(--blue-50); }
.btn-white { background: #fff; color: var(--blue-600); }
.btn-white:hover { background: #f9fafb; }
.btn-ghost { background: transparent; color: rgba(255,255,255,0.6); }
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.08); }
.btn-premium { background: #FFCC00; color: #003399; font-weight: 700; }
.btn-premium:hover { background: #F0C000; }
.btn-lg { height: 40px; padding: 10px 24px; font-size: 0.9375rem; }
.btn-sm { height: 32px; padding: 6px 12px; font-size: 0.8125rem; }

/* SECTIONS */
.section { padding: 96px 24px; }
.section-surface { background: var(--surface); }
.section-background { background: var(--background); }
.section-dark { background: #111827; color: #fff; }
.section-center { text-align: center; }
.section-label {
  font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: 600; color: var(--blue-600); margin-bottom: 12px;
}
.section-dark .section-label { color: #93c5fd; }
.section-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 500;
  line-height: 1.3; margin-bottom: 16px; color: var(--on-surface);
}
.section-dark .section-title { color: #fff; }
.section-sub {
  font-size: 1rem; font-weight: 400; color: var(--on-surface-medium); max-width: 540px;
  margin: 0 auto 48px; line-height: 1.6;
}
.section-dark .section-sub { color: rgba(255,255,255,0.6); }

/* FOOTER */
.footer {
  padding: 48px 24px; text-align: center; border-top: 1px solid var(--outline-solid); background: var(--surface);
}
.footer p { font-size: 0.8125rem; color: var(--muted-fg); }
.footer a { color: var(--on-surface-medium); text-decoration: none; }
.footer a:hover { color: var(--on-surface); }

/* ANIMATIONS */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* RESPONSIVE */
@media (max-width: 640px) {
  .appbar { padding: 0 16px; }
  .appbar-link { display: none; }
  .section { padding: 64px 20px; }
}