/* ════════════════════════════════════════════════════════════════════
   YBN LOS ANGELES — legal.css
   Feuille dédiée aux pages légales (mentions, confidentialité, CGU).
   S'appuie sur les variables et composants de gritty.css.
   ════════════════════════════════════════════════════════════════════ */

.lg-hero {
  position: relative;
  padding: 9rem 1.5rem 3.5rem;
  border-bottom: 1px solid var(--g-line);
  background-color: var(--g-coal);
  background-image:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(218,165,32,.10), transparent 62%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(59,50,38,.35), transparent 62%);
  overflow: hidden;
}
.lg-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-gold-deep), transparent);
}
.lg-hero-wrap { max-width: 860px; margin: 0 auto; }
.lg-hero h1 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(38px, 6.5vw, 66px);
  line-height: .92;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--g-text);
  margin: .55rem 0 0;
}
.lg-hero h1 .gold { color: var(--g-gold); text-shadow: 0 0 26px rgba(255,215,0,.28); }
.lg-hero .lead {
  font-size: 14.5px;
  color: var(--g-text-2);
  max-width: 62ch;
  margin-top: 1rem;
}
.lg-meta {
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  margin-top: 1.6rem;
  font-family: var(--f-type);
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--g-text-3);
}
.lg-meta b { color: var(--g-gold-2); font-weight: 400; }

.lg-body {
  max-width: 860px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 6rem;
}

.lg-body h2 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.05;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--g-text);
  margin: 3.2rem 0 1rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--g-line);
  scroll-margin-top: 100px;
}
.lg-body h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.lg-body h2 .num {
  display: inline-block;
  font-family: var(--f-type);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--g-gold-2);
  margin-right: .7rem;
  vertical-align: middle;
}

.lg-body h3 {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--g-text);
  margin: 2rem 0 .7rem;
}

.lg-body p { font-size: 14px; line-height: 1.8; color: var(--g-text-2); margin-bottom: 1rem; }
.lg-body p strong { color: var(--g-text); font-weight: 600; }
.lg-body a:not(.g-btn) {
  color: var(--g-gold-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(218,165,32,.35);
  transition: color .18s, border-color .18s;
}
.lg-body a:not(.g-btn):hover { color: var(--g-gold); border-color: var(--g-gold); }

.lg-body ul, .lg-body ol { margin: 0 0 1.2rem 1.2rem; }
.lg-body li {
  font-size: 14px; line-height: 1.75;
  color: var(--g-text-2);
  margin-bottom: .5rem;
  padding-left: .3rem;
}
.lg-body li::marker { color: var(--g-gold-deep); }
.lg-body li strong { color: var(--g-text); font-weight: 600; }

/* Encadré d'information / d'avertissement */
.lg-note {
  border: 1px solid var(--g-line);
  border-left: 3px solid var(--g-gold-2);
  background: linear-gradient(120deg, rgba(218,165,32,.06), rgba(0,0,0,0));
  padding: 1.15rem 1.35rem;
  margin: 1.6rem 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--g-text-2);
}
.lg-note .t {
  display: block;
  font-family: var(--f-type);
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g-gold-2);
  margin-bottom: .5rem;
}
.lg-note.warn { border-left-color: var(--g-warn); }
.lg-note.warn .t { color: var(--g-warn); }
.lg-note.todo { border-left-color: var(--g-red); background: linear-gradient(120deg, rgba(224,32,32,.07), rgba(0,0,0,0)); }
.lg-note.todo .t { color: #ff6b6b; }

/* Table de données (durées de conservation, cookies…) */
.lg-table-wrap { overflow-x: auto; margin: 1.4rem 0; }
.lg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 520px;
}
.lg-table th {
  text-align: left;
  font-family: var(--f-type);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--g-gold-2);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--g-line-2);
  background: rgba(255,255,255,.02);
  white-space: nowrap;
}
.lg-table td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--g-line);
  color: var(--g-text-2);
  line-height: 1.6;
  vertical-align: top;
}
.lg-table tr:last-child td { border-bottom: none; }
.lg-table tbody tr { transition: background .18s; }
.lg-table tbody tr:hover { background: rgba(218,165,32,.05); }
.lg-table td strong { color: var(--g-text); font-weight: 600; }

/* Sommaire d'entrée de page */
.lg-toc {
  border: 1px solid var(--g-line);
  background: var(--g-card);
  padding: 1.3rem 1.5rem;
  margin-bottom: 3rem;
}
.lg-toc .t {
  font-family: var(--f-type);
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g-text-3);
  margin-bottom: .9rem;
}
.lg-toc ol { margin: 0 0 0 1.1rem; columns: 2; column-gap: 2rem; }
.lg-toc li { margin-bottom: .4rem; font-size: 13px; }
.lg-toc a { color: var(--g-text-2); text-decoration: none; border: none; transition: color .18s; }
.lg-toc a:hover { color: var(--g-gold); }
@media (max-width: 620px) { .lg-toc ol { columns: 1; } }

/* Pied de page légal — navigation croisée */
.lg-cross {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--g-line);
}
.lg-cross a {
  display: block;
  border: 1px solid var(--g-line);
  background: var(--g-card);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  transition: border-color .22s, transform .22s var(--yb-ease, ease), background .22s;
}
.lg-cross a:hover { border-color: var(--g-line-2); transform: translateY(-3px); background: var(--g-card-2); }
.lg-cross .k {
  font-family: var(--f-type);
  font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--g-gold-2);
  display: block; margin-bottom: .4rem;
}
.lg-cross .v { font-family: var(--f-head); font-size: 21px; letter-spacing: .5px; text-transform: uppercase; color: var(--g-text); line-height: 1.1; }