/* ============================================================
   May'Kilos — les pages légales.

   Une colonne de lecture, pas une mise en page. Ces textes se lisent
   rarement en entier et souvent en diagonale, à la recherche d'une
   réponse précise : la largeur de ligne, les titres et le sommaire
   comptent plus que le décor.

   65 caractères par ligne, la mesure qui fatigue le moins. Et un corps
   à 17 px : un texte qui engage ne se met pas en petit.
   ============================================================ */

.legal {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 64px) 0 96px;
}

.legal h1 {
  font: 800 clamp(30px, 4.4vw, 46px)/1.1 var(--mk-font);
  color: var(--mk-primary); letter-spacing: -1.6px; text-wrap: balance;
}
.legal .chapo {
  font: 400 19px/1.6 var(--mk-font); color: var(--mk-text);
  margin-top: 20px; text-wrap: pretty;
}

.legal h2 {
  font: 800 clamp(21px, 2.4vw, 26px) var(--mk-font);
  color: var(--mk-primary); letter-spacing: -.7px;
  margin-top: 52px; padding-top: 22px;
  border-top: 1px solid var(--mk-hairline);
  scroll-margin-top: 96px;      /* l'en-tête est collée : sans ça le titre passe dessous */
}
.legal h3 {
  font: 700 18px var(--mk-font); color: var(--mk-text);
  margin-top: 30px;
}
.legal p { font: 400 17px/1.7 var(--mk-font); color: var(--mk-text); margin-top: 16px; }
.legal p strong { color: var(--mk-primary); font-weight: 700; }
.legal a { color: var(--mk-primary); text-decoration: underline; }

/* ---------- Le sommaire ----------
   On vient ici pour une question précise. Sans lui, il faut parcourir
   tout le texte pour trouver le paragraphe qui répond. */
.sommaire {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 22px 26px; margin-top: 34px;
  box-shadow: var(--mk-shadow-card);
}
.sommaire h2 {
  font: 600 13px var(--mk-font); color: var(--mk-text-2);
  margin: 0; padding: 0; border: 0; letter-spacing: 0;
  text-transform: uppercase;
}
.sommaire ol { list-style: none; margin-top: 12px; counter-reset: s; }
.sommaire li { counter-increment: s; }
.sommaire a {
  display: flex; align-items: baseline; gap: 12px; min-height: 40px;
  font: 600 16px var(--mk-font); color: var(--mk-text); text-decoration: none;
}
.sommaire a::before {
  content: counter(s); flex: none; min-width: 20px;
  font: 700 13px var(--mk-font); color: var(--mk-text-2);
}
.sommaire a:hover { color: var(--mk-primary); }

/* ---------- Une fiche d'identité ou de définitions ---------- */
.fiche { margin-top: 18px; }
.fiche > div {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 8px 24px; padding: 14px 0;
  border-bottom: 1px solid var(--mk-hairline);
}
.fiche.large > div { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.fiche > div:last-child { border-bottom: 0; }
.fiche dt { font: 600 15px var(--mk-font); color: var(--mk-text-2); }
.fiche dd { font: 500 16px/1.55 var(--mk-font); color: var(--mk-text); }

@media (max-width: 600px) {
  .fiche > div, .fiche.large > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Les listes de oui et de non ----------
   Elles reprennent celles du reste du site, en plus aéré : ici chaque
   ligne est une phrase, pas un mot-clé. */
.legal .liste-oui, .legal .liste-non { margin-top: 18px; }
.legal .liste-oui li, .legal .liste-non li {
  font: 400 17px/1.6 var(--mk-font); margin-top: 12px;
}

/* ---------- Ce qui reste à compléter ----------
   Visible, et pas discrètement : une mention légale incomplète est un
   défaut de conformité, pas une note de chantier à oublier. */
.a-completer {
  background: var(--mk-refus-bg); color: var(--mk-refus-text);
  border-radius: var(--mk-r-card); padding: 16px 20px; margin-top: 18px;
  font: 600 16px/1.6 var(--mk-font);
}
.a-completer strong { color: inherit; }

/* Le rappel de la bêta, dans les conditions : c'est une bonne nouvelle
   pour le lecteur, pas un avertissement. */
.encart-beta {
  background: var(--mk-mint); color: var(--mk-mint-text);
  border-radius: var(--mk-r-card); padding: 18px 22px; margin-top: 20px;
  font: 400 17px/1.6 var(--mk-font);
}
.encart-beta strong { color: inherit; }

.maj { font: 400 14px var(--mk-font); color: var(--mk-text-2); margin-top: 40px; }