:root {
  /* BASE */
  --couleur-fond-sombre: #0a0f19;
  --couleur-fond-clair: #ffffff;

  --couleur-texte-sombre: #f1f5f9;
  --couleur-texte-clair: #0f172a;

  --couleur-bordure-sombre: rgba(255, 255, 255, 0.08);
  --couleur-bordure-clair: rgba(0, 0, 0, 0.08);

  /* ACCENT (important UX) */
  --couleur-accent-sombre: #00ffa6;
  /* neon crypto */
  --couleur-accent-clair: #0066ff;
  /* SaaS propre */

  /* CREOSTARS BRAND */
  --couleur-c-creostars-sombre: #ffffff;
  --couleur-c-creostars-clair: #e60023;

  /* HOVER */
  --couleur-hover-sombre: rgba(255, 255, 255, 0.08);
  --couleur-hover-clair: rgba(0, 0, 0, 0.05);

  /* SURFACE */
  --couleur-surface-sombre: rgba(255, 255, 255, 0.04);
  --couleur-surface-clair: rgba(0, 0, 0, 0.03);

  /* SHADOW */
  --shadow-sombre: 0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-clair: 0 10px 25px rgba(0, 0, 0, 0.08);

  /* LOGO */
  --logo-sombre: url("/images/Logo_Fond_Noir_transparent.png");
  --logo-clair: url("/images/Logo_Fond_Blanc_transparent.png");
}

:root {
  --creo-radius-md: 12px;
  --creo-radius-lg: 18px;
  --creo-radius-xl: 22px;
  --creo-radius-pill: 999px;
}
/* ================= THEME MAPPING ================= */

/* DARK */
body.dark-mode {
  --couleur-fond-theme: var(--couleur-fond-sombre);
  --couleur-texte-theme: var(--couleur-texte-sombre);
  --couleur-bordure-theme: var(--couleur-bordure-sombre);
  --couleur-accent-theme: var(--couleur-accent-sombre);
  --couleur-c-creostars-theme: var(--couleur-c-creostars-sombre);
  --couleur-hover-theme: var(--couleur-hover-sombre);
  --couleur-surface-theme: var(--couleur-surface-sombre);
  --shadow-theme: var(--shadow-sombre);
  --logo-theme: var(--logo-sombre);
  --couleur-fond-theme-inverse: var(--couleur-fond-clair);
}

/* LIGHT */
body.light-mode {
  --couleur-fond-theme: var(--couleur-fond-clair);
  --couleur-texte-theme: var(--couleur-texte-clair);
  --couleur-bordure-theme: var(--couleur-bordure-clair);
  --couleur-accent-theme: var(--couleur-accent-clair);
  --couleur-c-creostars-theme: var(--couleur-c-creostars-clair);
  --couleur-hover-theme: var(--couleur-hover-clair);
  --couleur-surface-theme: var(--couleur-surface-clair);
  --shadow-theme: var(--shadow-clair);
  --logo-theme: var(--logo-clair);
  --couleur-fond-theme-inverse: var(--couleur-fond-sombre);
}

.H1_Creo {
  margin-top: 1%;
  margin-right: 1%;
  font-size: clamp(1rem, 6vw, 4rem);
  font-weight: bold;
}

.H2_Creo {
  margin-top: 1%;
  font-size: clamp(0.8rem, 3vw, 2rem);
  font-weight: bold;
}
.H2_Creo span {
  font-weight: 700;
}

/* COULEURS + VISIBILITÉ FORCÉE */

.ccm-cyan {
  color: #00e0ff;
}

.ccm-green {
  color: hsl(162, 87%, 55%);
}

.ccm-gold {
  color: #ffd76a;
}

.ccm-violet {
  color: #a970ff;
}

/* 🔥 BOOST VISUEL (LE TRUC QUI MANQUE) */
.ccm-cyan,
.ccm-green,
.ccm-gold,
.ccm-violet {
  opacity: 1;
  filter: brightness(1.2);
}

/* 🔥 OPTION GLOW (recommandé pour ton style) */
.ccm-cyan {
  text-shadow: 0 0 8px rgba(0, 224, 255, 0.6);
}

.ccm-green {
  text-shadow: 0 0 8px hsl(162, 87%, 55%);
}

.ccm-gold {
  text-shadow: 0 0 8px rgba(255, 215, 106, 0.6);
}

.ccm-violet {
  text-shadow: 0 0 8px rgba(169, 112, 255, 0.6);
}

.w-45 {
  width: 45%;
}

.text-muted {
  color: var(--couleur-texte-theme) !important;
}

/* ================= BASE GLOBAL ================= */

body {
  background: var(--couleur-fond-theme);
  color: var(--couleur-texte-theme);
  transition: background 0.3s, color 0.3s;

  font-family: "Inter", sans-serif;
  letter-spacing: 1.2px;

  padding: 5px;
}

.cs-header {
  position: sticky;
  top: 0;
  z-index: 2000;
}

.cs-header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-radius: 18px;
  padding: 10px 15px;

  background: var(--couleur-fond-theme);
  border: 1px solid var(--couleur-bordure-theme);

  box-shadow: var(--shadow-theme);
}

/* LOGO */
.cs-logo img {
  height: 100px;
  transition: width 0.35s ease, min-width 0.35s ease, transform 0.35s ease,
    opacity 0.25s ease;
  width: 80%;
  min-width: 250px;
  max-width: 500px;
}

/* MENU */
.cs-menu {
  display: flex;
  gap: 20px;
}

.cs-menu a {
  text-decoration: none;
  color: var(--couleur-texte-theme);
  opacity: 0.6;
  transition: 0.2s;
}

.cs-menu a:hover {
  opacity: 1;
}

.cs-menu a.active {
  opacity: 1;
  border-bottom: 2px solid var(--couleur-accent-theme);
}

/* ACTIONS */
.cs-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* BTN */
.cs-btn {
  padding: 8px 14px;
  border-radius: 999px;

  background: var(--couleur-surface-theme);
  border: 1px solid var(--couleur-bordure-theme);
  color: var(--couleur-texte-theme);

  cursor: pointer;
  transition: 0.2s;
}

.cs-btn:hover {
  background: var(--couleur-accent-theme);
  color: var(--couleur-fond-theme-inverse);
}

/* ICON BTN */
.cs-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--couleur-surface-theme);
  border: 1px solid var(--couleur-bordure-theme);

  color: var(--couleur-texte-theme);
  cursor: pointer;
  transition: 0.2s;
}

.cs-icon-btn:hover {
  background: var(--couleur-accent-theme);
  color: var(--couleur-fond-theme-inverse);
}

/* ================= DROPDOWN FIX CENTER ================= */

.cs-dropdown {
  position: relative;
}

/* MENU */
.cs-dropdown-menu {
  position: absolute;
  top: 120%;

  left: 50%;
  transform: translateX(-50%);
  /* 🔥 centre parfaitement sous le bouton */

  display: none;
  flex-direction: column;
  align-items: center;
  /* 🔥 centre le contenu horizontalement */

  min-width: 180px;
  border-radius: 14px;
  padding: 10px;

  background: var(--couleur-surface-theme);
  border: 1px solid var(--couleur-bordure-theme);

  box-shadow: var(--shadow-theme);
  z-index: 3000;
}

/* ITEMS */
.cs-dropdown-menu a {
  width: 100%;
  text-align: center;
  /* 🔥 texte centré */
  padding: 10px 12px;
  border-radius: 10px;

  text-decoration: none;
  color: var(--couleur-texte-theme);

  transition: 0.2s;
}

/* HOVER */
.cs-dropdown-menu a:hover {
  background: var(--couleur-hover-theme);
}

/* BONUS : effet focus actif */
.cs-dropdown-menu a.active {
  background: var(--couleur-accent-theme);
  color: var(--couleur-fond-theme-inverse);
}

/* ================= BADGE ================= */

.cs-badge {
  position: absolute;
  top: -5px;
  right: -5px;

  background: var(--couleur-c-creostars-theme);
  color: white;

  border-radius: 50%;
  font-size: 10px;
  padding: 3px 6px;
}

.creo-top-ticker,
.cs-video-ticker,
.ticker-bar {
  margin-bottom: 6px !important;
}

.cs-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.cs-header-box {
  margin-top: 0 !important;
}

.cs-account-dropdown {
  position: relative;
}

.cs-account-btn {
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--couleur-bordure-theme);
  background: var(--couleur-surface-theme);
  color: var(--couleur-texte-theme);

  display: flex;
  align-items: center;
  gap: 8px;

  font-weight: 800;
  cursor: pointer;
}

.cs-account-btn span {
  white-space: nowrap;
}

.cs-account-btn:hover {
  background: var(--couleur-accent-theme);
  color: var(--couleur-fond-theme-inverse);
}

.cs-account-menu {
  min-width: 230px;
  right: 0;
  left: auto;
  transform: none;
}

.cs-account-dropdown {
  position: relative;
}

.cs-account-btn {
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--couleur-bordure-theme);
  background: var(--couleur-surface-theme);
  color: var(--couleur-texte-theme);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.cs-account-btn i {
  font-size: 15px;
}

.cs-account-btn span {
  white-space: nowrap;
}

.cs-account-btn:hover {
  background: var(--couleur-accent-theme);
  color: var(--couleur-fond-theme-inverse);
  border-color: var(--couleur-accent-theme);
}

.cs-account-menu {
  min-width: 245px;
  right: 0;
  left: auto;
  transform: none;
}