@charset "UTF-8";

/* 
   ========================================================================
   DÉBUT DE LA PARTIE MODIFIÉE POUR LE DARK THEME 
   (uniquement :root, [data-bs-theme="light"], mais même structure + 
   mêmes noms de variables que l’original)
   ========================================================================
*/
:root, [data-bs-theme="light"] {
  /* 
     On garde les mêmes noms de variables, mais on modifie les valeurs
     de façon à avoir un rendu de type "dark theme".
     Vous pouvez ajuster les couleurs selon vos préférences.
  */

  /* Couleurs de base */
  --blue: #82aaff;             /* Teinte bleue plus claire pour fond sombre */
  --black: #000;               /* On peut garder le noir tel quel */
  --indigo: #985eff;           /* Indigo vif sur fond foncé */
  --purple: #c56cf0;
  --pink: #f675a8;
  --red: #ff5370;              /* Rouge plus flashy pour le dark */
  --orange: #ffb86c;
  --yellow: #ffe59e;
  --green: #4cc78f;
  --teal: #5abfdd;             /* Peut rester tel quel si souhaité */
  --cyan: #89ddff;
  --white: #fff;               /* Inverse du thème clair : on le garde blanc */

  /* Nuancier de gris « foncé » (les tons 100, 200, etc. seront plus sombres) */
  --gray-100: #1a1a1a;
  --gray-200: #2a2a2a;
  --gray-300: #3a3a3a;
  --gray-400: #4a4a4a;
  --gray-500: #6f6f6f;
  --gray-600: #999999;
  --gray-700: #b3b3b3;
  --gray-800: #cccccc;
  --gray-900: #f8f8f8;

  /* Couleurs principales – inversées vers un style sombre */
  --primary: #bb86fc;  
  --secondary: #03dac6;
  --success: #03a979;
  --info: #2196f3;
  --warning: #ffa000;
  --danger: #cf6679;
  --light: #929292;            /* "light" devient un gris clair */
  --dark: #121212;             /* "dark" devient un vrai fond sombre */

  /* Valeurs RGB correspondantes, pour les effets, dégradés, focus, etc. */
  --primary-rgb: 187, 134, 252;
  --secondary-rgb: 3, 218, 198;
  --success-rgb: 3, 169, 121;
  --info-rgb: 33, 150, 243;
  --warning-rgb: 255, 160, 0;
  --danger-rgb: 207, 102, 121;
  --light-rgb: 146, 146, 146;
  --dark-rgb: 18, 18, 18;

  /* Emphasis text: on inverse pour que le texte reste lisible sur fond sombre */
  --primary-text-emphasis: #fee;  
  --secondary-text-emphasis: #eef;
  --success-text-emphasis: #cdf;
  --info-text-emphasis: #def;
  --warning-text-emphasis: #fec;
  --danger-text-emphasis: #ffdce1;
  --light-text-emphasis: #444;   
  --dark-text-emphasis: #ccc;    

  /* Les "bg-subtle" deviennent plus foncés ou légèrement colorés pour rester sombres */
  --primary-bg-subtle: #3c2a50;
  --secondary-bg-subtle: #184e4a;
  --success-bg-subtle: #1c4133;
  --info-bg-subtle: #19364a;
  --warning-bg-subtle: #4a3a19;
  --danger-bg-subtle: #4a1f27;
  --light-bg-subtle: #2a2a2a;
  --dark-bg-subtle: #242424;

  /* Bordures subtiles */
  --primary-border-subtle: #3c2a50;
  --secondary-border-subtle: #184e4a;
  --success-border-subtle: #1c4133;
  --info-border-subtle: #19364a;
  --warning-border-subtle: #4a3a19;
  --danger-border-subtle: #4a1f27;
  --light-border-subtle: #2a2a2a;
  --dark-border-subtle: #484848;

  /* Couleurs de base en RGB pour d’autres effets */
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;

  /* Familles de police inchangées */
  --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, 
                     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Arrière-plans, polices du corps, etc. – inversées pour un style sombre */
  --gradient: linear-gradient(180deg, #ffffff26, #fff0); /* L'effet d’overlay peut rester */
  --body-font-family: var(--cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, 
                         "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  --body-font-size: 1rem;
  --body-font-weight: 400;
  --body-line-height: 1.5;

  /* Le texte principal devient clair */
  --body-color: #f2f2f2;
  --body-color-rgb: 242, 242, 242;

  /* Le fond global devient sombre */
  --body-bg: #121212;
  --body-bg-rgb: 18, 18, 18;

  /* Autres contrastes */
  --emphasis-color: #fff;
  --emphasis-color-rgb: 255, 255, 255;
  --secondary-color: #aaaaaa;
  --secondary-color-rgb: 170, 170, 170;
  --secondary-bg: #2a2a2a;
  --secondary-bg-rgb: 42, 42, 42;
  --tertiary-color: #767676;
  --tertiary-color-rgb: 118, 118, 118;
  --tertiary-bg: #1f1f1f;
  --tertiary-bg-rgb: 31, 31, 31;
  --heading-color: #fff; /* titres clairs */
  --link-color: #82aaff; /* liens plus visibles sur fond sombre */
  --link-color-rgb: 130, 170, 255;
  --link-decoration: underline;
  --link-hover-color: #a5c1ff;
  --link-hover-color-rgb: 165, 193, 255;
  --code-color: #ff5370; /* un rose flashy pour le code */
  --highlight-color: #fff;
  --highlight-bg: #4a4a4a; /* un gris moyen pour le highlight */
  --border-width: 1px;
  --border-style: solid;
  --border-color: #444; /* ou #4a4a4a pour un léger contraste */
  --border-color-translucent: #ffffff2d; /* Sur fond sombre => blanc translucide */
  --border-radius: .25rem;
  --border-radius-sm: .2rem;
  --border-radius-lg: .3rem;
  --border-radius-xl: .3rem;
  --border-radius-xxl: 2rem;
  --border-radius-2xl: var(--border-radius-xxl);
  --border-radius-pill: 50rem;
  --box-shadow: 0 .5rem 1rem #00000040;   /* ombre plus marquée */
  --box-shadow-sm: 0 .125rem .25rem #00000060;
  --box-shadow-lg: 0 1rem 3rem #00000080;
  --box-shadow-inset: inset 0 1px 2px #00000060;
  --focus-ring-width: .25rem;
  --focus-ring-opacity: .25;
  --focus-ring-color: #82aaff40; /* Couleur d’outline focus */
  --form-valid-color: #4cc78f;
  --form-valid-border-color: #4cc78f;
  --form-invalid-color: #cf6679;
  --form-invalid-border-color: #cf6679;
}

/* 
   ========================================================================
   FIN DE LA PARTIE MODIFIÉE POUR LE DARK THEME 
   On recopie ci-dessous tout le reste du code original à l’identique.
   ========================================================================
*/

/* Tout le reste de votre CSS reste inchangé en dessous.
   Ci-après, vous conservez strictement la même structure, 
   les mêmes classes, les mêmes propriétés, etc. 
   (À l’exception des variables déjà réécrites ci-dessus).
*/

*, :before, :after {
  box-sizing: border-box;
}

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

body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--body-color);
  text-align: var(--body-text-align);
  background-color: var(--body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: #0000;
  margin: 0;
}