/* ============================================================================
   Wovelr — feuille de style commune aux pages légales
   ----------------------------------------------------------------------------
   Reprend les jetons de design (couleurs, rayons, typographie) de
   src/nova/web/static/landing.css afin que les pages légales restent
   visuellement cohérentes avec la landing, SANS dépendre d'elle :
   ce fichier est autonome et les 5 pages légales ne chargent que lui.

   Volontairement sobre : le texte juridique doit rester lisible, donc
   pas d'animation, pas de fond animé, une colonne de lecture étroite.
   ========================================================================== */

:root {
  /* ── Palette « Cobalt & Crimson » (identique à landing.css) ── */
  --c-navy:     #0A1530;   /* fond profond */
  --c-navy-2:   #0E1B3D;   /* surface surélevée (cartes, encadrés) */
  --c-cobalt:   #2F6BFF;   /* bleu primaire */
  --c-azure:    #38BDF8;   /* accent clair / liens survolés */
  --c-violet:   #7C3AED;   /* point médian du dégradé de marque */
  --c-crimson:  #E5143C;   /* rouge signal (avertissements) */
  --c-paper:    #F7F9FC;   /* texte clair */
  --c-mist:     #AEB9D6;   /* texte secondaire sur fond sombre */
  --c-line:     rgba(255, 255, 255, .10);
  --c-line-2:   rgba(255, 255, 255, .06);
  --c-card:     rgba(255, 255, 255, .035);

  --grad-brand: linear-gradient(90deg, #2F6BFF 0%, #7C3AED 48%, #E5143C 100%);

  --r-sm: 10px;
  --r-md: 16px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* Largeur de la colonne de lecture : ~75 caractères, confort de lecture */
  --maxw-legal: 820px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--c-navy);
  color: var(--c-paper);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ── Barre de navigation ───────────────────────────────────────── */
.lg-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 28px;
  background: rgba(10, 21, 48, .88);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--c-line-2);
}
.lg-nav .lg-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.lg-nav .lg-logo img { display: block; height: 36px; width: auto; }
.lg-nav .lg-home {
  margin-left: auto;
  color: var(--c-mist); text-decoration: none;
  font-size: 14px; font-weight: 700;
  border: 1px solid var(--c-line); border-radius: 999px;
  padding: 8px 16px;
  transition: color .15s, background .15s, border-color .15s;
}
.lg-nav .lg-home:hover {
  color: var(--c-paper);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .25);
}

/* ── Navigation entre les 5 pages légales ──────────────────────── */
.lg-pages {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: var(--maxw-legal); margin: 28px auto 0; padding: 0 28px;
}
.lg-pages a {
  color: var(--c-mist); text-decoration: none;
  font-size: 13.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-card);
  transition: color .15s, background .15s, border-color .15s;
}
.lg-pages a:hover { color: var(--c-paper); background: rgba(255, 255, 255, .08); }
/* Page courante : non cliquable, mise en évidence par le dégradé de marque */
.lg-pages a[aria-current="page"] {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  cursor: default;
}

/* ── Corps du document ─────────────────────────────────────────── */
.lg-doc {
  max-width: var(--maxw-legal);
  margin: 0 auto;
  padding: 32px 28px 96px;
}

.lg-doc h1 {
  font-size: 34px; line-height: 1.25; font-weight: 800;
  margin: 12px 0 6px;
}
/* Date de dernière mise à jour, sous le titre */
.lg-updated {
  color: var(--c-mist); font-size: 13.5px; font-weight: 600;
  margin: 0 0 28px;
}
.lg-doc h2 {
  font-size: 21px; font-weight: 700; line-height: 1.35;
  margin: 40px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line-2);
}
.lg-doc h3 {
  font-size: 16.5px; font-weight: 700;
  margin: 24px 0 6px;
  color: var(--c-azure);
}
.lg-doc p { margin: 0 0 14px; }
.lg-doc ul, .lg-doc ol { margin: 0 0 16px; padding-left: 22px; }
.lg-doc li { margin-bottom: 7px; }
.lg-doc strong { color: #fff; font-weight: 700; }

.lg-doc a {
  color: var(--c-azure);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lg-doc a:hover { color: var(--c-paper); }

/* ── Encadré neutre (coordonnées, définitions) ─────────────────── */
.lg-box {
  background: var(--c-navy-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin: 0 0 22px;
}
.lg-box p:last-child, .lg-box ul:last-child { margin-bottom: 0; }

/* ── Encadré d'avertissement (état réel du produit) ────────────── */
/* Sert la doctrine d'honnêteté : ce qui n'existe pas encore est dit
   explicitement, en évidence, plutôt que noyé dans le texte. */
.lg-warn {
  background: rgba(229, 20, 60, .09);
  border: 1px solid rgba(229, 20, 60, .40);
  border-left: 4px solid var(--c-crimson);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  margin: 0 0 24px;
}
.lg-warn p:last-child { margin-bottom: 0; }
.lg-warn strong { color: #FFD9E0; }

/* ── Tableau (durées de conservation, catégories de données) ───── */
/* Enveloppé dans .lg-table-wrap pour défiler horizontalement sur mobile
   sans faire déborder la page entière. */
.lg-table-wrap { overflow-x: auto; margin: 0 0 22px; }
.lg-doc table {
  width: 100%; border-collapse: collapse;
  font-size: 14.5px; min-width: 520px;
}
.lg-doc th, .lg-doc td {
  text-align: left; vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-line-2);
}
.lg-doc th {
  color: #fff; font-weight: 700;
  background: rgba(255, 255, 255, .04);
  border-bottom-color: var(--c-line);
}

/* ── Définition en ligne (identifiants, chemins, e-mails) ──────── */
.lg-mono { font-family: var(--mono); font-size: .93em; color: var(--c-azure); }

/* ── Pied de page ──────────────────────────────────────────────── */
.lg-foot {
  max-width: var(--maxw-legal);
  margin: 0 auto;
  padding: 24px 28px 56px;
  border-top: 1px solid var(--c-line-2);
  color: var(--c-mist);
  font-size: 13px;
}
.lg-foot a { color: var(--c-mist); }

/* ── Adaptation mobile ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .lg-nav { padding: 12px 18px; }
  .lg-pages, .lg-doc, .lg-foot { padding-left: 18px; padding-right: 18px; }
  .lg-doc h1 { font-size: 27px; }
  .lg-doc h2 { font-size: 19px; }
}

/* ── Impression : le texte juridique doit rester imprimable ────── */
@media print {
  body { background: #fff; color: #000; }
  .lg-nav, .lg-pages { display: none; }
  .lg-doc a { color: #000; }
  .lg-box, .lg-warn { border: 1px solid #999; background: #fff; }
  .lg-doc h3 { color: #000; }
  .lg-mono { color: #000; }
}