/* Les pages légales : lues sur un téléphone, souvent vite. Papier clair, texte confortable. */
:root { --encre:#141118; --encre2:#4A4550; --gris:#8B8590; --papier:#F7F3EC; --trait:#E7E0D6; --accent:#E8452F; }
* { box-sizing: border-box; }
body { margin:0; background:var(--papier); color:var(--encre); font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.65; -webkit-text-size-adjust:100%; }
.page { max-width:720px; margin:0 auto; padding:28px 20px 64px; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--trait); }
.marque { white-space:nowrap; font-weight:800; font-size:19px; letter-spacing:-0.4px; text-decoration:none; color:var(--encre); }
.marque .o { display:inline-block; width:0.62em; height:0.62em; border-radius:50%; background:var(--encre); position:relative; overflow:hidden; vertical-align:-0.02em; }
.marque .o::after { content:""; position:absolute; left:-20%; top:46%; width:150%; height:16%; background:var(--papier); transform:rotate(-45deg); }
nav a { color:var(--gris); font-size:13px; font-weight:600; text-decoration:none; margin-left:14px; }
nav a:hover, nav a[aria-current] { color:var(--accent); }
h1 { font-size:30px; line-height:1.15; letter-spacing:-0.8px; margin:30px 0 6px; }
h2 { font-size:19px; letter-spacing:-0.3px; margin:34px 0 8px; }
h3 { font-size:16px; margin:22px 0 4px; }
p, li { color:var(--encre2); }
li { margin:5px 0; }
.date { color:var(--gris); font-size:13px; margin:0 0 8px; }
.encadre { background:#fff; border:1px solid var(--trait); border-radius:14px; padding:16px 18px; margin:20px 0; }
.encadre.fort { border-color:var(--accent); background:#FDEEEB; }
.encadre p:first-child { margin-top:0; } .encadre p:last-child { margin-bottom:0; }
table { width:100%; border-collapse:collapse; margin:14px 0; font-size:14px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--trait); vertical-align:top; color:var(--encre2); }
th { color:var(--encre); font-weight:700; }
a { color:var(--accent); }
footer { margin-top:44px; padding-top:18px; border-top:1px solid var(--trait); color:var(--gris); font-size:13px; }
.brouillon { background:#141118; color:#F7F3EC; border-radius:14px; padding:14px 18px; font-size:14px; margin:18px 0 0; }
.brouillon b { color:#FFB03D; }
@media (prefers-color-scheme: dark) {
  :root { --papier:#141118; --encre:#F7F3EC; --encre2:#C9C2CC; --gris:#8B8590; --trait:#2A2530; }
  .encadre { background:#1C1822; } .encadre.fort { background:#2A1A18; }
  .marque .o::after { background:#141118; }
}

/* Quatre entrées de menu ne tiennent pas à côté du logo sur un téléphone : le logo se
   coupait en « MagicSh / ot ». Sous 520 px, le menu passe sous le logo. */
@media (max-width: 520px) {
  header { flex-wrap: wrap; row-gap: 8px; }
  nav { width: 100%; }
  nav a:first-child { margin-left: 0; }
}