/* ============================================================================
   OSINTMapper - page de présentation
   Palette reprise du thème sombre de l'application (client/src/lib/theme.jsx)
   pour que le site et l'outil ne semblent pas venir de deux projets.
   Aucune dépendance externe : le projet s'interdit les CDN, la vitrine aussi.
   ========================================================================== */

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2333;
  --border: #2a3140;
  --border-hi: #3d4868;
  --text: #e2e4ed;
  --text-2: #8b8fa8;
  --text-3: #626a80;
  --accent: #58a6ff;
  --accent-hi: #79b8ff;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  --max: 1120px;
  --r: 14px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Trame discrète : le canevas de l'application a la même, en plus dense. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, #1a2030 1px, transparent 0);
  background-size: 32px 32px;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

/* ── Bandeau de version ──────────────────────────────────────────────────── */
/* Posé AVANT l'en-tête, qui est collant : il défile hors de l'écran au premier
   défilement et rend sa place à la navigation, au lieu de manger 40 px de haut
   sur toute la page. */
.alpha {
  background: rgba(245, 158, 11, .09);
  border-bottom: 1px solid rgba(245, 158, 11, .28);
  color: var(--text-2);
  font-size: 13px;
}
.alpha-in {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding-top: 9px; padding-bottom: 9px;
  text-align: center; flex-wrap: wrap;
}
.alpha-tag {
  flex-shrink: 0;
  padding: 3px 8px; border-radius: 5px;
  background: rgba(245, 158, 11, .16); border: 1px solid rgba(245, 158, 11, .42);
  font: 700 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--warning);
}

/* ── Barre de navigation ─────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 17, 23, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.brand .dot { width: 9px; height: 9px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
/* Le mot est UN seul enfant flex : sinon le `gap` du conteneur
   s'insérait entre « OSINT » et « Mapper ». */
.brand .word { font-style: normal; }
.brand em { font-style: normal; color: var(--accent); }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.nav-links a:hover { color: var(--text); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 9px;
  font-size: 13.5px; font-weight: 650; cursor: pointer;
  border: 1px solid var(--border-hi); background: var(--surface-2); color: var(--text);
  transition: border-color .15s, background .15s, transform .15s;
}
.btn:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #06101f; }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #06101f; }
.btn-lg { padding: 13px 24px; font-size: 14.5px; }
/* Logo dans un bouton : il prend la couleur du texte (fill="currentColor"),
   donc un seul tracé sert au bouton clair comme au bouton sombre. */
.btn .ico { width: 17px; height: 17px; flex-shrink: 0; }
/* Numéro de version. À tenir aligné sur les package.json. */
.btn .ver {
  padding: 2px 7px; border-radius: 100px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--border-hi);
  font: 600 11.5px/1.5 var(--mono); color: var(--text-2);
}

/* ── Sélecteur de langue ─────────────────────────────────────────────────── */
.lang { display: flex; align-items: center; gap: 2px; }
/* L'état actif se marque par un SOULIGNEMENT, pas par un liseré : le blanc du
   drapeau français dessine déjà un halo, un cadre s'y confondait. La pile de
   polices est explicite pour que le système aille chercher ses drapeaux plutôt
   que de retomber sur une police sans glyphe d'indicateur régional. */
.flag {
  display: inline-flex; align-items: center; padding: 5px 7px 7px;
  border: 0; border-radius: 8px 8px 0 0;
  background: none; cursor: pointer;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  font-size: 19px; line-height: 1;
  opacity: .45; transition: opacity .15s, box-shadow .15s, background .15s;
  box-shadow: inset 0 -2px 0 transparent;
}
.flag:hover { opacity: 1; box-shadow: inset 0 -2px 0 var(--border-hi); }
.flag.is-active { opacity: 1; box-shadow: inset 0 -2px 0 var(--accent); background: rgba(88, 166, 255, .10); }
.flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 96px 0 72px; text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 100px; margin-bottom: 26px;
  background: rgba(88, 166, 255, .08); border: 1px solid rgba(88, 166, 255, .25);
  font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .01em;
}
.hero h1 {
  font-size: clamp(38px, 6.2vw, 66px); line-height: 1.06;
  font-weight: 850; letter-spacing: -.03em; margin-bottom: 22px;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.lede { font-size: clamp(16px, 2vw, 19px); color: var(--text-2); max-width: 660px; margin: 0 auto 34px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Emplacements d'image ────────────────────────────────────────────────── */
/* `figure.shot` accepte directement un <img>. Tant qu'aucune image n'est
   fournie, le cadre reste visible et annonce ce qu'il attend : la page ne
   paraît jamais cassée pendant qu'on prépare les captures. */
.shot {
  position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.shot img { display: block; width: 100%; height: auto; }
.shot-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.shot-bar i { width: 10px; height: 10px; border-radius: 5px; background: var(--border-hi); }
.shot-bar b { margin-left: 8px; font: 500 11.5px/1 var(--mono); color: var(--text-3); }
.hero .shot { margin-top: 56px; }

/* ── Sections ────────────────────────────────────────────────────────────── */
section { padding: 84px 0; }
.sec-head { max-width: 680px; margin-bottom: 44px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  font: 700 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
/* Une étiquette d'état (BÊTA) se pose à côté de l'eyebrow, jamais dedans :
   l'eyebrow porte data-i18n, et la traduction en remplace tout le contenu. */
.eyebrow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.eyebrow-row .eyebrow { margin-bottom: 0; }
/* Variante centrée : dans un `.sec-head.center`, la rangée reste une boîte
   flex et ne suit pas le `text-align` du parent. */
.eyebrow-row.center { justify-content: center; }
h2 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
.sec-head p { margin-top: 14px; color: var(--text-2); font-size: 16px; }

.grid { display: grid; gap: 18px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }

.card {
  padding: 26px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color .18s, transform .18s;
}
.card:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.card h3 { font-size: 16px; font-weight: 700; margin-bottom: 9px; letter-spacing: -.01em; }
.card p { font-size: 14.2px; color: var(--text-2); }
.card .k {
  display: inline-grid; place-content: center; width: 34px; height: 34px; margin-bottom: 16px;
  border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border);
  font: 700 13px/1 var(--mono); color: var(--accent);
}

/* Bande d'accent, pour les sections qu'on veut détacher du flux */
.band { background: var(--surface); border-block: 1px solid var(--border); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split ul { list-style: none; margin-top: 22px; display: grid; gap: 13px; }
.split li { display: flex; gap: 12px; font-size: 14.6px; color: var(--text-2); }
.split li b { color: var(--text); font-weight: 650; }
.tick { flex-shrink: 0; width: 19px; height: 19px; margin-top: 2px; border-radius: 10px;
  background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .35);
  display: grid; place-content: center; font-size: 10px; color: var(--success); }

/* Une ligne trop longue fait défiler le bloc. Sans ces deux propriétés, la
   barre de défilement est peinte en clair par le système et tranche sur le
   fond sombre de la carte. */

/* ── Statistiques ────────────────────────────────────────────────────────── */

/* ── Appel final ─────────────────────────────────────────────────────────── */
.cta { text-align: center; padding: 96px 0; }
.cta h2 { margin-bottom: 16px; }
.cta p { color: var(--text-2); max-width: 560px; margin: 0 auto 30px; font-size: 16px; }

footer { border-top: 1px solid var(--border); padding: 34px 0; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot p { font-size: 13px; color: var(--text-3); }
.foot nav { display: flex; gap: 20px; }
.foot nav a { font-size: 13px; color: var(--text-2); }

/* ── Adaptatif ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .g3, .g2, .split { grid-template-columns: 1fr; }
  .split { gap: 34px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  section { padding: 62px 0; }
  .hero { padding: 64px 0 48px; }
}

.bug-actions { margin-top: 34px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card:hover, .btn:hover { transform: none; }
}