:root {
  --iclr-bg-light: #e9ecef;
  --iclr-bg-dark: #111111;
  --iclr-bg-card-light: #ffffff;
  --iclr-bg-card-dark: #1b1c1e;
  --iclr-text-light: #222329;
  --iclr-text-dark: #eff2f6;
  --iclr-text-sub-light: #3c3b41;
  --iclr-text-sub-dark: #d2d6db;
  --iclr-text-fifth-light: #7f7f80;
  --iclr-text-fifth-dark: #807f7f;
  --iclr-background-reader-light: #e9ecef;
  --iclr-background-reader-dark: #111111;
  --iclr-accent-light: #ff6b6b;
  --iclr-accent-dark: #ff7f7f;

  /* couleurs status (internal) */
  --iclr-success-light: #4caf50;
  --iclr-success-dark: #43a047;
  --iclr-warning-light: #ff9800;
  --iclr-warning-dark: #fb8c00;
  --iclr-disabled-light: #9e9e9e;
  --iclr-disabled-dark: #757575;
  --iclr-error-light: #e53935;
  --iclr-error-dark: #d32f2f;
  --iclr-primary-light: #0095ad;
  --iclr-primary-dark: #1ab6b9;

  /* Main Light */
  --clr-bg: var(--iclr-bg-light);
  --clr-bg-rgb: 255, 255, 255;
  --clr-bg-card: var(--iclr-bg-card-light);
  --clr-bg-card-rgb: 247, 248, 252;
  --clr-text: var(--iclr-text-light);
  --clr-text-rgb: 34, 40, 49;
  --clr-text-sub: var(--iclr-text-sub-light);
  --clr-text-sub-rgb: 112, 116, 123;
  --clr-text-fifth: var(--iclr-text-fifth-light);
  --clr-text-fifth-rgb: 128, 127, 127;
  --clr-bg-reader: var(--iclr-background-reader-light);
  --clr-bg-reader-rgb: 247, 248, 252;
  --clr-accent: var(--iclr-accent-light);
  --clr-accent-rgb: 255, 107, 107;
  --clr-bg-rgb-val: 247, 248, 252;

  /* Status Colors Light */
  --clr-success: var(--iclr-success-light);
  --clr-warning: var(--iclr-warning-light);
  --clr-disabled: var(--iclr-disabled-light);
  --clr-error: var(--iclr-error-light);
  --clr-error-rgb: 229, 57, 53;
  --clr-primary: var(--iclr-primary-light);
  --clr-primary-rgb: 0, 149, 173;

  /* Invert Light */
  --clr-bg-invert: var(--iclr-bg-dark);
  --clr-bg-invert-rgb: 17, 17, 17;
  --clr-bg-card-invert: var(--iclr-bg-card-dark);
  --clr-bg-card-invert-rgb: 27, 28, 30;
  --clr-text-invert: var(--iclr-text-dark);
  --clr-text-invert-rgb: 236, 239, 244;
  --clr-text-sub-invert: var(--iclr-text-sub-dark);
  --clr-text-sub-invert-rgb: 210, 214, 219;
  --clr-text-fifth-invert: var(--iclr-text-fifth-dark);
  --clr-text-fifth-invert-rgb: 128, 127, 127;
  --clr-bg-reader-invert: var(--iclr-background-reader-dark);
  --clr-bg-reader-invert-rgb: 17, 17, 17;
  --clr-primary-invert: var(--iclr-primary-dark);
  --clr-primary-invert-rgb: 26, 182, 185;
  --clr-accent-invert: var(--iclr-accent-dark);
  --clr-accent-invert-rgb: 255, 127, 127;
  --clr-bg-invert-rgb-val: 21, 23, 26;
  --series-fixed-cover-width-desktop: 180px;
  --series-fixed-cover-width-mobile: 120px;
  --mobile-carousel-card-aspect-ratio: 1.8;
  --mobile-bars-height: 60px;
}

html.dark:root,
body.dark {
  /* Main Dark */
  --clr-bg: var(--iclr-bg-dark);
  --clr-bg-rgb: 17, 17, 17;
  --clr-bg-card: var(--iclr-bg-card-dark);
  --clr-bg-card-rgb: 27, 28, 30;
  --clr-text: var(--iclr-text-dark);
  --clr-text-rgb: 236, 239, 244;
  --clr-text-sub: var(--iclr-text-sub-dark);
  --clr-text-sub-rgb: 210, 214, 219;
  --clr-text-fifth: var(--iclr-text-fifth-dark);
  --clr-text-fifth-rgb: 128, 127, 127;
  --clr-bg-reader: var(--iclr-background-reader-dark);
  --clr-bg-reader-rgb: 17, 17, 17;
  --clr-accent: var(--iclr-accent-dark);
  --clr-accent-rgb: 255, 127, 127;
  --clr-bg-rgb-val: 21, 23, 26;

  /* Status Colors Dark */
  --clr-success: var(--iclr-success-dark);
  --clr-warning: var(--iclr-warning-dark);
  --clr-disabled: var(--iclr-disabled-dark);
  --clr-error: var(--iclr-error-dark);
  --clr-primary: var(--iclr-primary-dark);
  --clr-primary-rgb: 26, 182, 185;

  /* Invert Dark */
  --clr-bg-invert: var(--iclr-bg-light);
  --clr-bg-invert-rgb: 247, 248, 252;
  --clr-bg-card-invert: var(--iclr-bg-card-light);
  --clr-bg-card-invert-rgb: 255, 255, 255;
  --clr-text-invert: var(--iclr-text-light);
  --clr-text-invert-rgb: 34, 40, 49;
  --clr-text-sub-invert: var(--iclr-text-sub-light);
  --clr-text-sub-invert-rgb: 112, 116, 123;
  --clr-text-fifth-invert: var(--iclr-text-fifth-light);
  --clr-text-fifth-invert-rgb: 128, 127, 127;
  --clr-bg-reader-invert: var(--iclr-background-reader-light);
  --clr-bg-reader-invert-rgb: 247, 248, 252;
  --clr-primary-invert: var(--iclr-primary-light);
  --clr-primary-invert-rgb: 0, 149, 173;
  --clr-accent-invert: var(--iclr-accent-light);
  --clr-accent-invert-rgb: 255, 107, 107;
  --clr-bg-invert-rgb-val: 247, 248, 252;
}

* {
  letter-spacing: normal;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Urbanist", system-ui, sans-serif;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  overflow-x: hidden;
  line-height: 1.55;
}

/* --- AJOUT POUR LE LECTEUR --- */

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.chapter-card,
.series-card,
.presentation-content,
.profile-pic,
.gallery-controls,
.series-detail-container,
.colo-card,
.chapter-card-list-item {
  transform: translateY(20px);
  opacity: 0.5;
}

img.lazy-load-gallery[src*="placeholder_preview.png"] {
  opacity: 0.3;
}

img.lazy-load-gallery.image-loaded-fade-in {
  opacity: 1;
}

button,
input,
select,
textarea {
  font-family: inherit;
}