/* TooMee — pages légales (mentions, confidentialité, CGU).
 *
 * Feuille **autonome**, comme `toomee-page.css` : rien n'est partagé entre
 * les deux, et rien n'est repris de `site.css`, qui habille le studio. Tout
 * est préfixé `tl-` — `tm-` appartient à la page produit, et deux feuilles
 * qui se partageraient un préfixe finiraient par se marcher dessus.
 *
 * **Aucune police web**, comme la page produit : Helvetica Neue, la pile
 * système d'Apple. Et **aucune graisse au-dessus de 400** hors des titres,
 * pour la même raison — le contraste vient de la taille et des gris.
 *
 * Un seul point de rupture, 760 px, écrit mobile d'abord.
 */

:root {
  --tl-ink: #1d1d1f;
  --tl-grey: #6e6e73;
  --tl-surface: #ffffff;
  --tl-surface-grey: #f5f5f7;
  --tl-divider: #d2d2d7;
  --tl-link: #0066cc;

  --tl-pad-x: 22px;
  --tl-col: 720px;
}

@media (min-width: 760px) {
  :root { --tl-pad-x: 60px; }
}

/* Le thème sombre suit le réglage du visiteur, comme la page produit. */
@media (prefers-color-scheme: dark) {
  :root {
    --tl-ink: #f5f5f7;
    --tl-grey: #a1a1a6;
    --tl-surface: #000000;
    --tl-surface-grey: #1c1c1e;
    --tl-divider: #3a3a3c;
    --tl-link: #2997ff;
  }
}

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

html { scroll-behavior: smooth; }
.tl-page [id] { scroll-margin-top: 66px; }

body.tl-page {
  margin: 0;
  background: var(--tl-surface);
  color: var(--tl-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Le mot d'évitement ne se voit qu'au clavier — il ne doit pas être
   `display: none`, qui le retirerait aussi de l'ordre de tabulation. */
.tl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--tl-ink);
  color: var(--tl-surface);
  text-decoration: none;
}
.tl-skip:focus { left: 8px; top: 8px; z-index: 100; }

/* ===== Barre ===== */

.tl-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--tl-surface);
  border-bottom: 1px solid var(--tl-divider);
}

.tl-bar__inner {
  max-width: var(--tl-col);
  margin: 0 auto;
  padding: 0 var(--tl-pad-x);
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 760px) {
  .tl-bar__inner { height: 46px; }
}

.tl-bar__home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.tl-bar__word { font-size: 15px; letter-spacing: -0.01em; }

/* La marque est un **tracé**, jamais l'astérisque typographique : celui-ci
   se cale en haut de son cadratin et paraît deux fois trop petit. Même
   dessin que `tm-mark` sur la page produit, mais indépendant d'elle. */
.tl-mark svg { display: block; }
.tl-mark path {
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  fill: none;
}

.tl-bar__lang { font-size: 13px; color: var(--tl-grey); }
.tl-bar__lang a { color: var(--tl-grey); text-decoration: none; }
.tl-bar__lang a:hover { color: var(--tl-ink); }
.tl-bar__lang a[aria-current] { color: var(--tl-ink); }

/* ===== Corps ===== */

.tl-main {
  max-width: var(--tl-col);
  margin: 0 auto;
  padding: 48px var(--tl-pad-x) 72px;
}

@media (min-width: 760px) {
  .tl-main { padding-top: 72px; }
}

.tl-main h1 {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
}

@media (min-width: 760px) {
  .tl-main h1 { font-size: 44px; }
}

.tl-lede {
  margin: 0 0 32px;
  color: var(--tl-grey);
  font-size: 19px;
}

.tl-main h2 {
  margin: 40px 0 10px;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.tl-main p,
.tl-main li { color: var(--tl-ink); }

.tl-main p { margin: 0 0 14px; }

.tl-main ul { margin: 0 0 14px; padding-left: 20px; }
.tl-main li { margin-bottom: 8px; }

.tl-main strong { font-weight: 600; }

.tl-main a { color: var(--tl-link); text-decoration: none; }
.tl-main a:hover { text-decoration: underline; }

.tl-main section { border-top: 1px solid var(--tl-divider); padding-top: 4px; }
.tl-main section:first-of-type { border-top: 0; }

/* ===== Pied ===== */

.tl-footer {
  border-top: 1px solid var(--tl-divider);
  background: var(--tl-surface-grey);
}

.tl-footer__inner {
  max-width: var(--tl-col);
  margin: 0 auto;
  padding: 28px var(--tl-pad-x) 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: var(--tl-grey);
}

@media (min-width: 760px) {
  .tl-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.tl-footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.tl-footer__links a { color: var(--tl-grey); text-decoration: none; }
.tl-footer__links a:hover { color: var(--tl-ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}