/* ==========================================================================
   Politique de confidentialite

   Seule page interne de la v2. Le jumeau rendait ce texte brut, sans habillage
   ni gouttiere, parce que le site d'origine ne lui applique aucune classe.
   Ici on lui donne le minimum vital : le conteneur centre du site, une mesure
   de lecture bornee et le meme rythme typographique que le reste de la page
   d'accueil. Aucun autre habillage, pas de navigation ni de pied de page.
   ========================================================================== */

.legal {
  padding-top: 64px;
  padding-bottom: 96px;
  background-color: var(--white);
}

/* Lien de retour pose au-dessus du titre, en petite capitale discrete : c'est
   la seule sortie de la page, elle doit se voir sans concurrencer le titre. */
.legal__retour {
  display: inline-block;
  margin-bottom: var(--sp-6);
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--grey-texte);
  text-decoration: none;
  border-bottom: 1px solid var(--trait-fort);
  transition: color var(--transition) ease, border-color var(--transition) ease;
}

.legal__retour:hover {
  color: var(--ink-strong);
  border-bottom-color: var(--ink-strong);
}

.legal__titre {
  margin-bottom: var(--sp-7);
}

/* Le texte legal est un seul bloc de plusieurs milliers de caracteres, sans
   paragraphes : la mesure de lecture doit donc etre serree, sinon la ligne
   depasse cent caracteres et le bloc devient illisible. */
.legal__texte {
  max-width: 68ch;
  font-size: var(--t-petit);
  line-height: 25px;
  color: var(--ink-soft);
}

/* Le texte d'origine contient deux liens dont le libelle est l'URL complete,
   colle au mot precedent, ce qui forme un mot insecable d'environ 343px. Sous
   360px de fenetre il deborde : la coupure est autorisee la, et seulement la,
   pour ne pas modifier le rendu aux largeurs normales. */
@media screen and (max-width: 479px) {
  .legal__texte {
    overflow-wrap: break-word;
  }
}

/* base.css impose a { color: inherit } pour les liens habilles du site. Dans un
   texte juridique les liens doivent rester reconnaissables comme des liens. */
.legal__texte a {
  color: var(--vert-texte);
  text-decoration: underline;
}

/* Les intertitres du texte d'origine sont des <strong> qui englobent aussi les
   deux <br> qui les suivent. Les passer en inline-block enfermerait ces sauts
   de ligne dans une boite et creuserait un retrait au debut de chaque
   paragraphe : ils restent donc en flux. */
.legal__texte strong {
  font-weight: 500;
  color: var(--ink-strong);
}