/* ============================================================
   davylheureux.fr — Pages légales (mentions-legales, confidentialite,
   cgu, plan-du-site). Colonne de lecture sur fond sombre + WebGL, voile
   très léger pour la lisibilité (pas de cartouche). Pattern proche du
   récit /livre. Intertitres en cyan #00E5FF, corps blanc cassé.
   ============================================================ */

.legal-read {
  position: relative;
  isolation: isolate;
  max-width: 800px;
  width: 90%;
  margin: clamp(56px, 8vw, 96px) auto clamp(72px, 10vw, 120px);
  padding: clamp(36px, 4.5vw, 64px) clamp(8px, 2vw, 32px);
  color: var(--ink);
}
.legal-read::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(5,5,5,0)    0%,
    rgba(5,5,5,0.32) 4%,
    rgba(5,5,5,0.32) 96%,
    rgba(5,5,5,0)    100%);
  pointer-events: none;
}

/* Tête : titre + label de version */
.legal-read h1 {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 10px;
}
.legal-version {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 clamp(40px, 5vw, 56px);
}

/* Intertitres : label cyan (h2) + sous-section (h3) */
.legal-read h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: clamp(40px, 5vw, 56px) 0 16px;
  max-width: none;
}
.legal-read h2:first-of-type { margin-top: 0; }
.legal-read h3 {
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 700;
  color: var(--ink);
  margin: 24px 0 8px;
  letter-spacing: -0.005em;
}

/* Paragraphes : confort de lecture */
.legal-read p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1.2em;
}
.legal-read p:last-child { margin-bottom: 0; }
.legal-read strong { color: var(--ink); font-weight: 600; }
.legal-read a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(0,229,255,0.5);
  text-underline-offset: 3px;
}
.legal-read a:hover { text-decoration-color: var(--accent); }

/* Listes sobres (puces "·" cyan) */
.legal-read ul { list-style: none; padding: 0; margin: 0 0 1.2em; }
.legal-read ul li {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.75;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
  margin-bottom: 0.4em;
}
.legal-read ul li::before {
  content: "\00B7";
  position: absolute;
  left: 6px;
  color: var(--accent);
  font-weight: 700;
}

/* Tableau d'identité (label / valeur) pour les mentions */
.legal-id { margin: 0 0 1.6em; }
.legal-id dt {
  color: var(--ink-muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  margin-top: 14px;
}
.legal-id dt:first-child { margin-top: 0; }
.legal-id dd {
  color: var(--ink-soft);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  margin: 4px 0 0;
}

/* Plan du site : groupes (titre cyan + liste de liens) */
.sitemap-group { margin: clamp(32px, 4vw, 48px) 0; }
.sitemap-group ul li::before { content: ""; }
.sitemap-group ul li { padding-left: 0; }
.sitemap-group ul li a {
  display: inline-block;
  padding: 4px 0;
}
.sitemap-articles ul li { font-size: clamp(15px, 1.1vw, 17px); }

@media (max-width: 760px) {
  .legal-read {
    padding: 28px 0;
    margin: clamp(40px, 8vw, 64px) auto clamp(56px, 10vw, 80px);
  }
  .legal-read h1 { font-size: clamp(28px, 9vw, 42px); }
}