/**
 * PRIMARY ACTIONS — PREMIUM SKIN
 *
 * La géométrie et les transitions restent pilotées par 30-primary-actions.css.
 * Ce fichier, chargé en dernier, constitue l'unique couche de présentation.
 */

:root {
  --action-gold: #e8c878;
  --action-gold-soft: #f1d99e;
  --action-text: #f8f7f3;
  --action-muted: #bbb8b0;
  --action-surface: rgba(12, 12, 14, .78);
  --action-surface-hover: rgba(255, 255, 255, .075);
  --action-hairline: rgba(255, 255, 255, .115);
}

/* Base commune : typographie nette, icônes sans pastille et mouvements discrets. */
[data-primary-actions] .button {
  isolation: isolate;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--action-text) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease !important;
}

[data-primary-actions] .button .home-action-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 21px !important;
  height: 21px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--action-gold) !important;
  box-shadow: none !important;
  opacity: .92;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease !important;
}

[data-primary-actions] .button .home-action-icon svg {
  width: 100% !important;
  height: 100% !important;
  stroke-width: 1.7 !important;
}

[data-primary-actions] .button .home-action-label {
  line-height: 1 !important;
  white-space: nowrap;
}

[data-primary-actions] .button:hover,
[data-primary-actions] .button:focus-visible {
  border: 0 !important;
  background: var(--action-surface-hover) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

[data-primary-actions] .button:hover .home-action-icon,
[data-primary-actions] .button:focus-visible .home-action-icon {
  color: var(--action-gold-soft) !important;
  opacity: 1;
  transform: translateY(-1px);
}

[data-primary-actions] .button:active {
  background: rgba(255, 255, 255, .1) !important;
  transform: translateY(0) scale(.985);
}

[data-primary-actions] .button:focus-visible {
  outline: 2px solid rgba(241, 217, 158, .9) !important;
  outline-offset: 2px !important;
}

/* Au repos : les quatre choix forment une seule barre de navigation élégante. */
[data-home-section="hero"] [data-primary-actions]:not(.is-group-transition):not(.is-mobile-side-logo-transition):not(.is-mobile-refined-transition):not(.is-mobile-logo-dock) {
  gap: 3px !important;
  padding: 4px !important;
  border: 1px solid var(--action-hairline) !important;
  border-radius: 17px !important;
  background: var(--action-surface) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

[data-home-section="hero"] [data-primary-actions]:not(.is-group-transition):not(.is-mobile-side-logo-transition):not(.is-mobile-refined-transition):not(.is-mobile-logo-dock) .button {
  min-height: 58px !important;
  padding: 9px 15px !important;
}

/* L'état actif reste volontairement discret : surface + filet doré. */
[data-primary-actions] .button[aria-current="page"] {
  border: 0 !important;
  background: rgba(232, 200, 120, .13) !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .24) !important;
}

[data-primary-actions] .button[aria-current="page"] .home-action-icon {
  border: 0 !important;
  background: transparent !important;
  color: var(--action-gold-soft) !important;
}

/* En haut : capsules compactes, mates, parfaitement lisibles autour du logo. */
body > [data-primary-actions].is-group-transition .button,
body > [data-primary-actions].is-mobile-side-logo-transition .button,
body > [data-primary-actions].is-mobile-logo-dock .button {
  border: 1px solid var(--action-hairline) !important;
  border-radius: 999px !important;
  background: rgba(12, 12, 14, .82) !important;
  color: var(--action-text) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .23), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

body > [data-primary-actions].is-group-transition .button:hover,
body > [data-primary-actions].is-group-transition .button:focus-visible,
body > [data-primary-actions].is-mobile-side-logo-transition .button:hover,
body > [data-primary-actions].is-mobile-side-logo-transition .button:focus-visible,
body > [data-primary-actions].is-mobile-logo-dock .button:hover,
body > [data-primary-actions].is-mobile-logo-dock .button:focus-visible {
  border-color: rgba(232, 200, 120, .34) !important;
  background: rgba(29, 28, 27, .94) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

body > [data-primary-actions].is-group-transition .button[aria-current="page"],
body > [data-primary-actions].is-mobile-side-logo-transition .button[aria-current="page"],
body > [data-primary-actions].is-mobile-logo-dock .button[aria-current="page"] {
  border-color: rgba(232, 200, 120, .38) !important;
  background: rgba(232, 200, 120, .14) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .23), inset 0 0 0 1px rgba(232, 200, 120, .08) !important;
}

body > [data-primary-actions].is-group-transition .home-action-icon,
body > [data-primary-actions].is-mobile-side-logo-transition .home-action-icon,
body > [data-primary-actions].is-mobile-logo-dock .home-action-icon {
  width: 17px !important;
  height: 17px !important;
  padding: 0 !important;
}

@media (max-width: 1023px) {
  [data-home-section="hero"] [data-primary-actions]:not(.is-group-transition):not(.is-mobile-side-logo-transition):not(.is-mobile-refined-transition):not(.is-mobile-logo-dock) {
    gap: 2px !important;
    padding: 3px !important;
    border-radius: 15px !important;
  }

  [data-home-section="hero"] [data-primary-actions]:not(.is-group-transition):not(.is-mobile-side-logo-transition):not(.is-mobile-refined-transition):not(.is-mobile-logo-dock) .button {
    min-height: 52px !important;
    padding: 7px 5px !important;
    border-radius: 11px !important;
    font-size: 11.5px !important;
  }

  [data-home-section="hero"] [data-primary-actions] .button .home-action-icon {
    width: 19px !important;
    height: 19px !important;
    padding: 0 !important;
  }

  body > [data-primary-actions].is-mobile-side-logo-transition .button,
  body > [data-primary-actions].is-mobile-logo-dock .button {
    max-width: none !important;
    font-size: 10.5px !important;
    letter-spacing: -.015em !important;
  }

  body > [data-primary-actions].is-mobile-side-logo-transition .home-action-icon,
  body > [data-primary-actions].is-mobile-logo-dock .home-action-icon {
    width: 14px !important;
    height: 14px !important;
    padding: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-primary-actions] .button,
  [data-primary-actions] .home-action-icon {
    transition-duration: 0ms !important;
  }
}