/* ═══════════════════════════════════════════════════════════════
   Feuille de style des pages légales.
   Les valeurs sont reprises à l'identique des tokens d'index.html,
   pour que ces pages restent dans le même univers visuel que le site.
   Seuls les tokens réellement utilisés ici sont repris.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg-page:      #040a1a;
  --bg-footer:    #030814;
  --txt-heading:  #ffffff;
  --txt-strong:   rgba(255,255,255,.78);
  --txt-body:     rgba(255,255,255,.64);
  --txt-link:     rgba(255,255,255,.62);
  --txt-secondary:#94a3b8;
  --txt-muted:    rgba(255,255,255,.42);
  --txt-subtle:   rgba(255,255,255,.55);
  --accent-lime:  #a8cf4f;
  --glass-nav:    rgba(4,9,24,.72);
  --glass-card:   rgba(8,12,36,.58);
  --line-nav:     rgba(255,255,255,.07);
  --line-card:    rgba(23,45,133,.50);
  --line-footer:  rgba(255,255,255,.06);
  --shadow-nav:   0 18px 48px -22px rgba(0,0,0,.65);
  --logo-filter:  none;
  --sep-line: linear-gradient(90deg, transparent,
    rgba(23,45,133,.45) 30%, rgba(133,187,26,.30) 50%, rgba(23,45,133,.45) 70%, transparent);
  --grid-line:    rgba(123,148,223,.05);
  --glow:         rgba(36,58,150,.22);
  --todo-bg:      rgba(160,61,34,.14);
  --todo-line:    rgba(224,144,110,.45);
  --todo-txt:     #e0906e;
}

html.light {
  --bg-page:      #eef1f9;
  --bg-footer:    #e2e7f4;
  --txt-heading:  #0c1737;
  --txt-strong:   rgba(12,23,55,.82);
  --txt-body:     rgba(12,23,55,.74);
  --txt-link:     rgba(12,23,55,.74);
  --txt-secondary:#55648a;
  --txt-muted:    rgba(12,23,55,.68);
  --txt-subtle:   rgba(12,23,55,.64);
  --accent-lime:  #4f7708;
  --glass-nav:    rgba(255,255,255,.78);
  --glass-card:   rgba(255,255,255,.8);
  --line-nav:     rgba(12,23,55,.09);
  --line-card:    rgba(30,50,140,.2);
  --line-footer:  rgba(12,23,55,.09);
  --shadow-nav:   0 18px 48px -22px rgba(20,35,90,.22);
  --logo-filter:  brightness(0) opacity(.88);
  --sep-line: linear-gradient(90deg, transparent,
    rgba(30,50,140,.35) 30%, rgba(104,154,10,.32) 50%, rgba(30,50,140,.35) 70%, transparent);
  --grid-line:    rgba(30,50,130,.045);
  --glow:         rgba(110,140,230,.18);
  --todo-bg:      rgba(160,61,34,.09);
  --todo-line:    rgba(160,61,34,.35);
  --todo-txt:     #8f3417;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--bg-page);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(900px 500px at 50% 0%, var(--glow), transparent 70%);
  background-size: 56px 56px, 56px 56px, auto;
  color: var(--txt-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(133,187,26,.32); color: var(--txt-heading); }
:focus-visible { outline: 2px solid #85bb1a; outline-offset: 3px; border-radius: 4px; }

/* ── Barre de navigation, alignée sur celle du site ── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 48px;
  background: var(--glass-nav);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line-nav);
  box-shadow: var(--shadow-nav);
}
.topbar img { height: 40px; width: auto; filter: var(--logo-filter); display: block; }
.topbar .retour {
  font-size: 14px; font-weight: 500; color: var(--txt-link);
  text-decoration: none; transition: color .22s ease;
}
.topbar .retour:hover { color: var(--accent-lime); }

#theme-toggle {
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: var(--txt-heading); cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
#theme-toggle:hover { transform: translateY(-1px); }
html.light #theme-toggle {
  background: rgba(12,23,55,.05); border-color: rgba(12,23,55,.18); color: #31406b;
}
#theme-toggle svg { position: absolute; transition: opacity .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1); }
#theme-toggle .icon-sun  { opacity: 0; transform: rotate(-90deg) scale(.4); }
html.light #theme-toggle .icon-sun  { opacity: 1; transform: none; }
html.light #theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
.nav-actions { display: flex; align-items: center; gap: 14px; }

/* ── Corps du document ── */
main { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; }

.doc-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-lime); display: block; margin-bottom: 16px;
}
h1 {
  font-size: clamp(28px, 4.6vw, 40px); font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; color: var(--txt-heading); text-wrap: balance;
}
.maj {
  font-size: 13.5px; color: var(--txt-muted); margin-top: 14px;
}
.sep { height: 1px; background: var(--sep-line); margin: 40px 0; }

h2 {
  font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
  color: var(--txt-heading); margin: 44px 0 14px;
}
h3 {
  font-size: 15.5px; font-weight: 600; color: var(--txt-strong); margin: 26px 0 8px;
}
p, li { font-size: 15.5px; line-height: 1.75; color: var(--txt-body); }
p + p { margin-top: 12px; }
main a { color: var(--accent-lime); text-decoration: underline; text-underline-offset: 3px; }

ul, ol { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
li::marker { color: var(--txt-muted); }

dl {
  margin-top: 14px;
  display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 10px 22px;
}
dt { font-size: 14px; color: var(--txt-muted); }
dd { font-size: 15.5px; color: var(--txt-body); margin: 0; }

.encart {
  background: var(--glass-card);
  border: 1px solid var(--line-card);
  border-radius: 12px; padding: 20px 22px; margin-top: 18px;
}
.encart p { font-size: 15px; }

/* Champ à compléter : impossible à publier par inadvertance */
.todo {
  display: inline-block;
  background: var(--todo-bg);
  border: 1px dashed var(--todo-line);
  color: var(--todo-txt);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 5px;
}
.avis-todo {
  background: var(--todo-bg);
  border: 1px solid var(--todo-line);
  border-radius: 12px; padding: 18px 20px; margin: 28px 0 8px;
}
.avis-todo p { color: var(--todo-txt); font-size: 14.5px; }
.avis-todo strong { font-weight: 600; }

footer {
  border-top: 1px solid var(--line-footer);
  background: var(--bg-footer);
  padding: 30px 24px;
}
.pied {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  align-items: center; justify-content: space-between;
}
.pied span { font-size: 13px; color: var(--txt-subtle); }
.pied nav { display: flex; flex-wrap: wrap; gap: 20px; }
.pied a { font-size: 13.5px; color: var(--txt-link); text-decoration: none; transition: color .22s ease; }
.pied a:hover { color: var(--accent-lime); }

@media (max-width: 640px) {
  .topbar { padding: 12px 20px; }
  main { padding: 48px 20px 72px; }
  dl { grid-template-columns: 1fr; gap: 4px 0; }
  dt { margin-top: 10px; }
}