/* ============================================================================
   Oltanis — Pages légales · styles charte (autonomes).
   3 tons (blanc / encre #0A0A0A / cobalt #1846DC), Bricolage + Geist + Geist Mono.
   ========================================================================== */
/* Polices auto-hébergées via colors_and_type.css (RGPD, pas de CDN Google). */

:root{
  --blanc:#fff; --encre:#0A0A0A; --cobalt:#1846DC; --hairline:#E6E6E6; --muted:#6B6B6B;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-sans:"Geist",system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--encre);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--cobalt);color:#fff}
a{color:var(--cobalt);text-underline-offset:2px}

.page{max-width:820px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.page{padding:0 40px}}

/* Header */
.lg-header{border-bottom:1px solid var(--hairline);position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);z-index:10}
.lg-header .bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.wm{font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;text-transform:uppercase;font-size:22px;color:var(--encre);text-decoration:none}
.wm .i{font-style:italic;color:var(--cobalt)}
.lg-back{font-family:var(--font-sans);font-size:14px;color:var(--encre);text-decoration:none}
.lg-back:hover{color:var(--cobalt)}

/* Title block */
.lg-hero{padding:64px 0 36px;border-bottom:1px solid var(--hairline)}
.lg-kick{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lg-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;font-size:clamp(38px,6vw,60px);line-height:.98;margin:16px 0 0}
.lg-title .i{font-style:italic;color:var(--cobalt)}
.lg-updated{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 0}

/* Body */
.lg-body{padding:48px 0 96px}
.lg-body h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:24px;line-height:1.1;margin:44px 0 14px}
.lg-body h2:first-child{margin-top:0}
.lg-body h3{font-family:var(--font-sans);font-weight:600;font-size:16px;margin:24px 0 8px}
.lg-body p{margin:0 0 14px;color:rgba(10,10,10,.85)}
.lg-body ul{margin:0 0 16px;padding-left:0;list-style:none}
.lg-body li{position:relative;padding-left:22px;margin:0 0 9px;color:rgba(10,10,10,.85)}
.lg-body li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--cobalt)}
.lg-body strong{font-weight:600;color:var(--encre)}
.lg-body .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--cobalt);text-transform:uppercase}

/* Definition rows (mentions) */
.lg-defs{border-top:1px solid var(--hairline);margin:18px 0}
.lg-defs > div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.lg-defs dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.lg-defs dd{margin:0;color:var(--encre)}
@media(max-width:560px){.lg-defs > div{grid-template-columns:1fr;gap:4px}}

/* Note / disclaimer */
.lg-note{border:1px solid var(--hairline);border-left:2px solid var(--cobalt);padding:16px 18px;margin:0 0 32px;font-size:14px;color:rgba(10,10,10,.7)}
.lg-note strong{color:var(--encre)}

/* TOC */
.lg-toc{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px}
.lg-toc a{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.lg-toc a:hover{text-decoration:underline}

/* Footer */
.lg-footer{border-top:1px solid var(--hairline);padding:32px 0;color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.lg-footer a{color:var(--muted);text-decoration:none}
.lg-footer a:hover{color:var(--cobalt)}

/* ===== Thème sombre — pages légales ===== */
body { background: #08080c; color: #fff; }
.lg-header { background: rgba(10,10,14,0.85); border-bottom-color: rgba(255,255,255,0.12); }
.wm, .lg-back, .lg-title, .lg-body h2, .lg-body h3, .lg-body strong, .lg-defs dd { color: #fff; }
.lg-back:hover { color: var(--cobalt); }
.lg-hero, .lg-defs, .lg-defs > div, .lg-note, .lg-footer { border-color: rgba(255,255,255,0.12); }
.lg-body p, .lg-body li { color: rgba(255,255,255,0.82); }
.lg-body li::before { background: var(--cobalt); }
.lg-note { color: rgba(255,255,255,0.72); }
.lg-kick, .lg-updated, .lg-defs dt, .lg-footer, .lg-footer a { color: #9aa1ad; }
.lg-toc a { color: var(--cobalt); }