/* ==================================================================
   lockafriend — pages légales (privacy, terms)

   Une feuille PARTAGÉE, contrairement à index.html qui embarque tout
   en ligne. La raison est le contenu, pas le goût : ces deux pages
   disent la même chose sous deux angles, elles seront relues et
   corrigées ensemble, et deux copies d'un même CSS finissent toujours
   par diverger sur la page qu'on relit le moins.

   Le parti pris visuel : la palette et les polices de la page
   d'accueil, mais AUCUNE de sa mise en scène. Pas de décor pixel, pas
   d'animation, pas de révélation au défilement. Une politique de
   confidentialité se lit, souvent sur un téléphone, souvent parce
   qu'on a un doute — la faire clignoter serait répondre à côté. La
   continuité de marque tient aux couleurs, au monospace des titres et
   au liseré néon des encadrés, ce qui suffit largement.
   ================================================================== */
:root{
  --night:#0E0A1C;
  --night-2:#150E2B;
  --night-3:#1E1544;

  --grn:#8CFF3D;
  --pink:#FF4D9D;
  --gold:#FFD44D;

  --txt:#C3CFBA;
  --dim:#8C86AE;
  --white:#F3F8ED;

  --ps:'Press Start 2P',ui-monospace,monospace;
  --px:'Jersey 25',ui-monospace,monospace;

  --notch:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),
                  calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  background:var(--night);
  color:var(--txt);
  font-family:var(--px);
  /* 20px et non 16 : Jersey 25 est une fonte pixel, son œil est petit pour sa
     taille nominale. C'est le réglage retenu sur la page d'accueil pour le corps
     de texte, gardé ici pour que les deux ne se lisent pas à deux échelles. */
  font-size:20px;
  line-height:1.65;
}

.wrap{max-width:74ch;margin:0 auto;padding:0 24px}

/* ---- en-tête ------------------------------------------------------------ */
header{border-bottom:2px solid var(--night-3);background:#07050F;padding:28px 0}
.bm{font-family:var(--ps);font-size:14px;color:var(--white);text-decoration:none;display:inline-block}
.bm i{font-style:normal;color:var(--pink)}
.bm:hover{color:var(--grn)}

main{padding:48px 0 72px}

h1{font-family:var(--ps);font-size:20px;line-height:1.8;color:var(--grn);margin-bottom:18px}
h2{
  font-family:var(--ps);font-size:12px;line-height:1.9;color:var(--white);
  margin:44px 0 14px;padding-top:22px;border-top:2px solid var(--night-3);
}
h3{font-family:var(--ps);font-size:10px;line-height:2;color:var(--gold);margin:26px 0 10px}

p{margin:0 0 14px}
ul{margin:0 0 14px 22px}
li{margin-bottom:8px}
strong{color:var(--white);font-weight:400}
a{color:var(--grn)}
a:hover{color:var(--white)}

/* La date de dernière modification : la première chose qu'on cherche sur une
   page légale, donc au-dessus du premier titre et pas en pied de page. */
.stamp{font-family:var(--ps);font-size:9px;line-height:2.2;color:var(--dim);margin-bottom:34px}

/* ---- encadré ------------------------------------------------------------ */
/* Réservé à ce qui engage : la ligne rouge de la désinstallation, ce que le
   service d'accessibilité ne fait pas, la limitation de finalité de la liste
   d'attente. Trois encadrés au maximum par page — un encadré partout n'attire
   l'œil nulle part. */
.panel{
  background:var(--night-2);border:2px solid var(--grn);clip-path:var(--notch);
  padding:22px 24px;margin:22px 0;
}
.panel.pink{border-color:var(--pink)}
.panel p:last-child{margin-bottom:0}

/* ---- tableau ------------------------------------------------------------ */
/* Le détail des données collectées est une matrice (quoi / pourquoi / combien de
   temps) : la mettre en prose obligerait le lecteur à la reconstruire de tête. */
.tbl{width:100%;border-collapse:collapse;margin:18px 0;font-size:18px}
.tbl th,.tbl td{border:1px solid var(--night-3);padding:10px 12px;text-align:left;vertical-align:top}
.tbl th{font-family:var(--ps);font-size:9px;line-height:1.9;color:var(--gold);background:#07050F}

/* Un tableau à trois colonnes ne tient pas sous 560px : il défile
   horizontalement DANS son cadre plutôt que d'élargir la page entière. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll .tbl{min-width:520px}

/* ---- pied --------------------------------------------------------------- */
footer{border-top:2px solid var(--night-3);background:#07050F;padding:34px 0 46px}
.foot-links{display:flex;flex-wrap:wrap;gap:20px;font-family:var(--ps);font-size:9px;line-height:2.2}
.foot-links a{text-decoration:none}

@media (max-width:640px){
  body{font-size:19px}
  h1{font-size:15px}
  h2{font-size:11px}
  .wrap{padding:0 18px}
}