/* ============================================================
   ✨ LUNANOVA LEGAL — PRESTIGE UNIFIÉ
   Mentions légales · CGV · Confidentialité
============================================================ */

/* -------------------------
   🎨 VARIABLES
-------------------------- */
:root {
  --night-deep: #1f0c00;
  --night-mid: #2b1a0e;
  --night-soft: #3a2515;

  --gold-main: #e6d69e;
  --gold-soft: rgba(230,214,158,0.55);
  --gold-faint: rgba(230,214,158,0.16);

  --text-main: #FFF;
  --text-soft: rgba(255,255,255,0.74);
  --text-muted: rgba(255,255,255,0.55);

  --glass-1: rgba(31,12,0,0.68);
  --glass-2: rgba(43,26,14,0.60);

  --shadow-deep:
    0 30px 90px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

* { box-sizing: border-box; }

/* ============================================================
   🌑 SHELL GLOBAL
============================================================ */
.legal-shell {
  width: 100%;
  padding:
    clamp(32px, 5vw, 70px)
    0
    clamp(90px, 12vw, 150px);

  background:
    radial-gradient(1200px 520px at 50% -20%, rgba(230,214,158,0.12), transparent 62%),
    radial-gradient(900px 420px at 50% 120%, rgba(230,214,158,0.10), transparent 72%),
    linear-gradient(180deg, var(--night-mid), var(--night-deep));
}

/* Variante CGV & Confidentialité (entrée plus claire) */
.legal-shell--cgv,
.legal-shell--confidentiality {
  background:
    radial-gradient(1300px 560px at 50% -22%, rgba(230,214,158,0.14), transparent 64%),
    radial-gradient(1000px 460px at 50% 120%, rgba(230,214,158,0.12), transparent 74%),
    linear-gradient(180deg, var(--night-soft), var(--night-deep));
}

/* ============================================================
   🧊 BOÎTE PRINCIPALE
============================================================ */
.legal-box {
  width: min(980px, calc(100% - 2 * clamp(16px, 4vw, 40px)));
  margin: 0 auto;

  border-radius: 20px;
  border: 1px solid var(--gold-faint);

  background:
    radial-gradient(900px 340px at 50% -12%, rgba(230,214,158,0.10), transparent 60%),
    linear-gradient(180deg, var(--glass-1), var(--glass-2));

  box-shadow: var(--shadow-deep);
  position: relative;
}

/* Ligne dorée supérieure */
.legal-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-soft),
    transparent
  );
  opacity: 0.9;
}

/* ============================================================
   📜 CONTENU
============================================================ */
.legal-box-inner {
  padding: clamp(26px, 4.5vw, 52px);
  font-family: "Inter", sans-serif;
  color: var(--text-main);
}

/* ============================================================
   📑 SECTIONS
============================================================ */
.legal-section {
  margin-bottom: 64px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section + .legal-section {
  padding-top: 22px;
  border-top: 1px solid rgba(230,214,158,0.12);
}

/* Titres */
.legal-section h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--gold-main);
  margin: 0 0 22px 0;
  letter-spacing: 0.25px;
}

/* Paragraphes */
.legal-section p {
  line-height: 2.0;
  font-size: 1rem;
  color: var(--text-soft);
  margin: 0 0 16px 0;
}

/* Mots forts */
.legal-section strong {
  color: var(--text-main);
  font-weight: 500;
}

/* Liens */
.legal-section a {
  color: var(--gold-main);
  text-decoration: none;
  position: relative;
}

.legal-section a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-main),
    transparent
  );
  opacity: 0;
  transition: opacity 0.25s ease;
}

.legal-section a:hover::after {
  opacity: 0.8;
}

/* Listes textuelles avec puces • */
.legal-section p br + • {
  margin-top: 8px;
}

/* ============================================================
   🔻 FOOTER
============================================================ */
.legal-footer {
  margin-top: 80px;
  padding-top: 26px;
  border-top: 1px solid rgba(230,214,158,0.16);
  text-align: center;
}

.legal-footer p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-muted);
}

/* ============================================================
   📱 RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .legal-section h2 {
    font-size: 1.35rem;
  }

  .legal-section {
    margin-bottom: 52px;
  }
}

@media (max-width: 600px) {
  .legal-box {
    border-radius: 16px;
  }

  .legal-box-inner {
    padding: 26px 22px;
  }

  .legal-section h2 {
    font-size: 1.25rem;
  }

  .legal-section p {
    font-size: 0.96rem;
  }
}