/* 📜 Les pages légales (/conditions, /confidentialite, /mentions-legales) —
   rendues au serveur par web/routes/pagesLegales.js, sans JavaScript.
   Une colonne de lecture, un sommaire, des ancres. Seuls les jetons de couleur
   de style.css : le mode sombre (html[data-appearance="dark"]) suit sans une
   ligne de plus. ⚠️ `--on-soft` pour les liens du texte, pas `--accent` : posé
   sur le fond sombre, le vert d'accent tombe sous le contraste lisible. */

.pl-barre .brand { text-decoration: none; }
.pl-outils {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}

/* 🌍 Le choix de la langue : de vrais liens (?lang=), lisibles sans script */
.pl-langues {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
}
.pl-langues a {
  font-family: "Quicksand", "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--text);
}
.pl-langues a[aria-current="true"] { background: var(--accent-soft); color: var(--on-soft); }
.pl-langues a:focus-visible,
.pl-documents a:focus-visible,
.pl-sommaire a:focus-visible,
.pl-section a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* La colonne : 860 px se lisent sans balayer l'écran d'un bord à l'autre */
.pl-doc { max-width: 860px; }

/* Les trois documents, en pastilles (celui qu'on lit est plein) */
.pl-documents { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-documents a {
  background: var(--accent-soft);
  color: var(--on-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 700;
}
.pl-documents a[aria-current="page"] { background: var(--accent); color: #fff; }

.pl-intro { font-size: 16px; color: var(--text-muted); line-height: 1.65; }
/* 🌐 L'avis d'une traduction (« la version française fait foi ») : discret mais
   lisible, avec le lien vers le texte de référence. */
.pl-avis-traduction {
  font-size: 14px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  overflow-wrap: anywhere;
}
.pl-avis-traduction a { color: var(--on-soft); text-decoration: underline; text-underline-offset: 2px; }

.pl-sommaire {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.pl-sommaire-titre { font-size: 16px; color: var(--heading); margin-bottom: 8px; }
.pl-sommaire ol { padding-left: 22px; columns: 2 260px; column-gap: 28px; }
.pl-sommaire li { margin: 3px 0; line-height: 1.45; break-inside: avoid; }
.pl-sommaire a { color: var(--on-soft); }

/* Une section visée par une ancre (#contester) : un peu d'air au-dessus.
   ⚠️ Pas la hauteur de la barre du haut : elle NE COLLE PAS sur ce site
   (`body { overflow-x: hidden }` dans style.css — mesuré le 14 oct. 2026 à
   375 px : barre à −9936 px une fois l'ancre atteinte). */
.pl-section { scroll-margin-top: 24px; }
.pl-section h2 { color: var(--heading); font-size: 20px; margin-bottom: 8px; }
/* `anywhere` : une PRÉCAUTION pour les valeurs réglées par l'équipe (un contact
   ou un hébergeur d'un seul tenant, sans espace). Les textes du JSON, eux, ne
   débordent pas sans elle (mesuré à 375 px, les trois pages). */
.pl-section p,
.pl-section li,
.pl-intro { line-height: 1.65; overflow-wrap: anywhere; }
.pl-section p + p,
.pl-section p + ul,
.pl-section ul + p,
.pl-section ul + ul { margin-top: 10px; }
.pl-section ul { padding-left: 22px; }
.pl-section li + li { margin-top: 6px; }
.pl-section a,
.pl-intro a { color: var(--on-soft); text-decoration: underline; text-underline-offset: 2px; }

.pl-pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-bottom: 10px; }
/* `--on-soft` comme `.footer a` (style.css) : `--text-muted` donnait 2,98:1 sur
   le fond clair, sous le seuil AA de 4,5:1 (mesuré le 14 oct. 2026). */
.pl-pied nav a { color: var(--on-soft); text-decoration: underline; text-underline-offset: 2px; }
.pl-pied nav a[aria-current="page"] { color: var(--text); }

@media (max-width: 560px) {
  /* 16 px de gouttière, comme le reste du site sur téléphone */
  .pl-doc { padding: 20px 16px 32px; }
  .pl-sommaire { padding: 14px 16px; }
  .pl-sommaire ol { columns: 1; }
  .pl-section h2 { font-size: 18px; }
}