/* =========================================================================
   French Aura — Pages légales (Mentions légales, CGV, Confidentialité,
   Conditions d'utilisation, Politique d'expédition)
   Chargé uniquement sur ces pages (voir inc/legal-pages.php)
   ========================================================================= */

/* .fa-container est une classe générique (index.php), réutilisée sur
   d'autres pages sans rapport — ce fichier n'étant chargé QUE sur les 5
   pages légales, cette règle ne les affecte pas. Dégage le header fixe
   (49px) ; même valeur que .fa-single-product/.fa-ot-page (130px). */
.fa-container {
  margin-top: 130px;
}

.fa-legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 0 60px;
  color: var(--color-text-1, #4b5563);
  font-size: 15px;
  line-height: 1.7;
}

.fa-legal .fa-legal__meta {
  color: var(--color-text-2, #6b7280);
  font-size: 13px;
  margin-bottom: 32px;
}

.fa-legal h2 {
  margin: 36px 0 12px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-heading, #111827);
}

.fa-legal h2:first-of-type {
  margin-top: 0;
}

.fa-legal p {
  margin: 0 0 14px;
}

.fa-legal ul {
  margin: 0 0 14px;
  padding-left: 20px;
  list-style: disc;
}

.fa-legal li {
  margin-bottom: 6px;
}

.fa-legal strong {
  color: var(--color-heading, #111827);
}

.fa-legal a {
  color: inherit;
  text-decoration: underline;
}

/* Repère visuel pour un champ pas encore renseigné dans le dashboard
   (Landing Page → Informations légales) */
.fa-legal-todo {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--color-red-2, #fee2e2);
  color: var(--color-red-1, #b91c1c);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  vertical-align: 1px;
}

@media (max-width: 768px) {
  .fa-legal {
    padding: 10px 16px 40px;
    font-size: 14px;
  }
  .fa-legal h2 {
    font-size: 18px;
  }
}