/* ============================================================
   NÉBULA — couche de tokens (source unique)

   Chargée avant style.css / zenix.css / profil.css / auth.css sur
   toutes les pages. Aucune valeur brute de typo, de rayon, d'ombre
   ou de durée ne doit être écrite dans les feuilles de composants.

   DIRECTION VISUELLE
   Méthode Apple : la qualité vient de la retenue, pas de l'effet.
     - typographie système, très serrée sur les gros corps ;
     - noir profond, mats translucides plutôt que surfaces colorées ;
     - un seul accent, le bleu système, dosé sur les actions ;
     - filets d'un pixel, ombres courtes, rayons généreux ;
     - un mouvement unique, plus long, avec dépassement léger.

   Organisation en trois couches :
     1. primitives  — typo, rayons, élévations, mouvement
     2. sémantique   — ce que les composants consomment réellement
     3. identité     — la palette NÉBULA, modifiable en un seul endroit
   ============================================================ */

:root {
  color-scheme: dark;

  /* ==========================================================
     1. PRIMITIVES
     ========================================================== */

  /* ── Police ──
     La pile système passe AVANT toute police web : sur un appareil
     Apple on obtient la vraie SF Pro, qui est l'objectif. Ailleurs on
     tombe sur la meilleure substitut disponible, ce qui évite le décalage
     de métriques qu'une police non système provoque toujours. */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui,
             "Helvetica Neue", Arial, sans-serif;

  /* ── Échelle typographique ──
     L'échelle d'Apple n'est pas géométrique : 11/13/15/17/21/28… Les pas
     ci-dessous reprennent les corps réellement utilisés par le site. */
  --fs-11: 11px;   /* kickers, badges, superpositions */
  --fs-12: 12px;   /* intros de tiroir, mentions */
  --fs-13: 13px;   /* méta, libellés, compteurs */
  --fs-15: 15px;   /* corps, contrôles, cartes */
  --fs-16: 16px;   /* navigation de tiroir */
  --fs-17: 17px;   /* corps confort */
  --fs-18: 18px;   /* corps fort, titres de bloc */
  --fs-21: 21px;   /* sous-titre de page étroit */
  --fs-24: 24px;   /* titres de section */
  --fs-32: 32px;   /* sous-titres de page */

  /* ── Titres fluides : un pas d'échelle ne peut pas être un token
        fixe, donc ils vivent ici (clamp = miniature + palier). ── */
  --fs-hero:  clamp(2.4rem, 5.6vw, 4.25rem);   /* 38 → 68 px */
  --fs-page:  clamp(2rem, 4vw, 3.125rem);      /* 32 → 50 px */

  /* ── Interlettrage ──
     Apple serre fortement les grands corps et ouvre légèrement les
     petites capitales. Deux tokens, parce que la valeur dépend de la
     taille : une constante unique ne peut pas servir les deux. */
  --tr-tight: -.022em;    /* titres */
  --tr-display: -.032em;  /* très grands titres */
  --tr-wide: .08em;       /* kickers en capitales */
  --tr-wider: .14em;      /* super-labels */

  /* ── Graisse ──
     SF Pro descend jusqu'à 200 maisIntermediate est plus lisible en
     interface que 500. On évite le 900, trop lourd sur fond sombre. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 590;
  --fw-bold: 700;

  /* ── Rayons : à coins continus, plus généreux qu'avant ── */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ── Élévation : ombres courtes et froides.
     Apple n'utilise pas d'ombre longue et colorée : l'ombre sert à
     détacher du fond, pas à tortured. */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 6px 20px rgba(0, 0, 0, .5);
  --sh-3: 0 20px 56px rgba(0, 0, 0, .6);
  --glow: 0 6px 20px rgba(139, 92, 246, .45);
  --glow-ok: 0 0 6px rgba(48, 209, 88, .6);

  /* ── Anneaux : focus et contours (les anneaux 0 0 0 n'utilisent pas
        la courbe --ease, ils changent instantanément) ── */
  --ring: 0 0 0 3px rgba(139, 92, 246, .5);
  --ring-soft: 0 0 0 1px rgba(139, 92, 246, .45);

  /* ── Mats : le verre d'Apple.
     Trois niveaux de flou et de saturation, du bandeau le plus fin au
     panneau le plus proche. Le fond reste noir derrière, donc le flou
     n'est jamais décoratif : il dédouble la typographie. ── */
  --mat-thin:  rgba(28, 28, 30, .62);   /* bandeau, champ de recherche */
  --mat-thick: rgba(22, 22, 24, .82);   /* tiroir, panneau latéral */
  --mat-card:  rgba(28, 28, 30, .84);   /* carte survolée */
  --blur-thin:  20px;
  --blur-thick: 30px;
  --saturate: 180%;                     /* la saturation qui « déborde » */

  /* ── Surfaces de verre : reflet et filet (inset) ── */
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .09);
  --hairline: inset 0 0 0 1px rgba(255, 255, 255, .08);
  --sheen-accent: inset 0 0 20px rgba(139, 92, 246, .22);

  /* ── Filet d'un pixel : le trait de séparation d'Apple ── */
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .18);

  /* ── Mouvement ──
     Une seule courbe pour l'interface (courbe standard d'iOS/macOS), et
     une seconde avec dépassement, réservée aux éléments qui « entrent »
     en réponse à une action. Les durées sont plus longues qu'avant :
     Apple privilégie la fluidité à la vivacité. */
  --dur-fast: .2s;
  --dur: .35s;
  --dur-slow: .6s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);

  /* ── Texte : 4 niveaux, alignés sur les labels système d'Apple ── */
  --text-1: rgba(255, 255, 255, .92);   /* label */
  --text-2: rgba(255, 255, 255, .72);   /* label secondaire */
  --text-3: rgba(255, 255, 255, .54);   /* tertiaire */
  --text-4: rgba(255, 255, 255, .38);   /* placeholder, décoratif */

  /* ── Surfaces des squelettes de chargement ── */
  --skel-base: #1c1c1e;
  --skel-sheen: rgba(255, 255, 255, .07);

  /* ── Barres de défilement (Firefox d'abord, WebKit ensuite) ── */
  --scrollbar-track: #000;
  --scrollbar-thumb: #2c2c2e;
  --scrollbar-thumb-hover: #3a3a3c;

  /* ── Rythme d'espacement (grille de 4) ── */
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-9: 72px;

  /* ==========================================================
     2. PALETTE — LA SOURCE UNIQUE
     Niveaux de gris d'Apple en mode sombre. Ils sont ESPACÉS et
     légèrement bleutés, pas neutres : c'est ce qui donne aux
     interfaces Apple leur profondeur sans dégradé.
     ========================================================== */

  --bg: #000000;         /* noir pur : la base d'Apple en mode sombre */
  --bg-soft: #0a0a0c;    /* gris très sombre, fonds de section */
  --surface: #1c1c1e;    /* surface de carte et de panneau */
  --surface-2: #2c2c2e;  /* surface survolée / secondaire */
  --border: #2c2c2e;     /* filet, bordure de surface */
  --text: #f5f5f7;       /* blanc cassé, le texte d'Apple */
  --muted: #86868b;      /* gris médian, texte secondaire */
  --header-h: 64px;

  /* ==========================================================
     3. IDENTITÉ NÉBULA
     Un seul accent : le bleu système. Règle de composition : la
     couleur ne sert qu'à désigner l'action principale, la
     sélection et l'état actif. Elle ne décore jamais une carte.
     ========================================================== */

  --accent: #8b5cf6;     /* violet principal */
  --accent-2: #a78bfa;   /* violet clair, dosage en appui */
  --gradient: linear-gradient(135deg, #8b5cf6, #a78bfa);

  --danger: #ff453a;     /* rouge système */
  --ok: #30d158;         /* vert système */
  --amber: #ffd60a;      /* jaune système */

  /* Fond noir pur : plus aucun voile coloré posé derrière le contenu.
     Les détails (actions, liens, états actifs) restent en violet via
     --accent / --accent-2. */
  --accent-veil: none;
}

/* ============================================================
   FOND NÉBULEUSE
   Un seul halo bleu, très sombre, fixe derrière le contenu. La
   version précédente en empilait trois, dont deux violets et un
   magenta : ils se cumulaient et donnaient un fond mauve, ce qui
   n'existe pas chez Apple. Volontairement statique : une image de
   fond ou une animation continue coûterait du temps de peinture
   sur chaque scroll pour un gain quasi nul.
   ============================================================ */

body {
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: var(--accent-veil);
}

/* ============================================================
   Base globale : focus visible, mouvement réduit, curseur
   ============================================================ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
img, video { height: auto; }

::selection { background: rgba(139, 92, 246, .45); color: #fff; }
::placeholder { color: var(--text-4); opacity: 1; }

/* Barres de défilement : Firefox d'abord, WebKit ensuite. */
html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--r-pill);
  border: 3px solid var(--scrollbar-track);
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }

/* Repli : sans backdrop-filter, les surfaces translucides deviennent
   illisibles. On remonte à un fond opaque, et l'on prend la couleur
   du mat le plus épais pour rester cohérent avec le reste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .znx-sidebar,
  .znx-brand-fixed,
  .znx-pill,
  .znx-hero-cta--ghost,
  .znx-hero-dots,
  .znx-search-inner,
  .znx-sidebar__discord,
  .znx-icon-act,
  .znx-mobile-nav {
    background: rgba(20, 20, 22, .97) !important;
  }
}

/* Le focus ne doit être visible qu'au clavier, jamais au clic souris.
   Le halo est large et doux, comme sur macOS et iOS. */
:where(a, button, input, select, textarea, [tabindex]):focus { outline: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .znx-hero-track, .znx-hero-slide { min-height: 82vh; min-height: 82dvh; }
  /* Le travelling du fond et la progression des points n'apportent rien
     en mouvement reduit : on les fige. */
  .znx-hero-slide.active .znx-hero-slide__bg img,
  .znx-hero-dots button.active::before { animation: none !important; }
  .znx-hero-slide.active .znx-hero-slide__bg img { transform: scale(1.02); }
  .znx-hero-dots button.active::before { width: 100%; }
  .znx-skel::after { display: none; }
  body:not(.znx-no-anim) .znx-rows { opacity: 1; transform: none; }
  /* Le fond nebulose est statique par construction : rien a figer. */
}