/* ============================================================================
   RCF — PAGES LÉGALES · FEUILLE AUTONOME
   ----------------------------------------------------------------------------
   Ces pages doivent s'ouvrir seules, directement par leur URL, pour quelqu'un
   qui n'a jamais lancé le jeu — un vérificateur Google, par exemple. Elles
   n'empruntent donc RIEN au runtime de RCF : ni thème, ni script, ni scène 9:16.

   Elles reprennent seulement les couleurs et l'esprit typographique : marine
   profond, jaune RCF, titres condensés.

   POLICES — aucune requête, vers personne. Depuis LEGAL 1.3 le jeu sert ses
   deux polices depuis assets/fonts/ ; ces pages-ci n'en chargent même pas,
   pour rester lisibles quel que soit l'état du cache ou du réseau. On reprend
   la même PILE de repli que le jeu (`--disp` dans tokens.css) : sur la plupart
   des appareils le rendu est très proche.
   ============================================================================ */

:root{
  --floor:#040b13;
  --floor2:#071421;
  --panel:rgba(11,29,45,.72);
  --edge:rgba(170,201,226,.22);
  --ink:#f6f8fb;
  --dim:#c5d0da;
  --faint:#8fa3b6;
  --hivis:#ffc02e;
  --disp:"Oswald","Arial Narrow","Aptos Narrow","Roboto Condensed",system-ui,"Segoe UI",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box}

html{
  background:var(--floor);
  /* Les longs textes ne doivent pas grossir tout seuls quand on tourne
     l'iPhone en paysage. */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  /* Aucun débordement horizontal possible : la page n'a qu'une colonne, et
     rien à l'intérieur n'a de largeur fixe. */
  overflow-x:hidden;
  background:
    radial-gradient(90rem 50rem at 50% -20rem, rgba(31,75,108,.35), transparent 60%),
    linear-gradient(180deg, var(--floor2), var(--floor) 60%);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  padding:
    calc(28px + var(--safe-t)) calc(20px + var(--safe-r))
    calc(56px + var(--safe-b)) calc(20px + var(--safe-l));
}

.doc{ width:100%; max-width:46rem; margin:0 auto; }

/* --- en-tête ------------------------------------------------------------- */
.doc-marque{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.doc-marque img{ width:48px; height:48px; flex:none; object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.28)); }
.doc-marque b{ display:block; font-family:var(--disp); font-size:19px;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.1; }
.doc-marque span{ display:block; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-top:2px; }

h1{ font-family:var(--disp); font-size:clamp(28px,6vw,40px); line-height:1.1;
  letter-spacing:.01em; margin:0 0 8px; }
h1 em{ color:var(--hivis); font-style:normal; }

.doc-maj{ font-size:13px; color:var(--faint); margin:0 0 6px;
  letter-spacing:.06em; text-transform:uppercase; }

.doc-chapeau{ color:var(--dim); font-size:17px; margin:0 0 30px;
  padding-bottom:26px; border-bottom:1px solid var(--edge); }

/* --- corps --------------------------------------------------------------- */
h2{ font-family:var(--disp); font-size:clamp(20px,4.4vw,26px); line-height:1.2;
  margin:38px 0 10px; color:var(--hivis); letter-spacing:.02em; }
h3{ font-size:16px; margin:22px 0 6px; color:var(--ink); }

p{ margin:0 0 14px; color:var(--dim); }
p strong,li strong{ color:var(--ink); font-weight:600; }

ul{ margin:0 0 16px; padding-left:20px; color:var(--dim); }
li{ margin-bottom:7px; }

a{ color:var(--hivis); text-decoration:underline; text-underline-offset:2px;
   /* Une URL longue ne doit jamais élargir la page sur un petit écran. */
   overflow-wrap:anywhere; }
a:hover,a:focus{ color:#fff; }

code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em; color:var(--ink);
  background:rgba(255,255,255,.07); border-radius:4px; padding:1px 5px;
  overflow-wrap:anywhere; }

/* --- encadrés ------------------------------------------------------------ */
.doc-note{ background:var(--panel); border:1px solid var(--edge);
  border-left:3px solid var(--hivis); border-radius:12px;
  padding:16px 18px; margin:20px 0; }
.doc-note p:last-child{ margin-bottom:0; }
.doc-note b{ color:var(--ink); }

/* Un champ que Dylan doit remplir avant la mise en production. Il se voit :
   c'est le but. Mieux vaut un trou visible qu'un faux renseignement. */
.doc-adef{ display:inline-block; background:rgba(255,192,46,.14);
  border:1px dashed rgba(255,192,46,.55); border-radius:6px;
  padding:0 6px; color:var(--hivis); font-size:.94em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere; }

/* --- pied ---------------------------------------------------------------- */
.doc-pied{ margin-top:46px; padding-top:22px; border-top:1px solid var(--edge);
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  font-size:14px; }
.doc-pied a{ text-decoration:none; }
.doc-pied a:hover{ text-decoration:underline; }
.doc-pied .doc-retour{ font-family:var(--disp); letter-spacing:.06em;
  text-transform:uppercase; }
.doc-pied .doc-sep{ color:var(--faint); }

@media (max-width:420px){
  body{ font-size:15.5px; padding-left:calc(16px + var(--safe-l));
        padding-right:calc(16px + var(--safe-r)); }
  .doc-marque img{ width:40px; height:40px; }
}

/* Impression : le fond sombre gaspille de l'encre et se lit mal sur papier. */
@media print{
  html,body{ background:#fff; color:#111; }
  body{ padding:0; }
  h2{ color:#7a5a00; }
  p,ul,li,.doc-chapeau{ color:#222; }
  .doc-pied,.doc-marque img{ display:none; }
}