:root {
  --activity-elixir-blue: #1D6BF2;
  --activity-elixir-blue-hover: #1553CC;
  --activity-artisanat: #F58220;
  --activity-artisanat-soft: #FFF2E4;
  --activity-commerce: #268A45;
  --activity-commerce-soft: #EAF6ED;
  --activity-bien-etre: #7650A6;
  --activity-bien-etre-soft: #F3EDFA;
  --activity-tourisme: #2F80ED;
  --activity-tourisme-soft: #EDF4FD;
  --activity-associations: #3478F6;
  --activity-associations-soft: #EEF4FF;
  --activity-ease-out: cubic-bezier(.23, 1, .32, 1);
}

.activity-theme-artisanat {
  --card-accent: var(--activity-artisanat);
  --card-accent-soft: var(--activity-artisanat-soft);
  --card-accent-text: #D96F12;
  --card-shadow-hover: rgba(245, 130, 32, .13);
  --card-shadow-active: rgba(245, 130, 32, .12);
  --activity-nav-background: #F58220;
  --activity-nav-hover: #D96F12;
  --activity-nav-foreground: #0B1B3F;
  --activity-nav-hover-foreground: #0B1B3F;
}

.activity-theme-commerce {
  --card-accent: var(--activity-commerce);
  --card-accent-soft: var(--activity-commerce-soft);
  --card-accent-text: #14532D;
  --card-shadow-hover: rgba(38, 138, 69, .13);
  --card-shadow-active: rgba(38, 138, 69, .14);
  --activity-nav-background: #14532D;
  --activity-nav-hover: #268A45;
  --activity-nav-foreground: #FFFFFF;
  --activity-nav-hover-foreground: #FFFFFF;
}

.activity-theme-bien-etre {
  --card-accent: var(--activity-bien-etre);
  --card-accent-soft: var(--activity-bien-etre-soft);
  --card-accent-text: #5B367D;
  --card-shadow-hover: rgba(118, 80, 166, .13);
  --card-shadow-active: rgba(118, 80, 166, .14);
  --activity-nav-background: #7650A6;
  --activity-nav-hover: #5B367D;
  --activity-nav-foreground: #FFFFFF;
  --activity-nav-hover-foreground: #FFFFFF;
}

.activity-theme-tourisme {
  --card-accent: var(--activity-tourisme);
  --card-accent-soft: var(--activity-tourisme-soft);
  --card-accent-text: #1E5FA8;
  --card-shadow-hover: rgba(47, 128, 237, .13);
  --card-shadow-active: rgba(47, 128, 237, .14);
  --activity-nav-background: #1E5FA8;
  --activity-nav-hover: #276CC0;
  --activity-nav-foreground: #FFFFFF;
  --activity-nav-hover-foreground: #FFFFFF;
}

.activity-theme-associations {
  --card-accent: var(--activity-associations);
  --card-accent-soft: var(--activity-associations-soft);
  --card-accent-text: #174EA6;
  --card-shadow-hover: rgba(52, 120, 246, .13);
  --card-shadow-active: rgba(52, 120, 246, .14);
  --activity-nav-background: #174EA6;
  --activity-nav-hover: #3478F6;
  --activity-nav-foreground: #FFFFFF;
  --activity-nav-hover-foreground: #FFFFFF;
}

.activity-nav-trigger {
  flex: none;
  white-space: nowrap;
  padding-left: 14px !important;
  padding-right: 14px !important;
  background: var(--activity-nav-background) !important;
  color: var(--activity-nav-foreground) !important;
  box-shadow: 0 8px 20px var(--card-shadow-active) !important;
  transition:
    background-color 200ms var(--activity-ease-out),
    color 200ms var(--activity-ease-out),
    box-shadow 200ms var(--activity-ease-out),
    transform 160ms var(--activity-ease-out) !important;
}

.activity-nav-neutral {
  --activity-nav-background: transparent;
  --activity-nav-foreground: #C6D2EA;
  --activity-nav-hover: rgba(255, 255, 255, .07);
  --activity-nav-hover-foreground: #FFFFFF;
  --card-shadow-active: transparent;
  --card-shadow-hover: transparent;
}

.activity-menu-eyebrow {
  color: #64748B;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.activity-menu-heading {
  margin-top: 5px;
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0B1B3F;
}

.activity-menu-copy {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #64748B;
}

.activity-menu-all {
  color: #1D6BF2 !important;
}

.activity-menu-all:focus-visible {
  outline: 2px solid #1D6BF2;
  outline-offset: 4px;
  border-radius: 4px;
}

.activity-nav-trigger[aria-expanded="true"] {
  background: var(--activity-nav-hover) !important;
  color: var(--activity-nav-hover-foreground) !important;
  box-shadow: 0 10px 23px var(--card-shadow-hover) !important;
}

.activity-nav-neutral[aria-expanded="true"] {
  background: var(--activity-elixir-blue) !important;
  color: #FFFFFF !important;
}

.activity-home-link {
  color: var(--card-accent) !important;
}

.activity-home-card:focus-visible,
.activity-menu-card:focus-visible {
  outline: 3px solid var(--card-accent) !important;
  outline-offset: 4px !important;
}

.activity-menu-card[aria-current="page"] {
  border-color: var(--card-accent) !important;
  box-shadow: 0 10px 24px var(--card-shadow-active) !important;
}

.activity-current-tag {
  background: var(--card-accent-soft) !important;
  color: var(--card-accent-text) !important;
}

@media (hover: hover) and (pointer: fine) {
  .activity-home-card:hover {
    border-color: var(--card-accent) !important;
    box-shadow: 0 14px 32px var(--card-shadow-hover) !important;
    transform: translateY(-2px) !important;
  }

  .activity-menu-card:hover {
    border-color: var(--card-accent) !important;
    box-shadow: 0 8px 22px var(--card-shadow-hover) !important;
    transform: translateY(-2px) !important;
  }

  .activity-nav-trigger:hover {
    background: var(--activity-nav-hover) !important;
    color: var(--activity-nav-hover-foreground) !important;
    box-shadow: 0 10px 23px var(--card-shadow-hover) !important;
  }

  .activity-nav-neutral[aria-expanded="true"]:hover {
    background: var(--activity-elixir-blue-hover) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .activity-home-card,
  .activity-menu-card,
  .activity-nav-trigger {
    transition: none !important;
  }
}

/* Shared primary navigation — one visual system for every page. */
.elixir-navbar-frame {
  width: min(1300px, 100%) !important;
  gap: 0 !important;
}

.elixir-navbar {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  min-width: 0;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  background: #0B1B3F !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.elixir-nav-brand {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 42px;
  margin-right: 14px;
  padding: 3px 10px 3px 4px !important;
  border-radius: 16px;
  color: #FFFFFF !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms cubic-bezier(.23, 1, .32, 1), opacity 180ms ease;
}

.elixir-nav-brand > div {
  flex: 0 0 auto !important;
}

.elixir-nav-brand span {
  color: #FFFFFF !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
}

.elixir-nav-link,
.elixir-nav-trigger {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 42px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #C6D2EA !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 180ms cubic-bezier(.23, 1, .32, 1), color 180ms ease, border-color 180ms ease, transform 150ms cubic-bezier(.23, 1, .32, 1) !important;
}

.elixir-nav-trigger svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.elixir-nav-link[data-active="true"],
.elixir-nav-solutions[data-active="true"] {
  border-color: rgba(111, 163, 255, .24) !important;
  background: rgba(29, 107, 242, .72) !important;
  color: #FFFFFF !important;
}

.elixir-nav-solutions[aria-expanded="true"],
.elixir-nav-activity.activity-nav-neutral[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, .12) !important;
  background: #1D6BF2 !important;
  color: #FFFFFF !important;
}

.elixir-nav-activity:not(.activity-nav-neutral) {
  border-color: color-mix(in srgb, var(--activity-nav-background) 82%, #FFFFFF) !important;
  background: var(--activity-nav-background) !important;
  color: var(--activity-nav-foreground) !important;
  box-shadow: 0 6px 14px var(--card-shadow-active) !important;
}

.elixir-nav-activity:not(.activity-nav-neutral)[aria-expanded="true"] {
  background: var(--activity-nav-hover) !important;
  color: var(--activity-nav-hover-foreground) !important;
}

.elixir-nav-brand:focus-visible,
.elixir-nav-link:focus-visible,
.elixir-nav-trigger:focus-visible {
  outline: 2px solid #FFFFFF !important;
  outline-offset: 2px !important;
}

.elixir-nav-link:active,
.elixir-nav-trigger:active,
.elixir-nav-brand:active {
  transform: scale(.98);
}

@media (hover: hover) and (pointer: fine) {
  .elixir-nav-brand:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #FFFFFF !important;
  }

  .elixir-nav-link:hover,
  .elixir-nav-trigger:hover {
    border-color: rgba(255, 255, 255, .05) !important;
    background: rgba(255, 255, 255, .07) !important;
    color: #FFFFFF !important;
  }

  .elixir-nav-link[data-active="true"]:hover,
  .elixir-nav-solutions[data-active="true"]:hover,
  .elixir-nav-solutions[aria-expanded="true"]:hover,
  .elixir-nav-activity.activity-nav-neutral[aria-expanded="true"]:hover {
    background: #1553CC !important;
  }

  .elixir-nav-activity:not(.activity-nav-neutral):hover {
    background: var(--activity-nav-hover) !important;
    color: var(--activity-nav-hover-foreground) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elixir-nav-brand,
  .elixir-nav-link,
  .elixir-nav-trigger {
    transition: none !important;
  }
}