/* ==========================================================================
   AYIPAY — PAGES LEGALES STATIQUES
   Partage la charte de la vitrine (landing/index.html) : charbon, lavande,
   violet. Volontairement SANS JavaScript et SANS police distante : ces pages
   sont lues par les robots de Google lors de la validation OAuth, et par des
   telephones sur reseau lent en Haiti. Le texte doit etre dans le HTML.
   ========================================================================== */

:root{
  --void:#0B0A0F;
  --bg:#131217;
  --surface:#201d28;
  --surface-2:#1a1822;
  --lav:#BB86FC;
  --lav-hi:#D3B4FF;
  --violet:#6A0DAD;
  --violet-deep:#4A0E8F;
  --gold:#FFD700;
  --amber:#FFB800;
  --txt:#F5F3F7;
  --txt-2:#A9A3B6;
  --txt-3:#6E6880;
  --line:rgba(255,255,255,.09);
  --font-display:"SF Pro Display","Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--void);
  color:var(--txt);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  /* Encoche iOS : la vitrine a le meme reglage. */
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

a{color:var(--lav);text-decoration:none;}
a:hover,a:focus-visible{color:var(--lav-hi);text-decoration:underline;}

/* --- En-tete ------------------------------------------------------------- */

.top{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(74,14,143,.28),transparent);
}
.top-in{
  max-width:820px;margin:0 auto;padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.wordmark{
  font-family:var(--font-display);font-weight:800;font-size:1.35rem;
  letter-spacing:-.045em;color:#fff;
}
.wordmark:hover{text-decoration:none;color:#fff;}
.top-link{font-size:.9rem;color:var(--txt-2);}

/* --- Corps --------------------------------------------------------------- */

main{max-width:820px;margin:0 auto;padding:40px 20px 80px;}

h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,5.5vw,2.7rem);
  letter-spacing:-.035em;line-height:1.1;margin:0 0 12px;
}
.sub{color:var(--txt-2);font-size:1.05rem;margin:0 0 18px;}

.meta{
  display:inline-block;font-size:.82rem;color:var(--txt-3);
  border:1px solid var(--line);border-radius:999px;padding:5px 13px;
  margin-bottom:28px;
}

.callout{
  border:1px solid rgba(255,184,0,.32);
  background:rgba(255,184,0,.07);
  border-radius:14px;padding:14px 18px;margin:0 0 32px;
  color:#F3E2BE;font-size:.95rem;
}

.toc{
  border:1px solid var(--line);background:var(--surface-2);
  border-radius:16px;padding:20px 24px;margin:0 0 44px;
}
.toc h2{
  font-family:var(--font-display);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);
  margin:0 0 12px;
}
.toc ol{margin:0;padding-left:20px;color:var(--txt-2);}
.toc li{margin:5px 0;}

section{
  border-top:1px solid var(--line);
  padding-top:30px;margin-top:34px;
  /* Compense l'ancre pour que le titre ne colle pas au bord haut. */
  scroll-margin-top:20px;
}
section:first-of-type{border-top:0;margin-top:0;}

h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.2rem,3.2vw,1.45rem);
  letter-spacing:-.02em;line-height:1.25;margin:0 0 12px;
}
h2 .num{color:var(--lav);font-variant-numeric:tabular-nums;margin-right:10px;}

section p{margin:0 0 14px;color:#E4E0EA;}

ul{margin:0;padding-left:0;list-style:none;}
ul li{
  position:relative;padding-left:22px;margin:9px 0;color:var(--txt-2);
}
ul li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--lav));
}

/* --- Pied ---------------------------------------------------------------- */

footer{
  border-top:1px solid var(--line);
  background:var(--bg);
  padding:34px 20px 48px;
}
.foot-in{max-width:820px;margin:0 auto;color:var(--txt-3);font-size:.88rem;}
.foot-in p{margin:0 0 10px;}
.foot-note{
  border-left:2px solid var(--line);padding-left:14px;margin-top:20px;
  color:var(--txt-3);font-size:.83rem;
}

@media (max-width:520px){
  body{font-size:15.5px;}
  main{padding:28px 18px 60px;}
  .toc{padding:16px 18px;}
}