/* THÈMES */

/* 1. Thème par défaut (Vert) */
:root, [data-theme="default"] {
  --side: 280px;
  --bg: #06130c;
  --panel: #0d2217;
  --panel2: #133324;
  --side-bg: rgba(6, 19, 12, .92);
  --ink: #e8f4ed;
  --mut: #9ab3a3;
  --line: #1e3d2c;
  --mint: #7ee2b0;
  color-scheme: dark;
}

/* 2. Thème Noir (OLED) */
[data-theme="black"] {
  --bg: #000000;
  --panel: #111111;
  --panel2: #1c1c1c;
  --side-bg: rgba(0, 0, 0, .92);
  --ink: #f0f0f0;
  --mut: #888888;
  --line: #2a2a2a;
  --mint: #ffffff;
  color-scheme: dark;
}

/* 3. Thème Blanc (Clair) */
[data-theme="white"] {
  --bg: #f8f9fa;
  --panel: #ffffff;
  --panel2: #e9ecef;
  --side-bg: rgba(248, 249, 250, .92);
  --ink: #212529;
  --mut: #6c757d;
  --line: #dee2e6;
  --mint: #0d6efd;
  color-scheme: light;
}

/* 4. Thème Rouge */
[data-theme="red"] {
  --bg: #140808;
  --panel: #220d0d;
  --panel2: #331313;
  --side-bg: rgba(20, 8, 8, .92);
  --ink: #fceded;
  --mut: #b59090;
  --line: #421a1a;
  --mint: #ff5252;
  color-scheme: dark;
}

/* 5. Thème Bleu */
[data-theme="blue"] {
  --bg: #080c14;
  --panel: #0d1522;
  --panel2: #132033;
  --side-bg: rgba(8, 12, 20, .92);
  --ink: #edeef4;
  --mut: #909bb5;
  --line: #1c2c42;
  --mint: #38bdf8;
  color-scheme: dark;
}

/* 6. Thème Violet */
[data-theme="purple"] {
  --bg: #100814;
  --panel: #1a0d22;
  --panel2: #271333;
  --side-bg: rgba(16, 8, 20, .92);
  --ink: #f4edfc;
  --mut: #ad90b5;
  --line: #371c42;
  --mint: #c084fc;
  color-scheme: dark;
}

/* 7. Thème Orange */
[data-theme="orange"] {
  --bg: #140d06;
  --panel: #22150d;
  --panel2: #332013;
  --side-bg: rgba(20, 13, 6, .92);
  --ink: #fcf2ed;
  --mut: #b59f90;
  --line: #42281a;
  --mint: #fb923c;
  color-scheme: dark;
}

/* 8. Thème Rose */
[data-theme="pink"] {
  --bg: #14080e;
  --panel: #220d18;
  --panel2: #331325;
  --side-bg: rgba(20, 8, 14, .92);
  --ink: #fcecef;
  --mut: #b590a2;
  --line: #421a2f;
  --mint: #ec4899;
  color-scheme: dark;
}

/* 9. Thème Cyan */
[data-theme="cyan"] {
  --bg: #061114;
  --panel: #0d1e22;
  --panel2: #132d33;
  --side-bg: rgba(6, 17, 20, .92);
  --ink: #edf8fc;
  --mut: #90b0b5;
  --line: #1a3c42;
  --mint: #06b6d4;
  color-scheme: dark;
}

/* 10. Thème Jaune / Ambre */
[data-theme="yellow"] {
  --bg: #141206;
  --panel: #221e0d;
  --panel2: #332d13;
  --side-bg: rgba(20, 18, 6, .92);
  --ink: #fcfaf2;
  --mut: #b5aba0;
  --line: #423a1a;
  --mint: #eab308;
  color-scheme: dark;
}

/* Transitions douces */
body, main, #side, .fab, .ac, .sae, section, h1, h2, p, a, button, input, .view, #cp, #sr>div {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.no-transition * {
  transition: none !important;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 30px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.65 'Chivo', system-ui, sans-serif;
}

:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

a {
  color: var(--mint);
}

.fab {
  position: fixed;
  top: 14px;
  z-index: 60;
  height: 42px;
  min-width: 42px;
  padding: 0 14px;
  border-radius: 21px;
  background: var(--panel2);
  border: 1px solid var(--line);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fab:hover {
  border-color: var(--mint);
}

.fab .icon-loupe {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

#bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 70;
}

.cr {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
}

.cr .fab {
  position: static;
}

#cp {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  width: min(340px, 86vw);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: .88rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}

#cp p {
  margin: 0 0 8px;
}

#cp p:last-child {
  margin: 0;
}

#cp small {
  display: block;
  color: var(--mut);
}

.cr:hover #cp,
.cr.open #cp,
.cr:focus-within #cp {
  display: block;
}

#menu {
  left: 62px;
  display: none;
}

#find {
  right: 14px;
}

#side {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--side);
  padding: 72px 12px 24px;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: var(--side-bg);
  backdrop-filter: blur(10px);
  z-index: 50;
  font-size: .92rem;
}

#side a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mut);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 10px;
}

#side a:hover {
  background: var(--panel);
}

#side a[aria-current=true] {
  background: var(--panel2);
  color: var(--ink);
  font-weight: 700;
}

#side .gh i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--c);
  flex: none;
}

#side .gh em {
  margin-left: auto;
  font-style: normal;
  font-size: .78rem;
  color: var(--mut);
}

#side .sep {
  margin: 14px 10px 4px;
  font-size: .78rem;
  color: var(--mut);
}

.sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s;
}

.sub>div {
  overflow: hidden;
  margin-left: 16px;
  border-left: 2px solid var(--line);
}

.g.on .sub {
  grid-template-rows: 1fr;
}

.g.on>.gh {
  color: var(--ink);
}

.sub a {
  padding: 4px 10px;
  font-size: .84rem;
}

.sub .d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--mut);
  flex: none;
}

.sub .d.ok {
  background: var(--c);
  border-color: var(--c);
}

main {
  margin-left: var(--side);
  padding: 0 clamp(16px, 4vw, 56px) 120px;
}

main>* {
  max-width: 900px;
}

.hero {
  padding: 96px 0 40px;
  background: radial-gradient(60% 90% at 0 0, rgba(126, 226, 176, .13), transparent 70%);
}

h1 {
  font-size: clamp(3rem, 10vw, 6.5rem);
  line-height: .95;
  margin: 0;
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(100deg, var(--ink) 30%, var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  margin: 16px 0 0;
  max-width: 60ch;
  color: var(--mut);
}

.hero .nom {
  font-weight: 700;
  color: var(--mint);
  font-size: 1.2rem;
}

section {
  margin-top: 72px;
}

h2 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  margin: 0;
  line-height: 1.1;
  font-weight: 800;
  padding-left: 18px;
  border-left: 8px solid var(--c, var(--mint));
}

.int {
  max-width: 70ch;
  color: var(--mut);
  margin: 14px 0 0 26px;
}

.niv {
  margin: 6px 0 0 26px;
  font-weight: 700;
}

.syn,
.saeI {
  margin: 20px 0 0 26px;
  max-width: 70ch;
  white-space: pre-line;
}

.ac,
.sae {
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important;
  border-color: rgba(255, 255, 255, .09) !important;
  border-radius: 20px;
  padding: 24px;
  margin-top: 20px;
  border: 1px solid var(--line);
}

.ac::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c), transparent);
}

.ac h3,
.sae h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.35;
  max-width: 70ch;
}

.ac h3 span,
.sae h3 span {
  display: inline-block;
  background: var(--c, var(--mint));
  color: #06130c;
  border-radius: 8px;
  padding: 1px 10px;
  margin-right: 10px;
  font-size: .9rem;
  font-weight: 700;
}

.arg {
  max-width: 70ch;
  margin: 14px 0;
  white-space: pre-line;
}

.vide {
  color: var(--mut);
  font-style: italic;
  font-size: .92rem;
}

.car {
  margin-top: 18px;
  border-radius: 18px;
}

.view {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  aspect-ratio: 16/10;
  max-height: 560px;
  touch-action: pan-y;
}

.track {
  display: flex;
  height: 100%;
  transform: translate3d(calc(var(--i, 0) * -100%), 0, 0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.slide {
  flex: 0 0 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

.slide iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.pdfc {
  display: grid;
  gap: 6px;
  text-align: center;
  color: var(--mint);
  padding: 16px;
}

.pdfc b {
  font-size: 3rem;
  font-weight: 800;
}

.pdfc span {
  color: var(--mut);
}

.nv,
.zm {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background: rgba(6, 19, 12, .72);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  transition: background .2s, color .2s;
}

.nv {
  top: 50%;
  translate: 0 -50%;
  width: 46px;
  height: 46px;
  font-size: 1.7rem;
  line-height: 1;
}

.pv {
  left: 12px;
}

.nx {
  right: 12px;
}

.zm {
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
}

.nv:hover,
.zm:hover {
  background: var(--mint);
  color: #06130c;
}

.cnt {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  background: rgba(6, 19, 12, .72);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: .82rem;
}

.dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.dots button {
  position: relative;
  width: 28px;
  height: 6px;
  border: 0;
  padding: 0;
  border-radius: 3px;
  background: var(--line);
  transition: width .3s, background .3s;
}

.dots button::after {
  content: "";
  position: absolute;
  inset: -10px -2px;
}

.dots .on {
  width: 52px;
  background: var(--c, var(--mint));
}

.caps {
  display: grid;
  margin-top: 12px;
}

.cap {
  grid-area: 1/1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}

.cap.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cap p {
  margin: 4px 0;
  max-width: 70ch;
}

.cap small {
  display: block;
  color: var(--mut);
  overflow-wrap: anywhere;
}

.prog {
  height: 6px;
  margin: 14px 0 0 26px;
  max-width: 260px;
  border-radius: 3px;
  background: var(--line);
}

.prog i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--c);
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(40% 35% at 20% 15%, color-mix(in srgb, var(--mint) 16%, transparent), transparent 70%), 
              radial-gradient(35% 30% at 85% 30%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 70%);
  animation: drift 40s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes drift {
  to {
    transform: translate3d(4%, 3%, 0) scale(1.08);
  }
}

@keyframes up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

.hero>* {
  animation: up .8s cubic-bezier(.2, .7, .2, 1) both;
}

.hero>:nth-child(2) {
  animation-delay: .1s;
}

.hero>:nth-child(3) {
  animation-delay: .18s;
}

.hero>:nth-child(4) {
  animation-delay: .26s;
}

.vw .ft small {
  white-space: pre-line;
}

@media(max-width:600px) {
  .view {
    aspect-ratio: 4/3;
  }
}

@media(prefers-reduced-motion:reduce) {
  body::before,
  .hero>* {
    animation: none;
  }
  .track,
  .cap,
  .dots button {
    transition: none;
  }
}

.vw {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 5, .92);
  display: none;
  flex-direction: column;
  z-index: 100;
  padding: 12px;
}

.vw.open {
  display: flex;
}

.vw .bd {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
}

.vw img,
.vw iframe {
  max-width: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 12px;
}

.vw iframe {
  width: min(1000px, 100%);
  height: 100%;
  background: #fff;
}

.vw .ft {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 4px 0;
  flex-wrap: wrap;
}

.vw .ft div {
  flex: 1;
  min-width: 200px;
}

.vw small {
  display: block;
  color: var(--mut);
}

.vw button,
.vw .ft a {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 14px;
  text-decoration: none;
  color: var(--ink);
}

.flash {
  animation: fl 1.6s;
}

@keyframes fl {
  0%, 60% {
    box-shadow: 0 0 0 3px var(--mint);
  }
  100% {
    box-shadow: 0 0 0 3px transparent;
  }
}

#sr {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 5, .75);
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh 16px 0;
  z-index: 90;
}

#sr.open {
  display: flex;
}

#sr>div {
  width: min(640px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}

#q {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
}

#res {
  max-height: 56vh;
  overflow: auto;
  margin-top: 8px;
}

#res a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 10px;
}

#res a:hover,
#res a:focus-visible {
  background: var(--panel2);
}

#res small {
  color: var(--mint);
  margin-right: 8px;
}

#res span {
  display: block;
  color: var(--mut);
  font-size: .85rem;
}

.none {
  color: var(--mut);
  padding: 10px 12px;
  margin: 0;
}

[hidden] {
  display: none !important;
}

.tr {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  display: flex;
  gap: 8px;
}

.tr .fab {
  position: static;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0 26px;
}

.meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: .85rem;
  color: var(--mut);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0 26px;
}

.chips button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 14px;
  transition: background .2s;
}

.chips button:hover {
  border-color: var(--mint);
}

.chips [aria-pressed=true] {
  background: var(--mint);
  color: #06130c;
  border-color: var(--mint);
  font-weight: 700;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.tag {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 10px;
  font-size: .78rem;
  color: var(--mut);
}

.tag:hover,
.tag[aria-pressed=true] {
  border-color: var(--mint);
  color: var(--ink);
}

.ovg {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 24px;
}

.radar {
  width: 100%;
  height: auto;
  overflow: visible;
}

.ring,
.axis {
  fill: none;
  stroke: var(--line);
}

.grow {
  transform-origin: 210px 190px;
  transform: scale(0);
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
}

.radar.go .grow {
  transform: none;
}

.area {
  fill: rgba(126, 226, 176, .22);
  stroke: var(--mint);
  stroke-width: 2;
  stroke-linejoin: round;
}

.rl {
  fill: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}

.rl:hover {
  fill: var(--mint);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stats div {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

.stats b {
  display: block;
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 800;
}

.stats span {
  color: var(--mut);
  font-size: .85rem;
}

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  color: var(--ink);
  text-decoration: none;
  margin-top: 14px;
}

.row i {
  grid-column: 1/-1;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.row u {
  display: block;
  height: 100%;
  background: var(--c);
  border-radius: 3px;
}

.pr {
  display: none;
}

/* sélecteur de thème */
.theme-container {
  display: flex;
  align-items: center;
  position: relative;
}

#theme-toggle {
  display: none !important;
}

.theme-picker {
  display: flex;
  gap: 5px;
  align-items: center;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 21px;
  padding: 0 8px;
  height: 42px;
  overflow-x: auto;
  max-width: 280px;
}

.theme-picker::-webkit-scrollbar {
  display: none;
}

.theme-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0;
  flex: none;
  transition: transform 0.2s cubic-bezier(.2, .8, .2, 1), box-shadow 0.2s;
}

.theme-btn:hover {
  transform: scale(1.3);
}

.theme-btn[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--mint);
  transform: scale(1.25);
}

@media(max-width: 700px) {
  .ovg {
    grid-template-columns: 1fr;
  }
}

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  :root {
    --bg: #fff;
    --panel: #fff;
    --panel2: #f3f3f3;
    --ink: #111;
    --mut: #555;
    --line: #ccc;
    --mint: #0b6b4a;
  }
  body {
    background: #fff;
    color: #111;
    font-size: 11pt;
  }
  body::before,
  #bar,
  .cr,
  #menu,
  .tr,
  #side,
  #sr,
  #vw,
  .chips,
  .car,
  .zm {
    display: none !important;
  }
  main {
    margin: 0;
    padding: 0;
  }
  .hero {
    background: none;
    padding: 0 0 12pt;
  }
  h1 {
    background: none;
    color: #0b3d2e;
    -webkit-text-fill-color: #0b3d2e;
  }
  .hero>* {
    animation: none;
  }
  section {
    margin-top: 18pt;
  }
  #comps>section {
    break-before: page;
  }
  .ac {
    content-visibility: visible;
    background: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid-page;
  }
  .ac h3 span {
    color: #111;
  }
  .grow {
    transform: none;
    transition: none;
  }
  .pr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10pt;
    margin-top: 10pt;
  }
  .pr figure {
    margin: 0;
    break-inside: avoid;
    border: 1px solid #ddd;
    padding: 6pt;
    border-radius: 6pt;
  }
  .pr img {
    width: 100%;
    max-height: 230pt;
    object-fit: contain;
    display: block;
  }
  .pr figcaption {
    font-size: 9.5pt;
    margin-top: 4pt;
  }
  .pr figcaption small {
    display: block;
    color: #555;
  }
}

/* ==========================================================
   OPTIMISATION MOBILE (< 900px) - TIROIR SOUS LA LOUPE
   ========================================================== */
@media(max-width: 900px) {
  :root {
    --side: 0px;
  }

  /* Bouton menu hamburger en haut à gauche */
  #menu {
    display: flex !important;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 60;
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
  }

  /* Bouton Crédits à côté du menu */
  .cr {
    position: fixed;
    top: 10px;
    left: 58px;
    z-index: 60;
  }
  .cr .fab {
    height: 40px;
    min-width: 40px;
    padding: 0 10px;
  }
  .cr span {
    display: none;
  }

  /* Barre d'outils haut droite (PDF et Recherche) */
  .tr {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 60;
  }
  .tr .fab {
    height: 40px;
    min-width: 40px;
    padding: 0 10px;
  }
  #print span {
    display: none;
  }

  /* Conteneur du tiroir de thèmes positionné juste en dessous de la loupe sur mobile */
  .theme-container {
    position: fixed;
    top: 56px;
    right: 10px;
    z-index: 59;
    display: flex;
    align-items: center;
  }

  /* Bouton carré pour ouvrir les thèmes sur mobile */
  #theme-toggle {
    display: flex !important;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: var(--panel2);
    border: 1px solid var(--line);
  }

  /* sélecteur de pastilles */
  .theme-picker {
    position: absolute;
    right: 46px;
    top: 0;
    height: 40px;
    max-width: none;
    width: max-content;
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 0 8px;
    gap: 5px;
    
    /* Animation de dépliage */
    transform: scaleX(0);
    opacity: 0;
    pointer-events: none;
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), opacity 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }

  /* État ouvert du tiroir sur mobile */
  .theme-container.open .theme-picker {
    transform: scaleX(1);
    opacity: 1;
    pointer-events: auto;
  }

  #side {
    width: 280px;
    transform: translateX(-100%);
    transition: transform .25s;
  }
  #side.open {
    transform: none;
  }
  main {
    margin-left: 0;
    padding-top: 30px;
  }
}