:root{
      --bg: #0b0c10;
      --card: #111318;
      --muted: #99a3ad;
      --text: #e9edf1;
      --accent: #ffd54a;
      --accent-2: #a78bfa;
      --ring: rgba(255, 213, 74, 0.4);
      --ok: #22c55e; --warn:#f59e0b; --err:#ef4444; --ui:#60a5fa; --perf:#10b981; --audio:#f472b6;
      --shadow: 0 10px 30px rgba(0,0,0,.4);
      --radius: 16px;
      --tag-w: 128px;
      --a11y: #14b8a6;
      --luna-img-h: 96px;       /* hauteur du PNG (plus grand que la bulle) */
      --luna-img-top: -6px;     /* décalage vertical : tête au niveau du champ */
      --luna-img-left: -6px;    /* léger décalage horizontal si besoin */


    }
    @media (prefers-color-scheme: light){
      :root{ --bg:#f6f7fb; --card:#ffffff; --text:#0b0c10; --muted:#556274; --shadow: 0 10px 30px rgba(14, 22, 42, .08); }
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:radial-gradient(1200px 1200px at 110% -10%, rgba(167,139,250,.15), transparent 44%), radial-gradient(800px 800px at -10% 110%, rgba(255,213,74,.18), transparent 45%), var(--bg); color:var(--text); margin:0}

    .shell{max-width:1100px;margin:auto;padding: clamp(16px, 3vw, 28px)}
    header{display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; margin-bottom:18px}


    .logo{display:flex; gap:12px; align-items:center}
    .logo-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-icon img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}


    .sub{color:var(--muted); font-size:14px; margin-top:8px;}

    .toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin: 8px 0 18px}
    .chip{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.02)); border:1px solid rgba(255,255,255,.12); padding:8px 12px; border-radius:999px; font-size:13px; cursor:pointer; user-select:none; display:inline-flex; gap:8px; align-items:center}
    .chip[aria-pressed="true"]{ outline:2px solid var(--ring); background:rgba(255,213,74,.10)}
    .chip .dot{width:8px;height:8px;border-radius:999px; background:currentColor}
    .chip[data-tag="feature"]{ color:var(--ok)}
    .chip[data-tag="fix"]{ color:var(--err)}
    .chip[data-tag="ui"]{ color:var(--ui)}
    .chip[data-tag="perf"]{ color:var(--perf)}
    .chip[data-tag="audio"]{ color:var(--audio)}
    .chip[data-tag="a11y"]{ color: var(--a11y)}

    .search{flex:1; min-width:180px; position:relative}
    .search input{width:100%; padding:12px 14px 12px 40px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--text); outline:none}
    .search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.7; pointer-events: none;}

    .toggles{display:flex; gap:10px; align-items:center}
    .toggle{display:inline-flex; gap:8px; align-items:center; font-size:13px; color:var(--muted)}
    .toggle input{accent-color:var(--accent)}

    .timeline{position:relative; display:grid; grid-template-columns: 1fr; gap:14px}

    .entry{position:relative; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.02)); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:14px 16px; box-shadow: var(--shadow); overflow:hidden}
    .entry::before{content:""; position:absolute; top:-40px; right:-40px; width:160px; height:160px; background: radial-gradient(closest-side, rgba(255,213,74,.12), transparent); filter:blur(6px)}
    .entry .meta{display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap}
    .version{display:flex; gap:10px; align-items:center}
    .badge{font-weight:600; font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(255,213,74,.14); border:1px solid rgba(255,213,74,.35); color:var(--text)}
    .date{font-size:12px; color:var(--muted)}

    .title{font-weight:600; margin:10px 0 6px; font-size:16px}

    ul.items{list-style:none; padding:0; margin:0; display:grid; gap:8px}
    .item{display:grid; grid-template-columns: var(--tag-w) 1fr; gap:10px; align-items:start}
    .tag{font-size:14px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--muted); white-space:nowrap; width:var(--tag-w); justify-self:start; overflow:hidden; text-overflow:ellipsis}
    .tag[data-tag="feature"]{color:var(--ok)}
    .tag[data-tag="fix"]{color:var(--err)}
    .tag[data-tag="ui"]{color:var(--ui)}
    .tag[data-tag="perf"]{color:var(--perf)}
    .tag[data-tag="audio"]{color:var(--audio)}
    .tag[data-tag="a11y"]{ color: var(--a11y)}


    .notes{color:var(--muted); font-size:14px; margin-top: 12px;}

    .anchor{position:absolute; inset:0;}

    .compact .title{margin:0}
    .compact ul.items{grid-template-columns:1fr; gap:6px}

    .luna{position:sticky; bottom:12px; margin-top:24px; display:flex; gap:10px; align-items:flex-start;}

/* S'assurer que le conteneur ne limite pas Luna */
#ttul-changelog {
    position: relative !important;
    overflow: visible !important;
    transform: none !important;
    isolation: isolate;
    min-height: 100vh;
    width: 100% !important; /* Forcer la largeur complète */
}
    
    /* Luna avatar */
.luna .avatar {
  position: relative;
  width: 150px; /* taille de la zone cliquable */
  height: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.luna .avatar img {
  height: 100%; /* change la taille réelle de l'image */
  width: auto;
  display: block;
}
    @media (max-width: 480px){
  :root{
    --luna-img-h: 150px;
    --luna-img-top: -4px;
    --luna-img-left: -4px;
  }
}


    .luna .bubble{flex:1; background:var(--card); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px 14px; color:var(--text); box-shadow:var(--shadow); font-size:14px}

    @media (min-width: 820px){
      .timeline{grid-template-columns: repeat(2, minmax(0, 1fr))}
      .entry{padding:18px 18px}
    }
    @media (max-width: 480px){
      :root{ --tag-w: 112px; }
    }

/* Nav plus premium */
.main-nav ul{
  list-style:none; display:flex; gap:24px; margin:0; padding:0;
}
.main-nav a{
  position:relative;
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  padding:10px 2px;   /* pad vertical pour la zone de clic */
  outline:none;
  transition: color .25s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible{
  color:var(--accent);
}

/* Soulignement animé (slide-in) */
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  height:2px; width:100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
  border-radius: 2px;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after{
  transform: scaleX(1);
}

/* État actif (page en cours) */
.main-nav a[aria-current="page"]{
  color:var(--accent);
}
.main-nav a[aria-current="page"]::after{
  transform: scaleX(1);
}

/* Mobile : garde la finesse */
@media (max-width: 600px){
  .main-nav ul{ flex-direction:column; gap:12px; }
  .main-nav a{ padding:8px 0; }
}

/* Forcer le dark theme partout */
:root{
  color-scheme: dark;
  --bg:#0b0c10 !important;
  --card:#111318 !important;
  --text:#e9edf1 !important;
  --muted:#99a3ad !important;
  --shadow: 0 10px 30px rgba(0,0,0,.4) !important;
}