/* Feuille commune aux pages légales (confidentialité FR/EN).
   Reprend la palette et le registre typographique de l'app : Georgia tient
   le rôle éditorial de Lora, Helvetica celui d'Inter. Les polices de l'app
   ne se chargent pas de façon fiable ici sans build, ces piles système en
   donnent l'équivalent le plus proche. */

:root {
  color-scheme: light;
  --background: #eae6dc;
  --surface: #f0ede6;
  --foreground: #2b2b2b;
  --text-secondary: #8e7e6e;
  --text-muted: #b0a49a;
  --accent: #c4a05a;
  --border: #d8d2c8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.7;
  padding: 40px 24px 80px;
}

main {
  max-width: 680px;
  margin: 0 auto;
}

header {
  text-align: center;
  margin-bottom: 56px;
}

.mark {
  display: block;
  margin: 0 auto 40px;
  max-width: 200px;
  height: auto;
}

h1 {
  font-size: 32px;
  line-height: 1.3;
  font-weight: normal;
  margin: 0 0 12px;
}

.updated {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.lang-switch {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  margin-top: 20px;
}

.lang-switch a {
  color: var(--accent);
  text-decoration: none;
}

.summary {
  background: var(--surface);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 48px;
}

.summary h2 {
  margin-top: 0;
}

h2 {
  font-size: 22px;
  font-weight: normal;
  line-height: 1.4;
  margin: 48px 0 16px;
}

h3 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin: 32px 0 12px;
}

p,
li {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: var(--foreground);
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
}

a {
  color: var(--accent);
}

strong {
  font-weight: 600;
}

/* Les tableaux doivent défiler dans leur propre conteneur : sur mobile,
   la page elle-même ne doit jamais partir en scroll horizontal. */
.table-wrap {
  overflow-x: auto;
  margin: 20px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  min-width: 520px;
}

th,
td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.callout {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
}

.todo {
  background: #fdf6e3;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0;
}

.todo p {
  margin: 0;
  font-size: 14px;
  color: #8a6d3b;
}

footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: var(--text-muted);
}