/* ValoraWeb — pages légales
   Palette bleue, alignée sur index.html */
:root{
  --ink:#F5F7FA; --surface:#FFFFFF; --surface-2:#EDF2F9;
  --line:#DBE3EE; --line-soft:rgba(23,43,77,.11);
  --text:#111827; --muted:#4C5D77;
  --blue:#1D4ED8; --blue-light:#3B82F6; --navy:#172B4D;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:880px; --pad:24px; --r:14px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--font-body); font-size:16.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
.lg-wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- en-tête ---------- */
.lg-header{
  position:sticky; top:0; z-index:20;
  background:rgba(245,247,250,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft); padding:16px 0;
}
.lg-header__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.lg-logo{ display:flex; align-items:center; gap:11px; color:var(--text); }
.lg-logo:hover{ text-decoration:none; }
.lg-logo svg{ height:26px; width:auto; display:block; flex:0 0 auto; }
.lg-logo b{ font-weight:600; font-size:1.16rem; letter-spacing:-.022em; }
.lg-logo b i{ font-style:normal; color:var(--blue); }
.lg-back{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.lg-back:hover{ color:var(--blue); text-decoration:none; }

/* ---------- titre ---------- */
.lg-hero{ padding:72px 0 44px; }
.lg-eyebrow{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue);
}
.lg-hero h1{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.025em;
  font-size:clamp(2rem,5vw,2.9rem); line-height:1.08; margin:16px 0 0;
  text-wrap:balance;
}
.lg-date{
  margin-top:20px; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

/* ---------- sommaire ---------- */
.lg-toc{
  margin-top:34px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 28px;
  box-shadow:0 1px 2px rgba(23,43,77,.04), 0 12px 28px -18px rgba(23,43,77,.18);
}
.lg-toc h2{
  font-family:var(--font-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 16px;
}
.lg-toc ol{ margin:0; padding:0; list-style:none; columns:2; column-gap:34px; }
.lg-toc li{ margin-bottom:9px; break-inside:avoid; }
.lg-toc a{ color:var(--text); font-size:.93rem; }
.lg-toc a:hover{ color:var(--blue); text-decoration:none; }
@media (max-width:620px){ .lg-toc ol{ columns:1; } }

/* ---------- corps ---------- */
.lg-body{ padding:12px 0 90px; }
.lg-body section{ margin-top:44px; scroll-margin-top:90px; }
.lg-body h2{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:1.3rem; line-height:1.2; margin:0;
  padding-top:24px; border-top:1px solid var(--line-soft);
}
.lg-body h2 em{
  display:block; font-style:normal; font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:12px;
}
.lg-body p{ margin:16px 0 0; color:var(--muted); }
.lg-body ul{ margin:16px 0 0; padding:0; list-style:none; display:grid; gap:11px; }
.lg-body li{ display:flex; gap:13px; color:var(--muted); }
.lg-body li::before{
  content:""; flex:0 0 auto; width:5px; height:5px; margin-top:11px;
  border-radius:50%; background:var(--blue-light);
}
.lg-body strong{ color:var(--text); font-weight:600; }
.lg-note{
  margin-top:20px; padding:22px 24px; border:1px solid var(--line);
  border-left:3px solid var(--blue); border-radius:var(--r);
  background:var(--surface);
  box-shadow:0 1px 2px rgba(23,43,77,.04), 0 12px 28px -18px rgba(23,43,77,.16);
}
.lg-note p{ margin:0; color:var(--text); }
.lg-adr{ font-style:normal; margin-top:16px; color:var(--muted); }

/* ---------- tableau ---------- */
.lg-scroll{ overflow-x:auto; margin-top:20px; }
.lg-table{ width:100%; border-collapse:collapse; font-size:.93rem; background:var(--surface); }
.lg-table th, .lg-table td{ text-align:left; padding:13px 15px; border-bottom:1px solid var(--line); vertical-align:top; }
.lg-table thead th{
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); font-weight:500;
  background:var(--surface-2);
}
.lg-table td{ color:var(--muted); }
.lg-table td:first-child{ font-family:var(--font-mono); font-size:.85rem; color:var(--text); white-space:nowrap; }

/* ---------- pied de page ---------- */
.lg-footer{ border-top:1px solid var(--line-soft); background:var(--surface-2); padding:44px 0; }
.lg-footer nav{ display:flex; flex-wrap:wrap; gap:10px; }
.lg-footer nav a, .lg-footer nav span{
  font-size:.88rem; border:1px solid var(--line); border-radius:999px;
  padding:.55em 1.2em; background:var(--surface); color:var(--muted);
  transition:border-color .25s ease, color .25s ease, transform .25s ease;
}
.lg-footer nav a:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); text-decoration:none; }
.lg-footer nav span{ border-color:var(--blue); color:var(--blue); }
.lg-footer__bas{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--muted);
}
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }
@media (max-width:620px){ :root{ --pad:20px; } .lg-hero{ padding-top:48px; } }