/* =====================================================================
   index-new.css — refonte de la page d'accueil (préversion)

   Tout est scopé sous body.index-new et préfixé .nx- : chargé après
   style.css, ce fichier n'affecte aucune autre page du site.

   Vocabulaire visuel : le dessin d'architecte. Filets d'un pixel,
   repères de cote, rayons resserrés, annotations manuscrites en marge.
   ===================================================================== */

body.index-new {

  /* --- Couleur : palette du site, plus des neutres tirés vers l'orange
         (un gris pur sonnerait « par défaut ») ------------------------ */
  --nx-orange:      #EA8845;
  --nx-orange-soft: #FBA66C;
  --nx-orange-deep: #C96A2B;
  --nx-ember:       #FFD0A8;

  --nx-cream:  #FDEEE2;
  --nx-paper:  #FBF7F4;
  --nx-white:  #FAFAFA;

  --nx-ink-950: #0B0A0C;
  --nx-ink-900: #121013;   /* neutres légèrement chauds */
  --nx-ink-800: #1A171B;
  --nx-ink-700: #241F25;
  --nx-line:    rgba(250, 245, 240, .10);
  --nx-line-2:  rgba(250, 245, 240, .18);

  --nx-mute:      rgba(250, 245, 240, .58);
  --nx-mute-soft: rgba(250, 245, 240, .38);

  /* --- Échelle typographique modulaire (~1.28) -------------------- */
  --nx-fs-display: clamp(2.9rem, 8.6vw, 7.4rem);
  --nx-fs-h2:      clamp(2rem, 5.2vw, 4.1rem);
  --nx-fs-h3:      clamp(1.05rem, 1.6vw, 1.3rem);
  --nx-fs-lede:    clamp(1rem, 1.35vw, 1.18rem);
  --nx-fs-body:    1rem;
  --nx-fs-micro:   .69rem;

  /* --- Rythme vertical ------------------------------------------- */
  --nx-space-section: clamp(72px, 11vw, 168px);
  --nx-space-block:   clamp(32px, 5vw, 68px);

  /* --- Trait : rayons resserrés, registre architectural ----------- */
  --nx-r-sm: 2px;
  --nx-r-md: 4px;
  --nx-r-lg: 6px;

  /* --- Courbes ---------------------------------------------------- */
  --nx-ease:      cubic-bezier(.19, 1, .22, 1);
  --nx-ease-soft: cubic-bezier(.33, 1, .68, 1);

  background: var(--nx-ink-900);
  color: var(--nx-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.index-new main { position: relative; z-index: 1; }

.nx-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5.5vw, 88px);
}

body.index-new a:focus-visible,
body.index-new button:focus-visible {
  outline: 2px solid var(--nx-orange);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Typographie
   --------------------------------------------------------------------- */

.nx-h2 {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 900;
  font-size: var(--nx-fs-h2);
  line-height: .98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--nx-ink-900);
  margin: 0;
}
.nx-h2--light { color: var(--nx-white); }

.nx-hand {
  display: block;
  font-family: "Caveat", cursive;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.3vw, 1.85rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--nx-orange);
  transform: rotate(-1.4deg);
  margin-top: 10px;
  pointer-events: none;
}
.nx-h2--light .nx-hand { color: var(--nx-orange-soft); }

.nx-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: var(--nx-fs-micro);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nx-orange-soft);
}
.nx-label::before {
  content: '';
  width: clamp(24px, 4vw, 56px);
  height: 1px;
  background: var(--nx-orange);
  flex: none;
}
.nx-head--center .nx-label { justify-content: center; }

.nx-prose {
  font-size: var(--nx-fs-body);
  line-height: 1.75;
  color: #423B38;
  max-width: 62ch;
}
.nx-prose p { margin: 0 0 1.1em; }
.nx-prose b { color: var(--nx-ink-900); font-weight: 700; }

/* ---------------------------------------------------------------------
   Boutons
   --------------------------------------------------------------------- */

.nx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65em;
  padding: 15px 30px;
  border-radius: var(--nx-r-sm);
  font-family: "Figtree", system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transform: translate3d(var(--nx-bx, 0px), var(--nx-by, 0px), 0);
  transition: transform .45s var(--nx-ease), background-color .35s, color .35s, border-color .35s;
  will-change: transform;
}
.nx-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: .12;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--nx-ease);
}
.nx-btn:hover::before { transform: scaleX(1); }
.nx-btn > * { position: relative; }

.nx-btn--primary { background: var(--nx-orange); color: #17110C; }
.nx-btn--primary:hover { background: var(--nx-orange-soft); }
.nx-btn--ghost { border-color: var(--nx-line-2); color: var(--nx-white); }
.nx-btn--ghost:hover { border-color: var(--nx-orange-soft); color: var(--nx-orange-soft); }
.nx-btn--dark { background: var(--nx-ink-900); color: var(--nx-white); }
.nx-btn--dark:hover { background: var(--nx-orange); color: #17110C; }
/* Become member : fond noir, contour orange. Au survol le contour se
   remplit et le texte bascule en sombre. */
.nx-btn--patreon {
  background: var(--nx-ink-950);
  border-color: var(--nx-orange);
  color: var(--nx-orange);
}
.nx-btn--patreon:hover {
  background: var(--nx-orange);
  border-color: var(--nx-orange);
  color: #17110C;
}
.nx-btn--lg { padding: 19px 44px; font-size: .86rem; }

.nx-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding-bottom: 4px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nx-orange);
  white-space: nowrap;
}
.nx-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--nx-ease);
}
.nx-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nx-link span { transition: transform .4s var(--nx-ease); }
.nx-link:hover span { transform: translateX(5px); }

/* ---------------------------------------------------------------------
   Jauge de progression de lecture
   --------------------------------------------------------------------- */

.nx-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1100;
  pointer-events: none;
}
.nx-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(var(--nx-p, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--nx-orange-deep), var(--nx-orange), var(--nx-ember));
}

/* =====================================================================
   HERO — profondeur : les vraies covers flottent en parallaxe
   ===================================================================== */

.nx-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--nx-ink-950);
  padding: 130px 0 110px;
}

.nx-hero__layers {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.nx-hero__sky {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(234, 136, 69, .18) 0%, transparent 55%),
    linear-gradient(180deg, #1A171B 0%, #121013 60%, #0B0A0C 100%),
    url('/images/background.jpg') center / cover no-repeat;
  background-blend-mode: screen, multiply, normal;
  transform: translate3d(var(--nx-dx, 0px), var(--nx-dy, 0px), 0);
  will-change: transform;
}

/* --- Variante « ville en toile de fond » -----------------------------
   Une capture in-game occupe tout le cadre, derrière les covers
   flottantes. Léger flou : c'est ce qui creuse la profondeur de champ et
   fait décoller les covers du décor. Le très lent travelling empêche le
   plan d'être figé. */

.nx-hero__photo {
  position: absolute;
  inset: -10%;
  z-index: 0;
  overflow: hidden;
  transform: translate3d(var(--nx-dx, 0px), var(--nx-dy, 0px), 0);
  will-change: transform;
}

.nx-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
  filter: blur(2.5px) saturate(.88) brightness(.5) contrast(1.06);
  animation: nx-kenburns 40s var(--nx-ease-soft) infinite alternate;
}

@keyframes nx-kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}

/* Balayage de lumière chaude au chargement : passe une fois, puis se tait */
.nx-hero__sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 208, 168, .16) 47%,
    rgba(255, 208, 168, .05) 55%,
    transparent 70%);
  transform: translateX(-100%);
  animation: nx-sweep 2.6s var(--nx-ease) 1.1s 1 forwards;
}
@keyframes nx-sweep {
  to { transform: translateX(100%); }
}

/* Avec la photo, on renforce le voile pour garder le titre lisible */
.nx-hero--photo .nx-hero__vignette {
  background:
    radial-gradient(105% 72% at 50% 48%, transparent 30%, rgba(11, 10, 12, .86) 100%),
    linear-gradient(180deg, rgba(11, 10, 12, .72) 0%, rgba(11, 10, 12, .2) 24%, rgba(11, 10, 12, .35) 62%, var(--nx-ink-900) 100%);
}

/* Les covers se détachent davantage sur une photo que sur un aplat */
.nx-hero--photo .nx-float {
  box-shadow:
    0 44px 96px rgba(0, 0, 0, .78),
    0 0 0 1px rgba(250, 245, 240, .10) inset;
}
.nx-hero--photo .nx-float img { filter: saturate(1) contrast(1.05) brightness(.92); }
.nx-hero--photo .nx-float::after {
  background: linear-gradient(160deg, rgba(234, 136, 69, .06), rgba(11, 10, 12, .34));
}

.nx-hero__glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(1200px, 125vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translate3d(var(--nx-dx, 0px), var(--nx-dy, 0px), 0);
  background: radial-gradient(circle, rgba(234, 136, 69, .22) 0%, rgba(234, 136, 69, .07) 38%, transparent 68%);
  filter: blur(20px);
  will-change: transform;
}

.nx-hero__grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(to right, rgba(250, 245, 240, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(250, 245, 240, .045) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(120% 90% at 50% 45%, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 15%, transparent 72%);
  transform: translate3d(var(--nx-dx, 0px), var(--nx-dy, 0px), 0);
  will-change: transform;
}

.nx-hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 75% at 50% 50%, transparent 42%, rgba(11, 10, 12, .78) 100%),
    linear-gradient(180deg, rgba(11, 10, 12, .6) 0%, transparent 22%, transparent 66%, var(--nx-ink-900) 100%);
}

.nx-hero__grain {
  position: absolute;
  inset: 0;
  opacity: .2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* --- Covers flottantes : nettement plus grandes qu'avant --- */

.nx-hero__float { position: absolute; inset: 0; }

.nx-float {
  position: absolute;
  left: var(--nx-x);
  top: var(--nx-y);
  width: clamp(200px, 24vw, 400px);
  margin: 0;
  border-radius: var(--nx-r-md);
  overflow: hidden;
  box-shadow:
    0 38px 84px rgba(0, 0, 0, .66),
    0 0 0 1px rgba(250, 245, 240, .07) inset;
  opacity: 0;
  will-change: transform;
  /* --nx-dx / --nx-dy : dérive écrite par le JS (souris + scroll) */
  transform:
    translate3d(calc(-50% + var(--nx-dx, 0px)), calc(-50% + var(--nx-dy, 0px)), 0)
    scale(var(--nx-s))
    rotate(var(--nx-r));
  animation: nx-float-in 1.2s var(--nx-ease) forwards;
  animation-delay: calc(340ms + var(--nx-i) * 140ms);
}

.nx-float img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.92) contrast(1.04) brightness(.82);
}

.nx-float::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(234, 136, 69, .10), rgba(11, 10, 12, .55));
}

@keyframes nx-float-in {
  from { opacity: 0; }
  to   { opacity: .8; }
}

/* --- Contenu --- */

.nx-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 clamp(20px, 5vw, 40px);
  max-width: 940px;
}

.nx-hero__logo {
  margin: 0 0 -10px;
  transform: translate3d(var(--nx-dx, 0px), var(--nx-dy, 0px), 0);
}
.nx-hero__logo img {
  display: block;
  margin: 0 auto;
  width: clamp(120px, 15vw, 190px);
  height: auto;
}

.nx-hero__title {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 900;
  font-size: var(--nx-fs-display);
  line-height: .9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
  color: var(--nx-white);
}

.nx-reveal { display: block; overflow: hidden; padding-bottom: .04em; }
.nx-reveal > span {
  display: block;
  transform: translateY(106%);
  animation: nx-rise 1.15s var(--nx-ease) forwards;
}
.nx-reveal:nth-child(1) > span { animation-delay: .18s; }
.nx-reveal:nth-child(2) > span { animation-delay: .30s; }
.nx-reveal:nth-child(3) > span { animation-delay: .42s; }
@keyframes nx-rise { to { transform: translateY(0); } }

.nx-accent {
  background: linear-gradient(96deg, var(--nx-orange) 0%, var(--nx-orange-soft) 48%, var(--nx-ember) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--nx-orange);
}

.nx-hero__hand {
  font-family: "Caveat", cursive;
  font-size: clamp(1.25rem, 2.7vw, 2rem);
  color: var(--nx-orange-soft);
  transform: rotate(-1.6deg);
  margin: 16px 0 0;
  opacity: 0;
  animation: nx-fade-up 1s var(--nx-ease) .68s forwards;
}

.nx-hero__lede {
  max-width: 52ch;
  margin: 24px auto 0;
  font-size: var(--nx-fs-lede);
  line-height: 1.66;
  color: var(--nx-mute);
  opacity: 0;
  animation: nx-fade-up 1s var(--nx-ease) .78s forwards;
}

.nx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 36px 0 0;
  opacity: 0;
  animation: nx-fade-up 1s var(--nx-ease) .9s forwards;
}

@keyframes nx-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nx-hero__cue {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: var(--nx-fs-micro);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nx-mute-soft);
  opacity: 0;
  animation: nx-fade-up 1s var(--nx-ease) 1.05s forwards;
}
.nx-hero__cue-line {
  display: block;
  width: 1px;
  height: 48px;
  background: var(--nx-line-2);
  overflow: hidden;
  position: relative;
}
.nx-hero__cue-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--nx-orange));
  transform: translateY(-100%);
  animation: nx-cue 2.3s var(--nx-ease-soft) infinite;
}
@keyframes nx-cue {
  0%   { transform: translateY(-100%); }
  62%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* =====================================================================
   CHIFFRES — découpage par filets fins, façon légende de plan

   Chaque cellule est séparée par un filet vertical d'un pixel, et la
   bande entière est bornée en haut et en bas. Les filets sont dessinés
   avec les gouttières de la grille (gap + fond), donc pas de bordure
   en trop à la dernière colonne, quel que soit le nombre de colonnes.
   ===================================================================== */

.nx-stats {
  background: var(--nx-ink-900);
  padding: clamp(46px, 6vw, 78px) 0;
}

.nx-stats__inner {
  border-top: 1px solid var(--nx-line-2);
  border-bottom: 1px solid var(--nx-line-2);
  padding: clamp(30px, 4vw, 52px) 0;
}

.nx-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--nx-line);   /* le fond transparaît dans les gouttières */
}

.nx-stat {
  background: var(--nx-ink-900);
  padding: 4px clamp(16px, 2.5vw, 34px);
  text-align: left;
}

/* Repère de cote : petit tiret au-dessus du chiffre */
.nx-stat__tick {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--nx-orange);
  margin-bottom: 16px;
}

.nx-stat__num {
  display: block;
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -0.05em;
  color: var(--nx-white);
  font-variant-numeric: tabular-nums;
}

.nx-stat__label {
  display: block;
  margin-top: 12px;
  font-size: var(--nx-fs-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nx-mute-soft);
}

/* =====================================================================
   ASSETS — composant réel du site (.cards / .card), version condensée
   ===================================================================== */

.nx-assets {
  background: var(--nx-ink-900);
  padding: var(--nx-space-section) 0;
}

/* En-tête de section.
   ⚠️ Ne JAMAIS utiliser la balise <header> ici : style.css:190 contient un
   sélecteur d'élément nu `header { position:fixed; top:0; transform:
   translateY(-50px); background:#222; z-index:1000 }` qui arracherait le
   bloc du flux et le collerait en haut de la fenêtre. On utilise <div>,
   et la réinitialisation ci-dessous sert de garde-fou. */
.nx-head {
  position: static;
  transform: none;
  background: none;
  width: auto;
  z-index: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: var(--nx-space-block);
  text-align: left;
}
.nx-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- Cartes d'assets : système natif du site ---
   .cards / .card / .card-inner viennent de style.css, avec leur zoom au
   survol, la remontée du titre et l'apparition des actions. On compense
   ici la marge de 10px des cartes pour aligner la grille sur .nx-wrap. */
.nx-assets .cards { margin: 0 -10px; }

/* Parallaxe interne : l'image glisse verticalement dans son cadre au fil
   du défilement. --nx-cy est écrit par le JS (borné à ±8px côté JS).

   Deux précautions :
   - on exclut .blur, dont style.css pousse l'échelle à 1.2 / 1.1 pour les
     cartes verrouillées ; à spécificité égale mon fichier gagnerait et
     casserait ce réglage ;
   - au survol l'échelle revient à 1, il n'y a donc plus de débord pour
     translater : on annule la dérive, la transition s'en charge. */
.nx-assets .card:not(.blur) .card-inner::before {
  transform: scale(1.1) translate3d(0, var(--nx-cy, 0px), 0);
}
.nx-assets .card:not(.blur):hover .card-inner::before {
  transform: scale(1);
}

/* =====================================================================
   RESPIRATION — bande plein cadre en parallaxe, plus haute
   ===================================================================== */

.nx-interlude {
  position: relative;
  min-height: clamp(440px, 78vh, 780px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--nx-ink-950);
}

.nx-interlude__media {
  position: absolute;
  top: -26%;
  left: 0;
  width: 100%;
  height: 152%;
  z-index: 0;
  transform: translate3d(0, var(--nx-dy, 0px), 0);
  will-change: transform;
}
.nx-interlude__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.85) brightness(.6);
}

.nx-interlude__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--nx-ink-900) 0%, transparent 20%, transparent 80%, var(--nx-ink-900) 100%),
    radial-gradient(80% 70% at 50% 50%, rgba(11, 10, 12, .5), transparent 75%);
}

.nx-interlude__text {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0 clamp(20px, 6vw, 90px);
}
.nx-interlude__text q {
  display: block;
  font-size: clamp(2.2rem, 6.4vw, 6.2rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  quotes: none;
  color: var(--nx-white);
  /* largeur mesurée sur sa propre taille : deux lignes bien centrées */
  max-width: 15ch;
  margin: 0 auto;
  text-wrap: balance;
}
.nx-interlude__text .nx-hand {
  margin-top: 20px;
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  text-align: center;
}

/* =====================================================================
   ADHÉSION PATREON
   ===================================================================== */

.nx-member {
  position: relative;
  background:
    radial-gradient(85% 55% at 50% 0%, rgba(234, 136, 69, .14) 0%, transparent 62%),
    var(--nx-ink-800);
  padding: var(--nx-space-section) 0;
  overflow: hidden;
}
.nx-member::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nx-orange), transparent);
}

.nx-label--patreon { color: #FF8A91; }
.nx-label--patreon::before { background: #FF424D; }

body.index-new {
  --nx-patreon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.957 7.21c-.004-3.064-2.391-5.576-5.191-6.482-3.478-1.125-8.064-.962-11.384.604C2.357 3.231 1.093 7.391 1.046 11.54c-.039 3.411.302 12.396 5.369 12.46 3.765.047 4.326-4.804 6.068-7.141 1.24-1.662 2.836-2.132 4.801-2.618 3.376-.836 5.678-3.501 5.673-7.031Z'/%3E%3C/svg%3E");
}

.nx-patreon-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--nx-patreon-svg) center / contain no-repeat;
  mask: var(--nx-patreon-svg) center / contain no-repeat;
}

/* --- Bénéfices --- */

.nx-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--nx-line);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-md);
  overflow: hidden;
  margin-bottom: var(--nx-space-block);
}

.nx-benefit {
  padding: 30px 26px;
  background: var(--nx-ink-800);
  transition: background-color .45s var(--nx-ease);
}
.nx-benefit:hover { background: var(--nx-ink-700); }

.nx-benefit__icon {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 18px;
  opacity: .85;
  transition: transform .5s var(--nx-ease), opacity .4s;
}
.nx-benefit:hover .nx-benefit__icon { transform: translateY(-3px); opacity: 1; }

.nx-benefit__title {
  margin: 0 0 9px;
  font-size: var(--nx-fs-h3);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nx-white);
}
.nx-benefit__text {
  margin: 0;
  font-size: .86rem;
  line-height: 1.65;
  color: var(--nx-mute);
}

/* --- Paliers --- */

.nx-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  align-items: start;
}

.nx-tier {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--nx-r-lg);
  background: var(--nx-ink-900);
  border: 1px solid var(--nx-line-2);
  transition: border-color .45s, transform .5s var(--nx-ease);
}
.nx-tier:hover { transform: translateY(-6px); }
.nx-tier.is-featured {
  border-color: var(--nx-orange);
  background: linear-gradient(180deg, rgba(234, 136, 69, .11) 0%, transparent 58%), var(--nx-ink-900);
}
.nx-tier.is-current { border-color: var(--nx-orange-soft); }

.nx-tier__flag {
  position: absolute;
  top: -10px;
  left: 28px;
  padding: 4px 12px;
  border-radius: var(--nx-r-sm);
  background: var(--nx-orange);
  color: #17110C;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.nx-tier__flag--current { left: auto; right: 28px; background: var(--nx-white); }

.nx-tier__name {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--nx-white);
}

.nx-tier__votes {
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--nx-line);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--nx-mute-soft);
}
.nx-tier__votes strong {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--nx-orange);
  margin-right: .3em;
  font-variant-numeric: tabular-nums;
}

.nx-tier__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nx-tier__perks li {
  position: relative;
  padding-left: 22px;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--nx-mute);
}
.nx-tier__perks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .4em;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--nx-orange);
  border-bottom: 1.5px solid var(--nx-orange);
  transform: rotate(-45deg);
}

.nx-member__cta { margin-top: var(--nx-space-block); text-align: center; }
.nx-member__already { margin: 18px 0 0; font-size: .85rem; color: var(--nx-mute-soft); }
.nx-member__already a {
  color: var(--nx-orange-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================================
   PACKS
   ===================================================================== */

.nx-packs {
  background: var(--nx-ink-900);
  padding: var(--nx-space-section) 0 0;
}

.nx-packs__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 2px;
  margin-top: var(--nx-space-block);
}

.nx-pack {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(330px, 40vw, 500px);
  padding: 36px;
  overflow: hidden;
  text-decoration: none;
  color: var(--nx-white);
  isolation: isolate;
}

.nx-pack__img {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  filter: saturate(.8) brightness(.66);
  transition: transform 1.3s var(--nx-ease), filter .7s var(--nx-ease);
  will-change: transform;
}
.nx-pack:hover .nx-pack__img { transform: scale(1.14); filter: saturate(1) brightness(.8); }

.nx-pack__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 10, 12, .12) 26%, rgba(11, 10, 12, .9) 100%);
}

.nx-pack__text { position: relative; z-index: 1; }

.nx-pack__note {
  display: block;
  font-size: var(--nx-fs-micro);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nx-orange-soft);
  margin-bottom: 10px;
}
.nx-pack__title {
  display: block;
  font-size: clamp(1.55rem, 2.7vw, 2.3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.nx-pack__cta {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 3px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--nx-mute);
  border-bottom: 1.5px solid var(--nx-orange);
  transition: color .35s;
}
.nx-pack:hover .nx-pack__cta { color: var(--nx-white); }

/* =====================================================================
   À PROPOS — image à gauche (remplace l'ancien bloc citation noir)
   ===================================================================== */

.nx-about {
  background: linear-gradient(180deg, var(--nx-paper) 0%, var(--nx-cream) 100%);
  padding: var(--nx-space-section) 0;
  color: var(--nx-ink-900);
}

.nx-about__grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: start;
}

.nx-about__figure {
  position: sticky;
  top: 96px;
  margin: 0;
  border-radius: var(--nx-r-lg);
  overflow: hidden;
  background: #E9DED5;
  box-shadow: 0 24px 60px rgba(60, 35, 15, .16);
}

.nx-about__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.nx-about__text .nx-prose { margin: 26px 0 30px; }

/* =====================================================================
   FOOTER — composant de style.css, réaccordé
   ===================================================================== */

body.index-new footer.contact {
  background: var(--nx-ink-950);
  border-top: 1px solid var(--nx-line);
}
body.index-new footer .social a svg { transition: transform .45s var(--nx-ease); }
body.index-new footer .social a:hover svg { transform: translateY(-4px) scale(1.1); }

body.index-new .footer-bottom {
  border-top: 1px solid var(--nx-line);
  padding-top: 24px;
  margin-top: 14px;
}
body.index-new .footer-bottom p {
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--nx-mute-soft);
}

/* =====================================================================
   RÉVÉLATIONS AU SCROLL

   L'état masqué n'est appliqué QUE si le JS est confirmé présent
   (classe nx-js posée en <head>). Sans JS, rien n'est masqué.
   ===================================================================== */

html.nx-js .nx-io {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .95s var(--nx-ease) var(--nx-delay, 0ms),
    transform .95s var(--nx-ease) var(--nx-delay, 0ms);
}
html.nx-js .nx-io.is-in { opacity: 1; transform: translateY(0); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* Tablette et mobile : on ne montre que 4 assets sur les 8 chargés.
   Masquage en CSS plutôt qu'une seconde requête : le serveur ne sait pas
   quelle largeur d'écran il sert. */
@media (max-width: 1024px) {
  .nx-assets .card:nth-child(n+5) { display: none; }
}

@media (max-width: 900px) {
  .nx-about__grid { grid-template-columns: 1fr; }
  .nx-about__figure { position: static; }
}

@media (max-width: 760px) {
  /* Les covers flottantes deviennent illisibles en petit : on n'en garde
     que deux, en fond discret, pour préserver la profondeur. */
  .nx-float { width: 150px; }
  .nx-float:nth-child(n+3) { display: none; }
  .nx-hero { padding: 108px 0 90px; }
  .nx-hero__cue { display: none; }
}

@media (max-width: 700px) {
  .nx-head { flex-direction: column; align-items: flex-start; }
  .nx-head--center { align-items: center; }
  .nx-pack { min-height: 260px; padding: 26px; }
  .nx-stat { padding: 4px 12px; }
  .nx-stat__label { letter-spacing: .1em; }
}

/* =====================================================================
   ACCESSIBILITÉ — mouvement réduit
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.index-new *,
  body.index-new *::before,
  body.index-new *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .nx-float { opacity: .58; }
  .nx-hero__photo img { animation: none; transform: none; }
  .nx-hero__sweep { display: none; }
  .nx-assets .card:not(.blur) .card-inner::before { transform: scale(1.1); }
  .nx-reveal > span { transform: none; }
  .nx-hero__hand,
  .nx-hero__lede,
  .nx-hero__actions,
  .nx-hero__cue { opacity: 1; }
  html.nx-js .nx-io { opacity: 1; transform: none; }
}