/* VigieProcure — landing publique www.vigieproc.fr
   Vanilla CSS, aucune dépendance, aucun JS.
   Thème sombre unique : la landing est une page de présentation, pas
   l'application. Le double thème vit dans frontend-v2 via useTheme(). */

:root {
  --vp-bg:        #0d0f14;
  --vp-surface:   #151922;
  /* --vp-border : séparateurs décoratifs (cartes, filets). La carte reste
     identifiable par son fond, la règle 1.4.11 ne s'y applique donc pas.
     --vp-border-strong : bordures qui sont le SEUL repère d'un composant
     (bouton fantôme) — mesuré à 3,50:1 sur --vp-bg, seuil 1.4.11 = 3:1. */
  --vp-border:        #262d3a;
  --vp-border-strong: #5f6a7b;
  --vp-text:      #e4e6eb;
  --vp-muted:     #a3adbb;
  --vp-accent:    #6ee7b7;
  --vp-accent-in: #07130e;

  --vp-body:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --vp-mono:    'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  --vp-wrap:    1120px;
  --vp-narrow:  720px;

  --vp-s1: 0.5rem;
  --vp-s2: 1rem;
  --vp-s3: 1.5rem;
  --vp-s4: 2.5rem;
  --vp-s5: 4rem;
  --vp-s6: 6rem;

  --vp-radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--vp-bg);
  color: var(--vp-text);
  font-family: var(--vp-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--vp-s2); font-weight: 600; }
h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 var(--vp-s2); }

a { color: var(--vp-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--vp-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap { max-width: var(--vp-wrap); margin-inline: auto; padding-inline: var(--vp-s3); }
/* Largeur de lecture limitee (~75 caracteres) SANS recentrage.
   `.narrow` est pose sur le meme element que `.wrap`, qui porte
   `margin-inline: auto` : reduire `max-width` ici recentrait le bloc et
   decalait ces sections de ~150 px vers la droite, alors que le hero, le
   bandeau chiffre et les cartes restaient a gauche — la page affichait deux
   marges gauche differentes. On garde donc le conteneur pleine largeur (meme
   bord gauche que tout le reste) et on contraint la mesure sur les enfants. */
.wrap.narrow { max-width: var(--vp-wrap); }
.wrap.narrow > * { max-width: var(--vp-narrow); }
.muted { color: var(--vp-muted); }

/* Lien d'évitement — visible seulement au clavier */
.skip {
  position: absolute; left: -9999px;
  background: var(--vp-accent); color: var(--vp-accent-in);
  padding: var(--vp-s1) var(--vp-s2); border-radius: var(--vp-radius);
  font-weight: 500; text-decoration: none;
}
.skip:focus { left: var(--vp-s2); top: var(--vp-s2); z-index: 10; }

/* ---------- En-tête ---------- */

.site-header {
  border-bottom: 1px solid var(--vp-border);
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--vp-bg) 88%, transparent);
  backdrop-filter: blur(8px);
}

.header-inner {
  display: flex; flex-wrap: wrap; gap: var(--vp-s2);
  align-items: center; justify-content: space-between;
  padding-block: var(--vp-s2);
}

.wordmark {
  font-family: var(--vp-mono);
  font-weight: 500; letter-spacing: -0.02em;
  font-size: 1.0625rem; color: var(--vp-text);
  margin: 0;
}

.site-header nav { display: flex; align-items: center; gap: var(--vp-s3); flex-wrap: wrap; }
.site-header nav a { color: var(--vp-muted); text-decoration: none; font-size: 0.9375rem; }
.site-header nav a:hover { color: var(--vp-text); }
.site-header nav a.btn-ghost { color: var(--vp-text); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border-radius: var(--vp-radius);
  font-weight: 500; font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn-primary { background: var(--vp-accent); color: var(--vp-accent-in); }
.btn-primary:hover { background: color-mix(in srgb, var(--vp-accent) 85%, white); }
.btn-ghost { border-color: var(--vp-border-strong); color: var(--vp-text); }
.btn-ghost:hover { border-color: var(--vp-muted); }

/* ---------- Hero ---------- */

.hero { padding-block: var(--vp-s5) var(--vp-s4); }
.hero h1 { max-width: 18ch; }
.hero .lede {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--vp-muted);
  max-width: 58ch;
  margin-bottom: var(--vp-s3);
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--vp-s2); }

/* ---------- Bandeau chiffré ---------- */

.proof {
  border-block: 1px solid var(--vp-border);
  background: var(--vp-surface);
  padding-block: var(--vp-s4) var(--vp-s3);
}
.proof-grid {
  display: grid; gap: var(--vp-s3);
  grid-template-columns: 1fr;
}
.stat { display: flex; flex-direction: column; gap: 0.15rem; }
.stat-value {
  font-family: var(--vp-mono);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 500; letter-spacing: -0.03em;
  color: var(--vp-accent);
}
.stat-label { color: var(--vp-muted); font-size: 0.9375rem; }
.proof-note { color: var(--vp-muted); font-size: 0.875rem; margin-top: var(--vp-s3); margin-bottom: 0; }

/* ---------- Sections ---------- */

.section { padding-block: var(--vp-s5); }
.section + .section { padding-top: 0; }

.cards { display: grid; gap: var(--vp-s2); grid-template-columns: 1fr; }
.card {
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  background: var(--vp-surface);
  padding: var(--vp-s3);
}
.card h3 { color: var(--vp-accent); }
.card p { color: var(--vp-muted); margin-bottom: 0; }

ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--vp-s2); }
ul.plain li { color: var(--vp-muted); }
ul.plain strong { color: var(--vp-text); font-weight: 600; }

/* ---------- Pied de page ---------- */

.site-footer {
  border-top: 1px solid var(--vp-border);
  padding-block: var(--vp-s4);
  margin-top: var(--vp-s5);
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: var(--vp-s3);
  justify-content: space-between; align-items: flex-start;
}
.site-footer p { margin-bottom: var(--vp-s1); }
.site-footer nav { display: flex; flex-direction: column; gap: var(--vp-s1); }
.site-footer nav a { color: var(--vp-muted); text-decoration: none; font-size: 0.9375rem; }
.site-footer nav a:hover { color: var(--vp-text); text-decoration: underline; }

/* ---------- Au-delà de 720px ---------- */

@media (min-width: 720px) {
  .proof-grid { grid-template-columns: repeat(4, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); gap: var(--vp-s3); }
  .hero { padding-block: var(--vp-s6) var(--vp-s5); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}