/* Shared style of the Bonaparks iOS app pages (/confidentialite, /support, /en/privacy, /en/support).
   Same tokens and fonts as the React site: colors come from /brand/tokens.css. */
@import url("/brand/tokens.css");
:root { --ink:rgb(var(--c-bg)); --surface:rgb(var(--c-surface)); --line:rgb(var(--c-navy) / var(--line-alpha)); --bone:rgb(var(--c-text)); --muted:rgb(var(--c-muted)); --accent:rgb(var(--c-accent)); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--ink); color:var(--bone); font:17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing:antialiased; }
header, main, footer { max-width: 760px; margin: 0 auto; padding: 0 20px; }
header { display:flex; justify-content:space-between; align-items:center; padding-top:24px; padding-bottom:24px; border-bottom:1px solid var(--line); max-width:none; }
.brand { display:inline-flex; align-items:center; gap:12px; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; font-size:21px; font-weight:600; letter-spacing:-0.015em; color:var(--bone); text-decoration:none; }
.brand img { width:36px; height:36px; border-radius:22.5%; box-shadow:0 0 0 1px var(--line); }
.brand:hover { color:var(--accent); }
nav a { color:var(--muted); text-decoration:none; font-size:13px; font-weight:500; margin-left:18px; }
nav a:hover, nav a[aria-current] { color:var(--accent); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
main { padding-top:48px; padding-bottom:64px; }
.eyebrow { color:var(--accent); font-size:14px; font-weight:600; margin:0 0 12px; }
h1 { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; font-weight:600; letter-spacing:-0.025em; font-size:44px; line-height:1.08; margin:0 0 12px; }
h2 { font-size:21px; font-weight:600; letter-spacing:-0.012em; margin:40px 0 10px; }
p, li { color:var(--bone); }
.meta { color:var(--muted); font-size:14px; }
.summary { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin:28px 0; }
.summary li { margin:4px 0; }
a { color:var(--accent); text-underline-offset:3px; }
a:hover { color:var(--bone); }
code { font-size:14px; color:var(--bone); }
footer { border-top:1px solid var(--line); padding-top:20px; padding-bottom:32px; color:var(--muted); font-size:13px; max-width:none; text-align:center; }
.lang { color:var(--line); font-size:12px; margin-left:18px; white-space:nowrap; }
.lang a { margin-left:0; color:var(--muted); }
.lang a:hover { color:var(--bone); }
.lang a[aria-current] { color:var(--accent); }
@media (max-width: 520px) { h1 { font-size:34px; } nav a { margin-left:12px; } .lang { margin-left:12px; } .lang a { margin-left:0; } }
/* Light | Dark | Auto segmented control, filled by /brand/theme.js (same look as the React footer). */
.theme-switch { display:inline-flex; gap:2px; padding:2px; margin-top:14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.theme-switch button { font:inherit; font-size:12px; font-weight:600; line-height:1; padding:7px 13px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; transition:background-color .2s, color .2s; }
.theme-switch button:hover { color:var(--bone); }
.theme-switch button[aria-checked="true"] { background:var(--accent); color:rgb(var(--c-on-accent)); }
.theme-switch button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
footer [data-theme-switch]:empty { display:inline-block; height:32px; margin-top:14px; }