/* ============================================================
   Motionary, pages legales

   Mentions legales et politique de confidentialite. Aucune couleur
   en dur, tout vient des tokens de base.css, ces pages se recolorent
   donc avec la palette memorisee comme le reste du site.
   ============================================================ */

.lg-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:26px;padding-bottom:26px;flex-wrap:wrap}
.lg-top .brand-txt b{font-size:16px;letter-spacing:-.01em}
.lg-back{font-size:13px;color:var(--ink-2);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-s);padding:8px 14px;
  transition:border-color .18s ease,color .18s ease}
.lg-back:hover{color:var(--ink);border-color:var(--line-2)}

/* La colonne est bornee a 760px. Une ligne de texte legal plus large
   devient penible a suivre, et ces pages se lisent en entier. */
.lg{max-width:760px;padding-bottom:60px}
.lg h1{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.lg h2{font-size:16px;font-weight:650;letter-spacing:-.01em;margin:38px 0 12px;
  padding-top:22px;border-top:1px solid var(--line)}
/* Texte justifie, avec cesure automatique. Les deux vont ensemble. Sans
   cesure, une colonne de 760px en francais creuse des rivieres blanches
   entre les mots, les mots y etant longs et les articles rares. La cesure
   s'appuie sur lang="fr" declare sur la page. */
.lg p{font-size:14.5px;line-height:1.62;color:var(--ink-2);margin-bottom:12px;
  text-align:justify;text-justify:inter-word;
  -webkit-hyphens:auto;hyphens:auto}
.lg a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-2);transition:text-decoration-color .18s ease}
.lg a:hover{text-decoration-color:var(--accent)}

.lg-date{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:26px}
.lg-lead{font-size:16px;line-height:1.6;color:var(--ink);
  border-left:2px solid var(--accent);padding-left:16px;margin-bottom:8px}
.lg-see{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13.5px}

/* Deux colonnes sur large, une seule des que la place manque, sans quoi
   les valeurs se retrouvent ecrasees contre leur libelle. */
.lg dl{display:grid;grid-template-columns:210px 1fr;gap:10px 20px;
  margin:0 0 12px;font-size:14.5px}
.lg dt{color:var(--ink-3)}
.lg dd{margin:0;color:var(--ink)}
.lg dd.todo{color:var(--warn);font-family:var(--mono);font-size:12.5px;
  letter-spacing:.06em}

.lg table{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:13.5px}
.lg th{text-align:left;font-weight:650;color:var(--ink-3);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:0 14px 10px 0;
  border-bottom:1px solid var(--line)}
.lg td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);
  color:var(--ink-2);vertical-align:top}
.lg td code{font-family:var(--mono);font-size:12.5px;color:var(--accent);
  white-space:nowrap}

@media (max-width:620px){
  .lg dl{grid-template-columns:1fr;gap:3px 0}
  .lg dt{margin-top:10px}
  .lg h1{font-size:25px}
  /* Sur une colonne etroite la justification devient laide meme avec
     cesure, il reste trop peu de mots par ligne pour repartir le blanc. */
  .lg p{text-align:left;-webkit-hyphens:none;hyphens:none}
  /* La table des cles est le seul element a largeur contrainte de la page.
     motionary.customPalette en nowrap lui impose un plancher d'environ
     165px, auquel s'ajoute la colonne de contenu. On libere le nowrap
     plutot que d'attendre de savoir sur quel telephone ca casserait. */
  .lg td code{white-space:normal;overflow-wrap:anywhere}
  .lg th,.lg td{padding-right:10px}
}
@media (prefers-reduced-motion:reduce){
  .lg-back,.lg a{transition:none}
}