/* ============================================================
   Satoshi : SERVIE EN LOCAL (assets/fonts/), et non plus par fontshare.
   ------------------------------------------------------------
   Les .woff2 sont les fichiers EXACTS que servait cdn.fontshare.com :
   le rendu est identique au pixel. Trois raisons de les avoir rapatriés :

   1. VITESSE. La feuille venait de api.fontshare.com et les polices de
      cdn.fontshare.com : deux origines de plus à résoudre (DNS + TCP +
      TLS) AVANT le premier texte peint, et la 2e n'était découverte
      qu'une fois la 1re téléchargée puis analysée. En local, la connexion
      est déjà ouverte et les fichiers sont préchargés dès la 1re ligne
      du <head>.
   2. VIE PRIVÉE. Chaque visite envoyait l'adresse IP du visiteur à un
      tiers américain, sans consentement et sans que la page
      « Confidentialité » ne le mentionne. C'est exactement ce qui a valu
      des condamnations à des sites utilisant Google Fonts en Europe.
   3. CHAÎNE D'APPROVISIONNEMENT. Un CDN tiers dans la CSP, c'est un
      domaine de plus autorisé à injecter du style dans la page. Il est
      maintenant retiré de la CSP : tout est en 'self'.

   Si une graisse doit être ajoutée un jour, télécharger le .woff2 depuis
   fontshare, le poser ici, et ajouter un bloc identique.
   ============================================================ */
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   basarc : pages légales (mentions, CGV, confidentialité)
   ------------------------------------------------------------
   Ces pages ne sont PAS une annexe grise : ce sont les mêmes pages que le
   site, et un visiteur qui y arrive doit le voir avant d'avoir lu un mot.
   La feuille reprend donc les dispositifs du site, un pour un, et n'en
   invente aucun :

     · la marque en tête, à la taille exacte du header (32px) ;
     · l'en-tête à trois temps œilleton / titre / méta, celui de toutes
       les sections de la landing ;
     · les grands chiffres filigranés de « Ce qui bloque » pour numéroter
       les sections (.legal__num = .blocker__num, transposé) ;
     · les filets et les libellés en petites capitales du décompte de
       valeur pour la fiche d'identité (dl) ;
     · le liseré noir + pastille débordante, la façon dont le site dit
       « regardez ici », pour le bandeau de brouillon ;
     · le jaune beurre, seul point chaud de la charte, pour ce qui reste
       à écrire (.todo). Il ne sert QU'À ÇA ici, et disparaît de la page
       le jour où le dernier passage est renseigné.

   Ce qui n'est PAS repris : le header collant, le menu, le pied de page
   jaune, les animations. Un document légal se lit et s'imprime, il ne se
   met pas en scène.
   ============================================================ */
:root {
  /* Jetons du site, aux mêmes valeurs : c'est la même charte, pas une
     variante. (Ils étaient auparavant légèrement plus sombres ici, ce qui
     faisait deux gris de corps de texte pour un seul site.) */
  --ink:    #131315;   /* titres */
  --muted:  #6b6f76;   /* corps de texte */
  --faint:  #9aa0a8;   /* œilletons, libellés, méta */
  --line:   #e7e7ea;   /* filets */
  --black:  #101012;   /* pastilles, liserés d'emphase */
  --beurre: #efe2a2;   /* seul point chaud : ce qui reste à renseigner */
  --sol:    #e9e9ea;   /* le gris sur lequel la carte de page est posée */
  --r-card: 22px;      /* rayon des surfaces qui PORTENT (= .page, .plate--two) */
  --r-comp: 16px;      /* rayon des composants posés dessus (= .plan, .quote) */

  /* Ombre des surfaces mises en avant, reprise telle quelle de styles.css
     (--ombre-hl) : filet de contact + nappe large et très douce. */
  --ombre-hl: 0 1px 2px rgba(16, 16, 18, .04),
              0 20px 44px rgba(16, 16, 18, .08);

  /* On déclare le schéma de couleurs de la page. Sans cette ligne, `color-scheme`
     vaut `normal` : le navigateur ne sait pas que la page est conçue en clair et,
     poste en thème sombre, il peut assombrir de lui-même ce qu'il dessine : les
     barres de défilement, les commandes de formulaire, et sur Android Chrome le
     thème sombre automatique qui INVERSE toute la page. Le site n'a aucune règle
     prefers-color-scheme : cette déclaration ne change donc rien à son rendu, elle
     ferme seulement la porte à une inversion décidée par le navigateur. */
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01", "cv01";
  background: var(--sol);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessibilité : focus visible, à l'identique du site. */
a:focus-visible {
  outline: 2px solid #4c8dff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===================== LA CARTE DE PAGE =====================
   Blanche sur gris, rayon --r-card : exactement le traitement de .page dans
   le tunnel et de la plaque claire de la landing. Sur téléphone elle occupe
   tout l'écran (ni marge, ni rayon), comme le reste du site. */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 56px;
  background: #fff;
  /* `svh` et non `vh` : sur mobile, `100vh` est la hauteur du viewport barre
     d'adresse REPLIÉE, c'est-à-dire toujours plus grande que ce qu'on voit à
     l'arrivée sur la page. La carte blanche dépassait donc systématiquement
     sous la ligne de flottaison, et une page légale courte se terminait par un
     bas de carte qu'il fallait aller chercher au scroll pour rien.
     `svh` est la hauteur barre visible : la carte fait exactement l'écran. */
  min-height: 100svh;
}
@media (min-width: 480px) {
  .legal {
    margin: 24px auto;
    min-height: 0;
    border-radius: var(--r-card);
    box-shadow: var(--ombre-hl);
    padding: 36px 40px 64px;
  }
}

/* ===================== EN-TÊTE DE PAGE =====================
   La marque d'abord, le chemin de retour ensuite : c'est l'ordre du header
   du site, à plat. Le logo est à 32px, sa mesure exacte là-bas. */
.legal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.legal__logo { flex: 0 0 auto; display: inline-flex; }
.legal__logo svg { width: 32px; height: 32px; display: block; }

.legal .legal__back {
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  text-decoration: none;
  transition: color .2s ease;
}
.legal .legal__back:hover { color: var(--ink); }

/* ===================== TITRE =====================
   Œilleton / titre / méta : le gabarit de toutes les sections du site. */
.legal .legal__eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.legal h1 {
  margin: 0 0 16px;
  font-size: 28px;
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
/* La date de mise à jour est une MENTION, pas un sous-titre : elle prend la
   forme d'une puce cernée, la seule forme fermée de la charte en dehors des
   boutons. Ainsi elle ne concurrence pas le titre au-dessus d'elle. */
.legal .legal__updated {
  /* `flex` + `fit-content` et non `inline-flex` : la puce doit se serrer sur
     son texte SANS devenir un élément en ligne. En ligne, elle se retrouve
     dans une boîte anonyme dont l'interligne s'ajoute sous elle et dont la
     marge basse ne fusionne plus avec celle du titre suivant : cela ouvrait
     110px de blanc entre la date et la première section, au lieu de 40. */
  display: flex;
  width: fit-content;
  align-items: center;
  margin: 0 0 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ===================== SECTIONS =====================
   Le numéro quitte le texte du titre pour devenir un chiffre filigrané dans
   la marge : c'est le dispositif de « Ce qui bloque » et de « 60 jours, 4
   étapes », aux mêmes valeurs (46px / rgba(19,19,21,.14) là-bas, un cran
   plus petit ici où les sections s'enchaînent beaucoup plus serré).
   Conséquence utile : les articles se repèrent à l'œil au défilement, sans
   avoir à lire une seule ligne. */
.legal h2 {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 14px;
  margin: 40px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.legal__num {
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgba(19, 19, 21, .14);
  font-variant-numeric: tabular-nums;
}
/* Comme .blocker__body sur le site : sans `min-width: 0`, un titre long ne
   se coupe pas et déborde de sa colonne de grille. */
.legal__sec { min-width: 0; }

/* Section sans numéro (l'annexe des CGV) : le titre reprend toute la largeur
   plutôt que de laisser une colonne vide, qui se lirait comme un chiffre
   manquant. */
.legal h2.legal__sec--plain { grid-template-columns: 1fr; }

/* ===================== CORPS ===================== */
.legal p,
.legal li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}
.legal p { margin: 0 0 12px; }
.legal p:last-child { margin-bottom: 0; }

.legal strong { color: var(--ink); font-weight: 700; }

/* Liens : soulignés d'un trait discret qui se ferme au survol. Le site ne
   souligne nulle part son corps de texte, mais un document légal a besoin
   que ses renvois se voient sans avoir à les survoler. */
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(19, 19, 21, .26);
  transition: text-decoration-color .2s ease;
}
.legal a:hover { text-decoration-color: var(--ink); }
/* Les liens de chrome (en-tete, pied de page) ne sont pas des renvois de
   lecture : ils ne prennent pas le souligne du corps de texte. */
.legal__head a,
.legal__foot a { text-decoration: none; }

/* Listes : puce ronde en gris clair au lieu du disque du navigateur, dont la
   taille et la position ne se règlent pas. Alignée sur la 1re ligne du texte
   par `top: .62em`, calculé sur l'interligne ci-dessus. */
.legal ul { list-style: none; margin: 12px 0 16px; padding: 0; }
.legal ul li { position: relative; margin: 0 0 8px; padding-left: 18px; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint);
}
.legal ol { margin: 12px 0 16px; padding-left: 20px; }
.legal ol li { margin: 0 0 8px; }

/* ===================== FICHE D'IDENTITÉ (dl) =====================
   Libellé en petites capitales, valeur en pleine encre, un filet par ligne :
   c'est le décompte « Ce que ça coûterait ailleurs » de la page tarifs, au
   mot près. Empilé sur téléphone, en deux colonnes dès qu'il y a la place :
   une adresse postale complète ne tient pas dans une colonne de 375px. */
.legal dl {
  display: grid;
  align-items: baseline;
  margin: 18px 0 4px;
}
.legal dt {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.legal dd {
  margin: 4px 0 0;
  padding-bottom: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
@media (min-width: 600px) {
  .legal dl { grid-template-columns: 210px 1fr; column-gap: 20px; }
  .legal dt { grid-column: 1; padding-bottom: 14px; }
  .legal dd {
    grid-column: 2;
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }
}

/* ===================== BANDEAU DE BROUILLON =====================
   Liseré noir + pastille débordante : le dispositif « regardez ici » du site
   (.plan--reco, .opt--do, .grt__item), ombre comprise. Il était jusqu'ici en
   ambre, une couleur que la charte n'emploie nulle part. En monochrome il
   n'est pas moins visible : c'est le seul élément cerné de noir de la page.
   Il doit disparaître avec le dernier passage à renseigner. */
.legal .draft {
  position: relative;
  margin: 0 0 40px;
  padding: 20px 22px;
  border: 1px solid var(--black);
  border-radius: var(--r-comp);
  background: #fff;
  box-shadow: var(--ombre-hl);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.legal .draft::before {
  content: "Brouillon";
  position: absolute;
  top: -11px;
  left: 20px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--black);
  color: #fff;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.legal .draft strong { color: var(--ink); font-weight: 700; }

/* Passage à renseigner. Jaune beurre du pied de page : la charte n'a qu'un
   point chaud, autant que ce soit celui-là. `box-decoration-break: clone`
   parce que plusieurs de ces marques font trois lignes : sans lui, le
   rembourrage et les coins arrondis ne se posent qu'aux deux extrémités et
   le surlignage se casse au milieu. */
.todo {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--beurre);
  color: #4a3c00;
  font-weight: 500;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ===================== PIED DE PAGE =====================
   Copyright d'un côté, portes d'entrée légales de l'autre : la barre fine du
   pied de page du site, sans son fond jaune. */
.legal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 52px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.legal .legal__copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--faint);
}
.legal__nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legal__nav a {
  font-size: 12px;
  line-height: 1.3;
  color: var(--faint);
  text-decoration: none;
  transition: color .2s ease;
}
.legal__nav a:hover { color: var(--ink); }

/* ===================== IMPRESSION =====================
   Un document légal finit sur papier ou en PDF plus souvent qu'on ne le
   croit : la carte redevient une page, et ce qui ne sert qu'à naviguer
   disparaît. Les 2 surfaces porteuses de sens gardent leur fond imprimé :
   sans quoi la pastille « Brouillon » sortirait blanc sur blanc et les
   passages à renseigner ne se distingueraient plus du texte validé. */
@media print {
  body { background: #fff; }
  .legal {
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .legal__back,
  .legal__nav { display: none; }
  .legal h2 { break-after: avoid; }
  .legal p,
  .legal li,
  .draft { break-inside: avoid; }
  .draft, .draft::before, .todo {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}