/* Style de la page de confidentialité (public/privacy.html).
   Fichier externe (et non un <style> inline) : la CSP `style-src 'self'` bloque
   tout CSS inline. Reprend les tokens de design de l'app (src/styles.css) pour
   que la page soit une extension visuelle du produit, pas un document isolé.

   Page volontairement AUTONOME (hors bundle Vite, servie en statique) : les tokens
   ci-dessous sont un MIROIR délibéré de src/styles.css. On ne factorise pas dans un
   fichier partagé pour préserver cette autonomie (aucune dépendance au build, chargement
   robuste, isolation CSP). Ces valeurs de marque changent très rarement ; si tu en
   modifies une dans src/styles.css, reporte-la ici. */
:root {
  color-scheme: dark;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-pill: 999px;
  --surface: rgba(9, 13, 26, 0.82);
  --hairline: rgba(150, 185, 255, 0.14);
  --hairline-strong: rgba(150, 185, 255, 0.24);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --ink: rgba(224, 236, 255, 0.95);
  --ink-dim: rgba(200, 218, 255, 0.62);
  --ink-faint: rgba(200, 218, 255, 0.4);
  --accent: 96, 165, 255;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font:
    16px/1.65 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Arial,
    sans-serif;
  /* Fond spatial : dégradé radial sombre bleuté, comme la scène 3D. */
  background:
    radial-gradient(120% 90% at 50% -10%, #0d1730 0%, #060a16 45%, #02040a 100%)
    fixed;
  padding: 0 1.25rem 4rem;
}
a {
  color: rgb(var(--accent));
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Topbar : branding cliquable · toggle langue · retour. Surface collante
   translucide (verre dépoli) qui reste visible au défilement, comme les docks
   de l'app. */
.page-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  max-width: 780px;
  margin: 0 auto var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  margin-top: var(--sp-4);
  background: linear-gradient(
    to bottom,
    rgba(11, 18, 36, 0.92),
    rgba(9, 13, 26, 0.78)
  );
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.page-header .brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
}
.page-header .brand:hover {
  text-decoration: none;
}
.page-header .brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--hairline-strong);
}
.page-header .app-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
/* `flex-wrap` ET `min-width: 0`, et aucun des deux n'est décoratif.
   Cette boîte porte le sélecteur de langue. Un élément flex a `min-width: auto` par défaut :
   il refuse donc de rétrécir sous la largeur de son contenu, et l'en-tête déborde au lieu de
   passer à la ligne. Mesuré au lot 41 à 390 px, sur `/es/sources/` avec une police large :
   391 px de contenu dans une boîte de 348, soit un débordement HORIZONTAL de toute la page.
   Les quatre langues rendent ce texte plus long que l'anglais, et la CI Linux rend une police
   plus large que Windows : le défaut ne se voyait sur aucune des deux machines à la fois. */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
  flex-wrap: wrap;
  min-width: 0;
}

/* Toggle langue — repris du sélecteur EN|FR de l'app (segments pilule). */
.lang-switch {
  display: flex;
  gap: 0.15rem;
  padding: 0.15rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
}
.lang-btn {
  padding: 0.2rem 0.7rem;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.lang-btn:hover {
  color: var(--ink);
}
.lang-btn.is-active {
  background: rgba(var(--accent), 0.9);
  color: #fff;
}

.page-header .back {
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: rgba(var(--accent), 0.14);
  border: 1px solid rgba(var(--accent), 0.4);
  color: rgb(var(--accent));
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.page-header .back:hover {
  background: rgba(var(--accent), 0.22);
  text-decoration: none;
}

main {
  max-width: 780px;
  margin: 0 auto;
}
h1 {
  font-size: 1.7rem;
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}
h2 {
  font-size: 1.1rem;
  margin: 2.2rem 0 0.6rem;
  color: rgb(var(--accent));
}
.updated {
  color: var(--ink-faint);
  font-size: 0.9rem;
}
/* Surface en verre dépoli, identique aux panneaux de l'app. */
section {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1.25rem 1.5rem;
  margin-top: 1.1rem;
}
section p:first-child {
  margin-top: 0;
}
section p:last-child {
  margin-bottom: 0;
}
/* Paragraphe détaché après une liste (remplace un style="" inline, bloqué par la CSP). */
.note {
  margin-top: var(--sp-3);
}
ul {
  padding-left: 0;
  list-style: none;
  margin: 0.4rem 0 0;
  display: grid;
  gap: 0.4rem;
}
li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink-dim);
}
li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: rgb(var(--accent));
  font-weight: 700;
}
strong {
  color: var(--ink);
}
.tag {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--ink-dim);
  background: rgba(var(--accent), 0.08);
  border: 1px solid rgba(var(--accent), 0.28);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.7rem;
  margin: 0.3rem 0.3rem 0 0;
}
.tags {
  margin-top: var(--sp-3);
}
footer {
  max-width: 780px;
  margin: 3rem auto 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
  color: var(--ink-faint);
  font-size: 0.82rem;
  text-align: center;
}