/* ===========================================================================
   joris-dce.fr — les deux pages légales, 19 septembre 2026

   Elles étaient restées dans l'ancien univers : vert néon, caractères
   Orbitron, coins à vingt six pixels et rayures diagonales. Le jour où
   l'accueil est passé en encre et bleu, un visiteur qui cliquait sur
   « mentions légales » changeait de site.

   Elles chargent désormais la même feuille que l'accueil, et ce fichier ne
   garde que ce qui leur est propre : la colonne de sommaire et la mise en
   page en deux colonnes. Toutes les couleurs viennent de premium.css.
   =========================================================================== */

.legal-main {
  width: min(62rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 0 4rem;
}

.legal-hero { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }

.legal-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.legal-hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0.4rem 0 0.8rem;
}

.legal-hero p { max-width: 58ch; color: var(--encre-douce); margin: 0; }

/* L'encart qui avoue quelque chose : une réserve, une limite. */
.legal-warning {
  border-left: 3px solid var(--bleu);
  background: var(--creux);
  padding: 0.9rem 1.1rem;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  color: var(--encre);
  margin-top: 1.4rem;
}

.legal-grid { display: grid; grid-template-columns: 14rem 1fr; gap: 1.4rem; }

.legal-card {
  background: var(--feuille);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-grand);
}

.legal-nav { position: sticky; top: 5rem; align-self: start; padding: 0.6rem; }

.legal-nav a {
  display: block;
  padding: 0.55rem 0.7rem;
  color: var(--encre-douce);
  text-decoration: none;
  border-radius: var(--rayon);
  font-size: 0.92rem;
  font-weight: 600;
}

.legal-nav a:hover,
.legal-nav a:focus-visible { color: var(--encre); background: var(--creux); }

.legal-content { padding: clamp(1.4rem, 4vw, 2.4rem); }

.legal-content section + section {
  border-top: 1px solid var(--trait);
  margin-top: 2rem;
  padding-top: 2rem;
}

.legal-content h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  line-height: 1.15;
  margin: 0 0 0.6rem;
}

.legal-content p,
.legal-content li { color: var(--encre-douce); line-height: 1.75; max-width: 68ch; }
.legal-content p { margin: 0 0 1.1rem; }
.legal-content li + li { margin-top: 0.45rem; }
.legal-content a { color: var(--bleu-texte); font-weight: 600; }
.legal-content strong { color: var(--encre); }

.legal-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }

.legal-links a {
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 0.55rem 1rem;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--feuille);
}

.legal-links a:hover { border-color: var(--bleu); color: var(--bleu-texte); }

@media (max-width: 760px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-nav { position: static; display: flex; overflow: auto; gap: 0.2rem; }
  .legal-nav a { white-space: nowrap; }
}