/* Pages legales. Elles heritent des jetons et de la barre de style.css, mais
   pas de sa mise en page : ce sont des documents, pas la vitrine. */

.legal {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gouttiere) clamp(3rem, 7vw, 5rem);
}
.legal h1 {
  margin: 0.6rem 0 clamp(1.75rem, 4vw, 2.5rem);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
}
.legal h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  /* Plus d'air au-dessus d'un titre qu'en dessous : l'ecart appartient a la
     frontiere entre deux parties, pas au couple titre-paragraphe. */
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet);
}
.legal p { margin: 0 0 1rem; color: var(--doux); max-width: 62ch; text-wrap: pretty; }
.legal a { color: var(--accent); text-underline-offset: 0.2em; }
.legal a:hover { text-decoration-thickness: 2px; }

/* Ce qui reste a renseigner doit se voir depuis l'autre bout de la piece :
   c'est la seule raison d'etre de ce surlignage, et il disparaitra avec les
   valeurs reelles. */
.arenseigner {
  background: #FFF3CF;
  box-shadow: 0 0 0 1px #E0C486;
  border-radius: 3px;
  padding: 0 4px;
  color: var(--encre);
}
.avertissement {
  background: #FFF7DF;
  border: 1px solid #E0C486;
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
  color: var(--encre) !important;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}