body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #353535;
  color: white;
  border-color: black;
  transition: background-color 0.3s ease; /* Transition de fond */
}

/* Style du titre */
h1 {
  margin-top: 20px;
  color: white;
}
/* Style du sous-titre */
.credits {
  font-size: 14px;
  color: #666;
  text-align: center;
  font-weight: normal;
  margin-top: -10px;
}
/* Nav container */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #5a2a99;
  padding: 10px 20px;
  position: relative;
}

.nav-logo {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-links li a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  transition: color 0.3s;
  cursor: pointer;
}

.nav-links li a:hover {
  color: #ffd700;
}

.nav-toggle {
  display: none;
  font-size: 24px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed; /* fixé par-dessus tout */
    top: 60px;
    right: 0;
    background: #5a2a99;
    flex-direction: column;
    width: 200px;
    display: none;
    padding: 15px;
    border-radius: 0 0 0 10px;
    z-index: 1000; /* passe devant le contenu */
    .palette:hover {
      box-shadow: none !important;
    }
  }

  .nav-links.show {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }
}
/* Palette */
.palette {
  margin: 20px auto;
  width: 80%;
  padding: 10px;
  background-color: #282828; /* Fond gris plus foncé */
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); /* Ombre plus marquée */
  transition: box-shadow 0.3s ease; /* Transition de l'ombre */
}

.palette:hover {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); /* Ombre plus intense au survol */
}

/* Conteneur des couleurs */
.colors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Interaction des couleurs au survol */
.colors div {
  width: 120px;
  height: 120px;
  margin: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  text-shadow: -0.5px -0.5px 0 black, 0.5px -0.5px 0 black, -0.5px 0.5px 0 black,
    0.5px 0.5px 0 black;
  font-weight: bold;
  font-size: 14px;
  position: relative;
  padding: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.colors div:hover {
  transform: scale(1.05); /* Légère augmentation de taille */
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); /* Ombre au survol */
}

.colors div:active {
  transform: scale(0.95); /* Réduction au clic */
  transition: transform 0.2s ease-in-out;
}

/* Texte clair pour les couleurs sombres */
.light-text {
  color: white;
}

/* Texte sombre pour les couleurs claires */
.dark-text {
  color: black;
}
/* Palette: Majestic Jewel Tones */
.palette .colors.jewel div[data-name="Royal Obsidian"] {
  background-color: #a4123f;
}
.palette .colors.jewel div[data-name="Crimson Gem"] {
  background-color: #8b2232;
}
.palette .colors.jewel div[data-name="Violet Night"] {
  background-color: #7d00ab;
}
.palette .colors.jewel div[data-name="Emerald Mist"] {
  background-color: #007b5f;
}
.palette .colors.jewel div[data-name="Blue Jewel"] {
  background-color: #0f52ba;
}
.palette .colors.jewel div[data-name="Ocean Depth"] {
  background-color: #005f6a;
}
.palette .colors.jewel div[data-name="Midnight Shadow"] {
  background-color: #1c1c1c;
}
.palette .colors.jewel div[data-name="Magenta Dream"] {
  background-color: #6a1d56;
}
.palette .colors.jewel div[data-name="Scarlet Fire"] {
  background-color: #65000b;
}
.palette .colors.jewel div[data-name="Electric Blue"] {
  background-color: #3f00ff;
}
.palette .colors.jewel div[data-name="Purple Thunder"] {
  background-color: #6a0dad;
}
.palette .colors.jewel div[data-name="Crimson Red"] {
  background-color: #9b111e;
}
.palette .colors.jewel div[data-name="Garnet Stone"] {
  background-color: #9a2a2a;
}
.palette .colors.jewel div[data-name="Jade Green"] {
  background-color: #006f2b;
}
.palette .colors.jewel div[data-name="Golden Touch"] {
  background-color: #ffc87c;
}
.palette .colors.jewel div[data-name="Sunlit Yellow"] {
  background-color: #ffbf00;
}
.palette .colors.jewel div[data-name="Purple Vibe"] {
  background-color: #7a378b;
}
.palette .colors.jewel div[data-name="Blue Waves"] {
  background-color: #0f52ba;
}
.palette .colors.jewel div[data-name="Deep Forest"] {
  background-color: #004425;
}
.palette .colors.jewel div[data-name="Blood Red"] {
  background-color: #8b0000;
}
.palette .colors.jewel div[data-name="Purple Hue"] {
  background-color: #8e4585;
}
.palette .colors.jewel div[data-name="Burgundy Glow"] {
  background-color: #6d071a;
}
.palette .colors.jewel div[data-name="Lavender Mist"] {
  background-color: #da70d6;
}
.palette .colors.jewel div[data-name="Blue Deep"] {
  background-color: #003153;
}
.palette .colors.jewel div[data-name="Night Blue"] {
  background-color: #191970;
}
.palette .colors.jewel div[data-name="Earth Brown"] {
  background-color: #3d1c02;
}
.palette .colors.jewel div[data-name="Electric Purple"] {
  background-color: #3f00ff;
}
.palette .colors.jewel div[data-name="Lavender Light"] {
  background-color: #da70d6;
}
.palette .colors.jewel div[data-name="Light Lavender"] {
  background-color: #ccccff;
}
.palette .colors.jewel div[data-name="Ocean Blue"] {
  background-color: #082567;
}
.palette .colors.jewel div[data-name="Purple Velvet"] {
  background-color: #5e2750;
}
.palette .colors.jewel div[data-name="Deep Sea Blue"] {
  background-color: #2d3e8b;
}
.palette .colors.jewel div[data-name="Magenta Shadow"] {
  background-color: #6a1d56;
}
.palette .colors.jewel div[data-name="Dark Night"] {
  background-color: #1b1b1b;
}
.palette .colors.jewel div[data-name="Dark Burgundy"] {
  background-color: #560027;
}
.palette .colors.jewel div[data-name="Golden Dream"] {
  background-color: #f8e0a0;
}
.palette .colors.jewel div[data-name="Mystic Ruby"] {
  background-color: #99182c;
}
.palette .colors.jewel div[data-name="Sapphire Spell"] {
  background-color: #082567;
}
.palette .colors.jewel div[data-name="Emerald Whisper"] {
  background-color: #50c878;
}
.palette .colors.jewel div[data-name="Opal Gaze"] {
  background-color: #a9a9f5;
}
.palette .colors.jewel div[data-name="Royal Garnet"] {
  background-color: #8b0000;
}
.palette .colors.jewel div[data-name="Twilight Amethyst"] {
  background-color: #9966cc;
}
.palette .colors.jewel div[data-name="Crimson Bloom"] {
  background-color: #dc143c;
}
.palette .colors.jewel div[data-name="Amber Flame"] {
  background-color: #ffbf00;
}
.palette .colors.jewel div[data-name="Jade Spirit"] {
  background-color: #00a86b;
}
.palette .colors.jewel div[data-name="Moonlight Topaz"] {
  background-color: #483d8b;
}
.palette .colors.jewel div[data-name="Velvet Ruby"] {
  background-color: #c41e3a;
}
.palette .colors.jewel div[data-name="Obsidian Flame"] {
  background-color: #3b0a2e;
}
.palette .colors.jewel div[data-name="Electric Emerald"] {
  background-color: #50c878;
}
.palette .colors.jewel div[data-name="Midnight Sapphire"] {
  background-color: #0f52ba;
}
.palette .colors.jewel div[data-name="Royal Twilight"] {
  background-color: #8a2be2;
}
.palette .colors.metallic div[data-name="Golden Crown"] {
  background-color: #d4af37;
}
.palette .colors.metallic div[data-name="Silver Light"] {
  background-color: #c0c0c0;
}
.palette .colors.metallic div[data-name="Bronze Medal"] {
  background-color: #cd7f32;
}
.palette .colors.metallic div[data-name="Royal Platinum"] {
  background-color: #e5e4e2;
}
.palette .colors.metallic div[data-name="Antique Gold"] {
  background-color: #cfb53b;
}
.palette .colors.metallic div[data-name="Polished Steel"] {
  background-color: #8c92ac;
}
.palette .colors.metallic div[data-name="Iron Shadow"] {
  background-color: #4b4b4b;
}
.palette .colors.metallic div[data-name="Champagne Shine"] {
  background-color: #f7e7ce;
}
.palette .colors.metallic div[data-name="Metal Rose"] {
  background-color: #b76e79;
}
.palette .colors.metallic div[data-name="Copper Flame"] {
  background-color: #b87333;
}
.palette .colors.metallic div[data-name="Steel Blue"] {
  background-color: #4682b4;
}
.palette .colors.metallic div[data-name="Titanium White"] {
  background-color: #eaeaea;
}
.palette .colors.metallic div[data-name="Graphite Grey"] {
  background-color: #474a51;
}
.palette .colors.metallic div[data-name="Pearl Glow"] {
  background-color: #f8f6f0;
}
.palette .colors.metallic div[data-name="Rust Iron"] {
  background-color: #b7410e;
}
.palette .colors.metallic div[data-name="Silver Frost"] {
  background-color: #e1e1e1;
}
.palette .colors.metallic div[data-name="Charcoal Metal"] {
  background-color: #36454f;
}
.palette .colors.metallic div[data-name="Golden Beam"] {
  background-color: #ffd700;
}
.palette .colors.metallic div[data-name="Platinum Dust"] {
  background-color: #e5e4e2;
}
.palette .colors.metallic div[data-name="Cobalt Steel"] {
  background-color: #3d59ab;
}
.palette .colors.metallic div[data-name="Zinc Shadow"] {
  background-color: #7f7f7f;
}
.palette .colors.metallic div[data-name="Alloy Grey"] {
  background-color: #6e7f80;
}
.palette .colors.metallic div[data-name="Tarnished Silver"] {
  background-color: #a9a9a9;
}
.palette .colors.metallic div[data-name="Gilded Bronze"] {
  background-color: #996515;
}
.palette .colors.metallic div[data-name="Frosted Chrome"] {
  background-color: #b0c4de;
}
.palette .colors.metallic div[data-name="Silver Pearl"] {
  background-color: #c9c0bb;
}
.palette .colors.metallic div[data-name="Mercury Flash"] {
  background-color: #d9d6cf;
}
.palette .colors.metallic div[data-name="Shadow Alloy"] {
  background-color: #5a5a5a;
}
.palette .colors.metallic div[data-name="Iron Dust"] {
  background-color: #b2beb5;
}
.palette .colors.metallic div[data-name="Plated Brass"] {
  background-color: #b5a642;
}
.palette .colors.metallic div[data-name="Copper Gleam"] {
  background-color: #da8a67;
}
.palette .colors.metallic div[data-name="Silver Rose"] {
  background-color: #c4aead;
}
.palette .colors.metallic div[data-name="Chrome Glint"] {
  background-color: #d1d0ce;
}
.palette .colors.metallic div[data-name="Golden Alloy"] {
  background-color: #ffd700;
}
.palette .colors.metallic div[data-name="Matte Steel"] {
  background-color: #9a9a9a;
}
.palette .colors.metallic div[data-name="Vintage Bronze"] {
  background-color: #665d1e;
}
.palette .colors.metallic div[data-name="Pearlescent White"] {
  background-color: #fdfdff;
}
.palette .colors.metallic div[data-name="Satin Platinum"] {
  background-color: #cecece;
}
.palette .colors.metallic div[data-name="Steel Mist"] {
  background-color: #a2a2a2;
}
.palette .colors.metallic div[data-name="Shiny Nickel"] {
  background-color: #bfbfbf;
}
.palette .colors.metallic div[data-name="Bright Pewter"] {
  background-color: #bfc1c2;
}
.palette .colors.metallic div[data-name="Iron Glow"] {
  background-color: #9b9b9b;
}
.palette .colors.metallic div[data-name="Metal Cloud"] {
  background-color: #d3d3d3;
}
.palette .colors.metallic div[data-name="Golden Sand"] {
  background-color: #ecd540;
}
.palette .colors.metallic div[data-name="Rose Metal"] {
  background-color: #b76e79;
}
.palette .colors.metallic div[data-name="Steel Veil"] {
  background-color: #bcc6cc;
}
.palette .colors.metallic div[data-name="Dark Pewter"] {
  background-color: #8e8e8e;
}
.palette .colors.metallic div[data-name="Moonlight Steel"] {
  background-color: #e3e4fa;
}
.palette .colors.metallic div[data-name="Radiant Silver"] {
  background-color: #dcdcdc;
}
.palette .colors.pastel div[data-name="Lavender Breeze"] {
  background-color: #e6e6fa;
}
.palette .colors.pastel div[data-name="Blush Rose"] {
  background-color: #fadadd;
}
.palette .colors.pastel div[data-name="Mint Whisper"] {
  background-color: #d0f0c0;
}
.palette .colors.pastel div[data-name="Sky Veil"] {
  background-color: #b0e0e6;
}
.palette .colors.pastel div[data-name="Peach Mist"] {
  background-color: #ffe5b4;
}
.palette .colors.pastel div[data-name="Cloud Pearl"] {
  background-color: #f5f5f5;
}
.palette .colors.pastel div[data-name="Bluebell Frost"] {
  background-color: #a2c2e2;
}
.palette .colors.pastel div[data-name="Lilac Ash"] {
  background-color: #d8bfd8;
}
.palette .colors.pastel div[data-name="Pale Rose"] {
  background-color: #f3e2e4;
}
.palette .colors.pastel div[data-name="Iced Lavender"] {
  background-color: #c7a0d3;
}
.palette .colors.pastel div[data-name="Cotton Candy"] {
  background-color: #ffb3de;
}
.palette .colors.pastel div[data-name="Soft Mint"] {
  background-color: #a8e6cf;
}
.palette .colors.pastel div[data-name="Sugar Plum"] {
  background-color: #d1a1d0;
}
.palette .colors.pastel div[data-name="Creamy Peach"] {
  background-color: #ffdab9;
}
.palette .colors.pastel div[data-name="Frozen Blue"] {
  background-color: #a2d8f7;
}
.palette .colors.pastel div[data-name="Lemon Sorbet"] {
  background-color: #fffacd;
}
.palette .colors.pastel div[data-name="Pastel Pink"] {
  background-color: #f4c7d9;
}
.palette .colors.pastel div[data-name="Opal Glow"] {
  background-color: #c4c4c4;
}
.palette .colors.pastel div[data-name="Seafoam Green"] {
  background-color: #9fe2bf;
}
.palette .colors.pastel div[data-name="Cotton Cloud"] {
  background-color: #ffffff;
}
.palette .colors.pastel div[data-name="Blushed Pink"] {
  background-color: #f4d1d1;
}
.palette .colors.pastel div[data-name="Lime Light"] {
  background-color: #d3e6a1;
}
.palette .colors.pastel div[data-name="Champagne Mist"] {
  background-color: #f7e7ce;
}
.palette .colors.pastel div[data-name="Frozen Mint"] {
  background-color: #c5e8b2;
}
.palette .colors.pastel div[data-name="Peach Glow"] {
  background-color: #fde4b0;
}
.palette .colors.pastel div[data-name="Light Coral"] {
  background-color: #f5a7a7;
}
.palette .colors.pastel div[data-name="Twilight Sky"] {
  background-color: #e0bbe4;
}
.palette .colors.pastel div[data-name="Soft Butter"] {
  background-color: #fff1a6;
}
.palette .colors.pastel div[data-name="Soft Lilac"] {
  background-color: #d9b3e6;
}
.palette .colors.pastel div[data-name="Vanilla Creme"] {
  background-color: #f5f5dc;
}
.palette .colors.pastel div[data-name="Ballet Slippers"] {
  background-color: #f7d4d0;
}
.palette .colors.pastel div[data-name="Lavender Fields"] {
  background-color: #e6daf1;
}
.palette .colors.pastel div[data-name="Morning Dew"] {
  background-color: #a6d1e6;
}
.palette .colors.pastel div[data-name="Cotton Fog"] {
  background-color: #c0d6d1;
}
.palette .colors.pastel div[data-name="Peachy Dream"] {
  background-color: #ffd3b6;
}
.palette .colors.pastel div[data-name="Sea Breeze"] {
  background-color: #b2d6c1;
}
.palette .colors.pastel div[data-name="Pastel Aqua"] {
  background-color: #99e0d5;
}
.palette .colors.pastel div[data-name="Rosewater Mist"] {
  background-color: #f6c4d0;
}
.palette .colors.pastel div[data-name="Frozen Pear"] {
  background-color: #b1e3c9;
}
.palette .colors.pastel div[data-name="Misty Coral"] {
  background-color: #f6c3d4;
}
.palette .colors.pastel div[data-name="Light Blueberry"] {
  background-color: #c8d9ff;
}
.palette .colors.pastel div[data-name="Iced Lemonade"] {
  background-color: #fff9c4;
}
.palette .colors.pastel div[data-name="Baby Peach"] {
  background-color: #ffecb3;
}
.palette .colors.pastel div[data-name="Minty Fresh"] {
  background-color: #c4e4d6;
}
.palette .colors.pastel div[data-name="Sugar Frost"] {
  background-color: #d3b6ff;
}
.palette .colors.pastel div[data-name="Pale Coral"] {
  background-color: #fad8b5;
}
.palette .colors.pastel div[data-name="Rose Quartz"] {
  background-color: #f7c7d1;
}
.palette .colors.pastel div[data-name="Light Lavender Mist"] {
  background-color: #e8d1f2;
}
.palette .colors.pastel div[data-name="Aquamarine Dream"] {
  background-color: #a6d6d6;
}
.palette .colors.pastel div[data-name="Pale Yellow Glow"] {
  background-color: #faebd7;
}
.palette .colors.pastel div[data-name="Floral Breeze"] {
  background-color: #f0e0e6;
}
.palette .colors.pastel div[data-name="Lilac Frost"] {
  background-color: #d9c8f1;
}
.palette .colors.pastel div[data-name="Creamy Sky"] {
  background-color: #e4d1a6;
}
.palette .colors.pastel div[data-name="Cloudy Morning"] {
  background-color: #c4d1e0;
}
.palette .other div[data-name="Dark Horizon"] {
  background-color: #6a629b;
}
.colors div::before {
  font-size: 14px; /* Taille du texte ajustée */
  margin-bottom: 10px;
}

.colors div span {
  font-size: 12px; /* Légèrement plus grand pour une meilleure lisibilité */
}

.colors div span::after {
  font-style: italic;
  font-size: 14px; /* Corrigé la taille pour que ce soit cohérent */
  margin-top: 5px;
}
.color.copied {
  outline: 3px solid #fff;
  box-shadow: 0 0 10px white;
}