/* ==========================================================================
   DZ Pay — Legal pages (CGU, confidentialité). Uses design-system.css.
   ========================================================================== */

.legal-hero{padding:72px 0 40px}
.legal-hero h1{font-size:var(--fs-4xl);letter-spacing:-.04em;margin:16px 0 14px}
.legal-hero .lead{max-width:680px}
.legal-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.legal-meta .badge .icon{width:14px;height:14px;color:var(--fg-subtle)}

.draft{display:flex;gap:14px;align-items:flex-start;margin-top:28px;padding:16px 18px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#FFF9EA,#FCF0D2);box-shadow:inset 0 0 0 1px rgba(148,98,0,.22);color:#5E3F00;font-size:14.5px}
.draft .icon{width:20px;height:20px;margin-top:1px;color:var(--warning)}
.draft strong{color:#3F2A00}

.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start;padding-bottom:112px}
.toc{position:sticky;top:calc(var(--nav-h) + 36px);padding:8px;max-height:calc(100dvh - var(--nav-h) - 60px);overflow:auto}
.toc p{font:500 11.5px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-subtle);padding:10px 10px 12px}
.toc a{display:flex;gap:8px;padding:7px 10px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.35;color:var(--fg-muted);transition:color .15s,background .15s}
.toc a span{font-family:var(--font-mono);font-size:12px;color:var(--gray-400);min-width:18px}
.toc a:hover{color:var(--fg);background:var(--gray-100)}
.toc a[aria-current="true"]{color:var(--fg);background:linear-gradient(180deg,#fff,#F3F4F7);box-shadow:0 0 0 1px rgba(11,15,42,.08),var(--shadow-xs)}
.toc a[aria-current="true"] span{color:var(--brand-blue-600)}

.doc{padding:40px 48px;min-width:0}
.doc section{scroll-margin-top:calc(var(--nav-h) + 40px)}
.doc section + section{margin-top:44px;padding-top:40px;border-top:1px solid var(--line)}
.doc h2{display:flex;gap:12px;align-items:baseline;font-size:var(--fs-2xl);letter-spacing:-.03em;margin-bottom:16px}
.doc h2 .num{font:500 13px var(--font-mono);color:var(--brand-blue-600);letter-spacing:0}
.doc h3{font-size:17px;letter-spacing:-.015em;margin:24px 0 8px}
.doc p,.doc li{color:var(--fg-muted);font-size:15.5px;line-height:1.7}
.doc p + p{margin-top:12px}
.doc ul{margin:12px 0;display:flex;flex-direction:column;gap:8px}
.doc ul li{position:relative;padding-left:20px}
.doc ul li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-50)}
.doc strong{color:var(--fg);font-weight:600}
.doc a:not(.btn){color:var(--brand-blue-600);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.doc a:not(.btn):hover{color:var(--brand-navy)}
.doc .ref{font:500 12px var(--font-mono);color:var(--fg-subtle);white-space:nowrap}

/* Highlighted placeholder — to be completed by DZ Pay before publication */
.todo{display:inline;padding:1px 6px;border-radius:5px;background:#FCF1D6;color:#7A5200;box-shadow:inset 0 0 0 1px rgba(148,98,0,.25);font:500 .88em var(--font-mono);white-space:normal}

.callout{display:flex;gap:12px;margin:16px 0;padding:14px 16px}
.callout .icon{width:18px;height:18px;margin-top:3px;color:var(--brand-blue-600);flex:none}
.callout p{margin:0;font-size:14.5px}

.kv{display:grid;grid-template-columns:minmax(150px,auto) 1fr;margin:14px 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.kv dt,.kv dd{margin:0;padding:11px 16px;font-size:14.5px;border-top:1px solid var(--line)}
.kv dt:first-of-type,.kv dt:first-of-type + dd{border-top:0}
.kv dt{background:var(--gray-50);color:var(--fg-subtle);font-weight:500}
.kv dd{color:var(--fg)}

.table-wrap{margin:14px 0;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto}
.ltable{width:100%;border-collapse:collapse;font-size:14px}
.ltable th{text-align:left;font-weight:500;font-size:12.5px;color:var(--fg-subtle);background:var(--gray-50);padding:10px 14px;border-bottom:1px solid var(--line)}
.ltable td{padding:12px 14px;border-top:1px solid var(--line);color:var(--fg-muted);vertical-align:top;line-height:1.55}
.ltable tr:first-child td{border-top:0}
.ltable td:first-child{color:var(--fg);font-weight:500}

.sources{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.source{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-lg);text-decoration:none!important;transition:transform .15s var(--ease)}
.source:hover{transform:translateY(-1px)}
.source strong{display:block;font-size:14px;color:var(--fg)}
.source small{display:block;font-size:12.5px;color:var(--fg-subtle);line-height:1.45;margin-top:2px}
.source .tile{width:34px;height:34px;flex:none}
.source .tile .icon{width:16px;height:16px}

.doc-end{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:44px;padding:20px 22px}
.doc-end p{margin:0;font-size:14.5px}

@media (max-width:1024px){
  .legal{grid-template-columns:1fr;gap:16px}
  .toc{position:static;max-height:none}
  .toc nav{display:grid;grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .legal-hero{padding:40px 0 28px}
  .doc{padding:24px 18px}
  .toc nav{grid-template-columns:1fr}
  .sources{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv dd{border-top:0;padding-top:0}
}