/* ============================================
   World-Debrid · Aurora Globe Design System
   v1 · 2026-05 · feat/graphic-refresh
   ============================================ */

:root {
  /* Backgrounds */
  --aurora-bg-base: #050616;
  --aurora-bg-elevated: #0a0e27;
  --aurora-bg-card: #0f1428;
  --aurora-bg-card-hover: #131a35;

  /* Signature aurora colors */
  --aurora-teal: #14b8a6;
  --aurora-violet: #a855f7;
  --aurora-pink: #ec4899;
  --aurora-cream: #fef3c7;

  /* Text */
  --aurora-text-primary: #e0f2fe;
  --aurora-text-secondary: rgba(224, 242, 254, 0.75);
  --aurora-text-muted: rgba(224, 242, 254, 0.55);
  --aurora-text-faint: rgba(224, 242, 254, 0.35);

  /* Borders */
  --aurora-border-subtle: rgba(168, 85, 247, 0.15);
  --aurora-border-aurora: rgba(20, 184, 166, 0.3);
  --aurora-border-hover: rgba(20, 184, 166, 0.5);

  /* Composite gradients */
  --aurora-gradient: linear-gradient(135deg, #14b8a6 0%, #a855f7 50%, #ec4899 100%);
  --aurora-gradient-soft: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.15));
  --aurora-gradient-text: linear-gradient(135deg, #e0f2fe 0%, #14b8a6 30%, #a855f7 65%, #ec4899 100%);

  /* Typography (clamp fluid) */
  --aurora-fs-eyebrow: clamp(11px, 0.85vw, 12px);
  --aurora-fs-body-sm: clamp(13px, 1vw, 14px);
  --aurora-fs-body: clamp(15px, 1.1vw, 16px);
  --aurora-fs-lead: clamp(18px, 1.4vw, 22px);
  --aurora-fs-tagline: clamp(24px, 2.2vw, 36px);
  --aurora-fs-h3: clamp(22px, 1.8vw, 28px);
  --aurora-fs-h2: clamp(40px, 5vw, 72px);
  --aurora-fs-h1: clamp(56px, 9vw, 132px);

  /* Spacing scale */
  --aurora-space-1: 4px;
  --aurora-space-2: 8px;
  --aurora-space-3: 12px;
  --aurora-space-4: 16px;
  --aurora-space-5: 20px;
  --aurora-space-6: 24px;
  --aurora-space-8: 32px;
  --aurora-space-10: 40px;
  --aurora-space-12: 48px;
  --aurora-space-16: 64px;
  --aurora-space-20: 80px;
  --aurora-space-24: 96px;
  --aurora-space-32: 128px;

  /* Radius */
  --aurora-radius-sm: 6px;
  --aurora-radius-md: 12px;
  --aurora-radius-lg: 20px;
  --aurora-radius-xl: 28px;
  --aurora-radius-pill: 999px;

  /* Motion */
  --aurora-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --aurora-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --aurora-duration-fast: 150ms;
  --aurora-duration-base: 250ms;
  --aurora-duration-slow: 400ms;

  /* Layout */
  --aurora-topbar-height: 64px;
  --aurora-container-max: 1320px;
}

/* ============================================
   GLOBALS
   ============================================ */

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

/* Light theme triggers light-mode UA defaults (scrollbars, native form controls) */
html:has(body[data-theme="arc"]) { color-scheme: light; }

/* Reset legacy top-banner padding compensation from styles.css
   (legacy body had padding-top: 80px to clear a position:fixed banner
   that no longer exists in the aurora refresh). */
body {
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--aurora-fs-body);
  line-height: 1.55;
  color: var(--aurora-text-primary);
  background: var(--aurora-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Clash Display', 'Switzer', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--aurora-text-primary);
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--aurora-duration-fast) var(--aurora-ease-out);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection {
  background: rgba(20, 184, 166, 0.3);
  color: var(--aurora-text-primary);
}

/* ============================================
   ATMOSPHERE: bands + starfield
   ============================================ */

.aurora-bands {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aurora-band {
  position: absolute;
  width: 200%;
  height: 60vh;
  opacity: 0.55;
  filter: blur(0px);
  animation: aurora-drift-1 52s ease-in-out infinite alternate;
}

.aurora-band-1 {
  top: 8vh;
  left: -50%;
}

.aurora-band-2 {
  top: 55vh;
  left: -50%;
  animation: aurora-drift-2 64s ease-in-out infinite alternate-reverse;
}

@keyframes aurora-drift-1 {
  from { transform: translateX(0); }
  to   { transform: translateX(25%); }
}

@keyframes aurora-drift-2 {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.aurora-starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(2px 2px at 85% 25%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,0.45), transparent 50%),
    radial-gradient(1.5px 1.5px at 90% 80%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.4), transparent 50%);
  background-size: 100% 100%;
  animation: aurora-twinkle 12s ease-in-out infinite;
}

@keyframes aurora-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* Reduced motion */
.aurora-reduce-motion .aurora-band,
.aurora-reduce-motion .aurora-starfield,
.aurora-reduce-motion .aurora-marquee-track {
  animation: none !important;
}

.aurora-reduce-motion .aurora-hero-globe animate,
.aurora-reduce-motion .aurora-hero-globe animateMotion,
.aurora-reduce-motion .aurora-hero-globe animateTransform {
  display: none;
}

.aurora-reduce-motion .aurora-reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Content layer above atmosphere */
.aurora-content,
.top-banner,
.aurora-topbar,
main,
footer {
  position: relative;
  z-index: 2;
}

/* ============================================
   TOPBAR
   ============================================ */

.aurora-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 14, 39, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--aurora-border-subtle);
}

.aurora-topbar-inner {
  /* Plus large que le conteneur de contenu (1320px) : la nav a beaucoup d'items
     (6 liens + contrôles + CTA), on lui laisse de la place sur grand écran pour
     afficher les liens inline plutôt que de les regrouper trop tôt dans « Plus ». */
  max-width: 1640px;
  margin: 0 auto;
  padding: 14px var(--aurora-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aurora-space-6);
  height: var(--aurora-topbar-height);
}

.aurora-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-3);
  color: var(--aurora-text-primary);
  transition: opacity var(--aurora-duration-fast);
}

.aurora-brand:hover {
  opacity: 0.9;
}

.aurora-wordmark {
  font-family: 'Clash Display', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.aurora-middot {
  background: var(--aurora-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  margin: 0 0.05em;
}

.aurora-nav {
  display: flex;
  align-items: center;
  gap: var(--aurora-space-5);
}

.aurora-nav-controls {
  display: flex;
  align-items: center;
  gap: var(--aurora-space-2);
}

/* ============================================
   CUSTOM LANGUAGE DROPDOWN (aurora-styled)
   ============================================
   Progressive enhancement note: we could opt into the new
   `appearance: base-select` CSS spec for modern Chrome (118+)
   via `@supports (appearance: base-select)` to style the native
   <select> directly with `::picker(select)`, `option`,
   `option::checkmark`. Browser support is still narrow, so we
   ship a JS-driven custom dropdown for cross-browser consistency
   and keep the native <select> visually hidden as a no-JS / form
   submission fallback. */

.aurora-language {
  position: relative;
}

.aurora-language-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--aurora-radius-pill);
  background: rgba(15, 20, 40, 0.7);
  border: 1px solid var(--aurora-border-subtle);
  color: var(--aurora-text-secondary);
  font-size: var(--aurora-fs-body-sm);
  font-family: 'Switzer', sans-serif;
  cursor: pointer;
  transition: border-color var(--aurora-duration-fast), color var(--aurora-duration-fast), background var(--aurora-duration-fast);
}

.aurora-language-trigger:hover,
.aurora-language-trigger:focus-visible,
.aurora-language-trigger[aria-expanded="true"] {
  border-color: var(--aurora-border-aurora);
  color: var(--aurora-text-primary);
  outline: none;
}

.aurora-language-trigger-icon {
  font-size: 12px;
  color: var(--aurora-teal);
}

.aurora-language-trigger-chevron {
  font-size: 10px;
  transition: transform var(--aurora-duration-fast);
}

.aurora-language-trigger[aria-expanded="true"] .aurora-language-trigger-chevron {
  transform: rotate(180deg);
}

.aurora-language-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-aurora);
  border-radius: var(--aurora-radius-md);
  padding: 6px;
  box-shadow: 0 18px 40px rgba(5, 6, 22, 0.6);
  list-style: none;
  margin: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 70vh;
  overflow-y: auto;
}

.aurora-language-menu[hidden] {
  display: none;
}

.aurora-language-menu li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--aurora-radius-sm);
  cursor: pointer;
  color: var(--aurora-text-secondary);
  font-size: var(--aurora-fs-body-sm);
  transition: background var(--aurora-duration-fast), color var(--aurora-duration-fast);
}

.aurora-language-menu li:hover,
.aurora-language-menu li:focus,
.aurora-language-menu li.is-focused {
  background: rgba(20, 184, 166, 0.1);
  color: var(--aurora-text-primary);
  outline: none;
}

.aurora-language-menu li[aria-selected="true"] {
  background: rgba(20, 184, 166, 0.18);
  color: var(--aurora-teal);
}

.aurora-language-menu li[aria-selected="true"].is-focused,
.aurora-language-menu li[aria-selected="true"]:hover {
  background: rgba(20, 184, 166, 0.26);
}

.aurora-language-option-flag {
  font-size: 16px;
  line-height: 1;
}

.aurora-language-option-label {
  font-family: 'Switzer', sans-serif;
  font-weight: 500;
}

.aurora-language-option-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--aurora-text-muted);
}

/* Hide native select but keep it accessible / submittable / no-JS fallback */
.aurora-language-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.aurora-theme-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  user-select: none;
}

.aurora-theme-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.aurora-theme-toggle-track {
  position: relative;
  width: 64px;
  height: 30px;
  background: rgba(15, 20, 40, 0.7);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  transition: background var(--aurora-duration-base), border-color var(--aurora-duration-base);
}

.aurora-theme-toggle-track:hover {
  border-color: var(--aurora-border-aurora);
}

.aurora-theme-toggle-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: color var(--aurora-duration-base), opacity var(--aurora-duration-base), filter var(--aurora-duration-base);
}

.aurora-theme-toggle-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2.2;
}

/* Toggle icons — the icon NOT covered by the thumb is bright (it represents
   the destination = the mode you can switch to). The icon under the thumb can
   stay muted since it's visually covered by the gradient thumb anyway. */

/* DARK mode (default, unchecked): thumb is on the RIGHT (over moon).
   → Sun (LEFT) is fully visible → bright cream with glow.
   → Moon (RIGHT) is hidden under the thumb → muted. */
.aurora-theme-toggle-icon-light {
  color: #fef3c7;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(254, 243, 199, 0.7));
}
.aurora-theme-toggle-icon-dark {
  color: rgba(224, 242, 254, 0.4);
  opacity: 0.6;
}

/* LIGHT mode (checked, body[data-theme="arc"]): thumb is on the LEFT (over sun).
   → Moon (RIGHT) is fully visible → strong violet.
   → Sun (LEFT) is hidden under the thumb → muted. */
body[data-theme="arc"] .aurora-theme-toggle-icon-light {
  color: rgba(10, 14, 39, 0.35);
  opacity: 0.6;
  filter: none;
}
body[data-theme="arc"] .aurora-theme-toggle-icon-dark {
  color: #7c3aed;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.45));
}

/* Default (unchecked = dark mode): thumb on the RIGHT, over the moon (= current mode). */
.aurora-theme-toggle-thumb {
  position: absolute;
  top: 50%;
  left: calc(100% - 20px - 5px);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--aurora-gradient);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
  transition: left var(--aurora-duration-base) var(--aurora-ease-spring), background var(--aurora-duration-base);
  z-index: 1;
}

/* Checked (light mode): thumb on the LEFT, over the sun (= current mode). */
.aurora-theme-toggle-input:checked ~ .aurora-theme-toggle-track .aurora-theme-toggle-thumb {
  left: 5px;
}

/* Focus state */
.aurora-theme-toggle-input:focus-visible ~ .aurora-theme-toggle-track {
  outline: 2px solid var(--aurora-teal);
  outline-offset: 2px;
}

/* Legacy class names (kept for backward compat with any inline markup) */
.aurora-toggle-track {
  width: 56px;
  height: 32px;
  background: rgba(15, 20, 40, 0.7);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 6px;
  font-size: 12px;
  color: var(--aurora-text-muted);
}
.aurora-icon-light { color: var(--aurora-cream); }

.aurora-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Nav overflow control — menu « Plus » ──────────────────────────────
   .aurora-topbar-inner est plafonné à --aurora-container-max (1320px). Avec
   tous les liens labelés + contrôles + CTA, ça déborde — surtout DÉCONNECTÉ
   (2 boutons auth en plus). Plutôt que des icônes cryptiques, on regroupe les
   liens SECONDAIRES (Guide/FAQ/Extensions) dans un dropdown « Plus » et on
   garde les libellés. Affichage inline ⇄ Plus selon la place. */
/* Par défaut (grand écran) : liens secondaires INLINE, « Plus » caché.
   On ne bascule en « Plus » que quand la barre déborde (médias plus bas). */
.aurora-nav-more { position: relative; display: none; }
/* Le bouton « Plus » doit ressembler à un lien nav (pas un <button> encadré) :
   on retire bordure / fond / police par défaut du navigateur. */
.aurora-nav-more-btn { gap: 4px; cursor: pointer; background: transparent; border: 0; font-family: inherit; }
.aurora-nav-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: var(--aurora-radius-lg);
  border: 1px solid var(--aurora-border-aurora);
  background: var(--aurora-bg-elevated);
  box-shadow: 0 24px 60px -24px rgba(5, 6, 22, 0.8);
  z-index: 120;
}
.aurora-nav-more:hover .aurora-nav-more-menu,
.aurora-nav-more:focus-within .aurora-nav-more-menu { display: flex; }
.aurora-nav-more-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--aurora-radius-md);
  color: var(--aurora-text-secondary);
  font-size: var(--aurora-fs-body-sm);
  text-decoration: none;
  transition: background var(--aurora-duration-fast), color var(--aurora-duration-fast);
}
.aurora-nav-more-item:hover { background: rgba(255,255,255,0.06); color: var(--aurora-text-primary); }
.aurora-nav-more-item.is-active { color: var(--aurora-teal); }
/* Le bouton « Plus » garde son libellé même dans la zone icône-seule (≤980). */
.aurora-nav-links .aurora-nav-more-btn span { display: inline; }

/* Bascule INLINE → « Plus » selon la place réellement dispo (la topbar est
   élargie, cf .aurora-topbar-inner). Déconnecté = 2 boutons auth en plus →
   on bascule plus tôt que connecté. */
@media (max-width: 1480px) {
  .aurora-nav-links.is-auth .aurora-nav-collapsible { display: none; }
  .aurora-nav-links.is-auth .aurora-nav-more { display: inline-flex; }
}
@media (max-width: 1660px) {
  .aurora-nav-links.is-guest .aurora-nav-collapsible { display: none; }
  .aurora-nav-links.is-guest .aurora-nav-more { display: inline-flex; }
}
/* En mode « Plus » sur écran étroit (déconnecté surtout, 3 CTA), on compacte
   pour rester dans le conteneur. */
@media (max-width: 1400px) {
  .aurora-nav-links { gap: 2px; }
  /* Spécificité .aurora-nav-links … pour battre les règles de padding par défaut. */
  .aurora-nav-links .aurora-nav-link,
  .aurora-nav-links .aurora-nav-cta { padding: 10px 10px; }
}


.aurora-nav-link,
.aurora-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--aurora-radius-pill);
  font-size: var(--aurora-fs-body-sm);
  font-weight: 500;
  color: var(--aurora-text-secondary);
  transition: color var(--aurora-duration-fast), background var(--aurora-duration-fast);
}

.aurora-nav-link:hover { color: var(--aurora-text-primary); background: rgba(255,255,255,0.04); }
.aurora-nav-link.is-active { color: var(--aurora-teal); background: rgba(20, 184, 166, 0.1); }

.aurora-nav-login {
  color: var(--aurora-teal);
}

.aurora-nav-cta {
  background: var(--aurora-gradient);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.3);
}

.aurora-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(168, 85, 247, 0.45);
}

/* ---------- Premium nav button — pilule gradient saillante (toutes pages) ---------- */
.aurora-nav-premium {
  position: relative;
  overflow: hidden;
  color: #07121b;
  font-weight: 700;
  background: var(--aurora-gradient);
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35);
}
.aurora-nav-premium:hover,
.aurora-nav-premium.is-active {
  color: #07121b;
  background: var(--aurora-gradient);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(168, 85, 247, 0.5);
}
.aurora-nav-premium svg,
.aurora-nav-premium i { color: #07121b; }
/* reflet qui balaie le bouton ~toutes les 3,6s */
.aurora-nav-premium::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: auroraPremiumShine 3.6s ease-in-out infinite;
}
@keyframes auroraPremiumShine {
  0%, 72% { left: -60%; }
  86%, 100% { left: 130%; }
}
.aurora-reduce-motion .aurora-nav-premium::after { animation: none; }

/* ---------- User avatar + dropdown (logged-in desktop) ---------- */
.aurora-nav-user-wrap {
  position: relative;
  list-style: none;
}

.aurora-nav-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--aurora-radius-pill);
  background: rgba(15, 20, 40, 0.7);
  border: 1px solid var(--aurora-border-subtle);
  color: var(--aurora-text-secondary);
  cursor: pointer;
  transition: border-color var(--aurora-duration-fast), background var(--aurora-duration-fast);
}

.aurora-nav-user:hover,
.aurora-nav-user:focus-visible,
.aurora-nav-user[aria-expanded="true"] {
  border-color: var(--aurora-border-aurora);
  color: var(--aurora-text-primary);
  outline: none;
}

.aurora-nav-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--aurora-gradient);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.35), 0 4px 14px rgba(168, 85, 247, 0.25);
  overflow: hidden;
}
.aurora-nav-user-avatar .aurora-globe-mark {
  width: 100%;
  height: 100%;
  filter: brightness(1.1);
}

.aurora-nav-user-chevron {
  font-size: 11px;
  transition: transform var(--aurora-duration-fast);
  color: var(--aurora-text-muted);
}
.aurora-nav-user[aria-expanded="true"] .aurora-nav-user-chevron {
  transform: rotate(180deg);
  color: var(--aurora-teal);
}

.aurora-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-aurora);
  border-radius: var(--aurora-radius-md);
  padding: 6px;
  box-shadow: 0 18px 40px rgba(5, 6, 22, 0.6);
  z-index: 200;
  /* Animate in */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--aurora-duration-fast) var(--aurora-ease-out),
              transform var(--aurora-duration-fast) var(--aurora-ease-out);
}
.aurora-user-dropdown[hidden] {
  display: none;
}
.aurora-user-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.aurora-user-dropdown-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--aurora-border-subtle);
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aurora-user-dropdown-email {
  font-family: 'Switzer', sans-serif;
  font-size: var(--aurora-fs-body-sm);
  font-weight: 600;
  color: var(--aurora-text-primary);
  word-break: break-all;
  line-height: 1.25;
}
.aurora-user-dropdown-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aurora-teal);
}

.aurora-user-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.aurora-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--aurora-radius-sm);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  transition: background var(--aurora-duration-fast), color var(--aurora-duration-fast);
}
.aurora-user-dropdown-item:hover,
.aurora-user-dropdown-item:focus-visible {
  background: rgba(20, 184, 166, 0.1);
  color: var(--aurora-text-primary);
  outline: none;
}
.aurora-user-dropdown-item .aurora-icon {
  color: var(--aurora-teal);
  flex-shrink: 0;
}

.aurora-user-dropdown-divider {
  height: 1px;
  background: var(--aurora-border-subtle);
  margin: 4px 0;
  list-style: none;
}

.aurora-user-dropdown-danger {
  color: var(--aurora-pink);
}
.aurora-user-dropdown-danger .aurora-icon {
  color: var(--aurora-pink);
}
.aurora-user-dropdown-danger:hover,
.aurora-user-dropdown-danger:focus-visible {
  background: rgba(236, 72, 153, 0.12);
  color: #f9a8d4; /* pink-300, more readable */
}

/* Mobile-only / desktop-only toggles for the dual-rendered logged-in nav */
.aurora-nav-mobile-only { display: none; }
.aurora-nav-desktop-only { display: inline-flex; }

@media (max-width: 980px) {
  .aurora-nav-link span,
  .aurora-nav-cta span { display: none; }
  .aurora-nav-links { gap: 2px; }
  /* Don't hide the user-avatar's chevron — it's not a label */
}

@media (max-width: 640px) {
  .aurora-topbar-inner { padding: 10px var(--aurora-space-4); gap: var(--aurora-space-3); }
  .aurora-wordmark { font-size: 18px; }
  .aurora-language { display: none; }
}

/* ============================================
   FOOTER
   ============================================ */

.aurora-footer {
  margin-top: var(--aurora-space-24);
  padding: var(--aurora-space-16) 0 0;
  border-top: 1px solid var(--aurora-border-subtle);
}

.aurora-footer-inner {
  max-width: var(--aurora-container-max);
  margin: 0 auto;
  padding: 0 var(--aurora-space-6) var(--aurora-space-12);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2.5fr;
  gap: 110px;
}

.aurora-footer-wordmark {
  font-family: 'Clash Display', sans-serif;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.025em;
  color: var(--aurora-text-primary);
  display: inline-block;
  margin-bottom: var(--aurora-space-3);
}

.aurora-footer-tagline {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-size: var(--aurora-fs-lead);
  color: var(--aurora-text-secondary);
  margin: 0 0 var(--aurora-space-4);
}

.aurora-footer-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.18em;
  color: var(--aurora-teal);
  margin: 0;
}

.aurora-footer-cols {
  display: grid;
  /* 4 colonnes : PRODUIT / HEBERGEURS / AIDE / LEGAL (sprint BIBLE T2 a ajoute la 4e col) */
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.aurora-footer-col h4 {
  font-family: 'Switzer', sans-serif;
  font-size: var(--aurora-fs-body-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aurora-text-primary);
  margin: 0 0 var(--aurora-space-4);
  padding-left: 8px;
}

.aurora-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: var(--aurora-space-3);
}

.aurora-footer-col a {
  color: var(--aurora-text-muted);
  font-size: var(--aurora-fs-body-sm);
  transition: color var(--aurora-duration-fast);
}

.aurora-footer-col a:hover {
  color: var(--aurora-teal);
}

.aurora-marquee {
  overflow: hidden;
  border-top: 1px solid var(--aurora-border-subtle);
  border-bottom: 1px solid var(--aurora-border-subtle);
  padding: var(--aurora-space-4) 0;
  position: relative;
}

.aurora-marquee::before,
.aurora-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.aurora-marquee::before { left: 0; background: linear-gradient(90deg, var(--aurora-bg-base), transparent); }
.aurora-marquee::after { right: 0; background: linear-gradient(270deg, var(--aurora-bg-base), transparent); }

.aurora-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-6);
  animation: aurora-marquee 50s linear infinite;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.25em;
  color: var(--aurora-text-muted);
}

.aurora-marquee.paused .aurora-marquee-track { animation-play-state: paused; }

.aurora-marquee-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aurora-violet);
}
.aurora-marquee-dot:nth-of-type(3n+1) { background: var(--aurora-teal); }
.aurora-marquee-dot:nth-of-type(3n+2) { background: var(--aurora-pink); }

@keyframes aurora-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.aurora-footer-baseline {
  max-width: var(--aurora-container-max);
  margin: 0 auto;
  padding: var(--aurora-space-6) var(--aurora-space-6) var(--aurora-space-10);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--aurora-space-4);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-muted);
}

.aurora-footer-baseline a { color: var(--aurora-text-muted); }
.aurora-footer-baseline a:hover { color: var(--aurora-teal); }

@media (max-width: 1280px) {
  .aurora-footer-inner { gap: 80px; }
}

@media (max-width: 980px) {
  .aurora-footer-inner { grid-template-columns: 1fr; gap: var(--aurora-space-10); }
  .aurora-footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--aurora-space-8); }
}

@media (max-width: 640px) {
  .aurora-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   HERO
   ============================================ */

.aurora-content {
  position: relative;
  z-index: 2;
}

.aurora-hero {
  position: relative;
  min-height: calc(80vh - var(--aurora-topbar-height));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 38px var(--aurora-space-6) 32px;
  max-width: var(--aurora-container-max);
  margin: 0 auto;
  overflow: visible;
  --aurora-fs-h1: clamp(45px, 7.2vw, 106px);
  --aurora-fs-tagline: clamp(19px, 1.76vw, 29px);
  --aurora-fs-lead: clamp(14px, 1.12vw, 18px);
  --aurora-fs-eyebrow: clamp(9px, 0.68vw, 10px);
}

/* Pages SEO content (uptobox, meilleur-debrideur, vs-debrid-link, changelog) :
   hero contient seulement eyebrow + H1 + lead, pas de globe/chips/CTA. Le min-height
   80vh laisse alors un trou vide avant la 1re section .aurora-article. */
.aurora-hero:has(.aurora-hero-title-page) {
  min-height: auto;
  padding-bottom: var(--aurora-space-12);
  /* Le hero de la home fait 1320px, le corps de ces pages est en .aurora-article
     (880px centre) : le titre decrochait de (1320-880)/2 = 220px vers la gauche
     des que la fenetre depassait 1320px. Meme largeur = meme axe de lecture. */
  max-width: 880px;
}

/* Lead bride a 520px dans le hero de la home (colonne etroite a cote du globe).
   Ici il n'y a pas de globe : le chapo casse en 4 lignes pour rien. */
.aurora-hero:has(.aurora-hero-title-page) .aurora-hero-lead {
  max-width: none;
}

.aurora-hero-globe {
  position: absolute;
  right: -30px;
  top: 40px;
  width: 432px;
  height: 432px;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 80px rgba(168, 85, 247, 0.25));
}
.aurora-hero-globe svg { width: 100%; height: 100%; }

.aurora-hero-inner {
  position: relative;
  z-index: 3;
  max-width: 760px;
}

.aurora-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
  padding: 6px 14px;
  border-radius: var(--aurora-radius-pill);
  border: 1px solid var(--aurora-border-aurora);
  background: rgba(20, 184, 166, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.18em;
  color: var(--aurora-teal);
  text-transform: uppercase;
  margin-bottom: var(--aurora-space-5);
}

.aurora-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aurora-teal);
  box-shadow: 0 0 10px var(--aurora-teal);
  animation: aurora-pulse 2s ease-in-out infinite;
}

@keyframes aurora-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.aurora-hero-title {
  font-family: 'Clash Display', sans-serif;
  font-weight: 800;
  font-size: var(--aurora-fs-h1);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 var(--aurora-space-4);
  text-wrap: balance;
  color: var(--aurora-text-primary);
}

/* H1 enrichi SEO : le wordmark reste le bloc dominant, une ligne mot-cle
   ("debrideur gratuit ...") est rendue dessous, dans le meme <h1>, pour donner
   le mot-cle principal a Google sans casser le branding (remplace l'ancienne
   tagline italique, desormais redondante). */
.aurora-hero-brandline { display: block; }
.aurora-hero-h1-kw {
  display: block;
  font-family: 'Switzer', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--aurora-text-secondary);
  margin-top: var(--aurora-space-3);
  text-wrap: balance;
}
/* accent gradient (statique, sans italique) sur la partie "vitesse maximale" —
   meme palette que le wordmark. Purement esthetique : le texte reste du texte
   crawlable/selectionnable, aucun impact SEO. */
.aurora-hero-kw-accent {
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
@media (max-width: 480px) {
  .aurora-hero-h1-kw { font-size: clamp(15px, 4.5vw, 19px); margin-top: var(--aurora-space-2); }
}

/* Variante reduite pour les pages SEO sub-content (uptobox, vs-debrid-link,
   meilleur-debrideur, etc.) — clamp entre fs-h2 (72px max) et fs-h1 (132px max).
   La home garde fs-h1 pour son wordmark hero, les pages content prennent une
   taille plus mesuree pour eviter le wrapping cauchemardesque sur titre long. */
.aurora-hero-title-page {
  font-family: 'Clash Display', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 var(--aurora-space-4);
  text-wrap: balance;
  color: var(--aurora-text-primary);
  max-width: 920px;
}

.aurora-hero-title-accent {
  background: var(--aurora-gradient-text);
  background-size: 140% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: aurora-grad-shift 14s ease-in-out infinite;
}

@keyframes aurora-grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.aurora-hero-tagline {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-size: var(--aurora-fs-tagline);
  color: var(--aurora-text-primary);
  margin: 0 0 var(--aurora-space-3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Le degrade en background-clip: text s'arrete a la boite du texte, alors que
   l'encre d'un glyphe italique la deborde a droite (mesure : 2,44px a 56px sur
   la serif systeme) — le dernier caractere apparait tranche net. Le padding
   elargit la zone peinte, la marge negative annule son effet sur le layout.
   Meme reglage sur chaque titre italique en degrade ci-dessous. */
.aurora-hero-tagline em {
  background: var(--aurora-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  padding-right: 0.08em;
  margin-right: -0.08em;
}

.aurora-hero-lead {
  font-size: var(--aurora-fs-lead);
  font-weight: 500;
  color: var(--aurora-text-secondary);
  max-width: 520px;
  margin: 0 0 var(--aurora-space-8);
  line-height: 1.5;
}

/* USP chips — value-prop visibility for "débrideur gratuit / sans inscription" SEO (S2D-05) */
.aurora-hero-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--aurora-space-2);
  padding: 0;
  margin: calc(0px - var(--aurora-space-4)) 0 var(--aurora-space-6);
  max-width: 520px;
}

.aurora-hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--aurora-radius-pill);
  border: 1px solid var(--aurora-border-aurora);
  background: rgba(20, 184, 166, 0.06);
  color: var(--aurora-text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.aurora-hero-chips li span[aria-hidden] {
  color: var(--aurora-teal);
  font-weight: 700;
}

.aurora-hero-notice {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
  padding: 8px 16px;
  border-radius: var(--aurora-radius-pill);
  border: 1px solid var(--aurora-border-aurora);
  background: rgba(20, 184, 166, 0.06);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  margin: var(--aurora-space-6) 0 0;
  width: max-content;
  max-width: 100%;
}

.aurora-hero-notice i {
  color: var(--aurora-teal);
  font-size: 14px;
}

.aurora-hero-notice a {
  color: var(--aurora-teal);
  text-decoration: underline;
  text-decoration-color: rgba(20, 184, 166, 0.4);
  font-weight: 600;
  margin-left: 4px;
}

.aurora-hero-notice a:hover {
  text-decoration-color: var(--aurora-teal);
  color: #5eead4;
}

/* Reveal animation */
.aurora-reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: aurora-reveal 0.7s var(--aurora-ease-out) forwards;
}

@keyframes aurora-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .aurora-hero-globe { width: 420px; height: 420px; right: -60px; opacity: 0.7; }
}
@media (max-width: 768px) {
  .aurora-hero-globe { position: relative; right: auto; top: 0; width: 280px; height: 280px; margin: 0 auto var(--aurora-space-6); opacity: 0.6; }
  .aurora-hero { min-height: auto; padding-bottom: var(--aurora-space-12); }
  .aurora-hero-inner { max-width: 100%; }
}

/* ============================================
   CONSOLE (debrid tool) — Task 3.2
   Ported from previews/.../direction-3-v5-aurora-globe.html
   with `aurora-` prefix.
   ============================================ */

.aurora-console {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 20, 40, 0.92), rgba(10, 14, 39, 0.96));
  backdrop-filter: blur(24px);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: 26px;
  padding: 12px 14px 22px;
  margin-top: var(--aurora-space-6);
  box-shadow:
    0 20px 60px rgba(5, 6, 22, 0.55),
    0 0 0 1px rgba(20, 184, 166, 0.05),
    0 -1px 0 rgba(168, 85, 247, 0.18) inset;
  overflow: hidden;
}

.aurora-console::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 26px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.55), transparent 30%, transparent 70%, rgba(236, 72, 153, 0.55));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.aurora-console-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 14px 12px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.1);
  margin-bottom: 14px;
}

.aurora-console-dots { display: flex; gap: 6px; }
.aurora-console-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(224, 242, 254, 0.18);
}
.aurora-console-dot-pink   { background: rgba(236, 72, 153, 0.7);   box-shadow: 0 0 8px rgba(236, 72, 153, 0.4); }
.aurora-console-dot-violet { background: rgba(254, 243, 199, 0.7);  box-shadow: 0 0 8px rgba(254, 243, 199, 0.4); }
.aurora-console-dot-teal   { background: rgba(20, 184, 166, 0.7);   box-shadow: 0 0 8px rgba(20, 184, 166, 0.4); }

.aurora-console-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
}

.aurora-console-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aurora-teal);
}

.aurora-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aurora-teal);
  box-shadow: 0 0 10px rgba(20, 184, 166, 0.9);
  animation: aurora-pulse 2s ease-in-out infinite;
}

.aurora-console-body { padding: 0 14px; }

/* Tabs ----------------------------------------- */
.aurora-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 5px;
  background: rgba(5, 6, 22, 0.5);
  border-radius: 13px;
  border: 1px solid var(--aurora-border-subtle);
}

/* Target both .aurora-tab (new) and legacy `.toggle-btn` (already dual-classed) */
.aurora-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--aurora-text-secondary);
  font-family: 'Switzer', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.25s var(--aurora-ease-out);
  letter-spacing: -0.005em;
  position: relative;
}
.aurora-tab i { font-size: 14px; }
.aurora-tab:hover { color: var(--aurora-text-primary); }

/* Active state: legacy script.js applies `.active`, aurora.js may also apply `.is-active`. */
.aurora-tab.active,
.aurora-tab.is-active {
  background: rgba(20, 184, 166, 0.12);
  color: var(--aurora-teal);
  box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.25), 0 4px 16px rgba(20, 184, 166, 0.15);
}

.aurora-tab-badge {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--aurora-gradient);
  border-radius: 50%;
  margin-left: 4px;
}

/* Form label / row / input ---------------------- */
.aurora-form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
  margin-bottom: 8px;
}
.aurora-form-label i { color: var(--aurora-teal); font-size: 12px; }

.aurora-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.aurora-form-row-actions { margin-top: 12px; }

.aurora-form-input {
  flex: 1;
  min-width: 260px;
  padding: 14px 20px;
  background: rgba(5, 6, 22, 0.6);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: 13px;
  color: var(--aurora-text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: all 0.25s var(--aurora-ease-out);
}
.aurora-form-input::placeholder { color: var(--aurora-text-muted); }
.aurora-form-input:-webkit-autofill,
.aurora-form-input:-webkit-autofill:hover,
.aurora-form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(5, 6, 22, 0.95) inset, 0 0 0 1px var(--aurora-border-subtle);
  box-shadow: 0 0 0 1000px rgba(5, 6, 22, 0.95) inset, 0 0 0 1px var(--aurora-border-subtle);
  -webkit-text-fill-color: var(--aurora-text-primary);
  caret-color: var(--aurora-text-primary);
}
.aurora-form-input:focus {
  outline: none;
  border-color: var(--aurora-teal);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15), 0 0 28px rgba(20, 184, 166, 0.2);
  background: rgba(5, 6, 22, 0.85);
}
.aurora-form-textarea {
  width: 100%;
  min-height: 140px;
  font-family: 'JetBrains Mono', monospace;
  resize: vertical;
  margin-bottom: 0;
}

/* Submit button (signature) --------------------- */
.aurora-form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  background: var(--aurora-gradient);
  color: #0a0e27;
  font-weight: 600;
  font-size: 14.5px;
  border: none;
  border-radius: 13px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s var(--aurora-ease-spring);
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.35);
  font-family: 'Switzer', sans-serif;
  letter-spacing: -0.01em;
}
.aurora-form-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-100%);
  transition: transform 0.55s var(--aurora-ease-out);
}
.aurora-form-submit:hover::before { transform: translateX(100%); }
.aurora-form-submit::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 15px;
  background: var(--aurora-gradient);
  opacity: 0;
  z-index: -1;
  filter: blur(16px);
  transition: opacity 0.35s var(--aurora-ease-out);
}
.aurora-form-submit:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 12px 36px rgba(236, 72, 153, 0.5);
  color: #0a0e27;
}
.aurora-form-submit:hover::after { opacity: 0.7; }
.aurora-form-submit:active { transform: translateY(-1px) scale(1); }
.aurora-form-submit i { transition: transform 0.3s var(--aurora-ease-spring); font-size: 14px; }
.aurora-form-submit:hover i { transform: translateX(4px); }

.aurora-form-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(15, 20, 40, 0.5);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: 13px;
  color: var(--aurora-text-secondary);
  font-family: 'Switzer', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s var(--aurora-ease-out);
}
.aurora-form-secondary:hover {
  color: var(--aurora-teal);
  border-color: var(--aurora-border-aurora);
  background: rgba(20, 184, 166, 0.05);
}

/* Meta footer ----------------------------------- */
.aurora-form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(168, 85, 247, 0.1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aurora-text-faint);
  flex-wrap: wrap;
}
.aurora-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aurora-meta-item strong {
  color: var(--aurora-teal);
  font-weight: 500;
}
.aurora-meta-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aurora-violet);
}
.aurora-meta-dot-teal { background: var(--aurora-teal); }

/* Mode sections (legacy: only the .active one shows) */
.aurora-console .mode-section {
  display: none;
}
.aurora-console .mode-section.active {
  display: block;
}

@media (max-width: 768px) {
  .aurora-console { padding: 10px 8px 18px; border-radius: 20px; }
  .aurora-console::before { border-radius: 20px; }
  .aurora-console-body { padding: 0 6px; }
  .aurora-tab span { font-size: 12px; }
  .aurora-form-input { min-width: 100%; }
  .aurora-form-meta { font-size: 9.5px; gap: 8px; }
  .aurora-tabs .aurora-tab span { display: none; }
  .aurora-tabs .aurora-tab { gap: 0; padding: 10px; }
  .aurora-tabs .aurora-tab i { font-size: 16px; }
  .mode-toggle.aurora-tabs { flex-direction: row !important; }
}

/* ============================================
   FEATURES — asymmetric 12-col grid (Phase 3b)
   ============================================ */

.aurora-features {
  max-width: var(--aurora-container-max);
  margin: var(--aurora-space-24) auto 0;
  padding: 0 var(--aurora-space-6);
}

.aurora-features-head {
  text-align: center;
  margin-bottom: var(--aurora-space-16);
}

.aurora-eyebrow-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.2em;
  color: var(--aurora-teal);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: var(--aurora-space-3);
}

.aurora-features-title {
  font-family: 'Clash Display', sans-serif;
  font-size: var(--aurora-fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 720px;
  margin: 0 auto var(--aurora-space-4);
}

.aurora-features-title em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
  margin-right: -0.08em;
}

.aurora-features-subline {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-size: var(--aurora-fs-lead);
  color: var(--aurora-text-secondary);
  max-width: 520px;
  margin: 0 auto;
}

.aurora-features-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--aurora-space-6);
  align-items: start;
}

.aurora-feature-span-3 { grid-column: span 3; }
.aurora-feature-span-4 { grid-column: span 4; }
.aurora-feature-span-5 { grid-column: span 5; }
.aurora-feature-span-6 { grid-column: span 6; }

.aurora-feature {
  position: relative;
  padding: var(--aurora-space-6);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  transition: transform var(--aurora-duration-base) var(--aurora-ease-spring),
              border-color var(--aurora-duration-base),
              box-shadow var(--aurora-duration-base);
  overflow: hidden;
}

.aurora-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--aurora-space-5);
  right: var(--aurora-space-5);
  height: 1px;
  background: var(--aurora-gradient);
  opacity: 0.5;
}

.aurora-feature:hover {
  transform: translateY(-3px);
  border-color: var(--aurora-border-aurora);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.15);
}

.aurora-feature-featured {
  background: linear-gradient(135deg, var(--aurora-bg-elevated), rgba(168, 85, 247, 0.06));
}

.aurora-feature-featured::before {
  opacity: 0.85;
  height: 1.5px;
}

.aurora-feature-num {
  position: absolute;
  top: var(--aurora-space-5);
  right: var(--aurora-space-6);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.15em;
  color: var(--aurora-text-muted);
}

.aurora-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--aurora-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: var(--aurora-space-5);
}

.aurora-tint-teal   { background: rgba(20, 184, 166, 0.15); color: var(--aurora-teal); }
.aurora-tint-violet { background: rgba(168, 85, 247, 0.15); color: var(--aurora-violet); }
.aurora-tint-pink   { background: rgba(236, 72, 153, 0.15); color: var(--aurora-pink); }

.aurora-feature h3 {
  font-size: var(--aurora-fs-h3);
  font-weight: 600;
  margin: 0 0 var(--aurora-space-3);
  letter-spacing: -0.02em;
}

.aurora-feature p {
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.aurora-feature-featured h3 { font-size: calc(var(--aurora-fs-h3) * 1.1); }
.aurora-feature-featured p  { font-size: var(--aurora-fs-body); }
.aurora-feature-featured .aurora-feature-icon { width: 56px; height: 56px; font-size: 22px; }

@media (max-width: 1024px) {
  .aurora-features-grid { grid-template-columns: repeat(6, 1fr); }
  .aurora-feature-span-3 { grid-column: span 3; }
  .aurora-feature-span-4 { grid-column: span 3; }
  .aurora-feature-span-5 { grid-column: span 6; }
  .aurora-feature-span-6 { grid-column: span 6; }
}

@media (max-width: 640px) {
  .aurora-features-grid { grid-template-columns: 1fr; }
  .aurora-features-grid > * { grid-column: 1 / -1; }
}

/* ============================================
   REFERRAL — gradient backdrop + orbital viz (Phase 3b)
   ============================================ */

.aurora-referral {
  max-width: var(--aurora-container-max);
  margin: var(--aurora-space-12) auto 0;
  padding: 0 var(--aurora-space-6);
}

.aurora-referral-inner {
  background:
    radial-gradient(ellipse 80% 100% at 20% 50%, rgba(168, 85, 247, 0.25), transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(236, 72, 153, 0.2), transparent 60%),
    var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-xl);
  padding: var(--aurora-space-12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--aurora-space-10);
  align-items: center;
  overflow: hidden;
  position: relative;
}

.aurora-eyebrow-pink { color: var(--aurora-pink); }

.aurora-referral-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: var(--aurora-space-3) 0 var(--aurora-space-5);
}

.aurora-referral-title em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
  margin-right: -0.08em;
}

.aurora-referral-body {
  font-size: var(--aurora-fs-body);
  color: var(--aurora-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--aurora-space-6);
  max-width: 480px;
}

.aurora-referral-body strong {
  color: var(--aurora-cream);
  font-weight: 600;
}

.aurora-referral-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
}

.aurora-referral-viz {
  position: relative;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aurora-referral-svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 980px) {
  .aurora-referral-inner { grid-template-columns: 1fr; padding: var(--aurora-space-8); }
  .aurora-referral-viz { height: 280px; }
}

/* ============================================
   HOSTERS — 60/40 head + 5-col pills grid (Phase 3b)
   ============================================ */

.aurora-hosters {
  max-width: var(--aurora-container-max);
  margin: var(--aurora-space-24) auto 0;
  padding: 0 var(--aurora-space-6);
}

.aurora-hosters-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--aurora-space-10);
  align-items: end;
  margin-bottom: var(--aurora-space-12);
}

.aurora-pill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
  padding: 6px 14px;
  border-radius: var(--aurora-radius-pill);
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid var(--aurora-border-aurora);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.18em;
  color: var(--aurora-teal);
  margin-bottom: var(--aurora-space-4);
}

.aurora-hosters-title {
  font-family: 'Clash Display', sans-serif;
  font-size: var(--aurora-fs-h2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

.aurora-hosters-title em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
  margin-right: -0.08em;
}

.aurora-hosters-subline {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-size: var(--aurora-fs-lead);
  color: var(--aurora-text-secondary);
  text-align: right;
  margin: 0;
}

.aurora-hosters-pills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--aurora-space-3);
}

.aurora-host-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--aurora-radius-md);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  transition: border-color var(--aurora-duration-fast);
}

.aurora-host-pill:hover { border-color: var(--aurora-border-aurora); }

.aurora-host-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

@media (max-width: 980px) {
  .aurora-hosters-inner { grid-template-columns: 1fr; }
  .aurora-hosters-subline { text-align: left; }
  .aurora-hosters-pills { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .aurora-hosters-pills { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   GENERIC PAGE HEAD (reused by plans / extensions / content / legal)
   ============================================ */
.aurora-page-head {
  max-width: var(--aurora-container-max);
  margin: var(--aurora-space-12) auto var(--aurora-space-16);
  padding: 0 var(--aurora-space-6);
  text-align: center;
}

/* ============================================
   PLANS
   ============================================ */
.aurora-plans {
  max-width: var(--aurora-container-max);
  margin: 0 auto var(--aurora-space-20);
  padding: 0 var(--aurora-space-6);
}

.aurora-plans-head {
  text-align: center;
  margin-bottom: var(--aurora-space-12);
}

.aurora-plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--aurora-space-6);
  align-items: stretch;
}

.aurora-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--aurora-space-8) var(--aurora-space-6) var(--aurora-space-6);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  transition: transform var(--aurora-duration-base) var(--aurora-ease-spring),
              border-color var(--aurora-duration-base),
              box-shadow var(--aurora-duration-base);
}

.aurora-plan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--aurora-space-5);
  right: var(--aurora-space-5);
  height: 1px;
  background: var(--aurora-gradient);
  opacity: 0.5;
}

.aurora-plan-card:hover {
  transform: translateY(-4px);
  border-color: var(--aurora-border-aurora);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.15);
}

.aurora-plan-featured {
  background: linear-gradient(135deg, var(--aurora-bg-elevated), rgba(20, 184, 166, 0.08));
  border-color: rgba(20, 184, 166, 0.35);
}
.aurora-plan-featured::before {
  opacity: 0.95;
  height: 1.5px;
}

.aurora-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--aurora-radius-pill);
  background: var(--aurora-gradient);
  color: #0a0e27;
  font-family: 'Switzer', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35);
  z-index: 2;
}
.aurora-plan-badge i { font-size: 11px; }

.aurora-plan-head {
  margin-bottom: var(--aurora-space-5);
  text-align: center;
}

.aurora-plan-name {
  font-family: 'Clash Display', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--aurora-text-secondary);
}

.aurora-plan-duration {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
}

.aurora-plan-renewal {
  color: var(--aurora-teal);
  font-weight: 500;
}

.aurora-plan-price {
  text-align: center;
  margin-bottom: var(--aurora-space-5);
  padding-bottom: var(--aurora-space-5);
  border-bottom: 1px solid rgba(168, 85, 247, 0.12);
}

.aurora-plan-amount {
  display: block;
  font-family: 'Clash Display', sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aurora-plan-period {
  display: block;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
}

.aurora-plan-description {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--aurora-cream);
  text-align: center;
  margin-bottom: var(--aurora-space-4);
  line-height: 1.45;
}

.aurora-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--aurora-space-6);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.aurora-plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--aurora-text-secondary);
  font-family: 'Switzer', sans-serif;
}

.aurora-plan-features li i {
  color: var(--aurora-teal);
  font-size: 12px;
  flex-shrink: 0;
}

.aurora-plan-features li.aurora-plan-bonus i { color: var(--aurora-cream); }
.aurora-plan-features li.aurora-plan-bonus { color: var(--aurora-cream); }

.aurora-plan-card .aurora-form-submit {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Status banner shown for already-subscribed / guest users (centered above grid) */
.aurora-plans-status {
  max-width: 760px;
  margin: 0 auto var(--aurora-space-12);
  padding: 0 var(--aurora-space-6);
}

@media (max-width: 1024px) {
  .aurora-plans-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .aurora-plans-grid { grid-template-columns: 1fr; }
  .aurora-plan-amount { font-size: 38px; }
}

/* ============================================
   EXTENSIONS PAGE
   ============================================ */

.aurora-extensions-cards {
  max-width: var(--aurora-container-max);
  margin: 0 auto var(--aurora-space-24);
  padding: 0 var(--aurora-space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--aurora-space-6);
}

.aurora-extensions-browser {
  text-align: center;
  padding: var(--aurora-space-10) var(--aurora-space-8);
}

.aurora-extensions-browser-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--aurora-space-5);
  font-size: 32px;
}

.aurora-extensions-version {
  margin: 0 auto var(--aurora-space-4);
  display: inline-flex;
}

.aurora-extensions-browser h3 {
  margin-bottom: var(--aurora-space-3);
}

.aurora-extensions-browser p {
  margin-bottom: var(--aurora-space-6);
}

.aurora-extensions-browser .aurora-form-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
  margin: 0 auto;
}

/* Install steps */
.aurora-install-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--aurora-space-5);
}

.aurora-install-step {
  position: relative;
  padding: var(--aurora-space-8) var(--aurora-space-6) var(--aurora-space-6);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  transition: transform var(--aurora-duration-base) var(--aurora-ease-spring), border-color var(--aurora-duration-base);
}

.aurora-install-step:hover {
  transform: translateY(-3px);
  border-color: var(--aurora-border-aurora);
}

.aurora-install-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--aurora-space-5);
  right: var(--aurora-space-5);
  height: 1px;
  background: var(--aurora-gradient);
  opacity: 0.5;
}

.aurora-install-num {
  font-family: 'Clash Display', sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: var(--aurora-space-4);
}

.aurora-install-step h3 {
  font-size: var(--aurora-fs-h3);
  font-weight: 600;
  margin: 0 0 var(--aurora-space-3);
}

.aurora-install-step p {
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .aurora-extensions-cards { grid-template-columns: 1fr; }
  .aurora-install-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .aurora-install-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ARTICLE (long-form content pages)
   ============================================ */

.aurora-article {
  max-width: 880px;
  margin: var(--aurora-space-8) auto var(--aurora-space-24);
  padding: 0 var(--aurora-space-6);
}

.aurora-article-body {
  font-size: var(--aurora-fs-body);
  line-height: 1.7;
  color: var(--aurora-text-secondary);
}

.aurora-article-body h2 {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--aurora-text-primary);
  margin: var(--aurora-space-16) 0 var(--aurora-space-5);
  text-wrap: balance;
}

.aurora-article-body h3 {
  font-family: 'Clash Display', sans-serif;
  font-size: var(--aurora-fs-h3);
  font-weight: 600;
  color: var(--aurora-text-primary);
  margin: var(--aurora-space-10) 0 var(--aurora-space-4);
}

.aurora-article-body h4 {
  font-family: 'Switzer', sans-serif;
  font-size: calc(var(--aurora-fs-body) * 1.1);
  font-weight: 600;
  color: var(--aurora-text-primary);
  margin: var(--aurora-space-6) 0 var(--aurora-space-3);
}

.aurora-article-body p {
  margin: 0 0 var(--aurora-space-5);
}

.aurora-article-body ul,
.aurora-article-body ol {
  padding-left: var(--aurora-space-6);
  margin: 0 0 var(--aurora-space-5);
}

.aurora-article-body li {
  margin: 0 0 var(--aurora-space-2);
}

.aurora-article-body a {
  color: var(--aurora-teal);
  text-decoration: underline;
  text-decoration-color: rgba(20, 184, 166, 0.4);
  transition: text-decoration-color var(--aurora-duration-fast);
}

.aurora-article-body a:hover {
  text-decoration-color: var(--aurora-teal);
}

/* Exclude CTA buttons from generic article-body link styling
   (sinon le texte hérite du teal et devient invisible sur le gradient aurora) */
.aurora-article-body a.aurora-form-submit,
.aurora-article-body a.aurora-form-secondary,
.aurora-article-body a.btn-primary,
.aurora-article-body a.btn-secondary {
  color: #0a0e27;
  text-decoration: none;
}
.aurora-article-body a.aurora-form-secondary {
  color: var(--aurora-text-primary, #e0f2fe);
}
.aurora-article-body a.aurora-form-submit:hover,
.aurora-article-body a.aurora-form-secondary:hover {
  text-decoration: none;
}

.aurora-article-body pre,
.aurora-article-body code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-sm);
}

/* Eyebrow pill au-dessus des H2 d'article (coherence visuelle avec hero sections).
   Quand l'eyebrow est immediatement suivi d'un H2, on reset le margin-top du H2
   pour eviter un gap enorme (var(--aurora-space-16) par defaut = trop pour cette
   combinaison eyebrow + titre adjacent). */
.aurora-article-body > .aurora-pill-eyebrow {
  margin-bottom: var(--aurora-space-3);
}
.aurora-article-body > .aurora-pill-eyebrow + h2 {
  margin-top: 0;
}

/* Articles consecutifs : reduire le bottom margin de .aurora-article quand suivis
   d'un autre article pour eviter une accumulation de space-24 entre 5 sections. */
.aurora-article + .aurora-article {
  margin-top: calc(var(--aurora-space-12) * -1);
}

/* Details/summary pour FAQ — pattern utilise par uptobox/vs-debrid-link.
   Style minimal Aurora : border hairline + hover teal subtle. */
.aurora-article-body details {
  border-top: 1px solid var(--aurora-border-subtle);
  padding: var(--aurora-space-4) 0;
}
.aurora-article-body details:last-of-type {
  border-bottom: 1px solid var(--aurora-border-subtle);
}
.aurora-article-body summary {
  cursor: pointer;
  font-family: 'Clash Display', sans-serif;
  font-weight: 600;
  font-size: calc(var(--aurora-fs-body) * 1.05);
  color: var(--aurora-text-primary);
  list-style: none;
  position: relative;
  padding-right: var(--aurora-space-6);
  transition: color var(--aurora-duration-fast);
}
.aurora-article-body summary::-webkit-details-marker { display: none; }
.aurora-article-body summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  color: var(--aurora-teal);
  transition: transform var(--aurora-duration-fast);
  font-weight: 400;
}
.aurora-article-body details[open] summary::after {
  content: '−';
}
.aurora-article-body summary:hover {
  color: var(--aurora-teal);
}
.aurora-article-body details p {
  margin-top: var(--aurora-space-3);
  margin-bottom: 0;
}

/* Changelog entries — timeline minimaliste, date en JetBrains Mono pour signal
   precision/datestamp, titre Clash Display, hairline subtle entre entries. */
.aurora-changelog-entry {
  padding: var(--aurora-space-6) 0;
  border-top: 1px solid var(--aurora-border-subtle);
}
.aurora-changelog-entry:first-of-type {
  border-top: none;
  padding-top: 0;
}
.aurora-changelog-date {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.1em;
  color: var(--aurora-teal);
  margin-bottom: var(--aurora-space-2);
}
.aurora-changelog-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 600;
  color: var(--aurora-text-primary);
  margin: 0 0 var(--aurora-space-3);
  line-height: 1.2;
  text-wrap: balance;
}
.aurora-changelog-desc {
  margin: 0;
  color: var(--aurora-text-secondary);
  line-height: 1.7;
}

/* Chips d'hosters pour la section SEO home — variante compacte des aurora-host-pill */
.aurora-seo-host-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aurora-space-2);
  margin-top: var(--aurora-space-4);
}
.aurora-seo-host-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--aurora-radius-pill);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  color: var(--aurora-text-secondary);
  font-size: var(--aurora-fs-body-sm);
  text-decoration: none;
  transition: border-color var(--aurora-duration-fast), color var(--aurora-duration-fast);
}
.aurora-seo-host-chip:hover {
  border-color: var(--aurora-border-aurora);
  color: var(--aurora-teal);
  text-decoration: none;
}
.aurora-seo-host-chip-all {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  color: var(--aurora-teal);
  font-size: var(--aurora-fs-body-sm);
  text-decoration: none;
  font-weight: 500;
}
.aurora-seo-host-chip-all:hover {
  text-decoration: underline;
}
/* Dans un article, `.aurora-article-body a` (0,2,0) bat la classe chip (0,1,0) et
   rendait les pills en liens de prose teal soulignes. Meme exclusion que les CTA. */
.aurora-article-body a.aurora-seo-host-chip {
  color: var(--aurora-text-secondary);
  text-decoration: none;
}
.aurora-article-body a.aurora-seo-host-chip:hover {
  color: var(--aurora-teal);
  text-decoration: none;
}
.aurora-article-body a.aurora-seo-host-chip-all {
  color: var(--aurora-teal);
  text-decoration: none;
}
/* CTA qui suit la rangee de chips : `.aurora-article-body p` n'a pas de margin-top,
   le bouton collait aux pills et son glow mordait dessus. */
.aurora-seo-host-chips + p {
  margin-top: var(--aurora-space-6);
}

.aurora-article-body code {
  padding: 2px 6px;
  font-size: 0.92em;
}

.aurora-article-body pre {
  padding: var(--aurora-space-4);
  overflow-x: auto;
  margin: 0 0 var(--aurora-space-5);
}

.aurora-article-body pre code {
  background: transparent;
  border: none;
  padding: 0;
}

.aurora-article-body strong {
  color: var(--aurora-text-primary);
  font-weight: 600;
}

.aurora-article-body em {
  font-style: italic;
}

.aurora-article-body blockquote {
  border-left: 2px solid var(--aurora-teal);
  padding-left: var(--aurora-space-5);
  margin: 0 0 var(--aurora-space-5);
  color: var(--aurora-text-secondary);
  font-style: italic;
}

.aurora-article-body hr {
  border: none;
  border-top: 1px solid var(--aurora-border-subtle);
  margin: var(--aurora-space-10) 0;
}

.aurora-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--aurora-space-5);
}

.aurora-article-body th,
.aurora-article-body td {
  text-align: left;
  padding: var(--aurora-space-3) var(--aurora-space-4);
  border-bottom: 1px solid var(--aurora-border-subtle);
}

.aurora-article-body th {
  font-weight: 600;
  color: var(--aurora-text-primary);
  background: var(--aurora-bg-elevated);
}

/* Article-embedded <details>/<summary> accordion */
.aurora-article-body details {
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  padding: var(--aurora-space-4) var(--aurora-space-5);
  margin: 0 0 var(--aurora-space-3);
  transition: border-color var(--aurora-duration-fast);
}
.aurora-article-body details[open] {
  border-color: var(--aurora-border-aurora);
}
.aurora-article-body summary {
  font-weight: 600;
  color: var(--aurora-text-primary);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.aurora-article-body summary::-webkit-details-marker { display: none; }
.aurora-article-body summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 20px;
  color: var(--aurora-teal);
  transition: transform var(--aurora-duration-fast);
}
.aurora-article-body details[open] summary::after {
  content: '−';
}

/* Article-embedded form fields (fallback for raw inputs inside .aurora-article-body).
   Does NOT redefine .aurora-form-input — that signature class lives above. */
.aurora-article-body input[type="text"],
.aurora-article-body input[type="email"],
.aurora-article-body input[type="password"],
.aurora-article-body input[type="url"],
.aurora-article-body textarea,
.aurora-article-body select {
  width: 100%;
  padding: 14px var(--aurora-space-4);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  color: var(--aurora-text-primary);
  font-family: inherit;
  font-size: var(--aurora-fs-body);
  transition: border-color var(--aurora-duration-fast);
}

.aurora-article-body input:focus,
.aurora-article-body textarea:focus,
.aurora-article-body select:focus {
  outline: none;
  border-color: var(--aurora-teal);
}

.aurora-article-body textarea {
  min-height: 120px;
  resize: vertical;
}

/* Full-width submit variant for embedded forms (e.g. /support contact form) */
.aurora-form-submit-full {
  width: 100%;
  justify-content: center;
}

/* Article section title (used as standalone <h2> outside .aurora-article-body) */
.aurora-article-section-title {
  font-family: 'Clash Display', sans-serif;
  font-size: var(--aurora-fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--aurora-text-primary);
  text-align: center;
  margin: var(--aurora-space-16) auto var(--aurora-space-6);
  max-width: 720px;
  text-wrap: balance;
}
.aurora-article-section-title em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
  margin-right: -0.08em;
}

/* ============================================
   AUTH (login + register)
   ============================================ */

.aurora-auth-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--aurora-topbar-height) - 200px);
}

.aurora-auth {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--aurora-space-10) var(--aurora-space-6);
}

.aurora-auth-card {
  width: 100%;
  max-width: 460px;
  padding: var(--aurora-space-10);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-xl);
  text-align: center;
  box-shadow: 0 30px 80px rgba(5, 6, 22, 0.45);
}

.aurora-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-3);
  margin-bottom: var(--aurora-space-6);
  color: var(--aurora-text-primary);
  text-decoration: none;
}

.aurora-auth-brand .aurora-wordmark {
  font-family: 'Clash Display', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.aurora-auth-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--aurora-text-primary);
  margin: 0 0 var(--aurora-space-2);
}

.aurora-auth-subtitle {
  font-size: var(--aurora-fs-body);
  color: var(--aurora-text-muted);
  margin: 0 0 var(--aurora-space-8);
  font-style: normal;
}
.aurora-auth-subtitle em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
}

/* Bloc Google : le bouton est dessiné par Google, seul le « ou » placé sous
   lui nous appartient. Le bloc porte l'attribut hidden dans
   le HTML et n'est démasqué par assets/js/google-signin.js qu'une fois le
   bouton rendu, pour ne jamais laisser un « ou » seul au-dessus du formulaire.
   Pas de règle body[data-theme="arc"] : les deux variables employées ici sont
   déjà redéfinies par le thème clair. */
.aurora-auth-separator {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 4px;
  color: var(--aurora-text-muted);
  font-size: 13px;
}
.aurora-auth-separator::before,
.aurora-auth-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--aurora-border-subtle);
}

/* Google dessine le bouton de deux façons selon le navigateur et l'état de la
   session Google : soit en HTML dans la page, soit dans une iframe qu'il
   dimensionne lui-même. Le 10/08 la variante iframe est sortie 20 px plus large
   que son conteneur, son fond opaque débordant du bouton en un cadre clair.
   max-width la ramène dans le bloc et le rayon donne au débord la forme du
   bouton. Volontairement sans !important ni largeur imposée : Google gère seul
   l'adaptation, on corrige le débordement sans lui dicter sa mise en page. */
.aurora-auth-google iframe {
  max-width: 100%;
  border-radius: 20px;
}

.aurora-auth-form {
  text-align: left;
  display: flex;
  flex-direction: column;
}

.aurora-auth-form .aurora-form-label {
  margin-top: var(--aurora-space-5);
  margin-bottom: var(--aurora-space-2);
}
.aurora-auth-form .aurora-form-label:first-child {
  margin-top: 0;
}

.aurora-auth-form .aurora-form-input {
  width: 100%;
  min-width: 0;
  padding: 14px var(--aurora-space-4);
  background: var(--aurora-bg-base);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  color: var(--aurora-text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: border-color var(--aurora-duration-fast), box-shadow var(--aurora-duration-fast), background var(--aurora-duration-fast);
}

.aurora-auth-form .aurora-form-input:focus {
  outline: none;
  border-color: var(--aurora-teal);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15);
  background: rgba(5, 6, 22, 0.85);
}

.aurora-form-help {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--aurora-text-muted);
  font-family: 'Switzer', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.aurora-auth-form .aurora-form-submit-full {
  margin-top: var(--aurora-space-6);
}

.aurora-auth-meta {
  margin-top: var(--aurora-space-6);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-muted);
  line-height: 1.8;
  text-align: center;
}
.aurora-auth-meta a,
.aurora-auth-meta-link {
  color: var(--aurora-teal);
  text-decoration: none;
}
.aurora-auth-meta a:hover,
.aurora-auth-meta-link:hover {
  text-decoration: underline;
}

/* CTA rendus comme <a> : garder le libellé sombre signature, ne jamais hériter
   d'une couleur de lien contextuelle (ex. .aurora-auth-meta a = teal) qui rend
   le texte invisible sur le gradient. Généralise le correctif .aurora-article-body
   à tous les contextes (auth, etc.). */
a.aurora-form-submit,
a.aurora-form-submit:visited,
a.aurora-form-submit:hover {
  color: #0a0e27;
}

.aurora-form-error {
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: var(--aurora-radius-md);
  padding: var(--aurora-space-3) var(--aurora-space-4);
  color: var(--aurora-pink);
  font-size: var(--aurora-fs-body-sm);
  margin-bottom: var(--aurora-space-4);
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.aurora-form-error i { margin-top: 3px; flex-shrink: 0; }
.aurora-form-error a { color: var(--aurora-teal); text-decoration: underline; }

.aurora-form-success {
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: var(--aurora-radius-md);
  padding: var(--aurora-space-3) var(--aurora-space-4);
  color: var(--aurora-teal);
  font-size: var(--aurora-fs-body-sm);
  margin-bottom: var(--aurora-space-4);
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.aurora-form-success i { margin-top: 3px; flex-shrink: 0; }

@media (max-width: 480px) {
  .aurora-auth-card { padding: var(--aurora-space-6); }
}

/* ============================================
   AUTH — page de confirmation d'inscription (registered.php)
   « Vérifiez votre boîte mail »
   ============================================ */

/* Illustration enveloppe */
.aurora-vp-illus { display: flex; justify-content: center; margin: 2px 0 18px; }
.aurora-vp-illus svg {
  width: 104px; height: 104px;
  filter: drop-shadow(0 10px 26px rgba(168, 85, 247, 0.38));
  animation: aurora-vp-float 4.5s ease-in-out infinite;
}
@keyframes aurora-vp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Stepper « vous y êtes presque » */
.aurora-vp-steps { display: flex; align-items: flex-start; justify-content: center; margin: 2px 0 22px; }
.aurora-vp-step {
  display: flex; flex-direction: column; align-items: center; gap: 7px; width: 84px;
  text-align: center; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--aurora-text-muted);
}
.aurora-vp-step-dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; border: 1px solid var(--aurora-border-subtle); background: rgba(255, 255, 255, 0.03);
}
.aurora-vp-step.is-done .aurora-vp-step-dot { background: var(--aurora-gradient); color: #0a0e27; border: none; }
.aurora-vp-step.is-active .aurora-vp-step-dot { border-color: var(--aurora-teal); color: var(--aurora-teal); box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.13); }
.aurora-vp-step.is-active { color: var(--aurora-text-primary); }
.aurora-vp-step-line { flex: 0 0 34px; height: 1px; background: var(--aurora-border-subtle); margin-top: 15px; }

/* Callout + email masqué */
.aurora-vp-callout {
  background: rgba(20, 184, 166, 0.08); border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: var(--aurora-radius-md); padding: 16px 18px; text-align: center;
  line-height: 1.6; font-size: 14px; color: var(--aurora-text-secondary); margin-bottom: 18px;
}
.aurora-vp-mask {
  display: inline-block; margin: 8px 0 2px; padding: 6px 14px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--aurora-border-subtle);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; font-weight: 600;
  color: var(--aurora-text-primary); letter-spacing: 0.02em; word-break: break-all;
}

/* CTA webmail : pleine largeur */
.aurora-vp-webmail { width: 100%; justify-content: center; text-decoration: none; }

/* Astuce délai / spam */
.aurora-vp-hint {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 14px;
  font-size: 12.5px; line-height: 1.55; color: var(--aurora-text-muted); text-align: left;
}
.aurora-vp-hint i { color: var(--aurora-teal); margin-top: 2px; flex-shrink: 0; }

/* Séparateur « Pas reçu l'email ? » */
.aurora-vp-sep { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--aurora-text-muted); font-size: 12px; }
.aurora-vp-sep::before, .aurora-vp-sep::after { content: ''; flex: 1; height: 1px; background: var(--aurora-border-subtle); }

/* Bouton « Renvoyer » (secondaire, contour) + état cooldown */
.aurora-vp-resend-form { margin: 0; }
.aurora-vp-resend {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 12px 18px; border-radius: 13px; font-weight: 600; font-size: 14px; cursor: pointer;
  font-family: 'Switzer', sans-serif; background: transparent; color: var(--aurora-text-primary);
  border: 1px solid var(--aurora-border-aurora); transition: all 0.25s var(--aurora-ease-out); text-decoration: none;
}
.aurora-vp-resend:hover { background: rgba(168, 85, 247, 0.10); border-color: rgba(168, 85, 247, 0.5); transform: translateY(-1px); }
.aurora-vp-resend.is-cooldown, .aurora-vp-resend:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; }
.aurora-vp-resend.is-cooldown i { color: var(--aurora-text-muted); }

/* Liens méta : une action par ligne (fini le retour à la ligne moche) */
.aurora-vp-meta { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; text-align: center; font-size: 13px; }
.aurora-vp-meta a { display: inline-block; color: var(--aurora-text-muted); text-decoration: none; }
.aurora-vp-meta a strong { color: var(--aurora-teal); font-weight: 600; }
.aurora-vp-meta a:hover strong { text-decoration: underline; }

/* ============================================
   BANNED PAGE
   ============================================ */

.aurora-banned {
  min-height: calc(100vh - var(--aurora-topbar-height) - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--aurora-space-12) var(--aurora-space-6);
}

.aurora-banned-inner {
  max-width: 560px;
  width: 100%;
  text-align: center;
  padding: var(--aurora-space-10);
  background: var(--aurora-bg-elevated);
  border: 1px solid rgba(236, 72, 153, 0.25);
  border-radius: var(--aurora-radius-xl);
}

.aurora-banned-inner .aurora-features-title {
  margin: var(--aurora-space-4) 0 var(--aurora-space-2);
}

.aurora-banned-message {
  font-size: var(--aurora-fs-lead);
  color: var(--aurora-text-secondary);
  margin: var(--aurora-space-6) 0;
  font-style: italic;
  line-height: 1.6;
}

.aurora-banned-meta-list {
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  padding: var(--aurora-space-4) var(--aurora-space-5);
  margin: 0 0 var(--aurora-space-6);
}

.aurora-banned-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--aurora-space-3) 0;
  border-bottom: 1px solid var(--aurora-border-subtle);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-body-sm);
}

.aurora-banned-meta-row:last-child { border-bottom: none; }

.aurora-banned-meta-row dt {
  color: var(--aurora-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.aurora-banned-meta-row dd {
  margin: 0;
  color: var(--aurora-cream);
  font-weight: 600;
}

.aurora-banned-type-permanent { color: #ef4444; }
.aurora-banned-type-temporary { color: #f59e0b; }

.aurora-banned-contact-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  color: var(--aurora-text-primary);
  margin: var(--aurora-space-6) 0 var(--aurora-space-2);
  font-size: var(--aurora-fs-body);
}

.aurora-banned-contact-msg {
  color: var(--aurora-text-secondary);
  font-size: var(--aurora-fs-body-sm);
  margin-bottom: var(--aurora-space-5);
}

.aurora-banned-cta {
  display: inline-flex !important;
  width: auto !important;
}

@media (max-width: 480px) {
  .aurora-banned-inner { padding: var(--aurora-space-6); }
  .aurora-banned-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aurora-space-1);
  }
}

/* ============================================
   USAGE STATUS PILL (legacy markup, aurora skin)
   Used on plans.php for guest/free/premium banners
   ============================================ */

.usage-status {
  background: rgba(20, 184, 166, 0.06) !important;
  border: 1px solid var(--aurora-border-aurora) !important;
  border-radius: var(--aurora-radius-pill) !important;
  padding: 10px 18px !important;
  max-width: max-content !important;
  width: auto !important;
  gap: var(--aurora-space-3) !important;
  font-family: 'Switzer', sans-serif;
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  backdrop-filter: none !important;
}

.usage-status.premium {
  background: rgba(254, 243, 199, 0.07) !important;
  border-color: rgba(254, 243, 199, 0.35) !important;
}

.subscription-time-remaining {
  background: rgba(168, 85, 247, 0.1) !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
  color: var(--aurora-text-primary) !important;
}
.subscription-time-remaining strong {
  background: var(--aurora-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-size: 1.1rem;
  font-weight: 700;
}

.usage-status.free {
  background: rgba(20, 184, 166, 0.08) !important;
  border-color: var(--aurora-border-aurora) !important;
}

.usage-status.guest {
  background: rgba(168, 85, 247, 0.08) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

.usage-status .status-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px !important;
  background: transparent !important;
}

.usage-status.guest .status-icon {
  color: var(--aurora-violet) !important;
  background: rgba(168, 85, 247, 0.15) !important;
}

/* Suspended state — freemium temporarily disabled.
   Single icon (ban) recolored aurora-pink to signal blocked action
   without going off-brand red. Text uses the same hue.
   The inline `aurora-status-suspended` class is also applied to other
   warning texts (e.g. "Limite mensuelle atteinte"). */
.usage-status.is-suspended {
  background: rgba(236, 72, 153, 0.08) !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
}
.usage-status.is-suspended .status-icon {
  color: var(--aurora-pink) !important;
  background: rgba(236, 72, 153, 0.15) !important;
}
.aurora-status-suspended {
  color: var(--aurora-pink);
  font-weight: 600;
}

.usage-status.free .status-icon {
  color: var(--aurora-teal) !important;
  background: rgba(20, 184, 166, 0.15) !important;
}

.usage-status.premium .status-icon {
  color: var(--aurora-cream) !important;
  background: rgba(254, 243, 199, 0.15) !important;
}

.usage-status .status-content,
.usage-status .status-text,
.usage-status > div:not(.status-icon) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.aurora-plans-status {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--aurora-space-10);
  padding: 0 var(--aurora-space-6);
}

/* ============================================
   LEGACY MARKUP OVERRIDES
   ---
   These rules neutralize legacy styles.css and
   recurring-subscriptions.css rules that bleed
   through on logged-in pages. The legacy class
   names (.btn-primary, .toggle-btn, .plan-btn,
   .recurring-badge, .points-badge-inline, etc.)
   are still in the markup because their PHP/JS
   hooks depend on them. We don't remove them —
   we restyle them aurora.

   Confirmed leaks audited 2026-05-11:
   - styles.css: .btn-primary, .toggle-btn,
     .plan-btn, .points-badge-inline,
     .points-badge, .current-points-info,
     .mode-toggle, [data-theme="arc"] variants
     (yellow #ffcc00, cream #e3dbcb)
   - recurring-subscriptions.css: .recurring-badge
     (green gradient #10b981/#059669)

   Targets pages where markup retains legacy
   classes: index.php (home plans grid + tabs +
   form submit), plans.php (status badges).
   ============================================ */

/* ---- Buttons: filled primary CTAs ---- */
/* Targets:
   - index.php "Débrider le lien/les liens/le torrent" (.aurora-form-submit.btn-primary)
   - index.php home plans grid CTA (.btn-primary.plan-btn) — no aurora class, pure legacy
   - plans.php JS-injected dialog confirm (.btn-primary.dialog-confirm)
   - auth/* CTAs (.btn-primary.auth-btn-submit) — neutralizes [data-theme="arc"] yellow */
.aurora-form-submit.btn-primary,
.btn-primary.plan-btn,
button.btn-primary,
a.btn-primary,
[data-theme="arc"] .btn-primary,
[data-theme="arc"] .btn-primary:hover {
  background: var(--aurora-gradient) !important;
  color: #0a0e27 !important;
  border: none !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  padding: 14px 26px !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.35) !important;
  clip-path: none !important;
  transition: transform var(--aurora-duration-fast) var(--aurora-ease-spring),
              box-shadow var(--aurora-duration-fast) var(--aurora-ease-out) !important;
}
.aurora-form-submit.btn-primary:hover,
.btn-primary.plan-btn:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(236, 72, 153, 0.5) !important;
  color: #0a0e27 !important;
}
.aurora-form-submit.btn-primary:active,
.btn-primary.plan-btn:active,
button.btn-primary:active,
a.btn-primary:active {
  transform: translateY(-1px) !important;
}

/* Kill the arc-theme ::before/::after chevron pseudo-elements that
   would otherwise paint a black arrow strip on the left edge of any
   .btn-primary when [data-theme="arc"] is the body's persisted theme. */
[data-theme="arc"] .btn-primary::before,
[data-theme="arc"] .btn-primary::after {
  display: none !important;
  content: none !important;
}

/* Icons inside legacy primary buttons (e.g. shopping-cart on plan-btn,
   sign-in on auth buttons) — force them to inherit the new color so the
   arc-theme black/#1a1a1a leftover doesn't show through. */
.btn-primary i,
.plan-btn i {
  color: inherit !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* ---- Tabs: legacy .toggle-btn dual-classed with .aurora-tab ---- */
/* Targets index.php tabs: "Lien unique / Liens multiples / Torrent".
   Markup is <button class="toggle-btn aurora-tab active" ...>. The
   [data-theme="arc"] rules paint a cream #e3dbcb active state — we
   force aurora teal tint regardless of persisted theme. */
.aurora-tab.toggle-btn,
[data-theme="arc"] .toggle-btn {
  background: transparent !important;
  color: var(--aurora-text-secondary) !important;
  border: 1px solid transparent !important;
  border-left-width: 1px !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--aurora-radius-md) !important;
  clip-path: none !important;
  box-shadow: none !important;
}
.aurora-tab.toggle-btn.active,
.aurora-tab.toggle-btn[aria-selected="true"],
[data-theme="arc"] .toggle-btn.active,
[data-theme="arc"] .toggle-btn[data-mode="single"].active,
[data-theme="arc"] .toggle-btn[data-mode="multiple"].active,
[data-theme="arc"] .toggle-btn[data-mode="torrent"].active {
  background: rgba(20, 184, 166, 0.15) !important;
  border: 1px solid var(--aurora-border-aurora) !important;
  color: var(--aurora-teal) !important;
  box-shadow: none !important;
}
.aurora-tab.toggle-btn:hover:not(.active):not([aria-selected="true"]) {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--aurora-text-primary) !important;
  border-color: var(--aurora-border-subtle) !important;
}
.aurora-tab.toggle-btn.active i,
[data-theme="arc"] .toggle-btn.active i {
  color: inherit !important;
}

/* ---- Mode toggle wrapper around tabs ---- */
.mode-toggle.aurora-tabs,
.mode-toggle {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 8px !important;
}

/* ---- Recurring badge: green-yellow gradient → aurora gradient ---- */
/* Targets:
   - index.php home plans grid: <div class="recurring-badge"> (line 549)
   - auth/account.php: <span class="recurring-badge-inline">
   recurring-subscriptions.css paints linear-gradient(#10b981, #059669) +
   pulse-badge animation. We neutralize background/color, keep the icon
   rotation animation. */
.recurring-badge,
.recurring-badge-inline {
  background: var(--aurora-gradient) !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 5px 14px !important;
  border-radius: var(--aurora-radius-pill) !important;
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  animation: none !important;
}
.recurring-badge i,
.recurring-badge-inline i {
  color: inherit !important;
  /* Keep the existing rotate-icon animation defined in recurring-subscriptions.css
     — it's an icon-level animation and already aurora-compatible. */
}

/* ---- Points pill: yellow → aurora cream tint ---- */
/* Targets:
   - plans.php top-of-page status block (.points-badge-inline) — both premium
     and free branches (lines 159 & 189)
   - index.php home plans bottom (.current-points-info > .points-badge) (line 612)
   - styles.css defines .points-badge twice with #ffd700/#FFD700-#FFA500
     gradient — both targeted here. */
.points-badge-inline,
.points-badge,
.current-points-info .points-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(254, 243, 199, 0.08) !important;
  border: 1px solid rgba(254, 243, 199, 0.3) !important;
  border-radius: var(--aurora-radius-pill) !important;
  color: var(--aurora-text-primary) !important;
  padding: 8px 16px !important;
  font-family: 'Switzer', sans-serif !important;
  font-size: var(--aurora-fs-body-sm) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
.points-badge-inline i,
.points-badge i,
.current-points-info .points-badge i {
  color: var(--aurora-cream) !important;
  font-size: 14px !important;
}
.points-badge-inline strong,
.points-badge strong,
.current-points-info .points-badge strong {
  color: var(--aurora-cream) !important;
  font-weight: 700 !important;
  font-size: var(--aurora-fs-body-sm) !important;
}

/* Free-status variant keeps the same aurora cream identity (was yellow
   in styles.css lines 1134-1143). */
.usage-status.free .points-badge-inline {
  background: rgba(254, 243, 199, 0.08) !important;
  border: 1px solid rgba(254, 243, 199, 0.3) !important;
}
.usage-status.free .points-badge-inline i,
.usage-status.free .points-badge-inline strong {
  color: var(--aurora-cream) !important;
}

/* ---- Plan prices (legacy gold → aurora gradient) ---- */
/* Targets the home logged-in legacy plans block (.features-container
   .plans-grid > .plan-card) where styles.css paints .price-amount
   #FFD700 / #ffd700 at multiple specificities:
   - styles.css:3212 .price-amount { color: #FFD700 }
   - styles.css:3449 .subscription-plan-card .price-amount { color: #ffd700 }
   - styles.css:3585 .features-container .plan-card .price-amount { color: #ffd700 }
   We force aurora-gradient text fill at every specificity tier including
   the persisted [data-theme="arc"] body variant. Also retypeset period. */
.plan-price,
.price-amount,
.plan-card .price,
.plan-card .price-value,
.subscription-plan-price,
[data-theme="arc"] .plan-price,
[data-theme="arc"] .price-amount {
  background: var(--aurora-gradient-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-family: 'Clash Display', sans-serif !important;
  font-weight: 800 !important;
  font-size: 44px !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}

.plan-price-period,
.price-period,
.plan-card .period {
  color: var(--aurora-text-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
}

/* ---- Compte Gratuit / Compte Premium status pill ---- */
/* Targets index.php usage-status-container > .usage-status.{free,premium,guest}.
   The legacy .status-info / .status-label / .status-detail structure
   stacks awkwardly (bold "Compte Gratuit" + lightweight "Restant ce
   mois : 1"). We re-typeset to: mono uppercase eyebrow + Switzer body,
   wrapped in a tight inline-flex pill. Per-variant label color shift
   keeps the status semantic (teal=free, violet=guest, cream=premium). */
.usage-status .status-info {
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: flex-start !important;
}
.usage-status .status-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--aurora-teal) !important;
  font-weight: 600 !important;
}
.usage-status.guest .status-label { color: var(--aurora-violet) !important; }
.usage-status.premium .status-label { color: var(--aurora-cream) !important; }
.usage-status .status-detail {
  font-family: 'Switzer', sans-serif !important;
  font-size: 13px !important;
  color: var(--aurora-text-secondary) !important;
  font-weight: 400 !important;
}
.usage-status .status-detail strong {
  color: var(--aurora-text-primary) !important;
  font-weight: 600 !important;
}

/* Re-tighten the pill itself: flex row, single line height */
.usage-status {
  flex-wrap: nowrap !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  max-width: max-content !important;
}
.usage-status .status-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  flex-shrink: 0;
}

/* ---- Glass card wrapper (legacy gray box) ---- */
/* The legacy .glass-card wraps the logged-in plans block on home + plans page.
   We strip its background/border so the inner aurora components render flush
   on the aurora atmosphere, not inside a gray rectangle. */
.glass-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--aurora-space-8) 0 !important;
  margin-bottom: 0 !important;
}
.glass-card:hover {
  border-color: transparent !important;
}
.glass-card::before,
.glass-card::after {
  display: none !important;
}

/* ---- Legacy "Devenez Premium !" heading inside .glass-card ---- */
.glass-card .features-header,
.glass-card .plans-header {
  text-align: center !important;
  margin-bottom: var(--aurora-space-10) !important;
}
.glass-card .features-header h2,
.glass-card .plans-header h2,
.glass-card h2.features-title {
  font-family: 'Clash Display', sans-serif !important;
  font-size: var(--aurora-fs-h2) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--aurora-text-primary) !important;
  background: none !important;
  -webkit-text-fill-color: var(--aurora-text-primary) !important;
  text-shadow: none !important;
  margin: 0 0 var(--aurora-space-3) !important;
}
.glass-card .features-header h2 .fa-gem,
.glass-card .plans-header h2 .fa-gem {
  background: var(--aurora-gradient-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.glass-card .features-header p,
.glass-card .plans-header p,
.glass-card .features-subtitle {
  font-family: 'Tobias', 'Switzer', serif !important;
  font-style: italic !important;
  font-size: var(--aurora-fs-lead) !important;
  color: var(--aurora-text-secondary) !important;
  margin: 0 !important;
}

/* ---- Bottom "Points actuels XX" pill ---- */
/* Targets index.php:612 .current-points-info wrapping a .points-badge.
   styles.css:3660 gives it a top-divider layout; we promote the wrapper
   itself to a compact aurora cream pill so it reads as a single chip
   instead of a fragmented bordered block. The inner .points-badge is
   already overridden above — these rules govern the outer wrapper. */
.current-points-info {
  background: rgba(254, 243, 199, 0.06) !important;
  border: 1px solid rgba(254, 243, 199, 0.25) !important;
  border-radius: var(--aurora-radius-pill) !important;
  padding: 8px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--aurora-text-secondary) !important;
  max-width: max-content !important;
  margin: var(--aurora-space-8) auto 0 !important;
  border-top: none !important;
}
.current-points-info i {
  color: var(--aurora-cream) !important;
}
.current-points-info strong {
  color: var(--aurora-cream) !important;
  font-weight: 700 !important;
}
.current-points-info::before,
.current-points-info::after {
  content: none !important;
}

/* Hide redundant "current-points-label" text if any — keep just icon + number */
.current-points-info .points-amount,
.current-points-info > span {
  color: inherit !important;
}

/* ============================================================
   ACCOUNT PAGE (auth/account.php) — aurora dashboard
   ============================================================ */

.aurora-account-main {
  max-width: var(--aurora-container-max);
  margin: 0 auto;
  padding: var(--aurora-space-8) var(--aurora-space-6);
}

.aurora-account-hero {
  display: flex;
  align-items: center;
  gap: var(--aurora-space-5);
  padding: var(--aurora-space-8);
  background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(168,85,247,0.06));
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  margin-bottom: var(--aurora-space-8);
}
.aurora-account-hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
  display: block;
  margin-bottom: var(--aurora-space-2);
}
.aurora-account-hero-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--aurora-space-2);
  color: var(--aurora-text-primary);
}
.aurora-account-hero-title em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-weight: 500;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
  margin-right: -0.08em;
}
.aurora-account-hero-sub {
  font-size: var(--aurora-fs-body);
  color: var(--aurora-text-secondary);
  margin: 0;
}
@media (max-width: 640px) {
  .aurora-account-hero { flex-direction: column; text-align: center; }
}

.aurora-account-section {
  margin-bottom: var(--aurora-space-8);
  padding: var(--aurora-space-8);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
}

.aurora-account-section-title {
  font-family: 'Clash Display', sans-serif;
  font-size: var(--aurora-fs-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--aurora-space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-3);
  color: var(--aurora-text-primary);
}
.aurora-account-section-title i { color: var(--aurora-teal); font-size: 18px; }
.aurora-account-section-sub {
  margin-top: var(--aurora-space-8);
}

.aurora-account-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--aurora-space-4);
}
@media (max-width: 980px) { .aurora-account-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .aurora-account-grid { grid-template-columns: 1fr; } }

.aurora-account-info-card {
  padding: var(--aurora-space-4) var(--aurora-space-5);
  background: var(--aurora-bg-card);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aurora-account-info-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aurora-account-info-label i { color: var(--aurora-teal); }
.aurora-account-info-value {
  font-size: var(--aurora-fs-body);
  font-weight: 600;
  color: var(--aurora-text-primary);
  word-break: break-word;
}
/* Emphase de l'info la plus critique du compte : abonnement bientot expire.
   "Temps restant" passe en ambre <=7j (warn) / pink si expire, au lieu d'une
   ligne grise noyee — utile surtout sur mobile ou l'info est sous le fold. */
.aurora-account-value-warn {
  color: var(--aurora-cream, #fef3c7);
  font-weight: 700;
}
.aurora-account-value-expired {
  color: #fbcfe8;
  font-weight: 700;
}
.aurora-account-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--aurora-radius-pill);
  font-size: 13px;
  width: max-content;
  font-weight: 600;
}
.aurora-account-badge-active   { background: rgba(20,184,166,0.12); color: var(--aurora-teal); }
.aurora-account-badge-free     { background: rgba(168,85,247,0.12); color: var(--aurora-violet); }
.aurora-account-badge-expired,
.aurora-account-badge-cancelled { background: rgba(236,72,153,0.12); color: var(--aurora-pink); }
.aurora-account-badge-pending  { background: rgba(254,243,199,0.10); color: var(--aurora-cream); }
.aurora-account-points {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--aurora-radius-pill);
  background: rgba(254,243,199,0.10);
  color: var(--aurora-cream);
  font-weight: 700;
  width: max-content;
}

.aurora-account-referral {
  text-align: center;
  padding: var(--aurora-space-6);
  background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(168,85,247,0.06));
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  margin-bottom: var(--aurora-space-4);
}
.aurora-account-referral-icon {
  font-size: 32px;
  color: var(--aurora-violet);
  margin-bottom: var(--aurora-space-3);
  display: block;
}
.aurora-account-referral p { margin: 0 0 var(--aurora-space-5); color: var(--aurora-text-secondary); }
.aurora-account-referral strong { color: var(--aurora-cream); }

.aurora-account-upgrade,
.aurora-account-cta-row {
  text-align: center;
  margin-top: var(--aurora-space-5);
}

.aurora-account-form {
  max-width: 480px;
  display: flex;
  flex-direction: column;
}

/* Password section — 2-col grid on desktop : form left, security tips right.
   Stacks on tablet / mobile so the form stays full-width. */
.aurora-account-password-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--aurora-space-10);
  align-items: start;
}
.aurora-account-password-grid .aurora-account-form {
  max-width: none;
}

.aurora-account-password-tips {
  background: linear-gradient(160deg, rgba(20, 184, 166, 0.06), rgba(168, 85, 247, 0.06));
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  padding: var(--aurora-space-6);
  position: relative;
  overflow: hidden;
}
.aurora-account-password-tips::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--aurora-space-5);
  right: var(--aurora-space-5);
  height: 1px;
  background: var(--aurora-gradient);
  opacity: 0.6;
}

.aurora-account-password-tips-head {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aurora-teal);
  margin-bottom: var(--aurora-space-4);
}
.aurora-account-password-tips-head .aurora-icon {
  color: var(--aurora-teal);
}

.aurora-account-password-tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aurora-space-3);
}
.aurora-account-password-tips-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--aurora-space-3);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  line-height: 1.55;
}
.aurora-account-password-tips-list li .aurora-icon {
  color: var(--aurora-teal);
  margin-top: 3px;
  flex-shrink: 0;
}

@media (max-width: 980px) {
  .aurora-account-password-grid {
    grid-template-columns: 1fr;
    gap: var(--aurora-space-6);
  }
}
.aurora-account-form .aurora-form-label {
  margin-top: var(--aurora-space-5);
  margin-bottom: var(--aurora-space-2);
}
.aurora-account-form .aurora-form-label:first-of-type { margin-top: 0; }
.aurora-form-hint {
  font-size: 12px;
  color: var(--aurora-text-muted);
  margin: 4px 0 0;
  font-family: 'JetBrains Mono', monospace;
}

.aurora-account-danger {
  border-color: rgba(236,72,153,0.25);
}
.aurora-account-danger-title { color: var(--aurora-pink); }
.aurora-account-danger-title i { color: var(--aurora-pink); }
.aurora-account-danger p { color: var(--aurora-text-secondary); margin: 0 0 var(--aurora-space-5); }
.aurora-account-danger-block {
  display: flex;
  align-items: center;
  gap: var(--aurora-space-3);
  padding: var(--aurora-space-4);
  background: rgba(236,72,153,0.08);
  border: 1px solid rgba(236,72,153,0.25);
  border-radius: var(--aurora-radius-md);
  color: var(--aurora-text-secondary);
}
.aurora-account-danger-block i { color: var(--aurora-pink); font-size: 18px; }

.aurora-form-submit-danger {
  background: rgba(236,72,153,0.12) !important;
  color: var(--aurora-pink) !important;
  border: 1px solid rgba(236,72,153,0.4) !important;
  box-shadow: none !important;
}
.aurora-form-submit-danger::after { display: none !important; }
.aurora-form-submit-danger:hover {
  background: rgba(236,72,153,0.2) !important;
  box-shadow: 0 6px 18px rgba(236,72,153,0.25) !important;
}

.aurora-form-submit-ghost {
  background: transparent !important;
  color: var(--aurora-violet) !important;
  border: 1px solid rgba(168,85,247,0.4) !important;
  box-shadow: none !important;
}
.aurora-form-submit-ghost::after { display: none !important; }
.aurora-form-submit-ghost:hover {
  background: rgba(168,85,247,0.1) !important;
  color: var(--aurora-violet) !important;
}

.aurora-account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--aurora-space-5);
}
@media (max-width: 640px) { .aurora-account-stats { grid-template-columns: 1fr; } }

.aurora-account-stat {
  padding: var(--aurora-space-6);
  background: var(--aurora-bg-card);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aurora-space-2);
  text-align: center;
}
.aurora-account-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: var(--aurora-space-2);
}
.aurora-tint-cream { background: rgba(254,243,199,0.15); color: var(--aurora-cream); }
.aurora-account-stat-value {
  font-family: 'Clash Display', sans-serif;
  font-size: 36px;
  font-weight: 800;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.aurora-account-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
}

.aurora-account-history { min-height: 60px; color: var(--aurora-text-secondary); }
.aurora-account-history .loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--aurora-space-3);
  padding: var(--aurora-space-6);
  color: var(--aurora-text-muted);
}
.aurora-account-history .no-history,
.aurora-account-history .error-message {
  text-align: center;
  padding: var(--aurora-space-4);
  border-radius: var(--aurora-radius-md);
  color: var(--aurora-text-secondary);
  background: var(--aurora-bg-card);
  border: 1px solid var(--aurora-border-subtle);
  margin: 0;
}
.aurora-account-history .error-message {
  background: rgba(236,72,153,0.08);
  border-color: rgba(236,72,153,0.25);
  color: var(--aurora-pink);
}
.aurora-account-history .payment-history-table {
  overflow-x: auto;
  border-radius: var(--aurora-radius-md);
  border: 1px solid var(--aurora-border-subtle);
}
.aurora-account-history .payment-history-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--aurora-fs-body-sm);
}
.aurora-account-history .payment-history-table th {
  background: var(--aurora-bg-card);
  padding: var(--aurora-space-3) var(--aurora-space-4);
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
  border-bottom: 1px solid var(--aurora-border-subtle);
}
.aurora-account-history .payment-history-table td {
  padding: var(--aurora-space-3) var(--aurora-space-4);
  color: var(--aurora-text-primary);
  border-bottom: 1px solid var(--aurora-border-subtle);
}
.aurora-account-history .payment-history-table tr:last-child td { border-bottom: none; }
.aurora-account-history .payment-history-table code.transaction-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--aurora-text-muted);
}

/* Modal de suppression — couches aurora light overrides */
#deleteAccountModal { backdrop-filter: blur(8px); }
#deleteAccountModal > div {
  background: var(--aurora-bg-elevated) !important;
  border-color: rgba(236,72,153,0.4) !important;
  border-radius: var(--aurora-radius-lg) !important;
}
#deleteAccountConfirmInput {
  font-family: 'JetBrains Mono', monospace !important;
  background: var(--aurora-bg-card) !important;
  color: var(--aurora-text-primary) !important;
  border-color: rgba(236,72,153,0.4) !important;
}

/* ============================================
   AURORA LIGHT THEME
   Toggle: body[data-theme="arc"]
   Activated by the sun/moon button in the topbar.
   Selector base is body[data-theme="arc"] because script.js / inline
   header.php toggle sets data-theme on document.body.
   ============================================ */
body[data-theme="arc"] {
  /* Backgrounds — inverted */
  --aurora-bg-base: #f5f7fb;
  --aurora-bg-elevated: #ffffff;
  --aurora-bg-card: #f1f4fa;
  --aurora-bg-card-hover: #e8edf6;

  /* Aurora signature — slightly desaturated for light bg */
  --aurora-teal: #0d9488;
  --aurora-violet: #7c3aed;
  --aurora-pink: #db2777;
  --aurora-cream: #b45309;

  /* Text — inverted */
  --aurora-text-primary: #0a0e27;
  --aurora-text-secondary: rgba(10, 14, 39, 0.75);
  --aurora-text-muted: rgba(10, 14, 39, 0.55);
  --aurora-text-faint: rgba(10, 14, 39, 0.35);

  /* Borders — darker hairlines on light */
  --aurora-border-subtle: rgba(10, 14, 39, 0.08);
  --aurora-border-aurora: rgba(13, 148, 136, 0.3);
  --aurora-border-hover: rgba(13, 148, 136, 0.5);

  /* Composite gradients — adjusted for light */
  --aurora-gradient: linear-gradient(135deg, #0d9488 0%, #7c3aed 50%, #db2777 100%);
  --aurora-gradient-soft: linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(124, 58, 237, 0.1), rgba(219, 39, 119, 0.1));
  --aurora-gradient-text: linear-gradient(135deg, #0a0e27 0%, #0d9488 30%, #7c3aed 65%, #db2777 100%);
}

/* Selection — readable on light */
body[data-theme="arc"] ::selection {
  background: rgba(13, 148, 136, 0.25);
  color: var(--aurora-text-primary);
}

/* Atmosphere: stars become invisible on white; bands need lower opacity */
body[data-theme="arc"] .aurora-band {
  opacity: 0.25;
  mix-blend-mode: multiply;
}

body[data-theme="arc"] .aurora-starfield {
  display: none;
}

/* Topbar — translucent white instead of translucent deep-space */
body[data-theme="arc"] .aurora-topbar {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(10, 14, 39, 0.08);
}

body[data-theme="arc"] .aurora-language-trigger,
body[data-theme="arc"] .aurora-toggle-track {
  background: rgba(10, 14, 39, 0.04) !important;
  color: var(--aurora-text-secondary) !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
}

body[data-theme="arc"] .aurora-nav-link {
  color: var(--aurora-text-secondary);
}

body[data-theme="arc"] .aurora-nav-link:hover {
  background: rgba(13, 148, 136, 0.08) !important;
  color: var(--aurora-text-primary) !important;
}

body[data-theme="arc"] .aurora-nav-link.is-active {
  background: rgba(13, 148, 136, 0.12) !important;
  color: var(--aurora-teal) !important;
}

body[data-theme="arc"] .aurora-nav-cta {
  background: var(--aurora-gradient) !important;
  color: #fff !important;
  border: none !important;
}

/* User menu trigger (avatar pill) — dark navy bg was invisible against the
   dark text the --aurora-text-secondary variable already flips to. */
body[data-theme="arc"] .aurora-nav-user {
  background: rgba(10, 14, 39, 0.06);
}

body[data-theme="arc"] .aurora-nav-more-item:hover {
  background: rgba(10, 14, 39, 0.05);
}

body[data-theme="arc"] .aurora-user-dropdown-danger:hover,
body[data-theme="arc"] .aurora-user-dropdown-danger:focus-visible {
  background: rgba(219, 39, 119, 0.1);
  color: var(--aurora-pink);
}

/* Language dropdown menu — light surface */
body[data-theme="arc"] .aurora-language-menu {
  background: #fff;
  border-color: rgba(13, 148, 136, 0.3);
  box-shadow: 0 18px 40px rgba(10, 14, 39, 0.12);
}

body[data-theme="arc"] .aurora-language-menu li:hover,
body[data-theme="arc"] .aurora-language-menu li:focus,
body[data-theme="arc"] .aurora-language-menu li.is-focused {
  background: rgba(13, 148, 136, 0.08);
  color: var(--aurora-text-primary);
}

body[data-theme="arc"] .aurora-language-menu li[aria-selected="true"] {
  background: rgba(13, 148, 136, 0.15);
  color: var(--aurora-teal);
}

body[data-theme="arc"] .aurora-language-menu li[aria-selected="true"].is-focused,
body[data-theme="arc"] .aurora-language-menu li[aria-selected="true"]:hover {
  background: rgba(13, 148, 136, 0.22);
}

/* Console — flip the hard-coded dark gradient to a light surface */
body[data-theme="arc"] .aurora-console {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 251, 0.96));
  border-color: rgba(10, 14, 39, 0.1);
  box-shadow:
    0 20px 60px rgba(10, 14, 39, 0.1),
    0 0 0 1px rgba(13, 148, 136, 0.05),
    0 -1px 0 rgba(124, 58, 237, 0.18) inset;
}

body[data-theme="arc"] .aurora-console-bar {
  background: rgba(10, 14, 39, 0.02);
  border-bottom-color: rgba(124, 58, 237, 0.12);
}

/* Console tabs — light surface */
body[data-theme="arc"] .aurora-tabs {
  background: rgba(10, 14, 39, 0.04);
  border-color: rgba(10, 14, 39, 0.08);
}

body[data-theme="arc"] .aurora-tab.active,
body[data-theme="arc"] .aurora-tab.is-active {
  background: rgba(13, 148, 136, 0.12);
  color: var(--aurora-teal);
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.25), 0 4px 16px rgba(13, 148, 136, 0.12);
}

/* Form inputs — white surface, dark text */
body[data-theme="arc"] .aurora-form-input,
body[data-theme="arc"] .aurora-form-textarea {
  background: #fff !important;
  border-color: rgba(10, 14, 39, 0.15) !important;
  color: var(--aurora-text-primary) !important;
}

body[data-theme="arc"] .aurora-form-input:focus,
body[data-theme="arc"] .aurora-form-textarea:focus {
  background: #fff !important;
  border-color: var(--aurora-teal) !important;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15), 0 0 28px rgba(13, 148, 136, 0.12) !important;
}

body[data-theme="arc"] .aurora-form-input::placeholder,
body[data-theme="arc"] .aurora-form-textarea::placeholder {
  color: rgba(10, 14, 39, 0.4) !important;
}

body[data-theme="arc"] .aurora-form-secondary {
  background: rgba(10, 14, 39, 0.04);
  border-color: rgba(10, 14, 39, 0.1);
  color: var(--aurora-text-secondary);
}

body[data-theme="arc"] .aurora-form-secondary:hover {
  background: rgba(13, 148, 136, 0.06);
  border-color: rgba(13, 148, 136, 0.3);
  color: var(--aurora-teal);
}

/* Auth card shadow — softer on light */
body[data-theme="arc"] .aurora-auth-card {
  box-shadow: 0 30px 80px rgba(10, 14, 39, 0.1);
}

body[data-theme="arc"] .aurora-auth-form .aurora-form-input:focus {
  background: #fff;
}

/* Feature cards — soft surface, soft hover shadow */
body[data-theme="arc"] .aurora-feature {
  background: var(--aurora-bg-elevated);
  border-color: var(--aurora-border-subtle);
}

body[data-theme="arc"] .aurora-feature:hover {
  box-shadow: 0 18px 40px rgba(10, 14, 39, 0.08);
}

body[data-theme="arc"] .aurora-feature-featured {
  background: linear-gradient(135deg, var(--aurora-bg-elevated), rgba(124, 58, 237, 0.06));
}

/* Tint chips — keep accent but lift opacity for legibility on white */
body[data-theme="arc"] .aurora-tint-teal   { background: rgba(13, 148, 136, 0.12); color: var(--aurora-teal); }
body[data-theme="arc"] .aurora-tint-violet { background: rgba(124, 58, 237, 0.12); color: var(--aurora-violet); }
body[data-theme="arc"] .aurora-tint-pink   { background: rgba(219, 39, 119, 0.12); color: var(--aurora-pink); }

/* Footer + marquee — soft borders, fade gradients keyed to bg-base var */
body[data-theme="arc"] .aurora-footer {
  background: transparent;
  border-top-color: rgba(10, 14, 39, 0.08);
}

body[data-theme="arc"] .aurora-marquee {
  border-top-color: rgba(10, 14, 39, 0.08);
  border-bottom-color: rgba(10, 14, 39, 0.08);
}

body[data-theme="arc"] .aurora-marquee::before {
  background: linear-gradient(90deg, var(--aurora-bg-base), transparent);
}

body[data-theme="arc"] .aurora-marquee::after {
  background: linear-gradient(270deg, var(--aurora-bg-base), transparent);
}

/* Hero eyebrow — keep teal accent but lighter background */
body[data-theme="arc"] .aurora-eyebrow {
  background: rgba(13, 148, 136, 0.08);
}

/* New pill theme toggle — light-theme adjustments */
body[data-theme="arc"] .aurora-theme-toggle-track {
  background: rgba(10, 14, 39, 0.04);
  border-color: rgba(10, 14, 39, 0.1);
}

body[data-theme="arc"] .aurora-theme-toggle-track:hover {
  border-color: var(--aurora-border-aurora);
}

/* ============================================
   PLAN CARDS — light theme visibility fix
   Legacy .plan-card / .subscription-plan-card / .features-container .plan-card
   use rgba(255,255,255,0.08-0.12) backgrounds + backdrop-filter that disappear
   on the cream Arc background. The legacy yellow-tinted hover box-shadow
   (0 15px 40px rgba(255,215,0,0.3)) creates a halo glow.
   This block neutralizes both in light mode.
   ============================================ */
body[data-theme="arc"] .aurora-plan-card,
body[data-theme="arc"] .plan-card,
body[data-theme="arc"] .subscription-plan-card,
body[data-theme="arc"] .features-container .plan-card {
  background: var(--aurora-bg-elevated) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
  box-shadow: 0 4px 16px rgba(10, 14, 39, 0.06) !important;
}

body[data-theme="arc"] .aurora-plan-card:hover,
body[data-theme="arc"] .plan-card:hover,
body[data-theme="arc"] .subscription-plan-card:hover,
body[data-theme="arc"] .features-container .plan-card:hover {
  background: var(--aurora-bg-elevated) !important;
  border-color: var(--aurora-border-aurora) !important;
  box-shadow: 0 18px 40px rgba(13, 148, 136, 0.12) !important;
}

body[data-theme="arc"] .aurora-plan-featured,
body[data-theme="arc"] .plan-card.featured,
body[data-theme="arc"] .plan-card.recurring,
body[data-theme="arc"] .subscription-plan-card.featured,
body[data-theme="arc"] .subscription-plan-card.recurring {
  background: linear-gradient(135deg, var(--aurora-bg-elevated), rgba(13, 148, 136, 0.04)) !important;
  border-color: rgba(13, 148, 136, 0.4) !important;
}

/* Kill any legacy yellow halo / pseudo-element decorations on plan cards in light mode */
body[data-theme="arc"] .plan-card,
body[data-theme="arc"] .aurora-plan-card,
body[data-theme="arc"] .subscription-plan-card {
  filter: none !important;
}
body[data-theme="arc"] .plan-card::before,
body[data-theme="arc"] .plan-card::after,
body[data-theme="arc"] .subscription-plan-card::before,
body[data-theme="arc"] .subscription-plan-card::after {
  display: none !important;
}

/* Ensure text inside plan cards is dark and readable in light mode */
body[data-theme="arc"] .aurora-plan-card,
body[data-theme="arc"] .plan-card,
body[data-theme="arc"] .subscription-plan-card,
body[data-theme="arc"] .aurora-plan-card *:not(.aurora-plan-amount):not(.aurora-plan-badge),
body[data-theme="arc"] .plan-card .plan-name,
body[data-theme="arc"] .plan-card .plan-description,
body[data-theme="arc"] .plan-card .plan-features li,
body[data-theme="arc"] .plan-card .plan-features .feature,
body[data-theme="arc"] .plan-card .price-period,
body[data-theme="arc"] .subscription-plan-card .plan-name,
body[data-theme="arc"] .subscription-plan-card .plan-description,
body[data-theme="arc"] .subscription-plan-card .plan-features .feature-item,
body[data-theme="arc"] .subscription-plan-card .plan-features li,
body[data-theme="arc"] .subscription-plan-card .price-period,
body[data-theme="arc"] .features-container .plan-card .plan-name,
body[data-theme="arc"] .features-container .plan-card .plan-description,
body[data-theme="arc"] .features-container .plan-card .plan-features .feature,
body[data-theme="arc"] .features-container .plan-card .price-period {
  color: var(--aurora-text-primary) !important;
}

/* Keep the price amount in the aurora gradient (already styled, but ensure it survives !important text-color above) */
body[data-theme="arc"] .plan-card .price-amount,
body[data-theme="arc"] .subscription-plan-card .price-amount,
body[data-theme="arc"] .features-container .plan-card .price-amount,
body[data-theme="arc"] .aurora-plan-amount {
  background: var(--aurora-gradient-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}


/* ============================================
   AURORA SVG ICONS
   ============================================ */

.aurora-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}

.aurora-icon-large { width: 24px; height: 24px; }
.aurora-icon-xl { width: 32px; height: 32px; }

/* In contexts where FA icons had specific tinting, make SVG icons inherit */
.aurora-feature-icon .aurora-icon { width: 20px; height: 20px; }
.aurora-feature-featured .aurora-feature-icon .aurora-icon { width: 24px; height: 24px; }
.aurora-extensions-browser-icon .aurora-icon { width: 32px; height: 32px; }
.aurora-account-stat-icon .aurora-icon { width: 18px; height: 18px; }

/* Spinning utility (matches Font Awesome fa-spin behavior for inline spinners) */
.aurora-icon.fa-spin,
.aurora-icon.spin {
  animation: aurora-icon-spin 1s linear infinite;
}
@keyframes aurora-icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================
   LIGHT THEME COHERENCE SWEEP
   Visibility fixes for body[data-theme="arc"]:
     1. Hero globe — warmer halo + bumped stroke contrast on light bg
     2. Plan duration pills (.plan-duration, .aurora-plan-duration, etc.)
     3. "Abonnement Mensuel" duration wrap fix (single line w/ separator)
     4. Legacy yellow (#ffd700) badges / halos neutralized to aurora teal
     5. White-on-white surfaces lifted to readable cards
   ============================================ */

/* --- 1. Hero globe — boost halo + stroke contrast on cream bg --- */
body[data-theme="arc"] .aurora-hero-globe {
  filter:
    drop-shadow(0 0 60px rgba(124, 58, 237, 0.45))
    drop-shadow(0 0 20px rgba(13, 148, 136, 0.2));
  opacity: 0.92;
}

/* Boost wireframe stroke opacity so latitude/longitude ellipses read on white.
   We can't change the gradient hexes (they come from the SVG defs) but we can
   raise stroke-opacity on every wireframe element. The gradient stops include
   teal/violet/pink which already contrast against cream — just need them denser. */
body[data-theme="arc"] .aurora-hero-globe > g > circle,
body[data-theme="arc"] .aurora-hero-globe > g > ellipse,
body[data-theme="arc"] .aurora-hero-globe > g > line {
  stroke-opacity: 1 !important;
  stroke-width: 1.6;
}
body[data-theme="arc"] .aurora-hero-globe > g[stroke] path {
  stroke-opacity: 1 !important;
}

/* --- 2. Plan duration pills — legible on light bg ---
   Targets: .plan-duration (legacy index.php), .aurora-plan-duration (plans.php),
   .subscription-plan-card .plan-duration, .features-container .plan-card .plan-duration.
   Original styles use color: #FFD700 (legacy) or rgba(255,255,255,0.7) (white) which
   vanish on cream. Force a tinted aurora pill. */
body[data-theme="arc"] .plan-duration,
body[data-theme="arc"] .aurora-plan-duration,
body[data-theme="arc"] .subscription-plan-card .plan-duration,
body[data-theme="arc"] .features-container .plan-card .plan-duration {
  background: rgba(13, 148, 136, 0.1) !important;
  color: var(--aurora-text-secondary) !important;
  border: 1px solid rgba(13, 148, 136, 0.22) !important;
  border-radius: var(--aurora-radius-pill) !important;
  padding: 4px 14px !important;
}

/* --- 3. "Abonnement Mensuel" / recurring plan: single-line duration with separator.
   Legacy .plan-duration uses flex-direction: column which stacks "30 jours" and
   "Renouvellement auto" vertically. Force them inline on a single readable row.
   The renewal text already starts with " - " in the markup so the rendered output
   becomes "30 jours - Renouvellement auto". */
body[data-theme="arc"] .plan-card .plan-duration {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 6px;
  min-height: 0 !important;
  font-size: 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body[data-theme="arc"] .plan-card .plan-duration .renewal-info {
  white-space: nowrap;
}

/* Also normalize the aurora-plan-duration block on plans.php (the recurring one
   has both "X jours" and "Renouvellement auto" spans). Keep them inline. */
body[data-theme="arc"] .aurora-plan-duration .aurora-plan-renewal {
  white-space: nowrap;
}

/* --- 4. Legacy yellow (#ffd700) accents — re-tinted to aurora cream/teal ---
   These currently glow visibly even on light bg (since #ffd700 is a saturated
   color, not transparent white). User asked to kill the yellow halo aesthetic. */
body[data-theme="arc"] .usage-status.premium {
  background: rgba(180, 83, 9, 0.1) !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
}
body[data-theme="arc"] .usage-status.premium .status-icon,
body[data-theme="arc"] .points-badge-inline i,
body[data-theme="arc"] .points-badge-inline strong,
body[data-theme="arc"] .points-info strong,
body[data-theme="arc"] .points-badge i,
body[data-theme="arc"] .subscription-plan-card .plan-features .bonus-feature i,
body[data-theme="arc"] .plan-card .feature.bonus-feature i {
  color: var(--aurora-cream) !important;
}
body[data-theme="arc"] .subscription-time-remaining,
body[data-theme="arc"] .points-badge-inline,
body[data-theme="arc"] .usage-status.free .points-badge-inline,
body[data-theme="arc"] .points-info,
body[data-theme="arc"] .points-badge {
  background: rgba(180, 83, 9, 0.08) !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
  color: var(--aurora-text-primary) !important;
}
body[data-theme="arc"] .points-plan,
body[data-theme="arc"] .subscription-plan-card.plan-points,
body[data-theme="arc"] .plan-card.plan-points {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.06), rgba(13, 148, 136, 0.04)) !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
}
body[data-theme="arc"] .subscription-plan-card.plan-points:hover,
body[data-theme="arc"] .plan-card.plan-points:hover {
  border-color: rgba(13, 148, 136, 0.4) !important;
  box-shadow: 0 18px 40px rgba(13, 148, 136, 0.1) !important;
}
/* Yellow hover halo on plain plan cards (.features-container .plan-card:hover)
   becomes a soft aurora teal glow. */
body[data-theme="arc"] .features-container .plan-card:hover {
  background: var(--aurora-bg-elevated) !important;
  box-shadow: 0 18px 40px rgba(13, 148, 136, 0.1) !important;
}

/* --- 5. White-translucent surfaces — lift to readable cards in light mode ---
   These rgba(255,255,255,0.x) backgrounds become invisible on white. */
body[data-theme="arc"] .features-container .plan-card,
body[data-theme="arc"] .subscription-plan-card {
  background: var(--aurora-bg-elevated) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
}
body[data-theme="arc"] .features-container .plan-card .plan-name,
body[data-theme="arc"] .subscription-plan-card .plan-name {
  color: var(--aurora-text-primary) !important;
}
body[data-theme="arc"] .status-icon {
  background: rgba(10, 14, 39, 0.04) !important;
  color: var(--aurora-text-secondary) !important;
}
body[data-theme="arc"] .subscription-time-remaining {
  color: var(--aurora-text-primary) !important;
}
body[data-theme="arc"] .subscription-extension-note {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
  color: var(--aurora-text-primary) !important;
}
body[data-theme="arc"] .subscription-extension-note i {
  color: #2563eb !important;
}

/* ============================================
   TOAST NOTIFICATIONS (aurora skin over legacy .notification-container)
   ============================================ */

.notification-container {
  background: var(--aurora-bg-elevated) !important;
  border: 1px solid var(--aurora-border-subtle) !important;
  border-radius: var(--aurora-radius-md) !important;
  padding: 14px 18px !important;
  box-shadow: 0 18px 40px rgba(5, 6, 22, 0.5) !important;
  color: var(--aurora-text-primary) !important;
  font-family: 'Switzer', sans-serif !important;
  font-size: var(--aurora-fs-body-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: 420px !important;
  min-width: 280px !important;
  position: fixed !important;
  top: 84px !important;
  right: 24px !important;
  z-index: 9999 !important;
  transform: translateX(120%) !important;
  transition: transform var(--aurora-duration-base) var(--aurora-ease-spring) !important;
}

.notification-container.show {
  transform: translateX(0) !important;
}

.notification-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--aurora-gradient);
  border-radius: var(--aurora-radius-md) var(--aurora-radius-md) 0 0;
}

/* Per-type accent — colored left border indicator */
.notification-container.success {
  background: var(--aurora-bg-elevated) !important;
  border-left: 3px solid var(--aurora-teal) !important;
}
.notification-container.success::before {
  background: var(--aurora-teal);
}
.notification-container.success .notification-icon {
  color: var(--aurora-teal) !important;
  background: rgba(20, 184, 166, 0.15) !important;
}

.notification-container.error {
  background: var(--aurora-bg-elevated) !important;
  border-left: 3px solid var(--aurora-pink) !important;
}
.notification-container.error::before {
  background: var(--aurora-pink);
}
.notification-container.error .notification-icon {
  color: var(--aurora-pink) !important;
  background: rgba(236, 72, 153, 0.15) !important;
}

.notification-container.warning {
  background: var(--aurora-bg-elevated) !important;
  border-left: 3px solid var(--aurora-cream) !important;
}
.notification-container.warning::before {
  background: var(--aurora-cream);
}
.notification-container.warning .notification-icon {
  color: var(--aurora-cream) !important;
  background: rgba(254, 243, 199, 0.15) !important;
}

.notification-container.info {
  background: var(--aurora-bg-elevated) !important;
  border-left: 3px solid var(--aurora-violet) !important;
}
.notification-container.info::before {
  background: var(--aurora-violet);
}
.notification-container.info .notification-icon {
  color: var(--aurora-violet) !important;
  background: rgba(168, 85, 247, 0.15) !important;
}

.notification-container .notification-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--aurora-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 14px !important;
}

.notification-container .notification-message {
  flex: 1 !important;
  color: var(--aurora-text-primary) !important;
}

.notification-container .notification-message p,
.notification-container .notification-message strong,
.notification-container .notification-message span {
  color: inherit !important;
  margin: 0 !important;
  font-family: 'Switzer', sans-serif !important;
  font-size: var(--aurora-fs-body-sm) !important;
}

.notification-container .notification-close {
  background: transparent !important;
  border: none !important;
  color: var(--aurora-text-muted) !important;
  cursor: pointer !important;
  padding: 4px !important;
  font-size: 14px !important;
  transition: color var(--aurora-duration-fast) !important;
}
.notification-container .notification-close:hover {
  color: var(--aurora-text-primary) !important;
}

/* Light theme adjustments */
body[data-theme="arc"] .notification-container {
  background: #ffffff !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
  box-shadow: 0 18px 40px rgba(10, 14, 39, 0.15) !important;
}
body[data-theme="arc"] .notification-container .notification-message {
  color: var(--aurora-text-primary) !important;
}
body[data-theme="arc"] .notification-container.success .notification-icon { background: rgba(13, 148, 136, 0.12) !important; color: #0d9488 !important; }
body[data-theme="arc"] .notification-container.error .notification-icon { background: rgba(219, 39, 119, 0.12) !important; color: #db2777 !important; }
body[data-theme="arc"] .notification-container.warning .notification-icon { background: rgba(180, 83, 9, 0.12) !important; color: #b45309 !important; }
body[data-theme="arc"] .notification-container.info .notification-icon { background: rgba(124, 58, 237, 0.12) !important; color: #7c3aed !important; }

/* Mobile responsive */
@media (max-width: 640px) {
  .notification-container {
    top: auto !important;
    bottom: 20px !important;
    right: 16px !important;
    left: 16px !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* ============================================
   REFERRAL PAGE
   ============================================ */

.aurora-referral-link-row {
  display: flex;
  gap: var(--aurora-space-3);
  align-items: stretch;
  margin-bottom: var(--aurora-space-3);
}

.aurora-referral-link-input {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-body-sm);
  background: var(--aurora-bg-card) !important;
  color: var(--aurora-text-secondary) !important;
}

.aurora-account-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--aurora-radius-md);
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: var(--aurora-text-secondary);
  font-size: var(--aurora-fs-body-sm);
  margin: 0;
}
.aurora-account-hint .aurora-icon {
  color: var(--aurora-violet);
  flex-shrink: 0;
}

.aurora-referral-list {
  display: flex;
  flex-direction: column;
  gap: var(--aurora-space-2);
}

.aurora-referral-list-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--aurora-space-4);
  align-items: center;
  padding: var(--aurora-space-4);
  background: var(--aurora-bg-card);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
}

.aurora-referral-list-name {
  font-weight: 600;
  color: var(--aurora-text-primary);
}

.aurora-referral-list-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--aurora-text-muted);
  letter-spacing: 0.08em;
}

.aurora-referral-list-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--aurora-radius-pill);
  white-space: nowrap;
}
.aurora-referral-list-status-pending {
  background: rgba(254, 243, 199, 0.1);
  color: var(--aurora-cream);
  border: 1px solid rgba(254, 243, 199, 0.25);
}
.aurora-referral-list-status-converted {
  background: rgba(168, 85, 247, 0.1);
  color: var(--aurora-violet);
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.aurora-referral-list-status-rewarded {
  background: rgba(20, 184, 166, 0.1);
  color: var(--aurora-teal);
  border: 1px solid rgba(20, 184, 166, 0.25);
}
.aurora-referral-list-status-revoked,
.aurora-referral-list-status-rejected {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.25);
}

/* Share Rewards (section "Partagez, gagnez des points") */
.aurora-share-subtitle {
  font-size: var(--aurora-fs-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--aurora-text-muted);
  margin: var(--aurora-space-5) 0 var(--aurora-space-3);
}

.aurora-share-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-body-sm);
  font-weight: 400;
}

@media (max-width: 640px) {
  .aurora-referral-link-row { flex-direction: column; }
  .aurora-referral-list-item { grid-template-columns: 1fr; gap: var(--aurora-space-2); }
}

/* ============================================
   DEBRID RESULT BLOCKS (success / error)
   Rendered by assets/script.js -> displayResults()
   into #responseOutput inside the aurora console.
   Real classes (from script.js):
     .result-item / .result-item.error / .result-item.success
     .result-header, .result-title, .success-icon, .error-icon
     .result-details, .detail-row, .detail-label, .detail-value, .error-text
     .download-link-container, .download-link
     .action-buttons, .action-btn, .download-btn, .play-btn, .vlc-btn, .cast-btn
     .results-header, .results-icon, .results-title, .results-list
     .result-number, .result-content, .result-filename, .original-link
   ============================================ */

/* Base result item — success default (no modifier) + success modifier */
.aurora-content .result-item {
  background: var(--aurora-bg-card) !important;
  border: 1px solid rgba(20, 184, 166, 0.3) !important;
  border-left: 3px solid var(--aurora-teal) !important;
  border-radius: var(--aurora-radius-md) !important;
  padding: var(--aurora-space-5) !important;
  color: var(--aurora-text-primary) !important;
  margin: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.aurora-content .result-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--aurora-gradient);
  opacity: 0.5;
  pointer-events: none;
}

/* Error variant — pink-leaning */
.aurora-content .result-item.error {
  border: 1px solid rgba(236, 72, 153, 0.3) !important;
  border-left: 3px solid var(--aurora-pink) !important;
}
.aurora-content .result-item.error::before {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
}

/* Header (icon + title row) */
.aurora-content .result-item .result-header {
  display: flex !important;
  align-items: center !important;
  gap: var(--aurora-space-3) !important;
  margin: 0 0 var(--aurora-space-4) 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.aurora-content .result-item .result-title {
  font-family: 'Switzer', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: var(--aurora-text-primary) !important;
  letter-spacing: -0.01em !important;
}

/* Icons (emoji-based ✅ ❌) — wrap in a chip */
.aurora-content .result-item .success-icon,
.aurora-content .result-item .error-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--aurora-radius-md) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.aurora-content .result-item .success-icon {
  background: rgba(20, 184, 166, 0.15) !important;
  color: var(--aurora-teal) !important;
  border: 1px solid rgba(20, 184, 166, 0.3) !important;
}
.aurora-content .result-item .error-icon {
  background: rgba(236, 72, 153, 0.15) !important;
  color: var(--aurora-pink) !important;
  border: 1px solid rgba(236, 72, 153, 0.3) !important;
}

/* Detail rows */
.aurora-content .result-item .result-details {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--aurora-space-3) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.aurora-content .result-item .detail-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

.aurora-content .result-item .detail-label {
  color: var(--aurora-text-secondary) !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 500 !important;
  font-size: var(--aurora-fs-body-sm) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.aurora-content .result-item .detail-value {
  color: var(--aurora-text-primary) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--aurora-fs-body-sm) !important;
  word-break: break-all !important;
  background: transparent !important;
  padding: 0 !important;
}

.aurora-content .result-item .error-text {
  color: var(--aurora-pink) !important;
  font-weight: 500 !important;
  font-family: 'Switzer', sans-serif !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Long technical strings (URLs) keep mono + break-all; readable error
   messages use Switzer for natural reading. */
.aurora-content .result-item .detail-row .detail-value:not(.error-text) {
  word-break: break-all !important;
}

/* SINGLE result blocks (header on top, details below) — stack vertical.
   Legacy styles.css:1828 forces .result-item.success/error to display:flex
   row, which side-by-sides the header and details and squeezes the title
   into a too-narrow column (wraps word-by-word). Override only when the
   markup is a single-result (no .result-number child). */
.aurora-content .result-item:not(:has(> .result-number)) {
  display: block !important;
  gap: 0 !important;
}

/* MULTI result blocks (number + content side by side) — keep row layout. */
.aurora-content .result-item:has(> .result-number) {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--aurora-space-3) !important;
  align-items: flex-start !important;
}

/* Force the header to a single readable row even if the legacy stylesheet
   tries to constrain it to a narrow column. The icon stays compact, the
   title can flow on as many words as it needs. */
.aurora-content .result-item .result-header {
  flex-wrap: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
}
.aurora-content .result-item .result-title {
  white-space: normal !important;
  word-break: normal !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Kill the legacy scroll on the response output container.
   styles.css:610 sets `max-height: 430px; overflow-y: auto;` which leaves a
   permanent scrollbar even when the content fits. */
.aurora-content #responseOutput,
.aurora-content .response-output,
#responseOutput,
.response-output {
  max-height: none !important;
  overflow: visible !important;
}

/* The big download-link box (clickable URL pill-card) */
.aurora-content .result-item .download-link-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.aurora-content .result-item .download-link {
  display: block !important;
  background: var(--aurora-bg-elevated) !important;
  border: 1px solid var(--aurora-border-subtle) !important;
  border-radius: var(--aurora-radius-sm) !important;
  padding: var(--aurora-space-3) var(--aurora-space-4) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--aurora-fs-body-sm) !important;
  color: var(--aurora-teal) !important;
  word-break: break-all !important;
  text-decoration: none !important;
  transition: border-color var(--aurora-duration-fast), background var(--aurora-duration-fast) !important;
}

.aurora-content .result-item .download-link:hover {
  background: var(--aurora-bg-card-hover) !important;
  border-color: var(--aurora-border-aurora) !important;
  color: var(--aurora-teal) !important;
  text-decoration: none !important;
}

/* Action buttons row */
.aurora-content .result-item .action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--aurora-space-3) !important;
  margin: var(--aurora-space-4) 0 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.aurora-content .result-item .action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: var(--aurora-radius-pill) !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 500 !important;
  font-size: var(--aurora-fs-body-sm) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1px solid var(--aurora-border-aurora) !important;
  background: rgba(20, 184, 166, 0.1) !important;
  color: var(--aurora-teal) !important;
  transition: transform var(--aurora-duration-fast), background var(--aurora-duration-fast), border-color var(--aurora-duration-fast), box-shadow var(--aurora-duration-fast) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.aurora-content .result-item .action-btn:hover {
  transform: translateY(-1px) !important;
  background: rgba(20, 184, 166, 0.18) !important;
  border-color: var(--aurora-teal) !important;
}

.aurora-content .result-item .action-btn i {
  color: inherit !important;
  font-size: 14px !important;
}

/* SVG aurora icons rendered by script.js wdIcon(). They live inside the
   chips/labels/buttons defined above, so they must inherit the parent
   color and never override the chip-internal centering. */
.aurora-content .result-item .action-btn .aurora-icon,
.aurora-content .result-item .success-icon .aurora-icon,
.aurora-content .result-item .error-icon .aurora-icon,
.aurora-content .results-icon .aurora-icon {
  color: inherit !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Detail labels carry an aurora-icon next to their text — align it inline. */
.aurora-content .result-item .detail-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.aurora-content .result-item .detail-label .aurora-icon {
  color: var(--aurora-violet) !important;
  flex-shrink: 0 !important;
}
.aurora-content .result-item.error .detail-label .aurora-icon {
  color: var(--aurora-pink) !important;
}

/* Results header chip — make the SVG glow violet like the legacy 📊. */
.aurora-content .results-icon {
  color: var(--aurora-violet) !important;
}

/* ============================================
   TORRENT RENDER — aurora SVG icon overrides
   The legacy styles.css block (.torrent-results, .torrent-header, etc.)
   still owns the layout / backgrounds; we only normalise the dynamic
   SVG icons that script.js now injects via wdIcon().
   ============================================ */
.torrent-header h3 .aurora-icon,
.torrent-info span .aurora-icon,
.torrent-file-item .file-info > .aurora-icon,
.torrent-status-header .aurora-icon,
.torrent-history-title .aurora-icon {
  color: var(--aurora-violet) !important;
  vertical-align: -3px !important;
  margin-right: 4px !important;
  flex-shrink: 0 !important;
}

.torrent-file-item .btn-download .aurora-icon,
.torrent-file-item .btn-copy-link .aurora-icon,
.torrent-file-item .btn-play .aurora-icon,
.torrent-history-actions .btn-history-view .aurora-icon,
.torrent-history-actions .btn-history-resume .aurora-icon,
.torrent-history-actions .btn-history-delete .aurora-icon {
  color: inherit !important;
  vertical-align: -3px !important;
  flex-shrink: 0 !important;
}

/* Status icons inside the history list keep their semantic color via the
   inline style on .torrent-status-icon; the SVG must inherit it. */
.torrent-history-item .torrent-status-icon {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 6px !important;
}
.torrent-history-item .torrent-status-icon .aurora-icon {
  color: inherit !important;
}

/* ============================================
   MINI SPINNER — replaces fa-spinner fa-spin
   in dynamically-built buttons (Stripe purchase, etc.). Pure CSS so it
   works regardless of font-awesome being present or not.
   ============================================ */
.wd-mini-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: wd-mini-spinner-rotate 0.8s linear infinite;
  vertical-align: -3px;
  margin-right: 6px;
  opacity: 0.85;
}
@keyframes wd-mini-spinner-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wd-mini-spinner { animation-duration: 2s; }
}

/* ============================================
   VIDEO.JS CAST BUTTON — host the aurora SVG inside the player toolbar
   ============================================ */
.vjs-cast-button .vjs-icon-placeholder { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.vjs-cast-button .aurora-icon { color: #fff !important; }
.vjs-cast-button:hover .aurora-icon { color: var(--aurora-teal, #14b8a6) !important; }

/* Primary download button — solid teal */
.aurora-content .result-item .action-btn.download-btn {
  background: var(--aurora-teal) !important;
  color: #050616 !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

.aurora-content .result-item .action-btn.download-btn:hover {
  background: #18cdb8 !important;
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.35) !important;
  transform: translateY(-1px) !important;
}

.aurora-content .result-item .action-btn.download-btn i {
  color: #050616 !important;
}

/* Play / VLC / Cast buttons keep the outlined aurora-teal look (inherits .action-btn) */
.aurora-content .result-item .action-btn.play-btn,
.aurora-content .result-item .action-btn.vlc-btn,
.aurora-content .result-item .action-btn.cast-btn {
  background: rgba(20, 184, 166, 0.1) !important;
  color: var(--aurora-teal) !important;
  border-color: var(--aurora-border-aurora) !important;
}

.aurora-content .result-item .action-btn.cast-btn-disabled,
.aurora-content .result-item .action-btn.cast-btn-disabled:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--aurora-text-muted) !important;
  border-color: var(--aurora-border-subtle) !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* ============================================
   MULTI-RESULT LAYOUT (results > 1)
   ============================================ */
.aurora-content .results-header {
  display: flex !important;
  align-items: center !important;
  gap: var(--aurora-space-3) !important;
  padding: var(--aurora-space-4) var(--aurora-space-5) !important;
  margin: 0 0 var(--aurora-space-3) 0 !important;
  background: var(--aurora-bg-card) !important;
  border: 1px solid var(--aurora-border-subtle) !important;
  border-radius: var(--aurora-radius-md) !important;
  color: var(--aurora-text-primary) !important;
}

.aurora-content .results-icon {
  display: inline-flex !important;
  width: 32px !important;
  height: 32px !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(168, 85, 247, 0.15) !important;
  border-radius: var(--aurora-radius-sm) !important;
  font-size: 16px !important;
}

.aurora-content .results-title {
  font-family: 'Switzer', sans-serif !important;
  font-weight: 600 !important;
  font-size: var(--aurora-fs-body-sm) !important;
  color: var(--aurora-text-primary) !important;
  letter-spacing: 0 !important;
}

.aurora-content .results-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--aurora-space-3) !important;
}

.aurora-content .result-item.success,
.aurora-content .result-item.error {
  display: flex !important;
  gap: var(--aurora-space-3) !important;
  align-items: flex-start !important;
}

.aurora-content .result-item .result-number {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--aurora-fs-body-sm) !important;
  color: var(--aurora-text-muted) !important;
  min-width: 24px !important;
  padding-top: 2px !important;
  background: transparent !important;
}

.aurora-content .result-item .result-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--aurora-space-3) !important;
  min-width: 0 !important;
}

.aurora-content .result-item .result-filename {
  display: flex !important;
  align-items: center !important;
  gap: var(--aurora-space-2) !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 500 !important;
  color: var(--aurora-text-primary) !important;
  word-break: break-all !important;
}

.aurora-content .result-item .original-link {
  display: flex !important;
  align-items: center !important;
  gap: var(--aurora-space-2) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--aurora-fs-body-sm) !important;
  color: var(--aurora-text-secondary) !important;
  word-break: break-all !important;
}

/* ============================================
   LIGHT THEME (arc) ADJUSTMENTS
   ============================================ */
body[data-theme="arc"] .aurora-content .result-item {
  background: #ffffff !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
  border-left-color: var(--aurora-teal) !important;
  color: var(--aurora-text-primary) !important;
  box-shadow: 0 1px 3px rgba(10, 14, 39, 0.04) !important;
}

body[data-theme="arc"] .aurora-content .result-item.error {
  border-color: rgba(236, 72, 153, 0.35) !important;
  border-left-color: var(--aurora-pink) !important;
}

body[data-theme="arc"] .aurora-content .result-item .result-title,
body[data-theme="arc"] .aurora-content .result-item .detail-value,
body[data-theme="arc"] .aurora-content .result-item .result-filename {
  color: var(--aurora-text-primary) !important;
}

body[data-theme="arc"] .aurora-content .result-item .detail-label,
body[data-theme="arc"] .aurora-content .result-item .original-link,
body[data-theme="arc"] .aurora-content .result-item .result-number {
  color: var(--aurora-text-secondary) !important;
}

body[data-theme="arc"] .aurora-content .result-item .download-link {
  background: #f7f8fb !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
  color: #0d8576 !important;
}

body[data-theme="arc"] .aurora-content .result-item .download-link:hover {
  background: #eef0f4 !important;
  border-color: var(--aurora-teal) !important;
}

body[data-theme="arc"] .aurora-content .result-item .action-btn {
  background: rgba(20, 184, 166, 0.08) !important;
  color: #0d8576 !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
}

body[data-theme="arc"] .aurora-content .result-item .action-btn:hover {
  background: rgba(20, 184, 166, 0.15) !important;
  border-color: var(--aurora-teal) !important;
}

body[data-theme="arc"] .aurora-content .result-item .action-btn.download-btn {
  background: var(--aurora-teal) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

body[data-theme="arc"] .aurora-content .result-item .action-btn.download-btn:hover {
  background: #0d9488 !important;
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.3) !important;
}

body[data-theme="arc"] .aurora-content .result-item .action-btn.download-btn i {
  color: #ffffff !important;
}

body[data-theme="arc"] .aurora-content .results-header {
  background: #ffffff !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
}

body[data-theme="arc"] .aurora-content .result-item .success-icon {
  background: rgba(20, 184, 166, 0.12) !important;
  color: #0d8576 !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
}

body[data-theme="arc"] .aurora-content .result-item .error-icon {
  background: rgba(236, 72, 153, 0.12) !important;
  color: #be185d !important;
  border-color: rgba(236, 72, 153, 0.35) !important;
}

body[data-theme="arc"] .aurora-content .result-item .error-text {
  color: #be185d !important;
}

/* ============================================
   RESPONSIVE / MOBILE LAYER (Aurora · 2026-05)
   Centralized < 640 / < 480 cascade — burger nav,
   hero stack, touch targets, form polish.
   ============================================ */

/* ---------- Burger button (hidden ≥ 640px) ---------- */
.aurora-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: rgba(15, 20, 40, 0.7);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  color: var(--aurora-text-primary);
  cursor: pointer;
  transition: border-color var(--aurora-duration-fast), background var(--aurora-duration-fast);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 110;
}
.aurora-burger:hover,
.aurora-burger:focus-visible {
  border-color: var(--aurora-border-aurora);
  outline: none;
}
.aurora-burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--aurora-text-primary);
  transition: transform var(--aurora-duration-base) var(--aurora-ease-out),
              opacity var(--aurora-duration-fast),
              width var(--aurora-duration-base);
  transform-origin: center;
}
.aurora-burger[aria-expanded="true"] .aurora-burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--aurora-teal);
}
.aurora-burger[aria-expanded="true"] .aurora-burger-bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.aurora-burger[aria-expanded="true"] .aurora-burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--aurora-teal);
}

/* Light theme — bars darker on cream background */
body[data-theme="arc"] .aurora-burger-bar {
  background: #0a0e27;
}

/* ---------- Drawer overlay ---------- */
.aurora-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 22, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--aurora-duration-base) var(--aurora-ease-out);
}
.aurora-nav-overlay[hidden] {
  display: none;
}
.aurora-nav-overlay.is-visible {
  opacity: 1;
}

/* When drawer is open, lock body scroll */
body.aurora-nav-open {
  overflow: hidden;
}

/* ---------- ≤1279px — burger surfaces, drawer takes over ----------
   La nav est chargée (6 liens + contrôles + 3 CTA déconnecté) : en dessous de
   1280px elle ne rentre plus, même avec « Plus » + compaction. On bascule donc
   sur le tiroir burger (tous les libellés préservés, pas d'icônes cryptiques).
   ≥1280px : nav inline/« Plus ». */
@media (max-width: 1279px) {
  /* The fixed nav drawer needs to escape the topbar's containing block.
     `backdrop-filter` on .aurora-topbar would otherwise pin position:fixed
     descendants to the topbar (~64px tall). The 85%-opaque background
     already reads as a frosted bar — dropping the blur here is invisible. */
  .aurora-topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .aurora-burger {
    display: inline-flex;
  }

  /* Nav becomes a slide-in drawer from the right */
  .aurora-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--aurora-space-6);
    padding: calc(var(--aurora-topbar-height) + var(--aurora-space-4)) var(--aurora-space-5) var(--aurora-space-8);
    background: var(--aurora-bg-elevated);
    border-left: 1px solid var(--aurora-border-aurora);
    box-shadow: -20px 0 60px rgba(5, 6, 22, 0.7);
    transform: translateX(100%);
    transition: transform var(--aurora-duration-base) var(--aurora-ease-out);
    z-index: 100;
    overflow-y: auto;
  }
  .aurora-nav.is-open {
    transform: translateX(0);
  }

  /* Restore label text inside drawer (was hidden by 980px rule) */
  .aurora-nav-link span,
  .aurora-nav-cta span {
    display: inline !important;
  }

  /* Tiroir : on réaffiche les liens secondaires en liste et on masque le
     menu « Plus » (regroupement inutile dans le tiroir vertical). */
  .aurora-nav-links .aurora-nav-collapsible { display: block; }
  .aurora-nav-more,
  .aurora-nav-links.is-guest .aurora-nav-more { display: none; }

  /* Controls row at top of drawer — language + theme toggle stay side-by-side */
  .aurora-nav-controls {
    order: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--aurora-space-3);
    padding-top: var(--aurora-space-5);
    margin-top: auto;
    border-top: 1px solid var(--aurora-border-subtle);
  }
  .aurora-language {
    display: inline-flex; /* override the 640px hide rule above (line 608) */
    flex: 1;
  }
  .aurora-language-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 10px 14px;
  }
  .aurora-language-menu {
    right: auto;
    left: 0;
    width: 100%;
    bottom: calc(100% + 6px);
    top: auto;
    max-height: 60vh;
  }

  /* Nav links — stack, full width, beefy tap area */
  .aurora-nav-links {
    order: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .aurora-nav-links li { width: 100%; }
  .aurora-nav-link,
  .aurora-nav-cta {
    width: 100%;
    justify-content: flex-start;
    padding: 14px 16px;
    font-size: 15px;
    min-height: 48px;
    border-radius: var(--aurora-radius-md);
  }
  .aurora-nav-cta {
    justify-content: center;
    margin-top: var(--aurora-space-2);
  }

  /* Swap: hide desktop dropdown trigger, surface mobile-only items */
  .aurora-nav-desktop-only { display: none !important; }
  .aurora-nav-mobile-only { display: block; }

  .aurora-nav-divider {
    height: 1px;
    background: var(--aurora-border-subtle);
    margin: var(--aurora-space-3) 0;
    list-style: none;
  }

  /* Logout link — subtle danger tint */
  .aurora-nav-logout {
    color: var(--aurora-pink) !important;
  }
  .aurora-nav-logout .aurora-icon {
    color: var(--aurora-pink);
  }
  .aurora-nav-logout:hover {
    background: rgba(236, 72, 153, 0.1) !important;
    color: #f9a8d4 !important;
  }
}

/* ---------- Hero — proper vertical stack on tablet+phone ---------- */
@media (max-width: 768px) {
  .aurora-hero {
    padding: var(--aurora-space-8) var(--aurora-space-5) var(--aurora-space-8);
    align-items: center;
    text-align: center;
  }
  .aurora-hero-inner {
    max-width: 100%;
    margin: 0 auto;
  }
  .aurora-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .aurora-eyebrow {
    margin-bottom: var(--aurora-space-4);
  }
}

/* ---------- 480px cascade — small phones ---------- */
@media (max-width: 480px) {
  /* Hero globe — keep visible but smaller, no overflow */
  .aurora-hero-globe {
    width: 220px;
    height: 220px;
    margin: 0 auto var(--aurora-space-4);
    opacity: 0.5;
  }

  /* Hero typography compaction */
  .aurora-hero {
    padding: var(--aurora-space-6) var(--aurora-space-4) var(--aurora-space-8);
  }
  .aurora-hero-title  { font-size: clamp(40px, 13vw, 56px); }
  .aurora-hero-tagline { font-size: clamp(20px, 6.5vw, 26px); }
  .aurora-hero-lead { font-size: 15px; line-height: 1.45; margin-bottom: var(--aurora-space-6); }
  .aurora-eyebrow {
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: 0.14em;
  }

  /* Topbar — tighter padding, drop wordmark dot kerning */
  .aurora-topbar-inner {
    padding: 8px var(--aurora-space-4);
    gap: var(--aurora-space-3);
  }
  .aurora-wordmark { font-size: 17px; }
  .aurora-brand .aurora-globe-mark { width: 30px; height: 30px; }

  /* Theme toggle — compact width */
  .aurora-theme-toggle-track { width: 54px; height: 28px; padding: 0 6px; }
  .aurora-theme-toggle-thumb { width: 18px; height: 18px; left: calc(100% - 18px - 5px); }
  .aurora-theme-toggle-input:checked ~ .aurora-theme-toggle-track .aurora-theme-toggle-thumb { left: 5px; }

  /* Console — even tighter padding */
  .aurora-console { padding: 8px 6px 14px; border-radius: 18px; }
  .aurora-console::before { border-radius: 18px; }
  .aurora-console-bar { padding: 4px 8px 10px; gap: 8px; }
  .aurora-console-title { font-size: 10px; letter-spacing: 0.14em; }
  .aurora-console-status { font-size: 9.5px; letter-spacing: 0.12em; }
  .aurora-console-body { padding: 0 4px; }
  .aurora-tabs { gap: 4px; padding: 4px; }
  .aurora-tab { padding: 9px 10px; font-size: 12.5px; }

  /* Form — bigger labels + inputs */
  .aurora-form-label {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .aurora-form-input,
  .aurora-form textarea,
  textarea.aurora-form-input {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 12px 14px;
  }
  .aurora-form-submit {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    font-size: 15px;
    min-height: 48px;
  }
  .aurora-form-meta { font-size: 9.5px; gap: 6px; flex-wrap: wrap; }

  /* Plans — slim cards on tiny phones */
  .aurora-plan-card {
    padding: var(--aurora-space-6) var(--aurora-space-5) var(--aurora-space-5);
  }
  .aurora-plan-amount { font-size: 36px; }
  .aurora-plan-name { font-size: 18px; }

  /* Features grid — tighter padding */
  .aurora-features {
    padding: 0 var(--aurora-space-4);
    margin-top: var(--aurora-space-16);
  }
  .aurora-features-head { margin-bottom: var(--aurora-space-10); }

  /* Referral viz — shorter on phones */
  .aurora-referral-inner { padding: var(--aurora-space-6); }
  .aurora-referral-viz { height: 220px; }
  .aurora-referral-title { font-size: clamp(28px, 8vw, 36px); }

  /* Hosters pills — single col is too wide visually; keep 2 col */
  .aurora-hosters-pills { gap: var(--aurora-space-2); }
  .aurora-host-pill { padding: 10px 12px; font-size: 13px; }

  /* Footer — single col, marquee slower & lighter */
  .aurora-footer-cols { grid-template-columns: 1fr; gap: var(--aurora-space-6); }
  .aurora-footer-inner { padding: 0 var(--aurora-space-4) var(--aurora-space-8); gap: var(--aurora-space-8); }
  .aurora-footer-wordmark { font-size: 28px; }
  .aurora-footer-tagline { font-size: 16px; }
  .aurora-marquee-track { gap: var(--aurora-space-4); font-size: 10px; letter-spacing: 0.2em; animation-duration: 70s; }
  .aurora-footer-baseline {
    padding: var(--aurora-space-5) var(--aurora-space-4) var(--aurora-space-8);
    font-size: 13px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aurora-space-3);
  }

  /* Container padding everywhere — global tightening */
  .aurora-plans,
  .aurora-extensions-cards,
  .aurora-hosters,
  .aurora-referral,
  .aurora-article,
  .aurora-page-head {
    padding-left: var(--aurora-space-4);
    padding-right: var(--aurora-space-4);
  }

  /* Article body — readable padding + h2 */
  .aurora-article-body h2 { font-size: clamp(26px, 7vw, 34px); }
  .aurora-article-body { font-size: 15px; }

  /* Page head — compact title */
  .aurora-page-head { margin: var(--aurora-space-8) auto var(--aurora-space-10); }
}

/* ---------- 360px — extreme phones (Galaxy S, old iPhones) ---------- */
@media (max-width: 360px) {
  .aurora-hero-globe { width: 180px; height: 180px; }
  .aurora-hero-title { font-size: 38px; }
  .aurora-wordmark { font-size: 16px; }
  .aurora-burger { width: 40px; height: 40px; }
  .aurora-theme-toggle-track { width: 50px; }
}

/* ---------- Touch-target safety (any width with coarse pointer) ----------
   Ensures buttons and links meet WCAG 2.5.5 (≥ 44px) on touch devices,
   without inflating the desktop UI. */
@media (hover: none) and (pointer: coarse) {
  .aurora-nav-link,
  .aurora-nav-cta,
  .aurora-language-trigger,
  .aurora-language-menu li,
  .aurora-footer-col a,
  .aurora-footer-baseline a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .aurora-theme-toggle-track {
    min-height: 32px;
  }
  .aurora-burger {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================================================
   Console footer meta — statut utilisateur inline
   ============================================================================ */

/* Badge premium compacté quand intégré dans aurora-form-meta */
.aurora-form-meta .usage-status {
  padding: 0;
  gap: 8px 12px;
  max-width: none;
  width: auto;
  /* Desktop : reste sur une ligne (comportement d'origine). Le passage à la
     ligne est activé sous mobile (voir @media plus bas) où la rangée complète
     (icône + label + jours restants + jauges fair-use) dépassait l'écran et
     coupait les infos quota hors viewport. */
  flex-wrap: nowrap;
  align-items: center;
  border-radius: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.aurora-form-meta .status-icon {
  width: 26px;
  height: 26px;
  font-size: 1rem;
}
.aurora-form-meta .status-label {
  font-size: 0.72rem;
  line-height: 1.2;
}
.aurora-form-meta .status-detail {
  font-size: 0.65rem;
}
.aurora-form-meta .subscription-time-remaining {
  padding: 3px 8px;
  font-size: 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
}
.aurora-form-meta .subscription-time-remaining strong {
  font-size: 0.9rem;
}

/* ============================================================================
   Jauges fair-use premium (.fair-use-pills) — étaient rendues SANS aucune
   CSS (display:block brut) → illisibles partout, et coupées hors écran sur
   mobile car le parent .usage-status était en nowrap. On leur donne une vraie
   apparence de "pills" colorées par état (info / warning / critical) + on les
   fait passer à la ligne proprement sous mobile.
   États posés côté PHP via data-fair-use-state (index.php).
   ============================================================================ */
.fair-use-pills {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.fair-use-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--aurora-radius-pill, 999px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(224, 242, 254, 0.16);
  background: rgba(224, 242, 254, 0.05);
  color: var(--aurora-text-secondary, rgba(224, 242, 254, 0.75));
  text-transform: none;
}
.fair-use-pill .aurora-icon,
.fair-use-pill i {
  flex: 0 0 auto;
  opacity: 0.85;
}
.fair-use-pill strong {
  font-weight: 700;
  color: var(--aurora-text-primary, #e0f2fe);
}
.fair-use-pill-detail {
  opacity: 0.7;
  margin-left: 2px;
}
/* État "hidden" : pct < 80% — quota non-alerté, jauge masquée (intention PHP
   "visible uniquement quand pct >= 80", cf index.php $stateFor). Sans cette
   règle la jauge fuitait (texte brut sur prod, pill stylée ici) à 0% d'usage. */
.fair-use-pill[data-fair-use-state="hidden"] { display: none; }
/* État "info" : quota non-alerté, affiché en gris discret pour le contexte. */
.fair-use-pill[data-fair-use-state="info"] {
  border-color: rgba(224, 242, 254, 0.14);
  background: rgba(224, 242, 254, 0.04);
}
/* État "warning" : >= 80% — teinte ambrée/violette de marque. */
.fair-use-pill[data-fair-use-state="warning"] {
  border-color: rgba(254, 243, 199, 0.4);
  background: rgba(254, 243, 199, 0.1);
  color: var(--aurora-cream, #fef3c7);
}
.fair-use-pill[data-fair-use-state="warning"] strong { color: var(--aurora-cream, #fef3c7); }
/* État "critical" : >= 95% — teinte pink de marque (pas de rouge off-brand). */
.fair-use-pill[data-fair-use-state="critical"] {
  border-color: rgba(236, 72, 153, 0.45);
  background: rgba(236, 72, 153, 0.12);
  color: #fbcfe8;
}
.fair-use-pill[data-fair-use-state="critical"] strong { color: #fbcfe8; }
/* Bouton info (i) : cercle discret, cible tactile correcte. */
.fair-use-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(224, 242, 254, 0.16);
  background: rgba(224, 242, 254, 0.05);
  color: var(--aurora-text-secondary, rgba(224, 242, 254, 0.75));
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.fair-use-info-btn:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: var(--aurora-border-aurora, rgba(168, 85, 247, 0.3));
}

/* Mobile : le bloc statut premium prend toute la largeur et empile
   proprement (label/jours sur une ligne, jauges en dessous) plutôt que
   de déborder hors écran. */
@media (max-width: 768px) {
  .aurora-form-meta .usage-status {
    width: 100%;
    flex-basis: 100%;
    flex-wrap: wrap;
  }
  .fair-use-pills {
    width: 100%;
    margin-top: 2px;
  }
}

/* ============================================
   prefers-reduced-motion — 3-layer defense
   (prefers_reduced_motion_belt_and_braces, BIBLE v2.3)
   Layer 1 : @media query (this block).
   Layer 2 : .aurora-reduce-motion class injected by aurora.js (matchMedia
             listener — catches user toggle without reload).
   Layer 3 : SMIL pauseAnimations() — handled by aurora.js for <svg> nodes.
   Etat final VISIBLE (opacity 1, transform identity) — pas cache.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  /* Disable atmospheric drifts + twinkle + marquee */
  .aurora-drift,
  .aurora-drift-1,
  .aurora-drift-2,
  .aurora-marquee-track,
  .aurora-reveal,
  .aurora-reveal-active,
  [class*="aurora-globe"] {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Suppress spring hover transforms (bold-playful signature) */
  .aurora-nav-link:hover,
  .aurora-cta:hover,
  .aurora-feature-card:hover,
  .aurora-hoster-pill:hover,
  .auth-btn:hover {
    transform: none !important;
  }

  /* Keep final state VISIBLE — never opacity 0 / hidden */
  .aurora-reveal,
  .aurora-reveal-active {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Layer 2 : class-based fallback (aurora.js applies on matchMedia change).
   Mirrors the @media block above so iOS Safari + cross-browser quirks
   are caught regardless of how the preference is exposed. */
.aurora-reduce-motion .aurora-drift,
.aurora-reduce-motion .aurora-drift-1,
.aurora-reduce-motion .aurora-drift-2,
.aurora-reduce-motion .aurora-marquee-track,
.aurora-reduce-motion .aurora-reveal,
.aurora-reduce-motion .aurora-reveal-active,
.aurora-reduce-motion [class*="aurora-globe"] {
  animation-duration: 0.001ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

.aurora-reduce-motion .aurora-nav-link:hover,
.aurora-reduce-motion .aurora-cta:hover,
.aurora-reduce-motion .aurora-feature-card:hover,
.aurora-reduce-motion .aurora-hoster-pill:hover,
.aurora-reduce-motion .auth-btn:hover {
  transform: none !important;
}

.aurora-reduce-motion .aurora-reveal,
.aurora-reduce-motion .aurora-reveal-active {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================
   dynamic_width_for_translated_ui + mobile_responsive_tile_icon_text_clamp
   Cesures intelligentes pour les langues longues (DE / RU / PL / NL) sur
   les boutons et tuiles. Combine avec scroll-margin-top pour les ancres.
   ============================================ */
.aurora-nav-link,
.auth-btn,
.btn-primary,
.aurora-form-submit,
.aurora-form-secondary {
  white-space: nowrap;
}

.aurora-feature-card,
.aurora-feature-card *,
.aurora-hoster-pill,
.aurora-pricing-card,
.plan-card,
.megamenu-item,
.footer-col-list a {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* scroll-margin-top pour les ancres sous topbar sticky (#faq-N, #art-N, etc.) */
:is(section, article, h1, h2, h3, h4)[id] {
  scroll-margin-top: 80px;
}

/* Print CSS (print_css_optimization) — clean layout pour legal/terms/guide */
@media print {
  .aurora-topbar,
  .aurora-footer,
  .aurora-marquee,
  .aurora-bands,
  .aurora-starfield,
  .aurora-burger,
  .aurora-language,
  .aurora-theme-toggle,
  .floating-shapes,
  button {
    display: none !important;
  }
  body { background: white !important; color: black !important; }
  .aurora-content, .aurora-article-body, .glass-card {
    background: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  a { color: #1a73e8 !important; text-decoration: underline !important; }
}

/* === Admin masquerade banner + modal (2026-05-21) === */

.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 16px;
    background: linear-gradient(90deg, #DC2626, #B91C1C);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.4);
}

.impersonation-banner__icon {
    font-size: 18px;
    animation: impersonation-pulse 2s ease-in-out infinite;
}

@keyframes impersonation-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.impersonation-banner__text strong {
    color: #FEF3C7;
    font-weight: 700;
}

.impersonation-banner__timer {
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, 0.25);
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.impersonation-banner__form {
    display: inline;
    margin: 0;
}

.impersonation-banner__exit {
    background: #fff;
    color: #DC2626;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform 120ms ease;
}

.impersonation-banner__exit:hover {
    transform: scale(1.05);
}

/* Push tout le body de 44px (hauteur banner) quand banner visible.
   !important required to override base body { padding-top: 0 !important } at line 106. */
body:has(.impersonation-banner) {
    padding-top: 44px !important;
}

/* === Modal impersonate sur admin/users.php === */

.impersonate-modal[hidden] {
    display: none;
}

.impersonate-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.impersonate-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.impersonate-modal__panel {
    position: relative;
    background: var(--aurora-bg-elevated, #1A1B2E);
    color: var(--aurora-text-primary, #fff);
    padding: 32px;
    border-radius: 12px;
    max-width: 480px;
    width: 90%;
    border: 1px solid var(--aurora-border-aurora, rgba(20, 184, 166, 0.3));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.impersonate-modal__panel h3 {
    margin: 0 0 16px;
    font-family: 'Clash Display', sans-serif;
}

.impersonate-modal__warning {
    background: rgba(220, 38, 38, 0.1);
    border-left: 3px solid #DC2626;
    padding: 12px 16px;
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
}

.impersonate-modal__target {
    margin: 0 0 16px;
    font-family: 'JetBrains Mono', monospace;
}

.impersonate-modal__panel label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--aurora-text-secondary, #a8abbe);
}

.impersonate-modal__panel input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--aurora-border-aurora, rgba(20, 184, 166, 0.3));
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.impersonate-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Bouton btn-impersonate dans admin/users.php (a cote de btn-view) */
.btn-impersonate {
    background: rgba(168, 85, 247, 0.15);
    color: #c4a5ff;
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 4px;
    transition: all 120ms ease;
}

.btn-impersonate:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
}

/* ============================================================
   Premium upsell modal — s'ouvre après un débridage gratuit
   réussi pour un utilisateur connecté non-premium.
   ============================================================ */
.wd-upsell-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.wd-upsell-overlay.is-open { display: flex; animation: wdUpsellFade 0.25s ease; }
@keyframes wdUpsellFade { from { opacity: 0; } to { opacity: 1; } }

.wd-upsell {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  padding: 32px 30px 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: wdUpsellPop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes wdUpsellPop {
  from { transform: translateY(16px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.wd-upsell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 1.5px;
  background: var(--aurora-gradient);
  opacity: 0.9;
}
.wd-upsell-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--aurora-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.wd-upsell-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--aurora-text-primary); }

.wd-upsell-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aurora-teal);
  font-weight: 700;
  margin-bottom: 10px;
}
.wd-upsell-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aurora-teal);
  box-shadow: 0 0 10px var(--aurora-teal);
}
.wd-upsell h2 {
  font-family: 'Clash Display', sans-serif;
  font-size: 24px;
  margin: 0 0 8px;
  line-height: 1.2;
}
.wd-upsell h2 .em {
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  padding-right: 0.08em;
  margin-right: -0.08em;
}
.wd-upsell-sub {
  color: var(--aurora-text-secondary);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.wd-upsell-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.wd-upsell-opt {
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
}
.wd-upsell-opt.primary {
  border-color: rgba(20, 184, 166, 0.45);
  background: linear-gradient(150deg, rgba(20, 184, 166, 0.08), transparent);
}
.wd-upsell-opt .badge {
  align-self: flex-start;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: #07121b;
  background: var(--aurora-gradient);
  padding: 3px 9px;
  border-radius: var(--aurora-radius-pill);
  margin-bottom: 10px;
}
.wd-upsell-opt h3 { margin: 0 0 3px; font-size: 16px; }
.wd-upsell-opt .price {
  font-family: 'Clash Display', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  margin: 6px 0 2px;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wd-upsell-opt .price small { font-size: 13px; font-weight: 600; color: var(--aurora-text-muted); -webkit-text-fill-color: var(--aurora-text-muted); }
.wd-upsell-opt .price .old {
  font-size: 17px;
  font-weight: 600;
  text-decoration: line-through;
  color: var(--aurora-text-muted);
  -webkit-text-fill-color: var(--aurora-text-muted);
  margin-right: 7px;
}
.wd-upsell-opt .desc { color: var(--aurora-text-muted); font-size: 12.5px; line-height: 1.5; margin: 4px 0 13px; flex: 1; }
.wd-upsell-opt .save { color: var(--aurora-teal); font-weight: 700; }
.wd-upsell-feats { list-style: none; padding: 0; margin: 2px 0 14px; flex: 1; }
.wd-upsell-feats li { display: flex; align-items: center; gap: 7px; font-size: 12.7px; color: var(--aurora-text-secondary); padding: 3px 0; }
.wd-upsell-feats li .ck { color: var(--aurora-teal); flex: none; font-weight: 700; }
.wd-upsell-feats li.bonus { color: var(--aurora-text-primary); font-weight: 600; margin-top: 3px; }
.wd-upsell-feats li.bonus .ck { color: #f5c542; }
.wd-upsell-opt.ponctuel .price { font-size: 23px; font-weight: 700; }
.wd-upsell-opt.ponctuel .price small { font-size: 12px; }
.wd-upsell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 11px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.wd-upsell-btn-primary { background: var(--aurora-gradient); color: #07121b; box-shadow: 0 6px 18px rgba(168, 85, 247, 0.3); }
.wd-upsell-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(168, 85, 247, 0.45); color: #07121b; }
.wd-upsell-btn-ghost { background: rgba(255, 255, 255, 0.05); color: var(--aurora-text-primary); border: 1px solid var(--aurora-border-subtle); }
.wd-upsell-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--aurora-text-primary); }
.wd-upsell-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--aurora-text-muted);
  font-size: 12px;
  margin-top: 4px;
}
.wd-upsell-foot span { display: inline-flex; align-items: center; gap: 5px; }
.wd-upsell-later {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--aurora-text-muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.wd-upsell-later:hover { color: var(--aurora-text-secondary); }
@media (max-width: 560px) {
  .wd-upsell-grid { grid-template-columns: 1fr; }
  .wd-upsell { padding: 28px 20px 22px; }
}

/* Modale d'inscription (visiteur anonyme) — réutilise .wd-upsell ;
   le contenu .auth-cta-* est autonome, on ajuste juste les marges. */
.wd-auth-modal .auth-cta-badge { margin-bottom: 4px; }
.wd-auth-modal .auth-cta-title { margin-top: 8px; }
.wd-auth-modal .auth-cta-feats { margin-top: 14px; }
.wd-auth-modal .auth-cta-link { margin-top: 14px; }
.wd-auth-modal .auth-cta-btns { margin-top: 18px; }
/* Fallback condensé inline : carte auth-cta classique, sans surplus. */
.auth-cta-mini .auth-cta-btns { margin-top: 14px; }

/* ============================================================================
   Page Plans — encart de choix Abonnement / Achat ponctuel (refonte 2026-06).
   Scopé sous .aurora-plans-choice pour ne PAS toucher la section "points".
   ============================================================================ */
.aurora-plans-choice .plan-mode { display:flex; flex-direction:column; align-items:center; gap:18px; margin:8px 0 40px; }
.aurora-plans-choice .plan-mode-hint { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--aurora-text-secondary, rgba(224,242,254,.6)); }
/* Invitation au clic mise en avant (titre + sous-titre). */
.aurora-plans-choice .plan-mode-cta { display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.aurora-plans-choice .plan-mode-cta-l1 { display:inline-flex; align-items:center; gap:10px; font-size:19px; font-weight:800; letter-spacing:.005em; background:linear-gradient(90deg,#5eead4,#818cf8 55%,#e879f9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.aurora-plans-choice .plan-mode-cta-tap { width:21px; height:21px; color:#5eead4; -webkit-text-fill-color:#5eead4; flex:0 0 auto; animation:auroraCtaTap 1.6s ease-in-out infinite; }
.aurora-plans-choice .plan-mode-cta-l2 { font-size:13.5px; color:var(--aurora-text-secondary,rgba(224,242,254,.62)); }
@keyframes auroraCtaTap { 0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-3px) rotate(-6deg);} }
/* Repère « Voir les offres → » par carte : signale que la carte est cliquable. */
.aurora-plans-choice .choice-go { margin-top:14px; padding-top:13px; border-top:1px solid rgba(224,242,254,.10); display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.02em; }
.aurora-plans-choice .choice-go svg { width:16px; height:16px; transition:transform .22s ease; }
.aurora-plans-choice .choice-card:hover .choice-go svg { transform:translateX(5px); }
.aurora-plans-choice .choice-card[data-view="sub"] .choice-go { color:#5eead4; }
.aurora-plans-choice .choice-card[data-view="oneshot"] .choice-go { color:#c4b5fd; }
.aurora-plans-choice .choice-card.is-active .choice-go { border-top-color:rgba(255,255,255,.12); }
/* Pulse incitatif au repos (s'arrête au survol et une fois sélectionné). */
.aurora-plans-choice .choice-card[data-view="sub"]:not(.is-active) { animation:auroraChoicePulseSub 2.6s ease-in-out infinite; }
.aurora-plans-choice .choice-card[data-view="oneshot"]:not(.is-active) { animation:auroraChoicePulseOne 2.6s ease-in-out infinite; }
.aurora-plans-choice .choice-card:hover { animation:none; }
@keyframes auroraChoicePulseSub { 0%,100%{ box-shadow:0 12px 34px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 0 rgba(94,234,212,0); } 50%{ box-shadow:0 12px 34px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 5px rgba(94,234,212,.12); } }
@keyframes auroraChoicePulseOne { 0%,100%{ box-shadow:0 12px 34px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 0 rgba(168,130,249,0); } 50%{ box-shadow:0 12px 34px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 5px rgba(168,130,249,.13); } }
@media (prefers-reduced-motion: reduce) {
  .aurora-plans-choice .plan-mode-cta-tap,
  .aurora-plans-choice .choice-card[data-view="sub"]:not(.is-active),
  .aurora-plans-choice .choice-card[data-view="oneshot"]:not(.is-active) { animation:none; }
}
.aurora-plans-choice .plan-chooser { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0 18px; width:100%; max-width:760px; }
.aurora-plans-choice .choice-or { align-self:center; font-size:13px; font-weight:600; letter-spacing:.05em; color:var(--aurora-text-secondary,rgba(224,242,254,.5)); text-transform:uppercase; }
.aurora-plans-choice .choice-card { position:relative; cursor:pointer; text-align:left; font-family:inherit; display:flex; flex-direction:column; gap:7px; padding:22px 22px 20px; border-radius:20px; background:rgba(224,242,254,.04); border:1.5px solid rgba(224,242,254,.16); color:var(--aurora-text-primary,#e0f2fe); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 12px 34px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); transition:transform .18s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
/* Variante C — glass teinté marque : chaque carte se lit dès le repos (turquoise = abo, violet = ponctuel). */
.aurora-plans-choice .choice-card[data-view="sub"] { background:linear-gradient(150deg, rgba(94,234,212,.14), rgba(94,234,212,.04) 60%), rgba(13,18,30,.5); border-color:rgba(94,234,212,.40); }
.aurora-plans-choice .choice-card[data-view="sub"] .choice-ico { background:rgba(94,234,212,.18); color:#5eead4; }
.aurora-plans-choice .choice-card[data-view="oneshot"] { background:linear-gradient(150deg, rgba(168,130,249,.16), rgba(168,130,249,.04) 60%), rgba(13,18,30,.5); border-color:rgba(168,130,249,.42); }
.aurora-plans-choice .choice-card[data-view="oneshot"] .choice-ico { background:rgba(168,130,249,.20); color:#c4b5fd; }
.aurora-plans-choice .choice-card:hover { transform:translateY(-3px); box-shadow:0 18px 42px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.aurora-plans-choice .choice-card[data-view="sub"]:hover { border-color:rgba(94,234,212,.6); }
.aurora-plans-choice .choice-card[data-view="oneshot"]:hover { border-color:rgba(168,130,249,.62); }
.aurora-plans-choice .choice-ico { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(224,242,254,.07); margin-bottom:4px; transition:all .2s ease; }
.aurora-plans-choice .choice-ico svg { width:21px; height:21px; }
.aurora-plans-choice .choice-title { font-weight:700; font-size:19px; }
.aurora-plans-choice .choice-desc { font-size:13px; line-height:1.45; color:var(--aurora-text-secondary,rgba(224,242,254,.68)); }
/* Ancre prix mise en avant : le nombre est l'info de décision -> gros + gras. */
.aurora-plans-choice .choice-anchor { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin-top:12px; font-size:15px; font-weight:600; color:var(--aurora-text-primary,#e0f2fe); }
.aurora-plans-choice .choice-anchor strong { font-size:25px; font-weight:800; line-height:1; }
.aurora-plans-choice .choice-anchor small { font-size:12px; font-weight:500; opacity:.55; }
.aurora-plans-choice .choice-anchor em { font-style:normal; color:#5eead4; font-weight:700; font-size:13px; }
.aurora-plans-choice .choice-check { position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#5eead4,#818cf8 55%,#e879f9); color:#0a0a14; opacity:0; transform:scale(.5); transition:all .22s cubic-bezier(.34,1.56,.64,1); box-shadow:0 4px 12px -2px rgba(129,140,248,.6); }
.aurora-plans-choice .choice-check svg { width:15px; height:15px; }
.aurora-plans-choice .choice-card.is-active { border-color:transparent; box-shadow:0 14px 38px -16px rgba(129,140,248,.55); background-image:linear-gradient(rgba(12,12,22,.92),rgba(12,12,22,.92)),linear-gradient(135deg,#5eead4,#818cf8 55%,#e879f9); background-origin:border-box; background-clip:padding-box, border-box; }
.aurora-plans-choice .choice-card.is-active .choice-ico { background:linear-gradient(135deg,#5eead4,#818cf8 55%,#e879f9); color:#0a0a14; }
.aurora-plans-choice .choice-card.is-active .choice-check { opacity:1; transform:scale(1); }

/* ----------------------------------------------------------------------------
   Thème clair (arc) — l'encart a été conçu pour le fond sombre (cartes foncées,
   accents marque clairs). En thème clair, le texte passe en sombre via les
   variables --aurora-text-*, mais les FONDS restaient foncés : la carte
   sélectionnée gardait un intérieur quasi opaque (rgba(12,12,22,.92)) -> texte
   sombre sur fond sombre = illisible. On rebascule fonds + accents marque ;
   le texte est déjà géré par les variables.
   Spécificité (body[data-theme] + section + carte) > règles de base : pas de !important.
   ---------------------------------------------------------------------------- */
body[data-theme="arc"] .aurora-plans-choice .choice-card {
  background: var(--aurora-bg-elevated);
  border-color: rgba(10,14,39,.10);
  box-shadow: 0 4px 16px rgba(10,14,39,.06);
}
body[data-theme="arc"] .aurora-plans-choice .choice-card[data-view="sub"] {
  background: linear-gradient(150deg, rgba(13,148,136,.12), rgba(13,148,136,.03) 60%), var(--aurora-bg-elevated);
  border-color: rgba(13,148,136,.40);
}
body[data-theme="arc"] .aurora-plans-choice .choice-card[data-view="oneshot"] {
  background: linear-gradient(150deg, rgba(124,58,237,.12), rgba(124,58,237,.03) 60%), var(--aurora-bg-elevated);
  border-color: rgba(124,58,237,.42);
}
body[data-theme="arc"] .aurora-plans-choice .choice-card[data-view="sub"] .choice-ico { background: rgba(13,148,136,.14); color:#0d9488; }
body[data-theme="arc"] .aurora-plans-choice .choice-card[data-view="oneshot"] .choice-ico { background: rgba(124,58,237,.14); color:#7c3aed; }
body[data-theme="arc"] .aurora-plans-choice .choice-card[data-view="sub"]:hover { border-color: rgba(13,148,136,.6); }
body[data-theme="arc"] .aurora-plans-choice .choice-card[data-view="oneshot"]:hover { border-color: rgba(124,58,237,.62); }
/* Accents marque clairs (turquoise/violet vifs) -> teintes foncées lisibles sur fond clair */
body[data-theme="arc"] .aurora-plans-choice .choice-card[data-view="sub"] .choice-go { color:#0d9488; }
body[data-theme="arc"] .aurora-plans-choice .choice-card[data-view="oneshot"] .choice-go { color:#7c3aed; }
body[data-theme="arc"] .aurora-plans-choice .choice-go { border-top-color: rgba(10,14,39,.10); }
body[data-theme="arc"] .aurora-plans-choice .choice-anchor em { color:#0d9488; }
/* Carte sélectionnée : on conserve le contour dégradé marque, mais l'intérieur
   redevient clair pour que le texte (sombre) reste lisible. */
body[data-theme="arc"] .aurora-plans-choice .choice-card.is-active {
  background-image: linear-gradient(var(--aurora-bg-elevated), var(--aurora-bg-elevated)), linear-gradient(135deg,#0d9488,#7c3aed 55%,#db2777);
}
body[data-theme="arc"] .aurora-plans-choice .choice-card.is-active .choice-go { border-top-color: rgba(10,14,39,.12); }
/* Bouton crypto : la bordure (blanche) et le watermark « Payments » (gris clair)
   disparaissaient sur la carte de pack blanche du thème clair. */
body[data-theme="arc"] .aurora-plans-choice .crypto-pay-btn { border-color: rgba(10,14,39,.14); color: rgba(10,14,39,.6); }
body[data-theme="arc"] .aurora-plans-choice .crypto-pay-btn:hover { color: var(--aurora-text-primary); }
body[data-theme="arc"] .aurora-plans-choice .crypto-pay-btn .crypto-pay-l2 { color: rgba(10,14,39,.5); }
body[data-theme="arc"] .aurora-plans-choice .crypto-pay-btn .np-pay { color: rgba(10,14,39,.55); }

/* Vues (masquées tant qu'aucune formule choisie quand les 2 modes existent) */
.aurora-plans-choice .plan-view { display:none; animation:auroraPlanFade .35s ease; }
.aurora-plans-choice .plan-view.is-active { display:block; }
@keyframes auroraPlanFade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* Invite */
.aurora-plans-choice .plan-prompt { display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 20px 8px; text-align:center; color:var(--aurora-text-secondary,rgba(224,242,254,.55)); }
.aurora-plans-choice .plan-prompt svg { opacity:.7; animation:auroraPromptBob 1.8s ease-in-out infinite; }
.aurora-plans-choice .plan-prompt p { font-size:14px; margin:0; }
.aurora-plans-choice .plan-prompt.is-hidden { display:none; }
@keyframes auroraPromptBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }

/* Vue Abonnement : carte hero resserrée + comparatif + réassurance */
.aurora-plans-choice .sub-hero { max-width:440px; margin:0 auto; }
.aurora-plans-choice .sub-hero .aurora-plan-card { text-align:center; }
.aurora-plans-choice .sub-hero .aurora-plan-price { justify-content:center; }
.aurora-plans-choice .sub-hero .aurora-plan-features { max-width:340px; margin-inline:auto; text-align:left; }
.aurora-plans-choice .sub-compare { margin:0 auto 26px; max-width:500px; text-align:center; font-size:13.5px; color:var(--aurora-text-secondary,rgba(224,242,254,.7)); background:rgba(94,234,212,.06); border:1px solid rgba(94,234,212,.2); border-radius:14px; padding:12px 18px; }
.aurora-plans-choice .sub-compare strong { color:#5eead4; }
.aurora-plans-choice .sub-reassure { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:18px; font-size:12.5px; color:var(--aurora-text-secondary,rgba(224,242,254,.65)); }
.aurora-plans-choice .sub-reassure > span { display:inline-flex; align-items:center; gap:6px; }
.aurora-plans-choice .sub-reassure svg { width:14px; height:14px; opacity:.8; flex:0 0 auto; }

/* Équivalent €/mois sur les plans ponctuels */
.aurora-plans-choice .aurora-plan-permonth { font-size:12px; letter-spacing:.03em; color:var(--aurora-text-secondary,rgba(224,242,254,.6)); margin-top:4px; }
.aurora-plans-choice .plan-oneshot-note { text-align:center; margin-top:22px; font-size:13px; color:var(--aurora-text-secondary,rgba(224,242,254,.6)); }

/* Vue ponctuelle : 5 plans sur une ligne (responsive 5 -> 3 -> 2 -> 1) */
.aurora-plans-choice .plan-view[data-view="oneshot"] .aurora-plans-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; align-items:stretch; }
@media (max-width:1180px){ .aurora-plans-choice .plan-view[data-view="oneshot"] .aurora-plans-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:820px){ .aurora-plans-choice .plan-view[data-view="oneshot"] .aurora-plans-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){
  .aurora-plans-choice .plan-view[data-view="oneshot"] .aurora-plans-grid{ grid-template-columns:1fr;}
  .aurora-plans-choice .plan-chooser{ grid-template-columns:1fr; gap:12px; }
  /* "ou" devient un séparateur centré (traits de chaque côté) une fois empilé */
  .aurora-plans-choice .choice-or{ display:flex; align-items:center; gap:12px; width:100%; padding:2px 0; }
  .aurora-plans-choice .choice-or::before,
  .aurora-plans-choice .choice-or::after{ content:""; flex:1; height:1px; background:rgba(224,242,254,.14); }
}

/* ============================================================
   Plans — réassurance & moyens de paiement
   ============================================================ */
/* Pied de carte : pousse le bloc paiement en bas -> hauteurs alignées dans la grille */
.aurora-plans-choice .aurora-plan-foot { margin-top:auto; }

/* Mini-logos des moyens de paiement (Stripe) sous le bouton */
.aurora-plans-choice .pay-mini { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:10px; flex-wrap:wrap; }
.aurora-plans-choice .pay-mini .pay-lock { display:inline-flex; align-items:center; color:var(--aurora-text-secondary,rgba(224,242,254,.6)); margin-right:1px; }
.aurora-plans-choice .pay-mini .pay-lock svg { width:12px; height:12px; }
.aurora-plans-choice .pay-chip { display:inline-flex; align-items:center; justify-content:center; height:20px; min-width:30px; padding:0 5px; background:#fff; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.aurora-plans-choice .pay-chip svg { height:11px; display:block; }
.aurora-plans-choice .pay-chip.pay-more { background:rgba(255,255,255,.12); color:var(--aurora-text-secondary,rgba(224,242,254,.7)); font-size:10px; font-weight:700; min-width:24px; box-shadow:none; }

/* Bouton crypto (NOWPayments) — V2 : icône BTC orange + pastilles crypto */
.aurora-plans-choice .crypto-pay-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; margin-top:9px; padding:9px 12px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.12); border-radius:11px; color:var(--text-muted,#9a9ab2); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:border-color .16s,color .16s,background .16s; }
.aurora-plans-choice .crypto-pay-btn:hover { border-color:rgba(247,147,26,.5); color:var(--aurora-text-primary,#fff); background:rgba(247,147,26,.07); }
.aurora-plans-choice .crypto-pay-btn .crypto-pay-l1 { display:flex; align-items:center; gap:7px; }
.aurora-plans-choice .crypto-pay-btn .crypto-pay-l1 .btc-ico { width:16px; height:16px; flex:0 0 auto; }
.aurora-plans-choice .crypto-pay-btn .crypto-pay-l2 { font-size:10.5px; font-weight:500; color:var(--text-muted,#7b7b93); opacity:.95; }
.aurora-plans-choice .crypto-pay-btn .np-wm { font-weight:800; letter-spacing:-.2px; }
.aurora-plans-choice .crypto-pay-btn .np-now { color:#ff5c8a; }
.aurora-plans-choice .crypto-pay-btn .np-pay { color:#cfd0e0; }
/* Placeholder invisible : réserve la hauteur du bouton crypto sur les packs où il est
   désactivé, pour garder le CTA « Choisir ce plan » aligné entre les cartes. */
.aurora-plans-choice .crypto-pay-btn.is-placeholder { visibility:hidden; pointer-events:none; }

/* Bandeau réassurance étendu à la vue ponctuelle */
.aurora-plans-choice .plan-view[data-view="oneshot"] .sub-reassure { margin-top:24px; }

/* Section « Paiement 100 % sécurisé » */
.pay-trust { max-width:1000px; margin:60px auto 0; padding:40px 30px; border-radius:24px; background:linear-gradient(160deg,rgba(20,184,166,.06),rgba(168,85,247,.05) 60%,rgba(236,72,153,.04)); border:1px solid var(--aurora-border-subtle,rgba(168,85,247,.15)); }
.pay-trust-eyebrow { display:flex; align-items:center; justify-content:center; gap:8px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#14b8a6; font-weight:700; }
.pay-trust-eyebrow svg { width:15px; height:15px; }
.pay-trust-title { text-align:center; font-family:'Rajdhani',sans-serif; font-size:28px; font-weight:700; margin:10px 0 6px; color:var(--aurora-text-primary,#e0f2fe); }
.pay-trust-title em { font-style:normal; background:var(--aurora-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pay-trust-subtitle { text-align:center; font-size:14px; color:var(--aurora-text-secondary,rgba(224,242,254,.75)); max-width:560px; margin:0 auto 30px; line-height:1.5; }
.pay-pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:34px; }
.pay-pillar { text-align:center; padding:20px 14px; border-radius:16px; background:rgba(224,242,254,.03); border:1px solid rgba(224,242,254,.08); }
.pay-pillar-ico { width:44px; height:44px; margin:0 auto 12px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(20,184,166,.12); color:#14b8a6; }
.pay-pillar-ico svg { width:22px; height:22px; }
.pay-pillar h4 { margin:0 0 6px; font-size:14.5px; font-weight:700; color:var(--aurora-text-primary,#e0f2fe); }
.pay-pillar p { margin:0; font-size:12.5px; line-height:1.5; color:var(--aurora-text-secondary,rgba(224,242,254,.7)); }
.pay-methods-label { text-align:center; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--aurora-text-secondary,rgba(224,242,254,.6)); margin-bottom:14px; }
.paybar { display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; }
.paybar .paychip { display:inline-flex; align-items:center; justify-content:center; height:34px; min-width:54px; padding:0 11px; background:#fff; border-radius:7px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.paybar .paychip svg { height:18px; display:block; }
.paybar .paychip.is-crypto { background:linear-gradient(135deg,#f7931a,#ffb347); }
.pay-trust-foot { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:22px; font-size:11.5px; color:var(--aurora-text-secondary,rgba(224,242,254,.6)); }
.pay-trust-foot > span { display:inline-flex; align-items:center; gap:6px; }
.pay-trust-foot svg { width:13px; height:13px; opacity:.85; }
.pay-trust-foot .stripe-wm { font-weight:800; color:#635bff; letter-spacing:-.5px; }
@media (max-width:820px){ .pay-pillars { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .pay-trust { padding:30px 18px; } .pay-pillars { grid-template-columns:1fr; } }

/* Light theme (body[data-theme="arc"]) — fonds/accents hardcodés pensés
   pour le thème sombre, jamais patchés lors du refresh Aurora. */
body[data-theme="arc"] .aurora-vp-step-dot {
  background: var(--aurora-bg-card);
}
body[data-theme="arc"] .aurora-vp-mask {
  background: var(--aurora-bg-card);
}
body[data-theme="arc"] .aurora-account-value-expired {
  color: var(--aurora-pink);
}
body[data-theme="arc"] .pay-pillar {
  background: var(--aurora-bg-card);
  border-color: var(--aurora-border-subtle);
}

/* === API partenaire — section "Intégrations" (Lot 2) === */
.aurora-account-integrations-intro { color: var(--aurora-text-secondary); line-height: 1.6; margin: 0 0 20px; }
.aurora-account-integration-card { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.aurora-account-integration-meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aurora-account-integration-token { font-family: monospace; letter-spacing: .5px; }
.aurora-account-integration-sub { color: var(--aurora-text-tertiary); font-size: 12px; }
.aurora-account-integration-actions .aurora-form-submit { width: auto; padding: 10px 18px; white-space: nowrap; }
.wd-integration-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.62); }
.wd-integration-modal-box { max-width: 520px; width: 100%; }
.wd-integration-modal-row { display: flex; gap: 8px; margin-top: 14px; }
.wd-integration-modal-row .aurora-form-input { font-family: monospace; font-size: 13px; }
.wd-integration-modal-row .aurora-form-submit { width: auto; padding: 0 18px; white-space: nowrap; }
.wd-integration-modal-foot { text-align: right; margin-top: 16px; }
.wd-integration-modal-foot .aurora-form-submit { width: auto; padding: 10px 22px; }