/* Delle Model — Changelog. Glass design system mirrored 1:1 from the desktop app
   and the landing page (DM Sans + liquid-glass + violet accent). */

:root {
  --c-glass: #26282c;
  --c-light: #fff;
  --c-dark: #000;
  --c-content: #F9FAFB;
  --c-action: #0052f5;
  --c-bg: #141317;
  --glass-reflex-dark: 0.8;
  --glass-reflex-light: 0.3;
  --saturation: 120%;
  --color-primary: #3B82F6;
  --color-accent: #8B5CF6;
  --color-pink: #EC4899;
  --color-orange: #F97316;
  --radius: 20px;
  --toc-w: 280px;
  --header-h: 76px;
}

html.light {
  --c-glass: #bbbbbc;
  --c-content: #1A1A2E;
  --c-bg: #E8E8E9;
  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

html, body { height: 100%; }
body {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--c-bg);
  color: var(--c-content);
  line-height: 1.6;
  overflow: hidden; /* la PAGE ne scrolle pas — chaque version (.cl-panel) scrolle en interne */
  -webkit-font-smoothing: antialiased;
}

/* Ambient glows (comme le hero de la LP) pour que le verre se lise */
body::before, body::after {
  content: ""; position: fixed; border-radius: 50%; filter: blur(120px);
  opacity: 0.22; z-index: 0; pointer-events: none;
}
body::before { width: 520px; height: 520px; top: -160px; left: -120px; background: var(--color-accent); }
body::after  { width: 560px; height: 560px; bottom: -200px; right: -140px; background: var(--color-primary); }

/* ── Liquid glass (identique à l'app) ── */
.liquid-glass {
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(14px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(14px) saturate(var(--saturation));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 8px 24px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent);
  border-radius: var(--radius);
}

.gradient-text {
  background: linear-gradient(120deg, var(--color-accent) 0%, var(--color-pink) 55%, var(--color-orange) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.muted { color: color-mix(in srgb, var(--c-content) 60%, transparent); }

/* ── App shell ── */
.cl-app { position: relative; z-index: 1; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

.cl-header {
  height: var(--header-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
}
.cl-brand { display: flex; align-items: center; gap: 12px; }
.cl-brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--color-accent) 70%, transparent);
}
.cl-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.cl-brand-name { font-weight: 700; font-size: 15px; }
.cl-brand-sub { font-size: 12px; }

.cl-theme {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  color: var(--c-content);
  background-color: color-mix(in srgb, var(--c-glass) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 12%), transparent);
  transition: background-color 200ms, transform 200ms;
}
.cl-theme:hover { transform: translateY(-1px); background-color: color-mix(in srgb, var(--c-glass) 26%, transparent); }

/* ── Layout : viewport (gauche) + sommaire (droite) ── */
.cl-layout {
  flex: 1; min-height: 0;
  display: flex; gap: 20px;
  padding: 0 28px 28px;
}

.cl-viewport {
  flex: 1; min-width: 0; position: relative; overflow: hidden;
}

/* Le rail horizontal : une .cl-panel par version, on translate de -index*100% */
.cl-track {
  display: flex; height: 100%;
  transition: transform 560ms cubic-bezier(0.65, 0, 0.18, 1);
  will-change: transform;
}
.cl-panel {
  min-width: 100%; width: 100%; height: 100%;
  overflow-y: auto; /* scroll vertical DANS une version */
  scrollbar-width: thin;
}
.cl-panel::-webkit-scrollbar { width: 8px; }
.cl-panel::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-light) 12%, transparent); border-radius: 99em; }
.cl-panel-inner { max-width: 660px; margin: 0 auto; padding: 56px 44px 80px; }

.cl-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 99em; margin-bottom: 18px;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.cl-version { font-size: clamp(40px, 6vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.cl-headline { font-size: 19px; font-weight: 600; margin-top: 12px; }
.cl-date { font-size: 13px; margin-top: 6px; }

.cl-changes { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.cl-changes li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.cl-changes li i {
  flex-shrink: 0; margin-top: 4px; font-size: 11px;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* Flèches prev/next flottantes */
.cl-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
  color: var(--c-content);
  background-color: color-mix(in srgb, var(--c-glass) 30%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 14%), transparent), 0 6px 18px rgba(0,0,0,0.25);
  transition: opacity 200ms, transform 200ms, background-color 200ms;
}
.cl-nav:hover:not(:disabled) { background-color: color-mix(in srgb, var(--c-glass) 42%, transparent); }
.cl-prev { left: 14px; }
.cl-next { right: 14px; }
.cl-nav:disabled { opacity: 0; pointer-events: none; }

/* ── Sommaire (droite) ── */
.cl-toc {
  width: var(--toc-w); flex-shrink: 0;
  padding: 18px 12px; overflow-y: auto; scrollbar-width: thin;
}
.cl-toc-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0 10px 10px; color: color-mix(in srgb, var(--c-content) 50%, transparent);
}
.cl-toc-nav { display: flex; flex-direction: column; gap: 2px; position: relative; }
.cl-toc-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border: none; cursor: pointer; border-radius: 12px;
  background: transparent; color: var(--c-content); font-family: inherit;
  transition: background-color 160ms;
}
.cl-toc-item:hover { background: color-mix(in srgb, var(--c-light) 7%, transparent); }
.cl-toc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: color-mix(in srgb, var(--c-content) 28%, transparent); transition: background-color 200ms, box-shadow 200ms; }
.cl-toc-v { font-weight: 600; font-size: 14px; flex-shrink: 0; }
.cl-toc-h { font-size: 12px; color: color-mix(in srgb, var(--c-content) 52%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-toc-item.is-active { background: color-mix(in srgb, var(--c-action) 16%, transparent); }
.cl-toc-item.is-active .cl-toc-dot { background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.cl-toc-item.is-active .cl-toc-v { color: var(--color-accent); }

/* ── Responsive : sommaire en bandeau horizontal en haut sur mobile ── */
@media (max-width: 860px) {
  .cl-layout { flex-direction: column-reverse; gap: 12px; padding: 0 14px 14px; }
  .cl-toc { width: auto; padding: 10px; }
  .cl-toc-label { display: none; }
  .cl-toc-nav { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .cl-toc-nav::-webkit-scrollbar { display: none; }
  .cl-toc-item { flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 8px 10px; }
  .cl-toc-h { display: none; }
  .cl-panel-inner { padding: 32px 22px 60px; }
  .cl-header { padding: 0 16px; }
}