/* ==========================================================================
   ARCHIVERSE — pages légales (CGU, mentions légales)

   Un document, pas une application : une colonne de texte qu'on lit du haut
   vers le bas, et un sommaire pour y revenir. Rien d'autre.

   Les couleurs viennent des jetons que components/header_v2.php pose sur
   toutes les pages — --bg-content, --card-bg, --text-main, --text-muted,
   --card-border, --accent-main. Ce sont les seuls disponibles partout, et ce
   sont eux qui basculent avec le thème : cette feuille n'a donc aucune règle
   de mode sombre à tenir, et ne peut pas se désaccorder du reste du site. La
   charte de Search (tools/assets/css/style.css) n'est chargée que sur trois
   sections, un document juridique est au bas de toutes.

   La mesure suit la barre de navigation et le pied de page : même largeur
   maximale, même gouttière. Le texte, lui, s'arrête bien avant — soixante-dix
   signes par ligne, au-delà l'œil perd la ligne suivante en revenant à la
   marge.
   ========================================================================== */

.legal {
  /* L'encre d'accent de la page.

     --accent-main suit la SECTION, et pour l'accueil c'est un bleu de FOND,
     pas un bleu d'encre : mesure, il donne 3,3 pour 1 sur le fond clair et
     3,65 sur le fond sombre — sous les 4,5 qu'exige un texte courant. Un
     document juridique se lit, et se lit en entier.

     Ce sont donc les deux bleus d'accent de la charte, ceux de Search :
     4,74 pour 1 en clair, 7,42 en sombre. Meme famille, meme identite, et
     lisibles. */
  --legal-encre: #4d6fb3;

  background: var(--bg-content, #fafafa);
  color: var(--text-main, #1d1d37);
  transition: background-color var(--theme-dur, .22s) var(--theme-ease, ease),
              color var(--theme-dur, .22s) var(--theme-ease, ease);
}

.legal__wrap {
  width: 100%;
  max-width: var(--nav-maxw, 1320px);
  margin-inline: auto;
  padding-inline: var(--nav-gut, clamp(1rem, 2.3vw, 2.5rem));
  /* L'air du haut. Il venait de la barre du site, qui n'est plus posee ici :
     sans lui, le lien de sortie collait au bord de la fenetre, a zero pixel.
     De quoi le decoller, et rien de plus — c'est un document, il commence
     ou il commence. */
  padding-block-start: 1.5rem;
  box-sizing: border-box;
}

html[data-theme="dark"] .legal,
body[data-theme="dark"] .legal {
  --legal-encre: #85a3e0;
}

/* ---- se rendre a une section, et non y etre teleporte -------------------- */

/* Le sommaire fait sauter d'un bout du document a l'autre. Sans transition,
   on ne sait pas ou l'on vient d'atterrir : le texte a change, la page ne
   semble pas avoir bouge, et il faut relire le titre pour se resituer. Le
   defilement montre le chemin — de combien on a descendu, et dans quel sens.

   La regle porte sur html, l'element qui defile. Elle ne deborde pas sur le
   reste du site : cette feuille n'est chargee que par les pages legales.

   Qui a demande moins d'animations en est dispense — un long defilement
   automatique donne le mal de coeur a une partie des gens, et ce n'est pas
   une preference decorative. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---- le bandeau ---------------------------------------------------------- */

/* La sortie du document.

   Elle reprend le « Retour aux logiciels » des fiches : chevron, encre de
   second plan, teinte de la page au survol. Les quelques lignes sont recopiées
   plutôt que la feuille de Search chargée pour elles — mille lignes pour un
   lien, sur une page qui n'a rien d'autre à leur emprunter. */
.legal__sortie {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.5rem;
  font-size: .85rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--theme-dur, .22s) var(--theme-ease, ease);
}

.legal__sortie:hover,
.legal__sortie:focus-visible {
  color: var(--legal-encre);
}

/* Précédé du lien de sortie, l'en-tête ne remet pas son propre retrait.

   Les deux s'ajoutaient : les 1,5 rem sous le lien, puis les 2,4 à 4 rem
   au-dessus du titre — jusqu'à cent pixels de vide entre « Aller vers
   Archiverse » et « Conditions générales d'utilisation », deux lignes qui se
   suivent. L'écart est maintenant celui du lien, et lui seul.

   Le retrait de l'en-tête reste pour le cas où rien ne le précède : il ouvre
   alors le document. */
.legal__sortie + .legal__tete {
  padding-top: 0;
}

.legal__tete {
  padding-top: clamp(2.4rem, 5vw, 4rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--card-border, #ddd);
}

.legal__sur {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--legal-encre);
  margin-bottom: .7rem;
}

.legal__titre {
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Radio Canada Big', sans-serif;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  /* Le titre garde sa mesure propre : sur un écran de 1320 px il n'a aucune
     raison de traverser toute la page. */
  max-width: 22ch;
}

.legal__chapo {
  margin: .9rem 0 0;
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-muted, #666);
}

.legal__date {
  margin: 1.2rem 0 0;
  font-size: .84rem;
  color: var(--text-muted, #666);
}

/* ---- le corps : sommaire à gauche, texte à droite ------------------------ */

.legal__corps {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  padding-block: clamp(2rem, 4vw, 3.2rem) clamp(3rem, 6vw, 5rem);
}

/* Le sommaire ne paraît que s'il y a la place de le poser à côté sans rétrécir
   le texte. En dessous, il se lirait comme une liste de liens en travers du
   chemin — et le document est assez court pour se parcourir au pouce. */
@media (min-width: 1000px) {
  .legal__corps {
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
  }
}

.legal__sommaire {
  display: none;
}

@media (min-width: 1000px) {
  .legal__sommaire {
    display: block;
    position: sticky;
    /* Une marge de confort, et rien de plus.

       Il y avait ici la hauteur de la barre du site : elle restait en haut de
       l'écran sur cette page, et le sommaire devait se ranger dessous. Elle
       s'en va maintenant avec le haut de page, comme partout ailleurs — le
       creux de soixante-dix pixels qu'on lui réservait ne cachait plus rien,
       il ne faisait que descendre le sommaire. */
    top: 1.2rem;
  }
}

.legal__sommaire-titre {
  margin: 0 0 .7rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted, #666);
}

.legal__sommaire ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sommaire;
}

.legal__sommaire li + li {
  margin-top: .1rem;
}

.legal__sommaire a {
  display: block;
  padding: .3rem .5rem;
  border-radius: 8px;
  font-size: .88rem;
  line-height: 1.35;
  color: var(--text-muted, #666);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.legal__sommaire a:hover,
.legal__sommaire a:focus-visible {
  color: var(--text-main, #1d1d37);
  background: var(--card-bg, #fff);
}

/* ---- le texte ------------------------------------------------------------ */

.legal__texte {
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.72;
}

.legal__section + .legal__section {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Le numéro est dans le HTML et non en :before : il fait partie du texte —
   « au sens de l'article 4 » se dit d'un article numéroté, et un numéro posé
   par la feuille de style ne se copie pas, ne s'imprime pas toujours, et ne se
   lit pas à voix haute. */
.legal__titre2 {
  margin: 0 0 .8rem;
  font-family: 'Bricolage Grotesque', 'Radio Canada Big', sans-serif;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  /* Un titre visé par le sommaire ne se colle pas au bord : il s'arrête un peu
     plus bas, pour qu'on voie qu'il y a quelque chose au-dessus. C'était la
     hauteur de la barre fixe plus cette marge ; la barre partie, la marge
     reste — c'est elle qui rendait le saut lisible, pas le creux. */
  scroll-margin-top: 1.5rem;
}

.legal__titre3 {
  margin: 1.6rem 0 .5rem;
  font-family: 'Bricolage Grotesque', 'Radio Canada Big', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main, #1d1d37);
}

.legal__texte p {
  margin: 0 0 .9rem;
}

.legal__texte ul {
  margin: 0 0 .9rem;
  padding-left: 1.1rem;
}

.legal__texte li {
  margin-bottom: .35rem;
}

.legal__texte strong {
  font-weight: 700;
}

.legal__texte a {
  color: var(--legal-encre);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* .legal__note a été retirée.

   C'était un encadré — cadre arrondi, fond de carte, filet d'accent — posé au
   milieu de la section 3.2. Seul objet encadré de toute la page, il ressemblait
   à une alerte d'interface tombée dans un contrat, et il redisait en cadre ce
   que le titre au-dessus disait déjà en mots.

   Ce que dit cette section, c'est qui répond de quoi : deux parties, deux
   engagements. C'est donc une paire, comme les mentions légales plus bas —
   voir .legal__fiche--parties. */

/* ---- les paires : un intitulé, ce qui lui répond ------------------------- */

.legal__fiche {
  margin: 0;
  padding: 0;
  display: grid;
  gap: .1rem;
}

@media (min-width: 560px) {
  .legal__fiche {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: .55rem 1.2rem;
  }
}

.legal__fiche dt {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted, #666);
  padding-top: .15rem;
}

.legal__fiche dd {
  margin: 0 0 .8rem;
}

@media (min-width: 560px) {
  .legal__fiche dd {
    margin-bottom: 0;
  }
}

/* Une partie qui s'engage n'est pas une rubrique d'état civil : elle porte
   l'encre de la page, quand un intitulé de mention reste en gris. */
.legal__fiche--parties {
  margin: 1.1rem 0 1.3rem;
}

.legal__fiche--parties dt {
  color: var(--legal-encre);
}

/* ---- à l'impression ------------------------------------------------------ */

/* Un document juridique s'imprime. Ce qui sert à naviguer ne sert plus à rien
   sur du papier, et le texte reprend toute la page. */
@media print {
  .legal__sommaire,
  .main-menu,
  .sitefooter,
  .barre-mode {
    display: none !important;
  }

  .legal__corps {
    display: block;
    padding: 0;
  }

  .legal__texte {
    max-width: none;
  }

  .legal {
    background: #fff;
    color: #000;
  }
}