/* Chez Berna — mise en page des pages légales (mentions, CGV, confidentialité, allergènes).
   S'appuie sur styles.css (tokens + polices) déjà chargé avant ce fichier. */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body, 'Jost', sans-serif);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

/* En-tête */
.legal-header {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  padding: 20px 24px;
}
.legal-header-in {
  max-width: 920px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.legal-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.legal-brand img { width: 46px; height: 46px; }
.legal-brand b { font-family: var(--font-display, 'Cormorant Garamond', serif); font-weight: 600; font-size: 22px; color: var(--text-display-on-inverse); }
.legal-back {
  font-size: 14px; color: var(--berna-gold-300); text-decoration: none;
  border: 1px solid var(--berna-line-on-inverse); border-radius: 999px; padding: 8px 16px;
}
.legal-back:hover { background: rgba(237,227,200,0.08); }

/* Corps */
main.legal {
  max-width: 920px; margin: 0 auto; padding: 40px 24px 80px;
}
.legal h1 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 700; font-size: clamp(30px, 5vw, 44px); color: var(--text-display);
  margin: 12px 0 6px;
}
.legal .maj { color: var(--text-subtle); font-size: 14px; margin: 0 0 32px; }
.legal h2 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600; font-size: 24px; color: var(--berna-green-700);
  margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--berna-line-gold);
}
.legal h3 { font-size: 16px; font-weight: 600; color: var(--text-body); margin: 20px 0 6px; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.7; color: var(--text-body); }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--accent); }

/* Champ à compléter par le restaurant */
.todo {
  background: rgba(185,139,47,0.12);
  border: 1px dashed var(--berna-line-gold-strong);
  color: var(--berna-gold-700);
  border-radius: 6px; padding: 1px 7px; font-size: 14px; font-weight: 600;
  /* nowrap faisait déborder la page sur mobile (SIRET, TVA…) :
     la puce passe à la ligne, le liseré est reproduit sur chaque ligne. */
  white-space: normal;
  overflow-wrap: break-word;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.note {
  background: var(--surface-paper);
  border-left: 3px solid var(--accent-gold);
  border-radius: 8px; padding: 14px 18px; margin: 18px 0; font-size: 14.5px;
}
.legal-foot {
  border-top: 1px solid var(--berna-line-green); margin-top: 40px; padding-top: 18px;
  font-size: 13px; color: var(--text-subtle);
  display: flex; gap: 8px 20px; flex-wrap: wrap; justify-content: space-between;
}
.legal-foot a { color: var(--text-muted); text-decoration: none; }
.legal-foot a:hover { color: var(--accent); }

/* Allergènes — grille */
.allergen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.allergen-grid div { background: var(--surface-card); border: 1px solid var(--berna-line-gold); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
table.legal-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
table.legal-table th, table.legal-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--berna-line-green); vertical-align: top; }
table.legal-table th { color: var(--berna-green-700); font-weight: 600; }


/* 15/09/2026 — cibles tactiles : liens du pied et du texte à 24 px de haut (WCAG 2.5.8). */
.legal-foot a, .legal p a, .legal li a { display: inline-block; padding: 3px 0; }