/* ================================================================
   legal.css — styles partagés conditions.html + confidentialite.html
   Dépend de landing.css (topnav, reset de base)
   ================================================================ */

:root{
  --bg:#0f1117;--surf:#161920;--surf-2:#1c2028;--surf-3:#222733;--surf-4:#292e3d;
  --divider:#262b38;--border:rgba(255,255,255,.08);
  --text:#e4e6ec;--text-2:#9199ab;--text-3:#515b6e;
  --accent:#3b82c4;--accent-hover:#5294d4;--green:#34c97b;
  --r-sm:6px;--r-md:10px;--r-lg:14px;
  --s1:0 1px 2px rgba(0,0,0,.4);
  --t-xs:clamp(.6875rem,.66rem + .14vw,.75rem);
  --t-sm:clamp(.8125rem,.79rem + .12vw,.875rem);
  --t-body:clamp(.9375rem,.91rem + .14vw,1rem);
  --t-h4:clamp(1rem,.97rem + .16vw,1.125rem);
  --t-h1:clamp(1.75rem,1.4rem + 1.75vw,2.625rem);
  --f-disp:"DM Serif Display",Georgia,serif;
  --f-body:"DM Sans",system-ui,sans-serif;
  --ease:160ms cubic-bezier(.16,1,.3,1)
}
[data-theme="light"]{
  --bg:#f0f2f7;--surf:#ffffff;--surf-2:#f5f7fb;--surf-3:#eceef5;--surf-4:#e4e7f0;
  --divider:#e0e4ef;--border:rgba(0,0,0,.08);
  --text:#141720;--text-2:#525a70;--text-3:#99a0b3;
  --accent:#1e6ab0;--accent-hover:#175f9d;
  --s1:0 1px 2px rgba(0,0,0,.06)
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:var(--t-body)/1.6 var(--f-body)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

/* ── Boutons (utilisés sur conditions) ── */
.btn{height:40px;padding:0 18px;border-radius:var(--r-md);font-size:var(--t-sm);font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:all var(--ease);white-space:nowrap;border:none;cursor:pointer}
.btn-s{background:var(--surf-3);border:1px solid var(--border);color:var(--text)}
.btn-s:hover{background:var(--surf-4)}
.btn-p{background:var(--accent);color:#fff}
.btn-p:hover{background:var(--accent-hover)}

/* ── Contenu légal ── */
.legal-wrap{max-width:780px;margin:0 auto;padding:64px clamp(16px,4vw,56px) 96px}
.legal-eyebrow{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--accent);margin-bottom:16px}
.legal-wrap h1{font:400 var(--t-h1)/1.06 var(--f-disp);letter-spacing:-.025em;margin-bottom:8px}
.legal-meta{font-size:var(--t-xs);color:var(--text-3);margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid var(--divider)}

.legal-toc{background:var(--surf);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 28px;margin-bottom:48px}
.legal-toc h2{font-size:var(--t-sm);font-weight:700;margin-bottom:12px;color:var(--text)}
.legal-toc ol{list-style:decimal;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal-toc li a{font-size:var(--t-sm);color:var(--accent)}

.legal-section{margin-bottom:48px}
.legal-section h2{font-size:1.2rem;font-weight:700;margin-bottom:16px;padding-top:8px;border-top:1px solid var(--divider)}
.legal-section h3{font-size:var(--t-sm);font-weight:700;margin:20px 0 8px}
.legal-section p{font-size:var(--t-body);color:var(--text-2);line-height:1.75;margin-bottom:14px}
.legal-section ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.legal-section ul li{font-size:var(--t-body);color:var(--text-2);line-height:1.65}
.legal-section .highlight{background:var(--surf);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0;padding:16px 20px;margin:20px 0}
.legal-section .highlight p{margin-bottom:0;color:var(--text)}

/* Badge Loi 25 (confidentialite.html) */
.loi25-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(52,201,123,.12);color:var(--green);margin-bottom:16px}

/* ── Footer ── */
footer{border-top:1px solid var(--divider);padding:32px clamp(16px,4vw,56px)}
.footer-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:var(--t-xs);color:var(--text-3)}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{font-size:var(--t-xs);color:var(--text-2);transition:color var(--ease)}
.footer-links a:hover{color:var(--text)}
@media(max-width:600px){.footer-inner{flex-direction:column;gap:16px;text-align:center}}