/*
 * PROMPT-2026-04-23-pivot — Design system Labjoo (site officiel)
 * Utilisé en complément de Tailwind CDN sur toutes les pages :
 *   /          Home EN
 *   /fr/       Home FR
 *   /press/    Press kit download (EN + /fr/)
 *   /legal/    Legal (EN)
 *   /cookies/  Cookies (EN)
 *   /contact/  Contact (EN + /fr/)
 *
 * Source : extrait et unifié depuis l'ancien presskit/index.html
 */

/* ========== BASE ========== */
:root {
  --bg: #000000;
  --bg-nav: #07070b;
  --bg-elevated: #0f0f18;
  --bg-card: #14141f;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #fafafa;
  --text-muted: #9b9bb0;
  --purple: #8b5cf6;
  --blue: #3b82f6;
  --green: #10b981;
  --pink: #ec4899;
  --yellow: #f59e0b;
}

* {
  -webkit-font-smoothing: antialiased;
}
html {
  scroll-behavior: smooth;
  background: var(--bg);
}
body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ========== GRADIENTS & UTILITIES ========== */
.gradient-text {
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-border {
  position: relative;
  background: var(--bg-card);
  border-radius: 1rem;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, #8b5cf6, #3b82f6, #10b981);
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ========== CARDS ========== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  transition: all 0.25s ease;
}
.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* ========== BUTTONS ========== */
.btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  color: white;
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.5);
  text-decoration: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px -10px rgba(139, 92, 246, 0.7);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border-strong);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.btn-secondary:hover {
  background: var(--bg-elevated);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ========== NAV ========== */
.nav {
  background-color: #0f0f18;
  background-image: linear-gradient(
    90deg,
    rgba(139, 92, 246, 0.14) 0%,
    rgba(59, 130, 246, 0.1) 50%,
    rgba(16, 185, 129, 0.12) 100%
  );
  border-bottom: 1px solid var(--border);
}

/* ========== LANGUAGE SWITCH (in nav) ========== */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bg-card);
}
.lang-switch a {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.15s ease;
}
.lang-switch a.active {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  color: #fff;
}
.lang-switch a:hover:not(.active) {
  color: var(--text);
  background: var(--bg-elevated);
}
/* EN-only pages: keep the same control width without a FR toggle */
.lang-switch span.active {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  color: #fff;
  cursor: default;
  user-select: none;
}

/* ========== PRESS RIBBON ========== */
.press-ribbon {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.15),
    rgba(236, 72, 153, 0.15)
  );
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ========== PHONE FRAME ========== */
.phone-frame {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* ========== LANG TAB (for in-page media toggle, e.g. FR/EN screenshots) ========== */
.lang-tab {
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
}
.lang-tab.active {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  color: white;
}
.lang-tab:not(.active) {
  color: var(--text-muted);
}
.lang-tab:not(.active):hover {
  color: var(--text);
}

/* ========== FOUNDER STORY ========== */
.founder-card {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.08),
    rgba(59, 130, 246, 0.05)
  );
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 1.25rem;
}

/* ========== MOBILE NAV MENU ========== */
.mobile-nav-toggle {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: var(--text);
  cursor: pointer;
}
.mobile-nav-toggle:hover {
  border-color: var(--border-strong);
}
.mobile-nav-panel {
  display: none;
  background: #0f0f18;
  border-bottom: 1px solid var(--border);
}
.mobile-nav-panel.open {
  display: block;
}
.mobile-nav-panel a {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.mobile-nav-panel a:hover {
  color: var(--text);
  background: var(--bg-card);
}
.mobile-nav-panel a:last-child {
  border-bottom: none;
}

/* ========== COPY BUTTON ========== */
.copy-btn {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.copy-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.copy-btn.copied {
  color: #10b981;
  border-color: #10b981;
}

/* ========== LEGAL CONTENT (generic, for /legal/ /cookies/ /contact/) ========== */
.legal-prose h1 {
  font-weight: 800;
}
.legal-prose h2 {
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.legal-prose h3 {
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  color: var(--text);
}
.legal-prose p,
.legal-prose li {
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 0.5rem;
}
.legal-prose ul {
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
}
.legal-prose a {
  color: #8dd9ff;
  text-decoration: underline;
  text-decoration-color: rgba(141, 217, 255, 0.4);
}
.legal-prose a:hover {
  text-decoration-color: #8dd9ff;
}
.legal-prose strong {
  color: var(--text);
}

/* ========== DETAILS ========== */
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-up {
  animation: fadeUp 0.7s ease-out both;
}

/* ========== PRINT ========== */
@media print {
  body {
    background: white !important;
    color: black !important;
    background-image: none !important;
  }
  .no-print {
    display: none !important;
  }
  .card,
  .gradient-border {
    border: 1px solid #ddd !important;
    background: white !important;
  }
  .gradient-text {
    color: #4c1d95 !important;
    -webkit-text-fill-color: #4c1d95 !important;
  }
  * {
    color: black !important;
  }
}