/* Les pages web de Memoly (confidentialité, aide, suppression du compte).
   Mise en page : une colonne de lecture sur le ciel de nuit de l'appli, titres en Bricolage Grotesque,
   texte en Figtree, l'or de la plume pour les liens et les repères. Un seul thème, celui de l'appli (nuit). */
:root {
  --bg: #090d14;
  --surface: #121822;
  --line: #1e2632;
  --ink: #eef1f6;
  --muted: #97a3b5;
  --gold: #f2a65a;
  --gold-light: #ffcf8f;
  --todo-bg: #3a2a12;
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: radial-gradient(120% 60% at 50% 0%, #121b2b 0%, var(--bg) 60%) no-repeat, var(--bg);
  color: var(--ink);
  font: 16px/1.65 var(--body);
  padding-inline: 20px;
  padding-block: 32px 64px;
}
main { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
header.top { display: flex; align-items: center; gap: 12px; }
header.top img { width: 40px; height: 40px; border-radius: 11px; }
header.top a { color: var(--ink); text-decoration: none; font: 600 20px/1 var(--display); }
h1 { font: 700 clamp(30px, 7vw, 40px)/1.1 var(--display); margin: 0; text-wrap: balance; }
h2 { font: 600 21px/1.25 var(--display); margin: 0 0 8px; text-wrap: balance; }
.date { color: var(--muted); font-size: 14px; margin-top: 8px; }
section { display: flex; flex-direction: column; gap: 10px; }
p, ul, ol { margin: 0; }
ul, ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
a { color: var(--gold-light); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
strong { color: var(--ink); }
.lead { font-size: 18px; color: var(--ink); }
.muted { color: var(--muted); }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.summary li::marker { color: var(--gold); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
th { font: 600 13px/1.3 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
tr:last-child td { border-bottom: 0; }
.todo { background: var(--todo-bg); color: var(--gold-light); border-radius: 6px; padding: 0 6px; }
.path { font-weight: 600; color: var(--gold-light); }
details { border-bottom: 1px solid var(--line); padding-block: 12px; }
details summary { cursor: pointer; font: 600 17px/1.35 var(--display); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details summary::after { content: '+'; color: var(--gold); font-size: 22px; line-height: 1; }
details[open] summary::after { content: '–'; }
details > div { padding-top: 8px; color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
footer { color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer a { color: var(--muted); }
.steps { counter-reset: s; list-style: none; padding: 0; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.steps li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 1px solid var(--gold); color: var(--gold-light); display: grid; place-items: center; font: 600 14px/1 var(--display); }
@media (prefers-reduced-motion: no-preference) { a { transition: color .15s; } }