/* ============================================================================
   Lancely — la feuille des pages légales.
   ============================================================================
   🔴 POURQUOI CE FICHIER EXISTE, ET POURQUOI IL RECOPIE DES VALEURS.

      src/styles/jetons.css vit dans le bundle construit par Vite, avec un nom
      haché : une page HTML statique ne peut pas le lier. La copie est faite, et
      elle est VÉRIFIÉE par web/test/legal-jetons.test.js : chaque jeton recopié
      ici est comparé, caractère par caractère, à sa source.

   ⚠️ TOUTE MODIFICATION DE src/styles/jetons.css DOIT ÊTRE REPORTÉE ICI, ou le
      test échoue. C'est exactement ce qu'on veut.

   UN SEUL BLOC, COMME LA SOURCE : le thème est clair, seul, depuis le
   06/10/2026 (identité « Papier de sécurité »).

   MODE DE LECTURE. Ce sont des pages qu'on LIT : mesure de ligne étroite,
   interligne généreux, rien qui bouge, rien de collant.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/polices/BricolageGrotesque-latin-variable.woff2') format('woff2-variations');
}

:root {
  color-scheme: light;

  /* --- Couleurs ----------------------------------------------------------- */
  --fond: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F4F5F8;
  --encre: #0D1120;
  --encre-2: #4A5165;
  --encre-3: #626A7F;
  --trait: #DCE0E8;
  --trait-doux: #ECEEF3;
  --marque: #1665B8;
  --action: #1665B8;
  --sur-action: #FFFFFF;
  --information-voile: rgb(22 101 184 / 5%);
  --selection: rgb(22 101 184 / 16%);
  --lisere-haut: 0 1px 2px rgb(13 17 32 / 4%), 0 6px 18px -10px rgb(13 17 32 / 14%);

  /* --- Typographie -------------------------------------------------------- */
  --police-titre: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --police-texte: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --police-mesure: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --t-titre-1: clamp(2rem, 8.6vw, 3rem);
  --t-titre-2: 1.625rem;
  --t-titre-3: 1.1875rem;
  --t-texte: 1rem;
  --t-petit: .875rem;
  --t-legende: .8125rem;
  --t-menu: .75rem;
  --graisse-titre: 750;
  --interligne-serre: 1.02;
  --interligne-texte: 1.55;
  --chasse-titre: -.032em;
  --chasse-etiquette: .08em;

  /* --- Espace et géométrie ------------------------------------------------ */
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-7: 32px;
  --e-8: 48px;
  --gouttiere: 20px;
  --rayon-petit: 10px;
  --rayon: 16px;
  --rayon-grand: 24px;
  --trait-fin: 1px;
  --trait-fort: 2px;
  --largeur-page: 680px;
  --largeur-lecture: 65ch;
}

* { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  padding: 0 0 var(--e-8);
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--t-texte);
  line-height: var(--interligne-texte);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--chasse-titre);
  line-height: var(--interligne-serre);
}

h1 { font-size: var(--t-titre-1); }
h2 { font-size: var(--t-titre-2); }
h3 { font-size: var(--t-titre-3); }
p { margin: 0 0 var(--e-4); }
ul, ol { margin: 0 0 var(--e-4); padding-left: var(--e-6); }
li { margin-bottom: var(--e-2); }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--action); }

a:focus-visible, summary:focus-visible {
  outline: var(--trait-fort) solid var(--marque);
  outline-offset: 3px;
  border-radius: var(--rayon-petit);
}

.mesure {
  font-family: var(--police-mesure);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   L'en-tête : la marque, et la navigation entre les pages.
   -------------------------------------------------------------------------- */
.legal-entete {
  padding: var(--e-5) 0 var(--e-4);
  border-bottom: var(--trait-fin) solid var(--trait-doux);
  background: var(--surface);
}

.legal-entete > div { max-width: var(--largeur-page); margin: 0 auto; padding: 0 var(--e-5); }
.legal-pied { padding-left: var(--e-5); padding-right: var(--e-5); }

/* La marque des pages légales est celle de l'app : l'icône officielle (celle
   des slideshows, coins d'iPhone), puis le nom à l'encre. */
.legal-marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: var(--e-1);
  color: var(--encre);
  font-family: var(--police-titre);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.04em;
  text-decoration: none;
}
.legal-marque img { display: block; width: 28px; height: 28px; border-radius: 22.37%; }

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-4);
  font-size: var(--t-petit);
}

.legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--encre-2);
  text-decoration: none;
}
.legal-nav a:hover, .legal-nav a[aria-current='page'] { color: var(--encre); }
.legal-nav a[aria-current='page'] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--marque); }

/* --------------------------------------------------------------------------
   Le corps de page : une colonne, jamais plus large que la lecture.
   -------------------------------------------------------------------------- */
.legal-page { max-width: var(--largeur-page); margin: 0 auto; padding: 0 var(--e-5); }
.legal-page > * { max-width: var(--largeur-lecture); }

.legal-page > header { padding-top: var(--e-7); }
.legal-page h1 { margin-bottom: var(--e-3); }

.legal-date {
  color: var(--encre-2);
  font-size: var(--t-petit);
  margin-bottom: var(--e-6);
}

.legal-page section { margin-bottom: var(--e-7); }
.legal-page section h2 { margin-bottom: var(--e-3); }

/* Le sommaire : des liens, pas des cartes. */
.legal-sommaire {
  padding: var(--e-4) 0;
  border-top: var(--trait-fin) solid var(--trait-doux);
  border-bottom: var(--trait-fin) solid var(--trait-doux);
  font-size: var(--t-petit);
}

.legal-sommaire ol { margin: 0; }

/* L'essentiel : un document posé sur le papier, un filet, une ombre courte. */
.legal-resume {
  padding: var(--e-6) var(--e-5);
  background: var(--surface);
  border: var(--trait-fin) solid var(--trait);
  border-radius: var(--rayon-grand);
  box-shadow: var(--lisere-haut);
}

.legal-resume h2 { margin-bottom: var(--e-3); }
.legal-resume ul { margin-bottom: 0; }

/* Ce qui doit sauter aux yeux : une phrase sur une teinte de sécurité. */
.legal-souligne {
  padding: var(--e-4) var(--e-5);
  background: var(--information-voile);
  border: var(--trait-fin) solid var(--trait);
  border-radius: var(--rayon);
}

.legal-grille { display: grid; gap: var(--e-4); }

/* Les listes de conditions d'une garantie ou d'un contrat.
   🔴 ELLES SONT NUMÉROTÉES, ET LES AUTRES NON. Une liste de conditions
   cumulatives se cite (« la condition 3 ») : sans numéro, on ne peut pas en
   parler. Les listes d'exclusions, elles, restent à puces : ce sont des cas, pas
   des étapes. */
.legal-conditions { padding-left: var(--e-6); }
.legal-conditions li { margin-bottom: var(--e-3); }

@media (min-width: 720px) {
  .legal-grille--deux { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Le formulaire type de rétractation : copiable, lisible au téléphone.
   -------------------------------------------------------------------------- */
.legal-modele {
  padding: var(--e-5);
  background: var(--surface-2);
  border: var(--trait-fin) solid var(--trait);
  border-radius: var(--rayon);
  font-size: var(--t-petit);
  line-height: 1.7;
}

.legal-modele p { margin-bottom: var(--e-3); }
.legal-trait { height: var(--trait-fin); background: var(--trait); margin: var(--e-2) 0; }

/* --------------------------------------------------------------------------
   Le pied : le contact, et le rappel de la date d'effet.
   -------------------------------------------------------------------------- */
.legal-pied {
  max-width: var(--largeur-page);
  margin: var(--e-8) auto 0;
  border-top: var(--trait-fin) solid var(--trait-doux);
  color: var(--encre-2);
  font-size: var(--t-petit);
}

.legal-pied p { margin-bottom: var(--e-2); }
.legal-pied a { color: var(--encre); }