/* Pages légales : lecture longue, sobre, sur le même socle de marque.
   Aucun style de couleur en dur — tout vient des tokens « Sève ». */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(88px, 12svh, 140px) 24px clamp(72px, 10svh, 120px);
}
.legal__retour {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13.5px var(--font-sans);
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: clamp(28px, 4svh, 44px);
}
.legal__retour:hover { color: var(--text-1); }
/* ⚠ Les bascules only-light/only-dark de site.css sont en simple classe :
   cette feuille se charge après, donc toute règle de même poids les écrase.
   Le masquage doit être rétabli explicitement, sinon les deux logos rendent. */
.legal__logo { height: 34px; width: auto; display: block; margin-bottom: 26px; }
.legal__logo.only-dark { display: none; }
.dark .legal__logo.only-light { display: none; }
.dark .legal__logo.only-dark { display: block; }
.legal h1 {
  margin: 0 0 10px;
  font: 800 clamp(30px, 3.4vw, 42px)/1.06 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-1);
}
.legal__maj { margin: 0 0 clamp(30px, 4svh, 46px); font: 400 13px var(--font-mono); color: var(--text-2); }
.legal h2 {
  margin: clamp(34px, 4.6svh, 52px) 0 12px;
  font: 700 clamp(18px, 1.5vw, 21px)/1.25 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--text-1);
}
.legal h3 { margin: 26px 0 8px; font: 600 15.5px var(--font-sans); color: var(--text-1); }
.legal p, .legal li { font: 400 15.5px/1.65 var(--font-sans); color: var(--text-1); text-wrap: pretty; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--text-1); text-underline-offset: 3px; }
.legal a:hover { color: var(--color-forest); }
.legal dl { margin: 0 0 18px; display: grid; grid-template-columns: minmax(0, 210px) 1fr; gap: 8px 18px; }
.legal dt { font: 600 14px var(--font-sans); color: var(--text-2); }
.legal dd { margin: 0; font: 400 15px var(--font-sans); color: var(--text-1); }
.legal__note {
  margin: 26px 0 0; padding: 16px 18px;
  border: 1px solid var(--border-1); border-radius: var(--radius-tile);
  font: 400 14px/1.6 var(--font-sans); color: var(--text-2);
}
@media (max-width: 620px) {
  .legal dl { grid-template-columns: 1fr; gap: 2px 0; }
  .legal dt { margin-top: 10px; }
}


/* ── Page « À propos » : le mot du fondateur en tête ──────────────────────── */
.legal--apropos { max-width: 760px; }
.apropos__tete {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 40px);
  align-items: center;
  margin: clamp(24px, 3.4svh, 40px) 0 clamp(18px, 2.6svh, 30px);
}
.apropos__portrait {
  width: 100%;
  height: auto; /* sans ça l'attribut height du HTML fige la hauteur et le ratio est ignoré */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--text-1) 10%, transparent);
  display: block;
}
.apropos__mot {
  margin: 0;
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--text-1);
  text-wrap: pretty;
}
@media (max-width: 620px) {
  .apropos__tete { grid-template-columns: 1fr; gap: 18px; }
  .apropos__portrait { width: 168px; }
}