/*
  Habillage des pages de contenu de flexoo.fr — la Politique de Confidentialité et la demande de
  suppression de compte. Les mêmes jetons que `index.html`, qui garde son style en ligne : cette
  page-là est le paillasson du lien de profil, elle doit s'afficher en une seule requête.

  Les deux pages servies ici sont lues sur un téléphone, souvent depuis la fiche d'un magasin
  d'applications : une colonne, du texte, rien à faire défiler latéralement.
*/

:root {
  color-scheme: light;
  --ink: #1b1b1f;
  --muted: #5a5a66;
  --surface: #ffffff;
  --surface-dim: #f4f3f7;
  --line: #e3e1ea;
  --brand: #6b4ef5;
  --radius: 21px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px 56px;
  background: var(--surface-dim);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

header.site,
footer.site { max-width: 44rem; margin: 0 auto; }
header.site { margin-bottom: 16px; }
header.site a {
  color: var(--brand);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 32px 28px;
  background: var(--surface);
  border-radius: var(--radius);
}

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 16px; }
h2 { font-size: 1.15rem; margin: 32px 0 8px; }
h3 { font-size: 1rem; margin: 24px 0 6px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 6px; }
a { color: var(--brand); }
strong { font-weight: 600; }

code {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--surface-dim);
  font-size: 0.9em;
}

blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--brand);
  border-radius: 0 13px 13px 0;
  background: var(--surface-dim);
  color: var(--muted);
}

/* Un tableau large défile dans son cadre : la page, elle, ne défile jamais de côté. */
.scroll { overflow-x: auto; margin: 0 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--surface-dim); font-weight: 600; }

.lede { color: var(--muted); }

.action {
  display: inline-block;
  margin: 4px 0 20px;
  padding: 14px 20px;
  border-radius: 13px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

footer.site {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.85rem;
}
footer.site a { color: var(--muted); }