/* Pages legales Dextrade — autonome, aucune dependance externe. */
:root{
  --fond:#0A0B0D; --fond-2:#101216; --bord:#1E2128;
  --texte:#F0F1F3; --texte-2:#9BA1AC; --menthe:#4ADE80;
  --large:760px;
}
/* LA TYPOGRAPHIE DU TERMINAL (agent design, 25/10/2026) : Inter 300/400/500, jamais de gras. Les pages legales tombaient sur la
   police du systeme, titres et mots forts en gras 700 ; le guide et l'aide l'ecrasaient chacun a la main. */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 500;font-display:swap;src:url('/polices/inter-variable.woff2') format('woff2')}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fond); color:var(--texte);
  font:400 16px/1.65 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:0 16px 80px;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:var(--large);margin:0 auto}
header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:28px 0 20px;border-bottom:1px solid var(--bord);margin-bottom:32px;
}
header .marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texte)}
header .marque img{height:26px;width:auto;display:block}
/* le logo porte deja le nom : « Dextrade » ecrit a cote se lisait deux fois (agent design, 25/10/2026, guide et pages legales) ;
   le mot reste pour les lecteurs d'ecran, l'image ayant alt="" */
header .marque b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.langues{display:flex;gap:4px;background:var(--fond-2);border:1px solid var(--bord);border-radius:10px;padding:3px}
.langues button{
  background:none;border:0;color:var(--texte-2);font:500 13px/1 'Inter',-apple-system,sans-serif;
  padding:7px 12px;border-radius:7px;cursor:pointer;letter-spacing:.02em;
}
.langues button[aria-pressed="true"]{background:rgba(240,241,243,.12);color:var(--texte)}   /* la langue choisie en surface neutre : la menthe reste a l'action */
h1{font-size:28px;line-height:1.25;letter-spacing:-.02em;margin:0 0 6px;font-weight:400}
.maj{color:var(--texte-2);font-size:13px;margin:0 0 28px}
h2{font-size:18px;letter-spacing:-.01em;margin:34px 0 10px;padding-top:6px;font-weight:500}
h3,h4,summary{font-weight:500}
h2 span{color:var(--menthe);font-variant-numeric:tabular-nums;margin-inline-end:8px}
p,li{color:#D7DAE0}
ul{padding-inline-start:22px;margin:10px 0}
li{margin:5px 0}
strong,b{color:var(--texte);font-weight:500}
.encadre{
  border:1px solid var(--bord);background:var(--fond-2);border-radius:12px;
  padding:16px 18px;margin:18px 0;
}
.encadre.alerte{border-color:#4A1F1F;background:#180C0C}
.encadre h3{margin:0 0 8px;font-size:15px;color:var(--texte)}
.encadre p:last-child{margin-bottom:0}
a{color:var(--menthe)}
footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--bord);color:var(--texte-2);font-size:13px}
footer a{margin-inline-end:16px}
/* On masque les blocs de la langue non choisie — mais SEULEMENT a l'interieur de la page.
   Sans « body » devant, la regle attrapait aussi <html lang="fr"> et mettait display:none sur la
   racine : la page entiere s'affichait blanche. (Trouve le 22/09/2026, present depuis l'origine.) */
body [lang]:not([lang=""]){display:none}
body[data-lang="fr"] [lang="fr"],body[data-lang="en"] [lang="en"]{display:block}
body[data-lang="fr"] li[lang="fr"],body[data-lang="en"] li[lang="en"]{display:list-item}
body[data-lang="fr"] span[lang="fr"],body[data-lang="en"] span[lang="en"]{display:inline}
@media (max-width:520px){h1{font-size:23px}body{font-size:15px}}