/* =====================================================
   JOYCE MARTENS PHOTOGRAPHIE — Pages légales & 404
   ===================================================== */

.legal-header {
  max-width: 820px; margin: 0 auto;
  padding: 1.5rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.legal-logo { font-family: var(--font-title); font-weight: 300; font-size: 1.1rem; letter-spacing: 0.16em; text-transform: uppercase; }
.legal-back { font-size: 0.8rem; color: var(--color-muted-text); }
.legal-back:hover { color: var(--color-text); }

.legal-page {
  max-width: 820px; margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter);
}
.legal-page h1 { margin-bottom: 0.5rem; }
.legal-page .legal-date { font-size: 0.85rem; color: var(--color-muted); margin-bottom: 2.5rem; }
.legal-page h2 { font-size: 1.35rem; margin: 2.2rem 0 0.7rem; }
.legal-page p { color: var(--color-muted-text); margin-bottom: 1rem; max-width: 68ch; }
.legal-page a { color: var(--color-accent); text-decoration: underline; }
/* Sous 300 px SEULEMENT (#95, C127) : l'adresse e-mail est un seul « mot » (≈ 250 px) qui élargissait
   la page à 278 px à 260. `anywhere` ne la coupe que si elle ne tient pas ; sans borne, il la
   retirerait du calcul de largeur minimale à toutes les largeurs. */
@media (max-width: 299.98px) {
  .legal-page a[href^="mailto:"] { overflow-wrap: anywhere; }
}
.legal-page ul { margin: 1rem 0 0 1.2rem; display: grid; gap: 0.5rem; }
.legal-page li { color: var(--color-muted-text); }

.legal-footer {
  max-width: 820px; margin: 0 auto;
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  font-size: 0.8rem; color: var(--color-muted);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; justify-content: space-between;
}
.legal-footer nav { display: flex; gap: 0.6rem; align-items: center; }
.legal-footer a { color: var(--color-muted-text); }
.legal-footer a:hover { color: var(--color-accent); }