/* ─────────────────────────────────────────────────────────────────────
   GhettoPay — pages publiques (support, confidentialité, conditions)
   Même système que la landing : papier vert-gris, encre forêt, or réservé
   aux actions. Bricolage Grotesque en titrage, DM Sans en texte, DM Mono
   pour les montants, taux et références.
   ───────────────────────────────────────────────────────────────────── */
:root{
  --paper:#F5F6F1; --paper2:#ECEFE8; --card:#FFFFFF;
  --ink:#0E1A14; --ink2:#46554B; --ink3:#6E7B72;
  --line:#DCE2DA; --forest:#0A4A2E; --leaf:#1F6B45;
  --gold:#E3A814; --gold-ink:#3A2A00;
  --ok:#1F6B45; --warn:#9A5B00;
  --fd:'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --fb:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fm:'DM Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --r:14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0C120F; --paper2:#131B16; --card:#161F1A;
    --ink:#E8EEE9; --ink2:#AAB7AE; --ink3:#7F8D84;
    --line:#26322B; --forest:#7FCB9C; --leaf:#7FCB9C;
    --gold:#F0BC35; --gold-ink:#241A00;
    color-scheme: dark;
  }
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 1rem/1.65 var(--fb);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--forest); text-underline-offset:3px; }
a:hover{ text-decoration-thickness:2px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }

/* En-tête commun */
.site-top{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:1rem;
  padding:.85rem max(1rem, calc((100vw - 1080px)/2));
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ display:inline-flex; align-items:center; gap:.5rem; color:var(--ink); text-decoration:none; font:700 1.05rem/1 var(--fd); letter-spacing:-.01em; }
.brand .wm{ display:block; height:28px; width:auto; }
.site-nav{ display:flex; gap:1.1rem; margin-left:auto; font-size:.9rem; }
.site-nav a{ color:var(--ink2); text-decoration:none; }
.site-nav a:hover, .site-nav a[aria-current="page"]{ color:var(--ink); }
.site-nav a[aria-current="page"]{ font-weight:600; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:44px; padding:.6rem 1.1rem; border-radius:999px; border:1px solid transparent;
  font:600 .92rem/1 var(--fb); text-decoration:none; cursor:pointer;
}
.btn-gold{ background:var(--gold); color:var(--gold-ink); }
.btn-gold:hover{ filter:brightness(1.05); }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-line:hover{ border-color:var(--ink3); }
@media (max-width:640px){
  .site-nav{ display:none; }
  .site-top .btn{ margin-left:auto; }
}

/* Pages de texte (confidentialité, conditions) */
.doc{ max-width:720px; margin:0 auto; padding:3rem 1.25rem 4rem; }
.doc-kicker{ font:500 .78rem/1 var(--fm); color:var(--ink3); letter-spacing:.02em; margin:0 0 .9rem; }
.doc h1{ font:700 clamp(2rem, 6vw, 2.9rem)/1.05 var(--fd); letter-spacing:-.025em; margin:0 0 1rem; text-wrap:balance; }
.doc .lead{ font-size:1.12rem; color:var(--ink2); margin:0 0 2rem; max-width:60ch; }
.doc h2{ font:700 1.3rem/1.25 var(--fd); letter-spacing:-.01em; margin:2.6rem 0 .7rem; scroll-margin-top:80px; }
.doc h3{ font:600 1rem/1.4 var(--fb); margin:1.4rem 0 .3rem; }
.doc p, .doc li{ max-width:66ch; }
.doc ul, .doc ol{ padding-left:1.25rem; }
.doc li{ margin:.3rem 0; }
.doc li::marker{ color:var(--ink3); }
.toc{
  margin:0 0 2.5rem; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--card);
}
.toc p{ margin:0 0 .5rem; font:500 .78rem/1 var(--fm); color:var(--ink3); }
.toc ol{ margin:0; padding-left:1.2rem; columns:2; column-gap:2rem; font-size:.92rem; }
.toc li{ break-inside:avoid; }
@media (max-width:560px){ .toc ol{ columns:1; } }
.summary{
  display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  margin:0 0 2.5rem;
}
.summary div{ padding:1rem 1.1rem; border-radius:var(--r); background:var(--paper2); }
.summary b{ display:block; font:700 .98rem/1.3 var(--fd); margin-bottom:.25rem; }
.summary span{ font-size:.9rem; color:var(--ink2); }
.tbl-wrap{ overflow-x:auto; margin:1rem 0; border:1px solid var(--line); border-radius:var(--r); background:var(--card); }
table{ border-collapse:collapse; width:100%; font-size:.92rem; }
th, td{ text-align:left; vertical-align:top; padding:.7rem .9rem; border-bottom:1px solid var(--line); }
th{ font:500 .76rem/1.2 var(--fm); color:var(--ink3); text-transform:uppercase; letter-spacing:.04em; background:var(--paper2); }
tr:last-child td{ border-bottom:0; }
.note{ padding:.9rem 1.1rem; border-left:3px solid var(--gold); background:var(--card); border-radius:0 var(--r) var(--r) 0; }

.site-foot{
  border-top:1px solid var(--line); padding:2rem max(1.25rem, calc((100vw - 1080px)/2));
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; color:var(--ink3); font-size:.88rem;
}
.site-foot nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }
.site-foot a{ color:var(--ink2); text-decoration:none; }
.site-foot a:hover{ color:var(--ink); text-decoration:underline; }
.site-foot .addr{ margin-left:auto; }
@media (max-width:640px){ .site-foot .addr{ margin-left:0; } }
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
