/* =========================================================================
   Northstar — feuille de style des pages juridiques
   =========================================================================
   Fichier séparé et non style en ligne : quatre pages partagent exactement la
   même présentation, et une seule source évite qu'elles divergent au fil des
   corrections. La CSP de netlify.toml autorise `style-src 'self'`, donc un
   fichier servi depuis le même domaine passe sans assouplir quoi que ce soit.

   Jetons repris à l'identique de l'application (index.html). Ils sont
   dupliqués ici plutôt qu'importés parce que ces pages doivent rester
   autonomes : elles s'ouvrent dans un onglet séparé, souvent avant même que
   l'utilisateur ait un compte, et ne doivent dépendre d'aucun script.

   Lisibilité avant tout : un document juridique se lit en entier, parfois sur
   téléphone, parfois par quelqu'un qui cherche une clause précise. D'où une
   mesure de ligne stricte, des titres qui se repèrent au survol de l'œil, et
   aucun ornement.
   ========================================================================= */

:root {
  --bg: #080b16;
  --surface: #10152a;
  --text: #eef1f8;
  --text-dim: #9aa3bd;
  --line: #232a45;
  --accent: #f5c542;
  --accent-ink: #1a1400;

  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 20px; --fs-xl: 32px;
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --measure: 68ch;
  --radius: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  line-height: 1.6; font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  /* Même raison que dans l'application : une adresse ou une référence d'article
     un peu longue ne doit jamais pouvoir élargir la page. */
  overflow-wrap: break-word;
}

/* `width: 100%` explicite, comme dans l'application : un conteneur centré par
   des marges automatiques et dépourvu de largeur se dimensionne sur son
   contenu. C'est le défaut qui a coûté cinq échanges les 15-17/09/2026. */
.legal {
  width: 100%; max-width: 760px; margin-inline: auto;
  padding: var(--s7) var(--s5) var(--s8);
}

/* En-tête : retour à l'application, puis titre. Pas de logo décoratif — la
   page doit dire ce qu'elle est en une ligne. */
.legal-top {
  display: flex; align-items: center; gap: var(--s3);
  padding-bottom: var(--s5); margin-bottom: var(--s6);
  border-bottom: 0.5px solid var(--line);
  font-size: var(--fs-sm);
}
.legal-top a { color: var(--text-dim); text-decoration: none; }
.legal-top a:hover { color: var(--text); }
.legal-brand { color: var(--text); font-weight: 700; letter-spacing: 1px; font-size: var(--fs-sm); }
.legal-star { color: var(--accent); }

h1 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.legal-updated { color: var(--text-dim); font-size: var(--fs-sm); margin-top: var(--s3); }

/* Filet fin au-dessus des sections plutôt qu'un encadré : la rupture se voit
   sans ajouter de conteneur. Même procédé que `.section-head` dans l'app. */
h2 {
  font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em;
  border-top: 0.5px solid var(--line);
  margin-top: var(--s7); padding-top: var(--s5);
}
h3 { font-size: var(--fs-base); font-weight: 600; margin-top: var(--s5); }

p, li { max-width: var(--measure); }
p { margin-top: var(--s3); color: var(--text); }
ul, ol { margin: var(--s3) 0 0 var(--s5); }
li { margin-top: var(--s2); }
strong { font-weight: 600; }
a { color: var(--accent); }
a:hover { color: var(--text); }

/* Bloc d'information factuelle — identité, coordonnées du médiateur. Surface
   discrète et non bordure dorée : l'accent reste réservé aux actions. */
.legal-block {
  background: var(--surface); border-radius: var(--radius);
  padding: var(--s4) var(--s5); margin-top: var(--s4);
  font-size: var(--fs-sm);
}
.legal-block p { margin-top: var(--s1); }

/* Mention à ne pas manquer (renonciation, garanties). Filet d'accent à gauche,
   comme le bandeau « tu es ici » de l'application. */
.legal-note {
  border-left: 2px solid var(--accent);
  padding: var(--s1) 0 var(--s1) var(--s4);
  margin-top: var(--s4);
}

table { border-collapse: collapse; margin-top: var(--s4); width: 100%; max-width: var(--measure); }
th, td {
  text-align: left; padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 0.5px solid var(--line); font-size: var(--fs-sm);
  vertical-align: top;
}
th { color: var(--text-dim); font-weight: 600; }

.legal-foot {
  border-top: 0.5px solid var(--line);
  margin-top: var(--s7); padding-top: var(--s5);
  font-size: var(--fs-xs); color: var(--text-dim);
}
.legal-foot a { color: var(--text-dim); }
.legal-foot a:hover { color: var(--text); }
.legal-foot nav { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s3); }

@media (max-width: 480px) {
  :root { --fs-xl: 24px; --fs-lg: 18px; }
  .legal { padding: var(--s6) var(--s5) var(--s7); }
}