/* ==========================================================================
   legal.css — Styles autonomes des pages légales DSI Plastics
   (mentions-legales.html, confidentialite.html). Reprend les tokens et les
   composants strictement nécessaires : la page d'accueil DSI a son propre CSS
   inline ; ces pages légères n'en importent que l'essentiel.
   ========================================================================== */
:root {
  --bg: #F2F5FA;
  --surface: #FFFFFF;
  --surface-2: #F3F6FC;
  --ink: #10203A;
  --muted: #5A6B85;
  --forest: #223C83;        /* bleu marine DSI */
  --forest-soft: #2c4a9c;
  --flux: #009FE3;          /* cyan DSI */
  --flux-ink: #0a6ea6;      /* cyan lisible (AA) sur fond clair */
  --amber: #C77A12;
  --line: rgba(34, 60, 131, .14);
  --line-strong: rgba(34, 60, 131, .26);
  --shadow: 0 1px 2px rgba(34, 60, 131, .06), 0 18px 40px -22px rgba(34, 60, 131, .40);

  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1120px;
  --pad-inline: 24px;
  --pad-inline-sm: 18px;
  --r-btn: 10px;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.1; margin: 0; }
a { color: var(--flux-ink); }
:focus-visible { outline: 2px solid var(--flux); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--flux) 30%, transparent); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-inline); }

/* ---- header ---- */
header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
header .bar { display: flex; align-items: center; gap: 18px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { height: 46px; width: auto; display: block; }
.langswitch { display: inline-flex; gap: 4px; margin-left: auto; }
.lang-btn {
  font: 600 .8rem var(--font-mono); cursor: pointer;
  padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--muted);
}
.lang-btn[aria-pressed="true"] { background: var(--forest); color: #fff; border-color: transparent; }

/* ---- contenu légal ---- */
.legal { max-width: 760px; padding-block: 56px 78px; }
.legal .back {
  display: inline-block; margin-bottom: 24px; font-family: var(--font-mono);
  font-size: .8rem; color: var(--flux-ink); text-decoration: none;
}
.legal .back:hover { text-decoration: underline; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; }
.legal .updated { margin-top: 10px; color: var(--muted); font-size: .86rem; font-family: var(--font-mono); }
.legal h2 { font-size: 1.25rem; font-weight: 700; margin-top: 40px; }
.legal h3 { font-size: 1.02rem; font-weight: 600; margin-top: 24px; }
.legal p, .legal li { color: var(--ink); font-size: .98rem; line-height: 1.7; }
.legal p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: var(--flux-ink); }
.legal .todo {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px;
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber);
}

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); background: var(--surface-2); }
footer .foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-block: 26px; font-size: .9rem; color: var(--muted);
}
.foot-base { flex: 1 1 auto; }
.foot-social { display: inline-flex; gap: 10px; }
.foot-social a {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--line-strong); color: var(--forest); text-decoration: none;
}
.foot-social a:hover { background: var(--forest); color: #fff; border-color: transparent; }
.foot-legal { display: inline-flex; gap: 16px; }
.foot-legal a { color: var(--muted); text-decoration: none; }
.foot-legal a:hover, .foot-legal a[aria-current="true"] { color: var(--forest); }

@media (max-width: 560px) {
  .wrap { padding-inline: var(--pad-inline-sm); }
  .brand-logo { height: 38px; }
  footer .foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }