/**
 * Learn / Neo Animalia — surcharge du thème Formons (Tailwind + admin v2)
 * À charger après styles.css (tokens) sur les pages produit.
 */

body.na-theme {
  font-family: var(--ff-sans);
  color: var(--c-ink);
  background: var(--c-canvas);
}

body.na-theme h1,
body.na-theme h2,
body.na-theme h3,
body.na-theme .font-display {
  font-family: var(--ff-sans);
  color: var(--c-navy-800);
}

/* Admin v2 — remplace rouge Formons */
body.na-theme.v2 {
  --v2-primary: var(--c-cyan-500);
  --v2-primary-dark: var(--c-cyan-600);
  --v2-primary-light: var(--c-cyan-100);
  --v2-text: var(--c-ink);
  --v2-muted: var(--c-ink-soft);
  --v2-border: var(--c-border);
  --v2-border-strong: var(--c-border);
  --v2-bg: var(--c-surface);
  --v2-card-shadow-hover: 0 8px 24px -8px rgba(28, 183, 230, 0.22), 0 2px 4px rgba(28, 42, 110, 0.06);
}

body.na-theme.v2 .v2-tab[aria-selected="true"] {
  color: var(--c-cyan-600);
  border-bottom-color: var(--c-cyan-500);
}

body.na-theme.v2 .v2-formation-card:hover {
  border-color: rgba(28, 183, 230, 0.35);
}

body.na-theme.v2 .v2-btn-primary,
body.na-theme.v2 button.bg-\[\#A83226\],
body.na-theme.v2 a.bg-\[\#A83226\] {
  background-color: var(--c-cyan-500) !important;
}

body.na-theme.v2 .v2-btn-primary:hover,
body.na-theme.v2 button.hover\:bg-\[\#8B2A20\]:hover,
body.na-theme.v2 a.hover\:bg-\[\#8B2A20\]:hover {
  background-color: var(--c-cyan-600) !important;
}

/* Landing — utilitaires Formons → Neo Animalia */
body.na-theme .grad-text {
  background: linear-gradient(135deg, var(--c-cyan-500) 0%, var(--c-navy-700) 55%, var(--c-navy-800) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.na-theme .glass {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

body.na-theme .nav-blur {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--c-border);
}

body.na-theme .ab-banner {
  background: linear-gradient(135deg, var(--c-cyan-100), rgba(255, 255, 255, 0.9));
  border-bottom: 1px solid var(--c-border);
  color: var(--c-cyan-600);
}

body.na-theme .icon-ring {
  background: var(--c-cyan-100);
  border-color: rgba(28, 183, 230, 0.35);
}

body.na-theme .pricing-featured {
  background: linear-gradient(135deg, rgba(28, 183, 230, 0.1), rgba(28, 183, 230, 0.04));
  border-color: rgba(28, 183, 230, 0.35);
  box-shadow: 0 8px 30px rgba(28, 183, 230, 0.12);
}

body.na-theme input[type="email"]:focus,
body.na-theme input[type="number"]:focus,
body.na-theme input[type="password"]:focus,
body.na-theme input:focus {
  border-color: var(--c-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(28, 183, 230, 0.2);
}

body.na-theme .calc-step-btn:hover {
  border-color: rgba(28, 183, 230, 0.45);
}

/* Marque Neo Animalia (logo CSS du design system) */
.na-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
}

.na-brand-mark {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.na-brand-mark > span {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.na-brand-mark-a { top: 2px; left: 2px; background: var(--c-cyan-500); }
.na-brand-mark-b { top: 2px; left: 20px; background: var(--c-green-500); }
.na-brand-mark-c { top: 20px; left: 2px; background: var(--c-navy-800); }
.na-brand-mark-d { top: 20px; left: 20px; background: var(--c-cyan-600); }

.na-brand-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--c-navy-800);
  line-height: 1.1;
}

.na-brand-sub {
  font-size: 11px;
  color: var(--c-ink-soft);
  letter-spacing: 0.04em;
}

.na-brand-text {
  display: flex;
  flex-direction: column;
}