/* ContraGo - page Responsabilité : typographie de contenu texte + habillage
   aligné sur la DA du reste du site. Repris de deux motifs déjà utilisés sur
   la home (home.css) plutôt que d'un style de "card" propre à cette page :
   - .about-marked-heading (repère coloré au-dessus du titre, sans boîte)
   - .about-diff-band (bandeau à taches floues pour LE point qui doit ressortir) */

.legal { padding-bottom: 56px; }
.legal-inner { max-width: 680px; margin: 0 auto; padding: 0 32px; }

/* Bandeau d'intro : mêmes taches floues que .ap-intro (a-propos.css) pour
   rattacher visuellement cette page au reste du site plutôt qu'à un fond plat.
   padding-top 144px = 64px d'origine + 80px de clearance pour le header
   flottant fixed (shared.css), qui ne pousse plus le contenu qui suit dans le
   flux - même valeur que .ap-intro. */
.legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  padding: 144px 0 56px;
  margin-bottom: 8px;
}
.legal-hero .legal-inner { position: relative; z-index: 1; }
.legal-hero::before,
.legal-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.legal-hero::before {
  width: clamp(180px, 22vw, 300px);
  aspect-ratio: 1;
  top: -25%;
  left: 4%;
  background: #378ADD;
  opacity: 0.14;
  filter: blur(clamp(36px, 5vw, 64px));
}
.legal-hero::after {
  width: clamp(200px, 24vw, 320px);
  aspect-ratio: 1;
  bottom: -35%;
  right: 6%;
  background: #3D5A73;
  opacity: 0.12;
  filter: blur(clamp(40px, 5vw, 68px));
}

.legal-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 10px;
}

.legal h1 {
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 18px;
}

.legal-lead {
  font-size: 1.05rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}

/* Un point = un repère coloré + un titre + un paragraphe, à plat (pas de
   boîte/bordure/fond) - même logique que .about-closing-block sur la home. */
.legal-point { margin-top: 56px; }
.legal-marked-heading::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 999px;
  margin-bottom: 16px;
}
.legal-point h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--color-primary);
  margin: 0 0 12px;
}
.legal-point p { line-height: 1.65; margin: 0; }

/* Le point qui doit ressortir (confidentialité) : bandeau à taches floues,
   repris à l'identique de .about-diff-band (home.css) - mêmes couleurs fixes
   #378ADD/#3D5A73 sur #EEF2F5 (fond toujours clair, indépendant du thème
   sombre, pour rester cohérent avec la home). */
.legal-diff-band {
  position: relative;
  overflow: hidden;
  background: #EEF2F5;
  margin-top: 56px;
  padding: 48px 32px;
  border-radius: 28px;
  text-align: center;
}
.legal-diff-band::before,
.legal-diff-band::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.legal-diff-band::before {
  width: clamp(180px, 22vw, 300px);
  aspect-ratio: 1;
  top: -25%;
  left: -6%;
  background: #378ADD;
  opacity: 0.26;
  filter: blur(clamp(36px, 5vw, 64px));
}
.legal-diff-band::after {
  width: clamp(200px, 24vw, 320px);
  aspect-ratio: 1;
  bottom: -35%;
  right: 8%;
  background: #3D5A73;
  opacity: 0.2;
  filter: blur(clamp(40px, 5vw, 68px));
}
.legal-diff-inner { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; }
.legal-diff-inner h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
  color: #3D5A73;
  margin: 0 0 12px;
}
.legal-diff-inner p {
  margin: 0;
  color: #3D5A73;
  font-size: 1.02rem;
  line-height: 1.55;
}

@media (max-width: 560px) {
  .legal-hero { padding-top: 120px; }
  .legal-diff-band { padding: 36px 24px; }
}