/* Feuille des pages LEGALES (confidentialite, mentions legales).
   Voir notes/legal.notes.md pour le pourquoi (page separee, jetons dupliques,
   pourquoi elle ne charge pas les six feuilles de la page d'accueil). */

@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('./fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('./fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('./fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: 'Geist Secours Win'; src: local('Segoe UI'), local('Segoe UI Regular');
  size-adjust: 104.05%; ascent-override: 97.07%; descent-override: 28.83%; line-gap-override: 0%; }
@font-face { font-family: 'Geist Secours Android'; src: local('Roboto'), local('Roboto Regular');
  size-adjust: 109.93%; ascent-override: 91.88%; descent-override: 27.29%; line-gap-override: 0%; }
@font-face { font-family: 'Geist Secours Apple'; src: local('SF Pro Text'), local('Helvetica Neue'), local('Arial');
  size-adjust: 101.35%; ascent-override: 99.65%; descent-override: 29.60%; line-gap-override: 0%; }

/* Les JETONS. Source de verite : le bloc `:root` du <style> de index.html.
   Toute valeur modifiee la-bas se reporte ici, et nulle part ailleurs. */
:root {
  --brand: #0664fe;
  --brand-ink: #051e48;
  --brand-black: #010101;
  --page: #ffffff;
  --surface: #ffffff;
  --subtle: #f6f8fb;
  --text: #08111f;
  --muted: #55617a;
  --faint: #646f87;
  --line: rgba(5, 30, 72, .10);
  --line-strong: rgba(5, 30, 72, .20);
  --accent: var(--brand);
  --accent-strong: #0a4fd0;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --hair: 0 0 0 1px rgba(5, 30, 72, .07);
  --font-ui: 'Geist', 'Geist Secours Win', 'Geist Secours Android', 'Geist Secours Apple', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-data: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #06080d; --surface: #0c1017; --subtle: #10151e; --text: #eef2f8;
    --muted: #9aa6bb; --faint: #7a86a1;
    --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .17);
    --accent: #4d8dff; --accent-strong: #7fabff;
    --hair: 0 0 0 1px rgba(255, 255, 255, .08);
  }
}

* { box-sizing: border-box; }
html { font-family: var(--font-ui); scroll-padding-top: 24px; }
body { margin: 0; background: var(--page); color: var(--text);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.wrap { width: min(760px, calc(100% - 40px)); margin: 0 auto; }

/* --- Barre de retour ------------------------------------------------------ */
.lg-top { padding: 22px 0; border-bottom: 1px solid var(--line); }
.lg-top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; justify-content: space-between; }
.lg-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 650; font-size: 17px; letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.lg-brand img { width: 24px; height: 22px; }
.lg-brand b { color: var(--accent-strong); font-weight: 650; }
.lg-retour { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px;
  color: var(--faint); text-decoration: none; transition: color .16s var(--ease); }
.lg-retour:hover { color: var(--text); }

/* --- Corps ---------------------------------------------------------------- */
main { padding: 44px 0 72px; }
.lg-kicker { margin: 0 0 10px; font-family: var(--font-data); font-size: 12.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
h1 { margin: 0 0 14px; font-size: clamp(28px, 5.2vw, 40px); line-height: 1.12;
  letter-spacing: -.03em; font-weight: 640; text-wrap: balance; }
.lg-date { margin: 0 0 34px; font-size: 14px; color: var(--faint); }
h2 { margin: 46px 0 14px; font-size: clamp(19px, 3.2vw, 23px); line-height: 1.25;
  letter-spacing: -.02em; font-weight: 620; text-wrap: balance; }
h3 { margin: 28px 0 10px; font-size: 16px; font-weight: 620; letter-spacing: -.01em; }
p { margin: 0 0 16px; color: var(--muted); text-wrap: pretty; }
p strong, li strong { color: var(--text); font-weight: 600; }
main ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 9px; }
main li { position: relative; padding-left: 17px; color: var(--muted); }
main li::before { content: ''; position: absolute; left: 0; top: .66em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--line-strong); }
/* Le soulignement est reserve aux liens DANS LE TEXTE. Les deux liens de la
   barre de tete sont des reperes de navigation, pas des renvois : souligner
   le lockup de marque le fait lire comme une note de bas de page. */
a { color: var(--accent-strong); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; box-shadow: none; }
main a, .lg-foot a {
  box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--accent-strong) 45%, transparent);
  transition: box-shadow .16s var(--ease); }
main a:hover, .lg-foot a:hover { box-shadow: inset 0 -1px 0 0 var(--accent-strong); }

.mono { font-family: var(--font-data); font-size: .92em; color: var(--text); }

/* --- Encadre : ce qui est vrai et inconfortable ---------------------------- */
.lg-note { margin: 0 0 22px; padding: 18px 20px; border-radius: var(--radius-md);
  background: var(--subtle); box-shadow: inset 0 0 0 1px var(--line); }
.lg-note > :last-child { margin-bottom: 0; }
.lg-note b { color: var(--text); }

/* --- Tableau des destinataires -------------------------------------------- */
.lg-tab-wrap { margin: 0 0 20px; overflow-x: auto; border-radius: var(--radius-md);
  box-shadow: var(--hair); background: var(--surface); }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 15px; text-align: left; vertical-align: top; line-height: 1.5;
  border-bottom: 1px solid var(--line); }
thead th { font-size: 12.5px; font-family: var(--font-data); letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--subtle); }
tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
tbody td { color: var(--muted); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* --- Pied -------------------------------------------------------------------*/
.lg-foot { padding: 24px 0 40px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--faint); }
.lg-foot p { color: var(--faint); margin: 0; }

@media (max-width: 620px) {
  main { padding: 32px 0 52px; }
  body { font-size: 15.5px; }
  .lg-note { padding: 15px 16px; }
  /* Le tableau defile dans sa boite, et il DIT qu'il defile : meme technique
     que `.compar-wrap` sur la page d'accueil. Les deux caches sont en
     `background-attachment: local` (ils partent avec le contenu), les deux
     ombres en `scroll` (elles restent aux bords). Zero script. */
  .lg-tab-wrap {
    background-image:
      linear-gradient(90deg, var(--surface) 42%, rgba(255, 255, 255, 0)),
      linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface) 58%),
      radial-gradient(farthest-side at 0 50%, rgba(12, 16, 28, .13), rgba(12, 16, 28, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(12, 16, 28, .13), rgba(12, 16, 28, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-size: 40px 100%, 40px 100%, 15px 100%, 15px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}
@media (prefers-reduced-motion: reduce) { a, .lg-retour { transition: none; } }