/* ============================================================================
   legal.css — Pages légales du Dashboard (confidentialité, mentions légales)
   ----------------------------------------------------------------------------
   Ces deux pages sont la SOURCE DE VÉRITÉ pour tout l'écosystème : elles vivent
   sur le dashboard (www.fabien-abrt.fr) et sont liées depuis chaque site.

   Mobile : rien de particulier à prévoir depuis la refonte « option B »
   (22/08/2026). Le shell `.console` EST l'interface mobile — il n'y a plus de
   maquette parallèle à neutraliser. Ces pages chargent mobile-shell.js comme
   les autres : elles ont donc le même tiroir, ouvert par le même burger.
   Seule adaptation ci-dessous : le sommaire bascule en tête de contenu.
   ========================================================================== */

/* ── Contenu ─────────────────────────────────────────────────────────────── */
.lg{ scroll-behavior: smooth; }
.lg .lg-wrap{ max-width: 860px; }

.lg .lg-intro{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.lg .lg-intro::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--badge-bg), transparent 60%);
  pointer-events: none; opacity: .6;
}
.lg .lg-intro > *{ position: relative; z-index: 1; }
.lg .lg-intro h2{ font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.lg .lg-intro p{ color: var(--text-muted); font-size: 14px; line-height: 1.65; margin: 0 0 8px; }
.lg .lg-intro p:last-child{ margin-bottom: 0; }
.lg .lg-maj{
  display: inline-block; margin-top: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--badge-text); background: var(--badge-bg);
  border-radius: 999px; padding: 4px 11px;
}

.lg .lg-sec{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px;
  scroll-margin-top: 84px;              /* l'en-tête .bar est sticky */
}
.lg .lg-sec > h2{
  font-size: 16px; font-weight: 700; margin: 0 0 4px;
  display: flex; align-items: center; gap: 9px;
}
.lg .lg-sec > h2 .n{
  flex: none; min-width: 24px; height: 24px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  color: var(--badge-text); background: var(--badge-bg); border-radius: 7px;
}
.lg .lg-sec h3{ font-size: 14px; font-weight: 700; margin: 16px 0 6px; color: var(--text); }
.lg .lg-sec p{ color: var(--text-muted); font-size: 14px; line-height: 1.65; margin: 8px 0; }
.lg .lg-sec ul{ color: var(--text-muted); font-size: 14px; line-height: 1.65; padding-left: 20px; margin: 8px 0; }
.lg .lg-sec li{ margin-bottom: 5px; }
.lg .lg-sec a{ color: var(--accent); font-weight: 600; }
.lg .lg-sec a:hover{ text-decoration: underline; }
.lg .lg-sec b{ color: var(--text); }
.lg code{
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; color: var(--text);
}

/* ── Tableau des traitements (données / finalité / base légale / durée) ──── */
.lg .lg-tablewrap{ overflow-x: auto; margin: 12px 0 4px; border: 1px solid var(--border); border-radius: var(--radius); }
.lg table{ width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13px; }
.lg table th, .lg table td{
  text-align: left; vertical-align: top;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  line-height: 1.55;
}
.lg table th{
  background: var(--surface-2); color: var(--text);
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap;
}
.lg table td{ color: var(--text-muted); }
.lg table td:first-child{ color: var(--text); font-weight: 600; }
.lg table tr:last-child td{ border-bottom: none; }

/* ── Encadré d'état (ex. « la mesure d'audience est désactivée ») ────────── */
.lg .lg-note{
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 14px 16px; margin: 12px 0;
}
.lg .lg-note p{ margin: 0; font-size: 13.5px; }
.lg .lg-note .lg-note-t{ font-weight: 700; color: var(--text); display: block; margin-bottom: 3px; }

/* ── Boutons d'action (gérer mes cookies, contact) ───────────────────────── */
.lg .lg-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lg .lg-btn{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 9px 16px;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  transition: border-color .15s ease;
}
.lg .lg-btn:hover{ border-color: var(--accent); }
.lg .lg-btn.primary{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lg .lg-btn svg{ width: 16px; height: 16px; pointer-events: none; }

/* ── Sommaire replié en tête de page (mobile uniquement) ─────────────────── */
.lg .lg-toc{ display: none; }
.lg .lg-toc summary{
  cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 700; color: var(--text);
  padding: 13px 16px;
}
.lg .lg-toc summary::-webkit-details-marker{ display: none; }
.lg .lg-toc summary::after{ content: " ▾"; color: var(--accent); }
.lg .lg-toc[open] summary::after{ content: " ▴"; }
.lg .lg-toc nav{ display: flex; flex-direction: column; padding: 0 8px 8px; }
.lg .lg-toc nav a{
  padding: 10px 12px; font-size: 13.5px; color: var(--text-muted);
  border-radius: 8px;
}
.lg .lg-toc nav a:hover{ background: var(--surface-2); color: var(--text); }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 880px){
  /* Le sommaire bascule en tête de contenu : la barre latérale est
     accessible par le tiroir (burger de mobile-shell.js), comme partout. */

  .lg .lg-toc{
    display: block; margin-bottom: 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .lg .lg-sec{ padding: 16px 18px; scroll-margin-top: 70px; }
  .lg .lg-intro{ padding: 16px 18px; }
  .lg .lg-btn{ flex: 1 1 100%; justify-content: center; }
}