/* ==========================================
   MENTIONS LEGALES
   ==========================================

   Page de texte pure : aucune couleur de marque en dur, uniquement des tokens
   (cf. DesignTokenTest). Le gabarit reprend `.page-header` de style.css, donc
   le titre est deja aligne sur celui des huit apps. */

.legal-page {
  max-width: 76ch;
}

/* Bandeau d'avertissement tant qu'un champ obligatoire porte la sentinelle.
   Reprend la palette semantique `--warning`, pas la palette de marque : c'est
   un etat, pas une identite. */
.legal-warning {
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
  color: var(--warning-text);
}

.legal-warning-title {
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.3rem;
}

/* Puces retirees : dans un conteneur flex, le marqueur de liste se pose au
   debut de la LIGNE et non de l'item, donc les puces venaient se coller au mot
   suivant. Les champs sont separes par leur cadre, pas par un marqueur. */
.legal-warning ul {
  margin: 0.6rem 0 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.legal-warning li code {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
}

.legal-warning code,
.legal-todo {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* La valeur manquante se voit, sans crier plus fort que le texte autour. */
.legal-todo {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px dashed var(--warning);
  border-radius: var(--radius-sm);
  color: var(--warning-text);
}

.legal-section {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

.legal-section h2 {
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.legal-section p {
  margin-top: 0.7rem;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Deux colonnes intitule / valeur, qui retombent en pile sous 560px. La
   premiere colonne est en `max-content` plafonne : les intitules sont courts et
   connus, une colonne fixe les laisserait flotter. */
.legal-dl {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 0.5rem var(--space-sm);
  margin-top: 0.7rem;
}

.legal-dl dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-top: 0.15rem;
}

.legal-dl dd {
  margin: 0;
  color: var(--text-primary);
}

@media (max-width: 560px) {
  .legal-dl {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .legal-dl dd {
    margin-bottom: 0.7rem;
  }
}