/* PyRobloxMaker — les PAGES LÉGALES (mentions, CGV, confidentialité, rétractation).

   POURQUOI UNE FEUILLE À PART : ces pages ne se lisent pas comme une fiche
   produit. Elles demandent une mesure de ligne courte (74 caractères, au-delà
   l'œil perd le fil), des titres qui découpent, et une mise en garde qu'on ne
   peut pas rater. Les laisser dans `objet.css` ne servait à rien : les pages
   légales ne la chargeaient pas, et les styles ne s'appliquaient donc jamais.
*/

/* ── les PAGES LÉGALES ───────────────────────────────────────────────────────
   Des pages de texte long, faites pour être LUES : mesure de ligne courte, titres
   clairs, et une mise en garde visible quand une information manque encore. Un
   texte juridique illisible ne protège personne. */
.page-legale { max-width: 100%; }
.page-legale .enveloppe { max-width: 74ch; }
.page-legale h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: .6rem 0 .8rem;
}
.page-legale .chapo {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--encre-doux);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: var(--filet);
}
.page-legale h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 2.4rem 0 .7rem;
  color: var(--encre);
}
.page-legale p, .page-legale li {
  font-size: .97rem;
  line-height: 1.72;
  color: var(--encre-doux);
}
.page-legale ul, .page-legale ol { margin: .6rem 0 1rem; padding-left: 1.3rem; }
.page-legale li { margin-bottom: .5rem; }
.page-legale b { color: var(--encre); }
.page-legale a { color: var(--rouge); text-decoration: underline; text-underline-offset: 2px; }
.page-legale code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 2px;
  padding: .1em .35em;
}
/* la mise en garde : un bloc qu'on ne peut pas rater */
.page-legale .avert {
  margin: 0 0 2rem;
  padding: 1.3rem 1.5rem;
  border-radius: 3px;
  background: #fdf3ef;
  border: 1px solid #e8c9bd;
  border-left: 4px solid var(--rouge);
}
.page-legale .avert h2 {
  margin: 0 0 .6rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rouge-fonce);
}
.page-legale .avert p { font-size: .95rem; margin: 0 0 .7rem; }
.page-legale .avert p:last-child { margin-bottom: 0; }
/* ce qui reste a completer : visible, jamais masque */
.page-legale .a-completer {
  color: var(--rouge-fonce);
  font-style: italic;
  background: #fdf3ef;
  padding: .1em .4em;
  border-radius: 2px;
}
.page-legale .fiche-tech { margin: 1rem 0 1.6rem; }

/* Les couples libellé / valeur des pages légales (SIRET, hébergeur, garanties).
   Sans cette règle le tableau restait empilé, valeur rejetée à la ligne. */
.page-legale .fiche-tech { margin: 1rem 0 1.8rem; border-top: var(--filet); }
.page-legale .fiche-tech > div {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 1.2rem;
  padding: .7rem 0;
  border-bottom: var(--filet);
  align-items: baseline;
}
.page-legale .fiche-tech dt {
  font: 600 .7rem/1.5 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre-faible);
}
.page-legale .fiche-tech dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--encre-doux);
}
@media (max-width: 700px) {
  .page-legale .fiche-tech > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}