/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
:root,
[data-theme=dark] {
  color-scheme: dark;
  --color-bg-primary: #0a0a0c;
  --color-bg-elevated: #111113;
  --color-bg-card: rgba(255, 255, 255, 0.06);
  --color-bg-secondary: rgba(0, 0, 0, 0.25);
  --color-text-primary: #fafafa;
  --color-text-secondary: #c2c2cc;
  --color-text-tertiary: #a8a8b4;
  --color-text-muted: #8e8e9a;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
  --color-link: #FBBF24;
  --color-link-hover: #FFD700;
  --backdrop-celestial-bg:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(30, 27, 75, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 70% 90% at 15% 50%, rgba(20, 35, 80, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 70% 90% at 85% 60%, rgba(45, 25, 70, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(12, 12, 18, 0.4) 0%, #0a0a0c 100%);
  --backdrop-gradient-bg:
    radial-gradient(ellipse 70% 40% at 50% 10%, rgba(255, 215, 0, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 70% at 15% 50%, rgba(0, 35, 149, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 70% at 85% 55%, rgba(0, 35, 149, 0.05) 0%, transparent 50%);
  --backdrop-stars-bg:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(0, 35, 149, 0.4), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(0, 35, 149, 0.3), transparent),
    radial-gradient(1px 1px at 80% 15%, rgba(255, 215, 0, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 90% 45%, rgba(255, 255, 255, 0.6), transparent);
  --backdrop-stars-opacity: 0.5;
  --backdrop-constellation-color: rgba(251, 191, 36, 0.4);
  --backdrop-constellation-line: rgba(0, 35, 149, 0.4);
  --backdrop-constellation-opacity: 0.6;
  --backdrop-constellation-star: rgba(255, 255, 255, 0.92);
  --backdrop-particles-bg:
    radial-gradient(circle at 30% 50%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0, 35, 149, 0.03) 0%, transparent 50%);
  --backdrop-particles-opacity: 1;
}

[data-theme=light] {
  color-scheme: light;
  --color-bg-primary: #eef4fb;
  --color-bg-elevated: #f7faff;
  --color-bg-card: rgba(0, 35, 149, 0.05);
  --color-bg-secondary: rgba(0, 0, 0, 0.06);
  --color-text-primary: #1a1a1e;
  --color-text-secondary: #2d2d32;
  --color-text-tertiary: #52525b;
  --color-text-muted: #71717a;
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(0, 35, 149, 0.16);
  --color-link: #002395;
  --color-link-hover: #001a66;
  --backdrop-celestial-bg:
    radial-gradient(ellipse 96% 48% at 50% 0%, rgba(37, 99, 235, 0.028) 0%, transparent 56%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(255, 255, 255, 0.36) 0%, #f5f8fc 100%);
  --backdrop-gradient-bg:
    radial-gradient(ellipse 64% 34% at 50% 12%, rgba(37, 99, 235, 0.02) 0%, transparent 54%);
  --backdrop-stars-bg: none;
  --backdrop-stars-opacity: 0;
  --backdrop-constellation-color: rgba(0, 35, 149, 0.11);
  --backdrop-constellation-line: rgba(37, 99, 235, 0.09);
  --backdrop-constellation-opacity: 0.24;
  --backdrop-constellation-star: rgba(37, 99, 235, 0.22);
  --backdrop-particles-bg: none;
  --backdrop-particles-opacity: 0;
}

html,
body {
  min-height: 100%;
}

body {
  background: radial-gradient(circle at top left, rgba(0, 35, 149, 0.24), transparent 30%), radial-gradient(circle at top right, rgba(251, 191, 36, 0.12), transparent 24%), linear-gradient(180deg, #07080d 0%, #0b0c14 52%, #07080d 100%);
  color: var(--color-text-primary);
  transition: background 0.25s ease, color 0.25s ease;
}

[data-theme=light] body {
  background: radial-gradient(circle at top center, rgba(37, 99, 235, 0.035), transparent 30%), linear-gradient(180deg, #fcfdff 0%, #f5f8fc 48%, #fcfdff 100%);
  color: var(--color-text-primary);
}

.celestial-bg {
  background: radial-gradient(ellipse 120% 80% at 50% 50%, rgba(0, 35, 149, 0.08) 0%, rgba(37, 99, 235, 0.06) 40%, #0a0a0c 70%);
}

[data-theme=light] .celestial-bg {
  background: radial-gradient(ellipse 120% 72% at 50% 12%, rgba(37, 99, 235, 0.03) 0%, rgba(37, 99, 235, 0.018) 36%, #f5f8fc 74%);
}

.background-gradient {
  background: radial-gradient(ellipse 80% 50% at 50% 20%, rgba(251, 191, 36, 0.05) 0%, transparent 50%), radial-gradient(ellipse 60% 80% at 20% 50%, rgba(0, 35, 149, 0.08) 0%, transparent 50%), radial-gradient(ellipse 60% 80% at 80% 60%, rgba(37, 99, 235, 0.06) 0%, transparent 50%);
}

[data-theme=light] .background-gradient {
  background: radial-gradient(ellipse 70% 40% at 50% 16%, rgba(37, 99, 235, 0.025) 0%, transparent 52%);
}

.constellations {
  color: rgba(251, 191, 36, 0.4);
}

.constellations .constellation-star {
  fill: currentColor;
}

.constellations line {
  stroke: rgba(0, 35, 149, 0.4) !important;
}

[data-theme=light] .constellations {
  color: rgba(0, 35, 149, 0.12);
}

[data-theme=light] .constellations line {
  stroke: rgba(37, 99, 235, 0.09) !important;
}

/** Espacement uniforme entre les cartes (dashboard, commandes, intégrations) */
/** Largeur standard des pages internes du dashboard */
/* Bouton primaire : fond dégradé bleu roi (nuances), texte blanc (tous modes) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff !important;
  background: linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  font-family: "Darker Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 35, 149, 0.2);
  width: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 24px rgba(0, 35, 149, 0.25);
}

.btn-primary svg {
  transition: transform 0.3s ease;
}

.btn-primary svg,
.btn-primary .flat-icon svg,
.btn-primary .flat-icon .platform-icon,
.btn-primary .flat-icon .icon-svg-wrapper,
.btn-primary .flat-icon .icon-svg-wrapper svg,
.btn-primary .flat-icon .icon-svg-wrapper path,
.btn-primary .flat-icon .icon-svg-wrapper line,
.btn-primary app-flat-icon.flat-icon--chevron .icon-svg-wrapper svg,
.btn-primary app-flat-icon.flat-icon--arrow .icon-svg-wrapper svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.btn-primary:hover svg {
  transform: translateX(5px);
}

/* Bouton secondaire : bordure dégradé bleu roi (nuances), texte bleu roi, fond selon le mode (light/dark) */
.btn-secondary {
  --btn-secondary-bg: rgb(26, 26, 30);
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  color: transparent;
  border: 3px solid transparent;
  border-radius: 8px;
  background: linear-gradient(var(--btn-secondary-bg), var(--btn-secondary-bg)) padding-box, linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  font-family: "Darker Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  width: 100%;
}

.btn-secondary span {
  background: linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0, 35, 149, 0.3);
}

/* Lien d’action : style discret, sans bloc ni bordure (mobile first) */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Darker Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #2563EB;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
  min-height: 2.75rem; /* ~44px, touch target mobile first */
  box-sizing: border-box;
}
.link-action:hover {
  color: #002395;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-action:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

/* Nav : bouton type primaire (ex. Connexion) — fond dégradé bleu roi, texte blanc */
.nav-btn:not(.nav-btn--theme) {
  padding: 10px 20px;
  background: linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%);
  border: none;
  border-radius: 8px;
  color: #ffffff !important;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  font-family: "Darker Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.nav-btn:not(.nav-btn--theme):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 35, 149, 0.25);
}

/* Tailles */
.btn-large {
  padding: 20px 40px;
  font-size: 1.2rem;
}

@media (min-width: 768px) {
  .btn-primary,
  .btn-secondary {
    width: auto;
  }
  .btn-primary {
    padding: 18px 40px;
    font-size: 1.1rem;
    gap: 12px;
  }
  .btn-secondary {
    padding: 18px 40px;
    font-size: 1.1rem;
  }
  .btn-large {
    padding: 22px 50px;
    font-size: 1.3rem;
  }
  .nav-btn:not(.nav-btn--theme) {
    padding: 12px 28px;
    font-size: 1rem;
  }
}
:root,
[data-theme=dark] {
  --color-bg-primary: #0a0a0c;
  --color-bg-elevated: #111113;
  --color-bg-card: rgba(255, 255, 255, 0.06);
  --color-bg-secondary: rgba(0, 0, 0, 0.25);
  --color-text-primary: #fafafa;
  /* Contraste renforcé pour lisibilité sur fond sombre */
  --color-text-secondary: #c2c2cc;
  --color-text-tertiary: #a8a8b4;
  --color-text-muted: #8e8e9a;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
  /* Logos plateformes (Twitch, Discord, Spotify) : doré en dark */
  --platform-icon-fill: url(#freyr-gold);
  /* Liens inline / navigation secondaire : doré (charte) */
  --color-link: #FBBF24;
  --color-link-hover: #FFD700;
  /* Styles des cards au survol - dark : doré (couleur principale en dark) */
  --card-hover-shadow: 0 20px 50px rgba(255, 215, 0, 0.1), 0 10px 30px rgba(255, 215, 0, 0.07);
  --card-hover-outline: rgba(255, 215, 0, 0.2);
  --card-hover-gradient: linear-gradient(90deg, transparent, rgba(0, 35, 149, 0.2), transparent);
  /* Tableaux données : en-tête doré, zébrage 10 % doré */
  --freyr-table-header-bg: #fbbf24;
  --freyr-table-header-text: #0a0a0c;
  --freyr-table-zebra-bg: rgba(251, 191, 36, 0.1);
}

[data-theme=light] {
  --color-bg-primary: #c8dff5;
  --color-bg-elevated: #d8ecfb;
  --color-bg-card: rgba(0, 35, 149, 0.08);
  --color-bg-secondary: rgba(0, 0, 0, 0.06);
  --color-text-primary: #1a1a1e;
  --color-text-secondary: #2d2d32;
  --color-text-tertiary: #52525b;
  --color-text-muted: #71717a;
  --glass-bg: rgba(0, 35, 149, 0.08);
  --glass-border: rgba(0, 35, 149, 0.26);
  /* Logos plateformes (Twitch, Discord, Spotify) : bleu roi en light */
  --platform-icon-fill: url(#freyr-rainbow);
  /* Liens inline / navigation secondaire : bleu roi (charte) */
  --color-link: #002395;
  --color-link-hover: #001a66;
  /* Styles des cards au survol - light : bleu roi */
  --card-hover-shadow: 0 20px 50px rgba(0, 35, 149, 0.2), 0 10px 30px rgba(37, 99, 235, 0.14);
  --card-hover-outline: rgba(37, 99, 235, 0.45);
  --card-hover-gradient: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
  /* Tableaux données : en-tête bleu roi, zébrage 10 % bleu */
  --freyr-table-header-bg: #002395;
  --freyr-table-header-text: #fafafa;
  --freyr-table-zebra-bg: rgba(0, 35, 149, 0.1);
}

/* Liens d’action : contraste en mode clair */
[data-theme=light] .link-action {
  color: #002395;
}

[data-theme=light] .link-action:hover {
  color: #001a66;
}

/* Liens d’action en dark : jaune/doré comme le bouton Connexion */
[data-theme=dark] .link-action {
  color: #FBBF24;
}

[data-theme=dark] .link-action:hover {
  color: #FFD700;
}

/* Fond global clair ; l'accueil reste transparent pour laisser voir le backdrop étoilé */
[data-theme=light] body {
  background: #c8dff5 !important;
  color: #1a1a1e !important;
}

[data-theme=light] .celestial-bg {
  background: radial-gradient(ellipse 120% 80% at 50% 50%, rgba(0, 35, 149, 0.1) 0%, rgba(37, 99, 235, 0.08) 40%, #c8dff5 70%) !important;
}

[data-theme=light] .background-gradient {
  background: radial-gradient(ellipse 80% 50% at 50% 20%, rgba(37, 99, 235, 0.08) 0%, transparent 50%), radial-gradient(ellipse 60% 80% at 20% 50%, rgba(0, 35, 149, 0.06) 0%, transparent 50%), radial-gradient(ellipse 60% 80% at 80% 60%, rgba(0, 35, 149, 0.05) 0%, transparent 50%) !important;
}

[data-theme=light] .constellations {
  color: rgba(0, 35, 149, 0.4);
}

[data-theme=light] .constellations .constellation-star {
  fill: currentColor;
}

[data-theme=light] .constellations line {
  stroke: rgba(37, 99, 235, 0.3) !important;
}

[data-theme=dark] .constellations {
  color: rgba(251, 191, 36, 0.4);
}

[data-theme=dark] .constellations .constellation-star {
  fill: currentColor;
}

[data-theme=dark] .constellations line {
  stroke: rgba(0, 35, 149, 0.4) !important;
}

/* Barre de navigation — bien distincte : fond blanc cassé chaud, lisible, pas noire */
[data-theme=light] .top-nav {
  background: #d8ecfb !important;
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 2px 12px rgba(0, 35, 149, 0.16) !important;
}

[data-theme=light] .top-nav,
[data-theme=light] .top-nav *,
[data-theme=light] .nav-content,
[data-theme=light] .nav-link,
[data-theme=light] .nav-links a {
  color: #1a1a1e !important;
}

[data-theme=light] .nav-link:hover,
[data-theme=light] .nav-links a:hover {
  color: #002395 !important;
}

[data-theme=light] .nav-btn--theme {
  color: #002395 !important;
}

[data-theme=light] .nav-btn:not(.nav-btn--theme) {
  color: #ffffff !important;
}

/* Bouton Connexion (desktop + mobile) : light = fond bleu roi + texte blanc, dark = fond doré + texte sombre */
[data-theme=light] .nav-btn-login,
[data-theme=light] .nav-mobile-btn {
  background: linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%) !important;
  color: #ffffff !important;
}

[data-theme=light] .nav-mobile-btn {
  padding: 8px 16px !important;
  border-radius: 8px !important;
}

[data-theme=light] .nav-btn-login:hover,
[data-theme=light] .nav-mobile-btn:hover {
  color: #ffffff !important;
}

/* Dropdown nav (utilisateur, langue) : fond clair et texte lisible en light mode */
[data-theme=light] .nav-dropdown {
  background: rgba(216, 236, 251, 0.98) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 24px rgba(0, 35, 149, 0.2) !important;
}

[data-theme=light] .nav-dropdown-item {
  color: #1a1a1e !important;
}

[data-theme=light] .nav-dropdown-item:hover {
  background: rgba(0, 35, 149, 0.08) !important;
  color: #002395 !important;
}

/* Light mode : ombrages bleu marin (boutons, cartes, etc.) */
[data-theme=light] .btn-primary,
[data-theme=light] .btn-primary:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 35, 149, 0.2) !important;
}

[data-theme=light] .btn-primary:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 24px rgba(0, 35, 149, 0.28) !important;
}

[data-theme=light] .btn-secondary:hover {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.22) !important;
}

[data-theme=light] .card-title,
[data-theme=light] .section-title,
[data-theme=light] h1,
[data-theme=light] h2 {
  color: #002395;
}

[data-theme=light] .hero-stats,
[data-theme=light] .visual-card,
[data-theme=light] .feature-card,
[data-theme=light] .benefit-card {
  box-shadow: 0 2px 12px rgba(0, 35, 149, 0.14), 0 4px 20px rgba(37, 99, 235, 0.12) !important;
}

[data-theme=light] .dashboard-sidebar {
  box-shadow: 4px 0 24px rgba(0, 35, 149, 0.12) !important;
}

[data-theme=light] .card {
  background: rgba(216, 236, 251, 0.88) !important;
  box-shadow: 0 4px 16px rgba(0, 35, 149, 0.14), 0 0 24px rgba(37, 99, 235, 0.1) !important;
}

[data-theme=light] .card:hover {
  box-shadow: var(--card-hover-shadow) !important;
  outline: 1px solid var(--card-hover-outline) !important;
}

[data-theme=dark] .card-title,
[data-theme=dark] .section-title,
[data-theme=dark] h1,
[data-theme=dark] h2 {
  color: #FFD700;
}

[data-theme=light] .card .twitch-clip-card:hover {
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.22) !important;
}

/* Bouton secondaire : en light = contour bleu, fond transparent ; en dark = dégradé doré */
[data-theme=light] .btn-secondary {
  --btn-secondary-bg: transparent;
  background: transparent !important;
  border: 3px solid rgba(37, 99, 235, 0.65) !important;
}

[data-theme=dark] .btn-secondary {
  --btn-secondary-bg: rgb(26, 26, 30);
}

:root,
[data-theme=dark] {
  --nav-btn-theme-bg: rgb(26, 26, 30);
}

[data-theme=light] .nav-btn--theme {
  --nav-btn-theme-bg: transparent;
  background: transparent !important;
  border: 3px solid rgba(37, 99, 235, 0.65) !important;
  color: #1d4ed8 !important;
}

[data-theme=dark] .nav-btn--theme {
  --nav-btn-theme-bg: transparent;
  background: transparent !important;
  border: 3px solid #FBBF24 !important;
  color: #FBBF24 !important;
}

/* Textes — contraste fort pour une bonne lisibilité */
[data-theme=light] .hero-title {
  color: var(--color-text-primary);
}

/* Qu'est-ce que Freyr ? — titres des 3 points en gradient bleu roi → doré */
[data-theme=light] .about-feature-item h3 {
  background: linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Titres avec gradient bleu roi → doré */
[data-theme=light] .section-title,
[data-theme=light] .cta-title,
[data-theme=light] .title-subtitle {
  background: linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Titres principaux des pages internes : bleu en light, or en dark */
[data-theme=light] .dashboard-header .dashboard-title h1,
[data-theme=light] .admin-header h1,
[data-theme=light] .editor-panel h2 {
  color: #002395 !important;
}

[data-theme=dark] .dashboard-header .dashboard-title h1,
[data-theme=dark] .admin-header h1,
[data-theme=dark] .editor-panel h2 {
  color: #FBBF24 !important;
}

/* Sidebar dashboard : light mode = fond bleu clair, contours et liens bleus */
[data-theme=light] .dashboard-sidebar {
  background: rgba(216, 236, 251, 0.98) !important;
  border-right: 1px solid var(--glass-border) !important;
}

[data-theme=light] .dashboard-sidebar .sidebar-link,
[data-theme=light] .dashboard-sidebar .sidebar-toggle-btn {
  color: #2d2d32 !important;
}

[data-theme=light] .dashboard-sidebar .sidebar-link:hover,
[data-theme=light] .dashboard-sidebar .sidebar-toggle-btn:hover {
  color: #002395 !important;
  background: rgba(0, 35, 149, 0.08) !important;
}

[data-theme=light] .dashboard-sidebar .sidebar-link.active {
  color: #002395 !important;
  background: rgba(0, 35, 149, 0.1) !important;
}

[data-theme=light] .dashboard-sidebar .sidebar-bottom {
  border-top: 1px solid rgba(0, 35, 149, 0.15) !important;
}

[data-theme=light] .feature-title,
[data-theme=light] .benefit-title {
  background: linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Sous-titres de section et titres d'étapes : gradient bleu roi en light */
[data-theme=light] .section-subtitle,
[data-theme=light] .step-title {
  background: linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Tous les textes descriptifs — bien lisibles (contraste fort sur fond clair) */
[data-theme=light] .section-description,
[data-theme=light] .hero-description,
[data-theme=light] .about-feature-item p,
[data-theme=light] .feature-description,
[data-theme=light] .benefit-description,
[data-theme=light] .cta-text,
[data-theme=light] .footer p,
[data-theme=light] .footer-description,
[data-theme=light] .footer-text,
[data-theme=light] .footer-column a,
[data-theme=light] .step-description,
[data-theme=light] .feature-list li {
  color: #2d2d32 !important;
}

[data-theme=light] .stat-label {
  color: #2d2d32 !important;
}

/* Chiffres des stats — gradient bleu roi → doré */
[data-theme=light] .stat-number {
  background: linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

[data-theme=light] .stat-divider {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme=light] .footer-column h4 {
  color: #002395;
}

[data-theme=light] .footer-column a:hover {
  color: #002395;
}

[data-theme=light] .footer-bottom {
  border-top-color: var(--glass-border);
}

[data-theme=light] .hero-stats {
  background: rgba(216, 236, 251, 0.88) !important;
  border: 1px solid var(--glass-border) !important;
}

[data-theme=light] .visual-card {
  background: rgba(216, 236, 251, 0.88) !important;
  border: 1px solid var(--glass-border) !important;
}

[data-theme=light] .visual-card h3 {
  background: linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme=light] .feature-card,
[data-theme=light] .benefit-card {
  background: rgba(216, 236, 251, 0.88) !important;
  border-color: var(--glass-border);
}

[data-theme=light] .footer {
  background: var(--color-bg-elevated);
  border-top-color: var(--glass-border);
}

[data-theme=light] .cta-section {
  color: var(--color-text-primary);
}

[data-theme=light] strong,
[data-theme=light] .section-description strong {
  color: #1a1a1e !important;
}

/* Icônes — light et dark : même style bleu roi → doré */
/* Autres icônes (hors plateformes) : gradient en stroke */
[data-theme=light] .flat-icon:not(.flat-icon--twitch):not(.flat-icon--discord):not(.flat-icon--spotify) svg,
[data-theme=light] .flat-icon:not(.flat-icon--twitch):not(.flat-icon--discord):not(.flat-icon--spotify) .icon-svg-wrapper svg,
[data-theme=dark] .flat-icon:not(.flat-icon--twitch):not(.flat-icon--discord):not(.flat-icon--spotify) svg,
[data-theme=dark] .flat-icon:not(.flat-icon--twitch):not(.flat-icon--discord):not(.flat-icon--spotify) .icon-svg-wrapper svg {
  stroke: url(#freyr-rainbow) !important;
  fill: none !important;
}

/* Twitch, Discord, Spotify : gradient bleu roi → doré en fill, 0 stroke */
[data-theme=light] .flat-icon--twitch .platform-icon,
[data-theme=light] .flat-icon--discord .platform-icon,
[data-theme=light] .flat-icon--spotify .platform-icon,
[data-theme=dark] .flat-icon--twitch .platform-icon,
[data-theme=dark] .flat-icon--discord .platform-icon,
[data-theme=dark] .flat-icon--spotify .platform-icon {
  fill: url(#freyr-rainbow) !important;
  stroke: none !important;
}

/* Logos plateformes (img) — teinte violette pour rester cohérent avec l’arc-en-ciel (pas noir) */
[data-theme=light] .platform-logo {
  filter: brightness(0) saturate(100%) invert(18%) sepia(92%) saturate(1900%) hue-rotate(205deg) !important;
}

/* ========== MODE DARK : inverser bleu et doré (doré = principal) ========== */
[data-theme=dark] .btn-primary {
  background: linear-gradient(135deg, #FFD700 0%, #FBBF24 50%, #D4AF37 100%) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 35, 149, 0.3) !important;
  color: #ffffff !important;
}

[data-theme=dark] .btn-primary:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 32px rgba(0, 35, 149, 0.35) !important;
  color: #ffffff !important;
}

[data-theme=dark] .btn-primary svg,
[data-theme=dark] .btn-primary .flat-icon svg,
[data-theme=dark] .btn-primary .flat-icon .platform-icon,
[data-theme=dark] .btn-primary .flat-icon .icon-svg-wrapper,
[data-theme=dark] .btn-primary .flat-icon .icon-svg-wrapper svg,
[data-theme=dark] .btn-primary .flat-icon .icon-svg-wrapper path,
[data-theme=dark] .btn-primary .flat-icon .icon-svg-wrapper line,
[data-theme=dark] .btn-primary app-flat-icon.flat-icon--chevron .icon-svg-wrapper svg,
[data-theme=dark] .btn-primary app-flat-icon.flat-icon--arrow .icon-svg-wrapper svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

[data-theme=dark] .btn-secondary {
  background: linear-gradient(var(--btn-secondary-bg), var(--btn-secondary-bg)) padding-box, linear-gradient(135deg, #FFD700 0%, #FBBF24 50%, #D4AF37 100%) border-box !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
}

[data-theme=dark] .btn-secondary span {
  background: linear-gradient(135deg, #FFD700 0%, #FBBF24 50%, #D4AF37 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme=dark] .btn-secondary:hover {
  box-shadow: 0 0 20px rgba(0, 35, 149, 0.35) !important;
}

[data-theme=dark] .nav-btn:not(.nav-btn--theme),
[data-theme=dark] .nav-btn-login,
[data-theme=dark] .nav-mobile-btn {
  background: linear-gradient(135deg, #FFD700 0%, #FBBF24 50%, #D4AF37 100%) !important;
  color: #0a0a0c !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 12px rgba(251, 191, 36, 0.25) !important;
}

[data-theme=dark] .nav-btn:not(.nav-btn--theme):hover,
[data-theme=dark] .nav-btn-login:hover,
[data-theme=dark] .nav-mobile-btn {
  padding: 8px 16px !important;
  border-radius: 8px !important;
}

[data-theme=dark] .nav-mobile-btn:hover {
  color: #0a0a0c !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 20px rgba(251, 191, 36, 0.35) !important;
}

/* Bouton Déconnexion (nav + secondaire) : fond sombre, bordure dorée, texte blanc pour lisibilité */
[data-theme=dark] .nav-btn.btn-secondary {
  background: linear-gradient(var(--btn-secondary-bg), var(--btn-secondary-bg)) padding-box, linear-gradient(135deg, #FFD700 0%, #FBBF24 50%, #D4AF37 100%) border-box !important;
  box-shadow: none !important;
}

[data-theme=dark] .nav-btn.btn-secondary span {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-clip: unset !important;
  color: #ffffff !important;
}

[data-theme=dark] .nav-btn.btn-secondary:hover {
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.35) !important;
}

/* Titres et textes en gradient → doré en dark */
[data-theme=dark] .hero-title,
[data-theme=dark] .about-feature-item h3,
[data-theme=dark] .section-title,
[data-theme=dark] .section-subtitle,
[data-theme=dark] .cta-title,
[data-theme=dark] .title-subtitle,
[data-theme=dark] .feature-title,
[data-theme=dark] .benefit-title,
[data-theme=dark] .stat-number,
[data-theme=dark] .step-title,
[data-theme=dark] .visual-card h3 {
  background: linear-gradient(135deg, #FFD700 0%, #FBBF24 50%, #D4AF37 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Section étapes : numéros et connecteurs → doré en dark, lueurs en bleu roi, chiffres toujours blancs */
[data-theme=dark] .step-number {
  background: linear-gradient(135deg, #FFD700 0%, #FBBF24 50%, #D4AF37 100%) !important;
  box-shadow: 0 5px 20px rgba(0, 35, 149, 0.35) !important;
  color: #ffffff !important;
}

[data-theme=dark] .step-connector {
  background: linear-gradient(135deg, #FFD700 0%, #FBBF24 50%, #D4AF37 100%) !important;
  opacity: 0.6;
}

[data-theme=dark] .step-content {
  border-color: rgba(0, 35, 149, 0.25) !important;
}

[data-theme=dark] .nav-link,
[data-theme=dark] .nav-links a {
  color: var(--color-text-secondary) !important;
}

[data-theme=dark] .nav-link:hover,
[data-theme=dark] .nav-links a:hover {
  color: #FFD700 !important;
}

[data-theme=dark] .footer-column h4 {
  color: #FBBF24;
}

[data-theme=dark] .footer-column a:hover {
  color: #FBBF24;
}

/* Icônes : gradient doré en dark */
[data-theme=dark] .flat-icon:not(.flat-icon--twitch):not(.flat-icon--discord):not(.flat-icon--spotify) svg,
[data-theme=dark] .flat-icon:not(.flat-icon--twitch):not(.flat-icon--discord):not(.flat-icon--spotify) .icon-svg-wrapper svg {
  stroke: url(#freyr-gold) !important;
  fill: none !important;
}

[data-theme=dark] .flat-icon--twitch .platform-icon,
[data-theme=dark] .flat-icon--discord .platform-icon,
[data-theme=dark] .flat-icon--spotify .platform-icon {
  fill: url(#freyr-gold) !important;
  stroke: none !important;
}

[data-theme=dark] .platform-logo {
  filter: brightness(0) saturate(100%) invert(80%) sepia(60%) saturate(800%) hue-rotate(5deg) !important;
}

/* Toutes les lueurs restantes en dark → bleu roi */
[data-theme=dark] .nav-btn--theme:hover {
  box-shadow: 0 0 16px rgba(0, 35, 149, 0.35) !important;
}

/* Encarts au survol en dark : effets en bleu roi uniquement */
[data-theme=dark] .visual-card:hover {
  box-shadow: 0 10px 30px rgba(0, 35, 149, 0.35) !important;
  outline: 1px solid rgba(0, 35, 149, 0.45) !important;
  outline-offset: -1px;
}

[data-theme=dark] .feature-card:hover {
  box-shadow: 0 20px 60px rgba(0, 35, 149, 0.3), 0 10px 30px rgba(0, 35, 149, 0.2) !important;
  outline: 1px solid rgba(0, 35, 149, 0.4) !important;
  outline-offset: -1px;
}

[data-theme=dark] .feature-card::before {
  background: linear-gradient(90deg, transparent, rgba(0, 35, 149, 0.2), transparent) !important;
}

[data-theme=dark] .feature-card:hover .feature-accent {
  background: linear-gradient(135deg, #001a66 0%, #002395 50%, #2563EB 100%) !important;
}

[data-theme=dark] .feature-card:hover .feature-glow {
  background: radial-gradient(circle, rgba(0, 35, 149, 0.35) 0%, transparent 70%) !important;
}

[data-theme=dark] .benefit-card:hover {
  box-shadow: 0 15px 40px rgba(0, 35, 149, 0.35) !important;
  outline: 1px solid rgba(0, 35, 149, 0.45) !important;
  outline-offset: -1px;
}

/* Cartes du dashboard : même effet au survol qu'en page d'accueil */
[data-theme=dark] .card:hover {
  box-shadow: var(--card-hover-shadow) !important;
  outline: 1px solid var(--card-hover-outline) !important;
  outline-offset: -1px;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}
@keyframes glow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}
@keyframes stars {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 100% 100%;
  }
}
@keyframes shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes ringPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.5;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes particles {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Tous les textes × 1.25 (base 16px → 20px pour 1rem) */
  font-size: 125%;
  scroll-behavior: smooth;
}

@media (max-width: 767.98px) {
  html {
    /* Mobile : taille de base 1x (16px pour 1rem) pour gagner de la place */
    font-size: 100%;
  }
}
body {
  font-family: "Darker Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: background 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Darker Grotesque", sans-serif;
}

table.freyr-data-table {
  border-collapse: collapse;
}
table.freyr-data-table thead th {
  background: var(--freyr-table-header-bg);
  color: var(--freyr-table-header-text);
  font-weight: 600;
}
table.freyr-data-table tbody tr:nth-child(odd) td {
  background-color: transparent;
}
table.freyr-data-table tbody tr:nth-child(even) td {
  background-color: var(--freyr-table-zebra-bg);
}

:root {
  --app-top-nav-height: 5.75rem;
}

/* Dashboard: evite les scrolls verticaux inutiles sur pages courtes.
   Regle globale pour contourner l'encapsulation des styles de composants. */
.dashboard-routed-content [class$=-container] {
  min-height: calc(100vh - var(--app-top-nav-height, 5.75rem)) !important;
}

body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 640px) {
  :root {
    --app-top-nav-height: 5.25rem;
  }
}

/*# sourceMappingURL=styles.css.map*/