/* =============================================================
   arbusteo — pages légales (mentions légales, confidentialité)
   S'appuie sur site.css (tokens, header, footer, .wrap, .eyebrow…)
   et n'ajoute que la mise en page « document » : une colonne de
   lecture étroite, une hiérarchie de titres calme, des blocs de
   coordonnées lisibles.

   Le corps juridique reste en français quelle que soit la langue
   choisie (traduire du juridique n'aurait aucune valeur) : un
   bandeau .legal-en-note s'affiche uniquement en EN pour l'expliquer.
   ============================================================= */

/* ---------- HERO -------------------------------------------------------- */
.legal-hero {
  position: relative; overflow: hidden;
  padding: 150px 0 clamp(40px, 5vw, 64px);
  background:
    radial-gradient(1100px 560px at 80% -12%, rgba(213,234,176,.42), transparent 60%),
    var(--cream-light);
}
.legal-hero .wrap { position: relative; z-index: 1; }
.legal-hero-inner { max-width: 820px; }
.legal-hero .eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.legal-hero .eyebrow .material-symbols-outlined { font-size: 18px; }
.legal-title {
  margin-top: 18px;
  font-weight: 700; letter-spacing: -1px;
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05;
  color: var(--green-title); text-wrap: balance;
}
.legal-hero .lead { margin-top: 22px; max-width: 62ch; }

/* date de dernière mise à jour — pastille discrète */
.legal-stamp {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px; padding: 8px 16px 8px 12px;
  border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
.legal-stamp .material-symbols-outlined { font-size: 18px; color: var(--olive); }

/* bandeau « ce document n'existe qu'en français » — visible en EN seulement */
.legal-en-note { display: none; }
html[data-lang="en"] .legal-en-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 28px; max-width: 62ch;
  padding: 16px 20px; border-radius: var(--r-md);
  background: var(--ocre-bg); border: 1px solid #f0dcbe;
  font-size: 15px; line-height: 1.55; color: #4e2f00;
}
html[data-lang="en"] .legal-en-note .material-symbols-outlined {
  font-size: 20px; color: var(--ocre); flex: none; margin-top: 1px;
}

/* ---------- SOMMAIRE ---------------------------------------------------- */
.legal-toc {
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: clamp(22px, 3vw, 30px);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.legal-toc h2 {
  font-size: 13px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--green-dark);
  margin-bottom: 16px;
}
.legal-toc ol {
  margin: 0; padding: 0; list-style: none;
  counter-reset: toc;
  display: grid; gap: 2px;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 10px; border-radius: var(--r-sm);
  font-size: 16px; line-height: 1.4; color: var(--ink);
  /* soulignement discret : l'affordance ne repose pas que sur la couleur */
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: background .2s var(--ease), color .2s var(--ease),
              text-decoration-color .2s var(--ease);
}
.legal-toc a::before {
  content: counter(toc) ".";
  flex: none; min-width: 1.4em;
  font-weight: 700; color: var(--olive);
}
.legal-toc a:hover {
  background: rgba(123,142,92,.10); color: var(--green-deep);
  text-decoration-color: var(--green-deep);
}

/* ---------- CORPS DU DOCUMENT ------------------------------------------- */
.legal-doc { max-width: 74ch; margin: 0 auto; }

/* décalage d'ancre : le header est fixe (72 px) */
.legal-doc section { scroll-margin-top: 96px; }
.legal-doc section + section { margin-top: clamp(44px, 5vw, 68px); }

.legal-doc h2 {
  font-weight: 700; letter-spacing: -0.3px;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2;
  color: var(--green-title); text-wrap: balance;
}
.legal-doc h2 + p, .legal-doc h2 + ul, .legal-doc h2 + .legal-card { margin-top: 18px; }

.legal-doc h3 {
  margin-top: clamp(28px, 3vw, 38px);
  font-weight: 600; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.3;
  color: var(--green-dark);
}
.legal-doc h3 + p, .legal-doc h3 + ul, .legal-doc h3 + .legal-card { margin-top: 14px; }

.legal-doc p {
  font-size: 17px; line-height: 1.7; color: var(--ink-soft);
}
.legal-doc p + p { margin-top: 14px; }
.legal-doc strong { color: var(--ink); font-weight: 600; }

/* listes à puces feuille */
.legal-doc ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 10px;
}
.legal-doc ul li {
  position: relative; padding-left: 26px;
  font-size: 17px; line-height: 1.65; color: var(--ink-soft);
}
.legal-doc ul li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--olive);
}
.legal-doc ul + p, .legal-doc p + ul { margin-top: 16px; }

/* liens en prose — le reset de site.css les rend invisibles autrement.
   Volontairement limité au texte courant : le sommaire et les boutons de
   renvoi ont leur propre traitement. */
.legal-doc p a[href],
.legal-doc ul li a[href] {
  color: var(--green-deep); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(46,93,52,.35);
  transition: text-decoration-color .2s var(--ease);
}
.legal-doc p a[href]:hover,
.legal-doc ul li a[href]:hover { text-decoration-color: var(--green-deep); }

/* bloc de coordonnées / identité — carte sobre */
.legal-card {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.legal-card + .legal-card { margin-top: 16px; }
.legal-card .legal-card-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--green-dark);
  margin-bottom: 16px;
}
.legal-card .legal-card-title .material-symbols-outlined { font-size: 19px; color: var(--olive); }

/* paires libellé / valeur */
.legal-dl { margin: 0; display: grid; gap: 12px; }
.legal-dl > div { display: grid; gap: 2px; }
@media (min-width: 620px) {
  .legal-dl > div { grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; }
}
.legal-dl dt {
  font-size: 14px; font-weight: 600; letter-spacing: .2px;
  color: var(--green-dark);
}
.legal-dl dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.legal-dl dd a[href] {
  color: var(--green-deep); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(46,93,52,.35);
}
.legal-dl dd a[href]:hover { text-decoration-color: var(--green-deep); }

/* adresse postale multi-lignes */
.legal-doc address { font-style: normal; }

/* renvoi vers l'autre document légal */
.legal-crosslink {
  margin-top: clamp(36px, 4vw, 52px);
  display: flex; flex-wrap: wrap; gap: 12px;
}