/* ==========================================================================
   Les pages légales. Servies en HTML statique, hors de l'application.
   ==========================================================================

   🔴 POURQUOI CES PAGES MÉRITENT UNE FEUILLE DE STYLE, ET PAS « QUAND ON AURA
      LE TEMPS ». Ce sont les pages qui portent la promesse du produit : la
      photo ne quitte pas l'appareil, la note est un percentile, voici comment
      signaler, voici ce qu'on facture. Les servir en Times New Roman sur fond
      blanc pendant que l'application est un instrument noir, c'est dire au
      lecteur que la promesse appartient à quelqu'un d'autre — un service
      juridique, un texte qu'on subit. Elles doivent se lire comme le produit.

   🔴 LES JETONS SONT RECOPIÉS ICI, ET C'EST LA SEULE COPIE DU PROJET.
      styles/jetons.css vit dans le bundle de l'application, construit par
      Vite avec un nom haché : une page statique ne peut pas le lier. Le choix
      était donc entre recopier douze valeurs et servir ces pages nues.
      ⚠️ La copie est VÉRIFIÉE : web/test/legal.test.js relit jetons.css et
         compare chaque valeur. Si l'une dérive, le test tombe — sans quoi la
         dérive serait invisible jusqu'au jour où quelqu'un ouvre les CGU.

   MODE DE LECTURE. Ce sont des pages qu'on LIT, pas qu'on opère : la mesure
   de ligne prime sur la densité, l'interligne est plus généreux que dans
   l'application, et rien ne bouge. Aucune animation, aucun élément collant :
   quelqu'un qui cherche la clause du remboursement ne veut pas d'une barre
   qui le suit.
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local('IBM Plex Sans'), local('IBMPlexSans-Regular'),
       url('/polices/IBMPlexSans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
       url('/polices/IBMPlexSans-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local('IBM Plex Sans Condensed Bold'), local('IBMPlexSansCondensed-Bold'),
       url('/polices/IBMPlexSansCondensed-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local('IBM Plex Mono'), local('IBMPlexMono-Regular'),
       url('/polices/IBMPlexMono-Regular.woff2') format('woff2');
}

:root {
  /* Copie vérifiée de styles/jetons.css — voir l'avertissement en tête. */
  --noir:       #000000;
  --surface:    #0C0C0C;
  --trait:      #242424;
  --trait-doux: #151515;
  --encre:      #FFFFFF;
  --encre-2:    #9C9C9C;
  --encre-3:    #767676;
  --repere:     #D9530A;
  --repere-voile: rgba(217, 83, 10, 0.14);

  --police-texte: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-titre: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
  --police-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px;

  --rayon: 10px;
  --rayon-petit: 6px;

  /* 🔴 65 caractères, et c'est le seul jeton que ces pages ne partagent PAS
     avec l'application. Un écran d'application se parcourt ; des conditions
     générales se lisent en entier, ligne après ligne — au-delà de 75
     caractères l'œil perd le début de la ligne suivante, et sur un texte de
     six mille mots ça se paie en abandons. */
  --mesure-lecture: 65ch;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: var(--e-6) var(--e-4) var(--e-7);
  background: var(--noir);
  color: var(--encre-2);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.65;
  /* Pas de justification : sans césure, elle creuse des rivières blanches
     dans une colonne étroite, et le français en produit plus que l'anglais. */
  text-align: left;
}

/* --- La colonne ----------------------------------------------------------- */

header, main, footer {
  width: 100%;
  max-width: var(--mesure-lecture);
  margin-inline: auto;
}

/* --- L'en-tête ------------------------------------------------------------ */

header { padding-bottom: var(--e-5); }

/* Le logotype, à la même chasse que dans l'application. */
header > p:first-child a {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre);
  text-decoration: none;
}

h1 {
  margin: var(--e-5) 0 var(--e-3);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(28px, 7vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--encre);
  text-wrap: balance;
}

/* Le chapô : la phrase qui dit à quoi sert la page. */
header h1 + p {
  margin: 0;
  font-size: 17px;
  color: var(--encre-2);
}

/* --- La navigation juridique ---------------------------------------------- */

nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--trait);
  font-size: 14px;
}

/* Pas de soulignement dans la navigation : six liens soulignes cote a cote
   font une barre de bruit, et leur role est deja dit par leur place. */
nav a { color: var(--encre-3); text-decoration: none; }
nav a:hover { color: var(--encre); text-decoration: underline; text-decoration-color: var(--repere); }

/* --- Les titres ------------------------------------------------------------
   🔴 PLUS D'AIR AU-DESSUS QU'EN DESSOUS. Un titre appartient à ce qui le
      suit ; collé au paragraphe précédent, il se lit comme sa conclusion. */

h2 {
  margin: var(--e-7) 0 var(--e-3);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--encre);
}

h3 {
  margin: var(--e-6) 0 var(--e-2);
  font-weight: 600;
  font-size: 17px;
  color: var(--encre);
}

section:first-of-type h2 { margin-top: var(--e-5); }

/* --- Le corps -------------------------------------------------------------- */

p { margin: 0 0 var(--e-4); }

strong { color: var(--encre); font-weight: 600; }

a {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: var(--encre-3);
  text-underline-offset: 3px;
}

a:hover { text-decoration-color: var(--repere); }

ul, ol {
  margin: 0 0 var(--e-4);
  padding-left: var(--e-5);
}

li { margin-bottom: var(--e-2); }

li::marker { color: var(--encre-3); }

/* Les dates, les montants, les durées de conservation : ce sont des valeurs
   mesurées, et elles suivent la règle de l'application — chasse fixe. */
code, time, .mesure {
  font-family: var(--police-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  color: var(--encre);
}

/* --- Les tableaux (conservation des données, tarifs) ----------------------- */

table {
  width: 100%;
  margin: 0 0 var(--e-5);
  border-collapse: collapse;
  font-size: 15px;
}

th, td {
  padding: var(--e-3) var(--e-3) var(--e-3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--trait-doux);
}

th {
  font-weight: 600;
  color: var(--encre);
  border-bottom-color: var(--trait);
}

/* Un tableau plus large que l'écran défile dans SON cadre : le corps de la
   page ne défile jamais horizontalement. */
.table-cadre, main > div:has(> table) { overflow-x: auto; }

/* --- Les encarts ----------------------------------------------------------- */

blockquote, aside {
  margin: 0 0 var(--e-5);
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
}

blockquote > :last-child, aside > :last-child { margin-bottom: 0; }

/* --- Le pied --------------------------------------------------------------- */

footer {
  margin-top: var(--e-7);
  padding-top: var(--e-4);
  border-top: 1px solid var(--trait);
  font-size: 14px;
  color: var(--encre-3);
}

footer a { color: var(--encre-3); }

/* --- Les surfaces que le navigateur dessine à notre place ------------------
   Sélection, anneau de focus, ascenseur : personne ne les dessine, et c'est
   exactement ce qui fait qu'une page se lit comme assemblée plutôt que
   construite. */

::selection { background: var(--repere-voile); }

:focus-visible {
  outline: 2px solid var(--repere);
  outline-offset: 2px;
  border-radius: 2px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--trait); border-radius: 999px; }

/* --- Grand écran ------------------------------------------------------------
   La colonne ne s'élargit pas : 65 caractères restent 65 caractères. On donne
   seulement plus de marge au-dessus, pour que le texte ne colle pas au bord
   de la fenêtre. */
@media (min-width: 720px) {
  body { padding: var(--e-7) var(--e-5) 96px; }
}

/* --- Impression -------------------------------------------------------------
   Des conditions générales s'impriment, et parfois s'annexent à un dossier.
   Fond blanc, encre noire, adresses des liens dépliées : sur papier, un lien
   souligné qui ne dit pas où il mène ne sert à rien. */
@media print {
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  h1, h2, h3, strong, a, code, th { color: #000; }
  nav, footer a { color: #333; }
  a { text-decoration: none; }
  main a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  header, main, footer { max-width: none; }
  h2, h3 { break-after: avoid-page; }
  table, blockquote, aside { break-inside: avoid-page; }
}

/* --- Mouvement réduit --------------------------------------------------------
   Rien ne bouge sur ces pages, mais la règle est posée : elle vaut pour tout
   ce qu'on y ajoutera. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}