@layer ancien {
/* 61-legal.css — pages légales (SPEC § 6 type `legal`, § 8 « H1 + sections numérotées, colonne de 800 px ») : textes
   de CONTENU.md (mentions-legales, confidentialite), lot 4b. Le fond, la colonne de 800 px, la marge haute sous
   l'en-tête et les couleurs sur clair viennent de 07-sections.css (lot 2) ; surtitre → H1 18 px, H2 → P 24 px,
   P → P 16 px aussi (§ 4.2). Ici : l'écart avant chaque section numérotée, les liens (LIBELLE : « Paragraphe 15 px »,
   § 4.2), la mention de mise à jour. Pas de maquette pour ces pages : la spec seule (consigne du lot 4b).
   Sélecteurs bornés aux deux pages. */

/* Après le H1 : texte d'en-tête → contenu 64 px (§ 4.2) ; entre deux sections numérotées : 48 px. */
:is([data-page="mentions-legales"], [data-page="confidentialite"]) .section--legal .conteneur > h1 + h2 {
  margin-top: var(--espace-entete-contenu);
}

:is([data-page="mentions-legales"], [data-page="confidentialite"]) .section--legal .conteneur > p + h2 {
  margin-top: 48px;
}

/* Liens (LIBELLE) : style « Paragraphe 15 px » (§ 4.2), bleu des sous-titres sur clair (--sous-titre-sur-clair,
   4,9:1 sur --fond-clair), soulignés. Un lien cité dans une phrase garde sa place dans la phrase. */
:is([data-page="mentions-legales"], [data-page="confidentialite"]) .section--legal a {
  font-size: 15px;
  font-weight: 500; /* A-33 */
  line-height: 1.6;
  color: var(--sous-titre-sur-clair);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:is([data-page="mentions-legales"], [data-page="confidentialite"]) .section--legal a:hover {
  color: var(--titre-sur-clair);
}

/* Adresses et courriels longs : coupés plutôt que de déborder sur un téléphone. */
:is([data-page="mentions-legales"], [data-page="confidentialite"]) .section--legal .conteneur > :is(p, h1, h2) {
  overflow-wrap: anywhere;
}

/* Dernière mise à jour : séparée du texte (48 px), couleur discrète sur clair (5,5:1 sur --fond-clair). */
:is([data-page="mentions-legales"], [data-page="confidentialite"]) .section--legal .conteneur > .legal__maj {
  margin-top: 48px;
  color: var(--texte-discret-sur-clair);
}

}