/* ==========================================================================
   Percer : les pages légales.
   17 septembre 2026.

   Mentions légales et politique de confidentialité. Une colonne de lecture,
   rien d'autre : ces pages se lisent, elles ne vendent pas. Aucune valeur
   neuve, tout vient des jetons.
   ========================================================================== */

.legal {
  padding-block: calc(var(--rythme-section) + var(--spacing) * 64) var(--rythme-section);
}

.legal-colonne {
  max-width: calc(var(--spacing) * 760);
  margin-inline: auto;
}

.legal-retour {
  display: inline-block;
  margin-bottom: var(--rythme-intra);
  font-size: var(--corps-sm);
  color: var(--gris-lisible);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.legal-retour:hover { color: var(--noir); }

/* Le H1 est une phrase courte : le corps display tient sur une ou deux
   lignes et garde le dégradé de titre du système. */
.legal h1 {
  margin: 0;
  background: var(--gradient-titre);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.legal-maj {
  margin-top: var(--rythme-intra);
  font-size: var(--corps-sm);
  color: var(--gris-lisible);
}

.legal-chapo {
  margin-top: var(--rythme-intra);
  font-size: var(--corps-lg);
  line-height: 1.5;
  color: var(--noir);
}

/* Le sommaire n'est affiché que sur la politique, qui est longue. */
.legal-sommaire {
  margin-top: var(--rythme-bloc);
  padding: calc(var(--spacing) * 24) calc(var(--spacing) * 28);
  border: 1px solid var(--gris-grille);
  border-radius: var(--r-lg);
  background: var(--blanc);
}

.legal-sommaire p {
  margin: 0 0 calc(var(--spacing) * 12);
  font-weight: 600;
}

.legal-sommaire ol {
  margin: 0;
  padding-left: 1.4em;
  columns: 2;
  column-gap: calc(var(--spacing) * 32);
  font-size: var(--corps-sm);
}

.legal-sommaire li { break-inside: avoid; padding-block: calc(var(--spacing) * 3); }

.legal-sommaire a { color: var(--noir); }

.legal-bloc {
  margin-top: var(--rythme-bloc);
  scroll-margin-top: calc(var(--spacing) * 110);
}

/* Le H2 garde son dégradé de niveau, mais pas le corps de section de la home :
   un texte juridique se découpe en sous-parties, pas en temps de page. */
.legal-bloc h2 {
  margin-bottom: calc(var(--spacing) * 20);
  font-size: var(--titre-md);
  line-height: 1.15;
}

.legal-bloc h3 {
  margin: calc(var(--spacing) * 28) 0 calc(var(--spacing) * 8);
  font-size: var(--titre-sm);
}

.legal-bloc p,
.legal-bloc li {
  color: var(--gris-lisible);
}

.legal-bloc p { margin: 0 0 calc(var(--spacing) * 14); }

.legal-bloc ul {
  margin: 0 0 calc(var(--spacing) * 14);
  padding-left: 1.2em;
}

.legal-bloc li { padding-block: calc(var(--spacing) * 3); }

.legal-bloc strong { color: var(--noir); font-weight: 600; }

.legal-bloc a { color: var(--noir); text-underline-offset: .2em; }

.legal-bloc a:hover { text-decoration-thickness: 2px; }

/* La fiche d'identité : un terme, sa valeur. */
.legal-fiche {
  margin: 0;
  border: 1px solid var(--gris-grille);
  border-radius: var(--r-lg);
  background: var(--blanc);
  overflow: hidden;
}

.legal-fiche div {
  display: grid;
  grid-template-columns: minmax(0, 14em) minmax(0, 1fr);
  gap: calc(var(--spacing) * 16);
  padding: calc(var(--spacing) * 14) calc(var(--spacing) * 20);
}

.legal-fiche div + div { border-top: 1px solid var(--gris-grille); }

.legal-fiche dt { font-weight: 600; color: var(--noir); }

.legal-fiche dd { margin: 0; color: var(--gris-lisible); }

/* Le tableau des traitements. Il défile de côté sur un écran étroit plutôt
   que de pousser la page. */
.legal-tableau {
  overflow-x: auto;
  border: 1px solid var(--gris-grille);
  border-radius: var(--r-lg);
  background: var(--blanc);
  margin-bottom: calc(var(--spacing) * 14);
}

.legal-tableau table {
  width: 100%;
  min-width: calc(var(--spacing) * 640);
  border-collapse: collapse;
  font-size: var(--corps-sm);
}

.legal-tableau th,
.legal-tableau td {
  padding: calc(var(--spacing) * 12) calc(var(--spacing) * 16);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gris-grille);
}

.legal-tableau tr:last-child td { border-bottom: 0; }

.legal-tableau th { color: var(--noir); font-weight: 600; background: var(--gris-clair); }

.legal-tableau td { color: var(--gris-lisible); }

.legal-tableau td:first-child { color: var(--noir); font-weight: 500; }

/* Un texte à écrire, dans une ligne : il se voit, sans casser la phrase. */
.legal .a-ecrire-ligne {
  padding: 0 .3em;
  border: 1px dashed var(--gris-texte);
  border-radius: var(--r-xs);
  color: var(--noir);
  background: var(--gris-clair);
}

.legal .a-ecrire { margin-block: calc(var(--spacing) * 14); }

/* Sur ces pages, la barre est posée d'emblée : il n'y a pas de hero sous elle. */

@media (max-width: 767px) {
  .legal-sommaire ol { columns: 1; }
  .legal-fiche div { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 4); }
}