:root {
  --page:#f6f6f3; --surface:#ffffff; --surface-2:#ededeb;
  --ink:#101114; --ink-2:#55565d; --ink-3:#8a8b91;
  --line:rgba(16,17,20,.10); --line-strong:rgba(16,17,20,.17);
  --blue:#0878f9; --green:#26a760; --voice:#ff655c;
  --shadow-soft:0 15px 45px rgba(16,17,24,.08);
  --max:820px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --page:#08090b; --surface:#121318; --surface-2:#1a1c22;
  --ink:#f5f5f7; --ink-2:#b2b3ba; --ink-3:#73747d;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.15);
  --blue:#2997ff; --green:#35c46d; --voice:#ff7169;
  --shadow-soft:0 18px 50px rgba(0,0,0,.26);
  color-scheme:dark;
}
* { box-sizing:border-box; margin:0; padding:0 }
body { min-width:320px; background:var(--page); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.62; font-size:17px }
a { color:var(--blue); text-decoration:none }
a:hover { text-decoration:underline }
.shell { width:min(calc(100% - 40px),var(--max)); margin-inline:auto }
.skip { position:fixed; z-index:500; top:-70px; left:16px; padding:10px 14px; border-radius:10px; background:var(--ink); color:var(--page) }
.skip:focus { top:16px }
.nav { position:sticky; top:0; z-index:100; background:color-mix(in srgb,var(--page) 88%,transparent);
  backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--line) }
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:16px; height:56px }
.brand { display:flex; align-items:center; gap:9px; font-weight:640; color:var(--ink); font-size:16px }
.brand:hover { text-decoration:none }
.mark { display:flex; align-items:center; justify-content:center; gap:2px; width:30px; height:30px;
  border-radius:9px; background:linear-gradient(150deg,#292a30,#08090b) }
.mark i { width:2px; border-radius:2px; background:#f4f4f6 }
.mark i:nth-child(1),.mark i:nth-child(5) { height:7px }
.mark i:nth-child(2),.mark i:nth-child(4) { height:12px }
.mark i:nth-child(3) { height:16px }
.nav-links { display:flex; align-items:center; gap:18px; font-size:14px }
.nav-links a { color:var(--ink-2) }
.button { display:inline-block; padding:11px 20px; border-radius:999px; font-size:15px; font-weight:560;
  background:var(--ink); color:var(--page); border:1px solid transparent }
.button:hover { text-decoration:none; opacity:.9 }
.button-quiet { background:transparent; color:var(--ink); border-color:var(--line-strong) }
main { padding:52px 0 20px }
.eyebrow { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600 }
h1 { font-size:clamp(31px,5.2vw,46px); line-height:1.1; letter-spacing:-.02em; margin:14px 0 18px; font-weight:660 }
h2 { font-size:clamp(23px,3.2vw,29px); line-height:1.22; letter-spacing:-.015em; margin:46px 0 14px; font-weight:640 }
h3 { font-size:19px; margin:28px 0 8px; font-weight:620 }
p { margin:0 0 16px; color:var(--ink-2) }
.lede { font-size:20px; line-height:1.55; color:var(--ink-2); margin-bottom:26px }
strong { color:var(--ink); font-weight:600 }
ul,ol { margin:0 0 18px 22px; color:var(--ink-2) }
li { margin-bottom:8px }
.table-wrap { overflow-x:auto; margin:22px 0 26px; border:1px solid var(--line); border-radius:14px; background:var(--surface) }
table { border-collapse:collapse; width:100%; min-width:520px; font-size:15px }
th,td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top }
thead th { color:var(--ink); font-weight:620; background:var(--surface-2); white-space:nowrap }
tbody tr:last-child td { border-bottom:0 }
td strong { color:var(--ink) }
.yes { color:var(--green); font-weight:600 }
.no { color:var(--voice); font-weight:600 }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin:26px 0; box-shadow:var(--shadow-soft) }
.card p:last-child { margin-bottom:0 }
.cta { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:30px 28px; margin:44px 0 20px; text-align:center; box-shadow:var(--shadow-soft) }
.cta h2 { margin-top:0 }
.cta-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:20px }
.cta small { display:block; margin-top:16px; color:var(--ink-3); font-size:13.5px }
details { border-top:1px solid var(--line); padding:16px 0 }
summary { cursor:pointer; font-weight:600; color:var(--ink); list-style:none }
summary::-webkit-details-marker { display:none }
summary::after { content:"+"; float:right; color:var(--ink-3); font-weight:400 }
details[open] summary::after { content:"−" }
details p { margin:12px 0 0 }
.crumb { font-size:14px; color:var(--ink-3); margin-bottom:6px }
.crumb a { color:var(--ink-3) }
.honest { border-left:3px solid var(--line-strong); padding-left:18px; margin:24px 0 }
footer { margin-top:60px; border-top:1px solid var(--line); padding:26px 0 46px; font-size:14px; color:var(--ink-3) }
.footer-in { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:space-between }
.footer-links { display:flex; flex-wrap:wrap; gap:16px }
.footer-links a { color:var(--ink-3) }
@media (max-width:620px) { main { padding-top:34px } .nav-links a:not(.button) { display:none } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important } }

/* À lire aussi — les pages de comparaison ne se liaient qu'à l'accueil et à leur traduction.
   Un lecteur arrivé par une recherche précise repartait donc sans rien d'autre à lire, et un
   robot n'avait aucun chemin latéral à suivre. Trois liens, même langue, choisis un par un. */
.related { margin:40px 0 8px; padding:22px 24px; border:1px solid var(--line); border-radius:18px; background:var(--surface) }
.related h2 { margin:0 0 12px; font-size:17px }
.related ul { margin:0; padding:0; list-style:none; display:grid; gap:10px }
.related a { color:var(--ink-2); text-decoration:none; border-bottom:1px solid transparent }
.related a:hover { color:var(--ink); border-bottom-color:currentColor }
.related { margin-top:54px; padding-top:26px; border-top:1px solid var(--line) }
.related h2 { margin:0 0 14px; font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); font-weight:600 }
.related-links { display:flex; flex-wrap:wrap; gap:10px 24px; font-size:16px }
.related-links a { color:var(--blue) }
code { font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:.92em; background:var(--surface-2);
  border:1px solid var(--line); border-radius:6px; padding:2px 6px; color:var(--ink); white-space:nowrap }
td code { white-space:nowrap }