/* Pages légales de Sana-Cargo.

   Des pages HTML ordinaires, servies à côté de l'application : elles doivent
   se lire sans JavaScript, s'imprimer, garder une adresse stable et rester
   lisibles par un lecteur d'écran ou un agent qui parcourt le site. Les
   couleurs reprennent celles de l'application, dans leurs variantes
   lisibles : chaque paire texte/fond ci-dessous dépasse 4,5 : 1 (WCAG 2.2). */

@font-face {
  font-family: 'Inter';
  /* Servie par nos soins, à côté des pages : aucun serveur tiers. Le fichier
     vivait dans le paquet de l'application ; celui-ci déménage sous /app, et
     une page légale ne doit pas dépendre de l'adresse de l'application. */
  src: url('/fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fond: #f4f5f7;
  --surface: #ffffff;
  --texte: #14181f;          /* 17,8 : 1 sur blanc */
  --texte-second: #5f6673;   /* 5,8 : 1 sur blanc, 5,3 sur le fond */
  --lien: #1f3fd1;           /* 7,8 : 1 sur blanc */
  --filet: #e7e9ec;
  --encart: #e8ecfc;
  --encart-texte: #16308f;   /* 9,7 : 1 sur l'encart */
  --a-completer: #fff4d9;
  --a-completer-texte: #6b4d0e;
  --focus: #1f3fd1;
  --sigle-bleu: #0021ff;     /* couleurs du logo : un sigle n'a pas d'exigence de contraste */
  --sigle-orange: #f5811e;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0f1319;
    --surface: #161b23;
    --texte: #e7e9ec;        /* 14,2 : 1 sur la surface */
    --texte-second: #aab1bd; /* 8,0 : 1 */
    --lien: #9db0ff;         /* 8,3 : 1 */
    --filet: #2a313c;
    --encart: #1c2540;
    --encart-texte: #d5dcfb;
    --a-completer: #3a2f10;
    --a-completer-texte: #ffe3a3;
    --focus: #9db0ff;
    --sigle-bleu: #6f86ff;
    --sigle-orange: #f5811e;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 1rem/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.evitement {
  position: absolute;
  left: -9999px;
}
.evitement:focus {
  left: 16px;
  top: 12px;
  z-index: 10;
  background: var(--surface);
  padding: 8px 14px;
  border-radius: 8px;
}

a { color: var(--lien); text-underline-offset: 2px; }
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
}
.entete-interieur {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}
.sigle {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.sigle .s1 { color: var(--sigle-bleu); }
.sigle .s2 { color: var(--sigle-orange); }
.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.875rem;
}
.navigation a { text-decoration: none; }
.navigation a:hover { text-decoration: underline; }
.navigation a[aria-current='page'] {
  color: var(--texte);
  font-weight: 600;
}

/* ── Document ────────────────────────────────────────────────────────── */
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 16px 56px;
}
.document {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 16px;
  padding: clamp(20px, 5vw, 48px);
}
.document > * { max-width: 68ch; }

h1 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 6px;
  text-wrap: balance;
}
.version {
  color: var(--texte-second);
  font-size: 0.875rem;
  margin: 0 0 28px;
}
h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 40px 0 10px;
  padding-top: 8px;
  text-wrap: balance;
  scroll-margin-top: 16px;
}
h3 {
  font-size: 1.05rem;
  margin: 24px 0 6px;
}
p, ul, ol { margin: 0 0 14px; }
li { margin-bottom: 6px; }

.essentiel {
  background: var(--encart);
  color: var(--encart-texte);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 0 0 28px;
}
.essentiel h2 {
  margin-top: 0;
  padding-top: 0;
  font-size: 1rem;
  color: inherit;
}
.essentiel ul { margin-bottom: 0; }
.essentiel a { color: inherit; }

.sommaire {
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding: 14px 0;
  margin: 0 0 8px;
}
.sommaire h2 {
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.95rem;
}
.sommaire ol {
  margin: 0;
  padding-left: 1.4em;
  columns: 2 16rem;
  column-gap: 32px;
  font-size: 0.925rem;
}

/* Les tableaux gardent leur largeur et défilent dans leur cadre sur un
   téléphone : la page, elle, ne défile jamais de côté. */
.tableau {
  overflow-x: auto;
  margin: 0 0 18px;
  max-width: none;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 0.925rem;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--filet);
}
th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texte-second);
}

dl.identite {
  display: grid;
  grid-template-columns: minmax(10rem, max-content) 1fr;
  gap: 6px 20px;
  margin: 0 0 18px;
}
dl.identite dt { color: var(--texte-second); }
dl.identite dd { margin: 0; }

/* Ce qui manque encore, et doit se voir. Une page publiée avec l'un de ces
   repères n'est pas terminée ; un test de l'application refuse de passer
   tant qu'il en reste. */
mark.a-completer {
  background: var(--a-completer);
  color: var(--a-completer-texte);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
}

.note { color: var(--texte-second); font-size: 0.925rem; }

/* ── Pied ────────────────────────────────────────────────────────────── */
.pied {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 40px;
  color: var(--texte-second);
  font-size: 0.875rem;
}
.pied ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

@media print {
  .entete, .pied, .evitement, .sommaire { display: none; }
  body { background: #fff; color: #000; }
  main { padding: 0; }
  .document { border: none; padding: 0; }
  a { color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}