/* Accueil : la charte poussée en interface de Night City.
   Tout vient des variables de nightshift.css : coins coupés, angle -12°,
   décalage cyan des boutons, magenta pour l'action. */

html, body { overflow-x: clip; }
.nx-conteneur { width: 100%; max-width: calc(var(--largeur-max) + 2 * var(--marge-page)); margin-inline: auto; padding-inline: var(--marge-page); }

/* ---------- Premier écran ---------- */
.nx-hero { position: relative; isolation: isolate; overflow: clip; padding-block: var(--e-9) calc(var(--e-9) + var(--e-8)); }
/* Le logo, très flou, sert de source de lumière derrière la scène */
.nx-hero__halo { position: absolute; z-index: -1; top: -20%; right: -15%; width: min(70%, 900px); opacity: .35; filter: blur(90px) saturate(1.4); pointer-events: none; }
.nx-hero__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-8); align-items: center; }
.nx-titre { margin: 0; font: italic 700 clamp(2.75rem, 6vw, 5.25rem)/.95 var(--police-titre); letter-spacing: -.01em; text-transform: uppercase; color: var(--texte); }
.nx-titre span { display: block; color: var(--magenta-clair); }
.nx-hero .ns-chapo { margin-top: var(--e-6); }
.nx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5) var(--e-6); margin-top: var(--e-7); }

/* Le logo dans un cadre coupé, doublé d'un calque cyan décalé (le geste des boutons) */
/* Coin coupé en haut à droite et en bas à gauche */
.nx-cadre { --forme: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px)); position: relative; isolation: isolate; margin: 0 0 0 auto; max-width: 480px; }
.nx-cadre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cyan); transform: translate(14px, 14px); clip-path: var(--forme); }
.nx-cadre__bord { padding: 1px; background: var(--trait-fort); clip-path: var(--forme); }
.nx-cadre__bord img { width: 100%; background: var(--fond); clip-path: var(--forme); }

/* ---------- Fiche du serveur : un panneau d'interface à cheval sur la diagonale ---------- */
.nx-fiche { position: relative; z-index: 1; margin-top: calc(-1 * var(--e-9)); padding: 1px; background: var(--trait-fort); }
.nx-fiche dl { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; background: var(--panneau); }
/* Barre magenta inclinée qui ouvre le panneau */
.nx-fiche dl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8px; background: var(--magenta); }
.nx-fiche dl > div { padding: var(--e-5) var(--e-6); }
.nx-fiche dl > div:first-child { padding-left: calc(var(--e-6) + 8px); }
.nx-fiche dl > div + div { border-left: 1px solid var(--trait); }
.nx-fiche dt { font: 500 .8125rem/1.4 var(--police-titre); letter-spacing: .02em; color: var(--cyan); }
.nx-fiche dd { margin: var(--e-2) 0 0; font: 600 1.375rem/1.2 var(--police-titre); color: var(--texte); }
.nx-fiche .nx-ouvert { color: var(--succes); }

/* ---------- Sections à bord incliné ---------- */
.nx-pente { --pente: 72px; position: relative; isolation: isolate; }
.nx-pente::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fond-eleve); clip-path: polygon(0 var(--pente), 100% 0, 100% 100%, 0 100%); }
.nx-pente--inverse::before { clip-path: polygon(0 0, 100% var(--pente), 100% 100%, 0 100%); }

/* ---------- Ce qui t'attend : quatre panneaux ---------- */
.nx-attente { padding-bottom: var(--e-9); }
.nx-tete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-8); align-items: end; margin-top: var(--e-9); }
.nx-tete h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.nx-tete .ns-chapo { margin: 0; }
.nx-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); margin: var(--e-7) 0 0; }
.nx-carte { --forme: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); padding: 1px; background: var(--trait); clip-path: var(--forme); }
.nx-carte > div { height: 100%; padding: var(--e-6); background: var(--panneau); clip-path: var(--forme); }
.nx-carte dt { display: flex; align-items: center; gap: var(--e-3); font: 600 1.375rem/1.25 var(--police-titre); color: var(--texte); }
.nx-carte dt::before { content: ""; flex: none; width: 6px; height: 24px; background: var(--magenta); transform: skewX(var(--inclinaison)); }
.nx-carte dd { margin: var(--e-3) 0 0; color: var(--texte-doux); }

/* ---------- Étapes : un parcours, trois balises ---------- */
.nx-etapes { padding-block: var(--e-9); }
.nx-etapes h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.nx-etapes ol { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-7); margin: var(--e-7) 0 0; padding: 0; list-style: none; counter-reset: etape; }
/* Le tracé qui relie les balises */
.nx-etapes ol::before { content: ""; position: absolute; top: 28px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--magenta), var(--trait-fort) 40%); }
.nx-etapes li { position: relative; counter-increment: etape; }
.nx-etapes li::before { content: counter(etape); display: grid; place-items: center; width: 72px; height: 56px; font: italic 700 1.75rem/1 var(--police-titre); color: var(--cyan); background: var(--fond); border: 1px solid var(--cyan); transform: skewX(var(--inclinaison)); }
.nx-etapes li:first-child::before { background: var(--magenta); border-color: var(--magenta); color: var(--encre); }
.nx-etapes h3 { margin-top: var(--e-5); font-size: 1.375rem; }
.nx-etapes li p { margin-top: var(--e-2); color: var(--texte-doux); }
.nx-etapes__suite { margin-top: var(--e-7); }

/* ---------- Journal : la dernière dépêche ---------- */
.nx-journal { padding-block: var(--e-10) var(--e-9); }
.nx-journal__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-4); }
.nx-journal__tete h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.nx-journal .ns-journal { margin-top: var(--e-6); }
.nx-journal .ns-journal li a { --c: 24px; position: relative; grid-template-columns: 136px minmax(0, 1fr) auto; padding: var(--e-6) var(--e-6) var(--e-6) calc(var(--e-6) + 8px); border: 0; background: var(--panneau); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%); transition: background-color var(--duree-rapide) linear; }
.nx-journal .ns-journal li a::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8px; background: var(--magenta); }
.nx-journal .ns-journal li a:hover { background: var(--panneau-survol); }
.nx-journal .ns-journal__titre { font-size: 1.75rem; }

/* ---------- Écrans étroits ---------- */
@media (max-width: 900px) {
  .nx-hero { padding-block: var(--e-7) calc(var(--e-8) + var(--e-7)); }
  .nx-hero__grille { grid-template-columns: minmax(0, 1fr); gap: var(--e-7); }
  .nx-cadre { order: -1; max-width: 280px; margin: 0; }
  .nx-hero__halo { width: 120%; top: -10%; right: -40%; }
  .nx-fiche { margin-top: calc(-1 * var(--e-8)); }
  .nx-fiche dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-fiche dl > div:nth-child(3) { border-left: 0; padding-left: calc(var(--e-6) + 8px); }
  .nx-fiche dl > div:nth-child(n+3) { border-top: 1px solid var(--trait); }
  .nx-pente { --pente: 40px; }
  .nx-tete { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); margin-top: var(--e-8); }
  .nx-cartes { grid-template-columns: minmax(0, 1fr); }
  .nx-etapes ol { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .nx-etapes ol::before { display: none; }
  .nx-journal .ns-journal li a { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
}
@media (max-width: 520px) {
  .nx-fiche dl { grid-template-columns: minmax(0, 1fr); }
  .nx-fiche dl > div, .nx-fiche dl > div:first-child, .nx-fiche dl > div:nth-child(3) { padding-left: calc(var(--e-5) + 8px); border-left: 0; }
  .nx-fiche dl > div + div { border-top: 1px solid var(--trait); }
  .nx-carte > div { padding: var(--e-5); }
}

/* ---------- Mouvement ----------
   Tout joue une fois, sauf le halo qui respire très lentement. Rien ne bouge
   avec prefers-reduced-motion, et sans script tout reste visible. */
@media (prefers-reduced-motion: no-preference) {
  /* Premier écran : la scène s'allume */
  .nx-titre { animation: nx-entree 700ms var(--courbe) both; }
  .nx-titre span { animation: nx-balayage 800ms var(--courbe) 250ms both, nx-glitch 420ms steps(1) 1150ms; }
  .nx-hero .ns-chapo { animation: nx-entree 700ms var(--courbe) 400ms both; }
  .nx-hero__actions { animation: nx-entree 700ms var(--courbe) 500ms both; }
  .nx-cadre__bord { animation: nx-apparition 900ms var(--courbe) 150ms both; }
  .nx-cadre::before { animation: nx-decalage 600ms var(--courbe) 750ms both; }
  .nx-hero__halo { animation: nx-halo 16s ease-in-out infinite alternate; }
  .nx-fiche { animation: nx-entree 700ms var(--courbe) 650ms both; }
  .nx-fiche dl::before { transform-origin: top; animation: nx-jauge 600ms var(--courbe) 1000ms both; }

  /* Au défilement : les blocs montent, en cascade */
  .nx-js [data-nx] { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--courbe), transform 600ms var(--courbe); transition-delay: calc(var(--i, 0) * 90ms); }
  .nx-js [data-nx].vu { opacity: 1; transform: none; }
  /* Le tracé des étapes se dessine de gauche à droite */
  .nx-js [data-nx-trace]::before { transform: scaleX(0); transform-origin: left; transition: transform 1200ms var(--courbe) 150ms; }
  .nx-js [data-nx-trace].vu::before { transform: none; }

  /* Survol de la dépêche : la barre magenta s'élargit */
  .nx-journal .ns-journal li a::before { transform-origin: left; transition: transform var(--duree) var(--courbe); }
  .nx-journal .ns-journal li a:hover::before, .nx-journal .ns-journal li a:focus-visible::before { transform: scaleX(1.75); }
}
@keyframes nx-entree { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes nx-balayage { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nx-glitch {
  0% { transform: translateX(2px); text-shadow: -3px 0 var(--cyan); }
  25% { transform: translateX(-2px); text-shadow: 3px 0 var(--cyan); }
  50% { transform: none; text-shadow: none; }
  75% { transform: translateX(1px); text-shadow: -2px 0 var(--cyan); }
  100% { transform: none; text-shadow: none; }
}
@keyframes nx-apparition { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nx-decalage { from { opacity: 0; transform: translate(0, 0); } to { opacity: 1; transform: translate(14px, 14px); } }
@keyframes nx-halo { from { opacity: .28; transform: translate(0, 0); } to { opacity: .42; transform: translate(-3%, 4%); } }
@keyframes nx-jauge { from { transform: scaleY(0); } to { transform: none; } }

/* ---------- Scènes au défilement ----------
   Actives seulement quand accueil.js pose .nx-scroll sur <html> (grand écran,
   mouvement autorisé). --p va de 0 à 1 pendant que la scène reste à l'écran. */
.nx-ville, .nx-final, .nx-jauge { display: none; }
.nx-scroll .nx-scene__colle { position: sticky; top: var(--hauteur-nav); height: calc(100dvh - var(--hauteur-nav)); }

/* Scène 1 : on entre dans la ville. Le logo s'éteint comme un vieil écran :
   il se referme en une ligne lumineuse, puis la ligne se résorbe au centre. */
.nx-scroll .nx-scene--entree {
  height: calc(160dvh - var(--hauteur-nav));
  --a: clamp(0, calc((var(--p, 0) - .08) / .3), 1);   /* fermeture verticale */
  --b: clamp(0, calc((var(--p, 0) - .36) / .14), 1);  /* résorption horizontale */
}
.nx-scroll .nx-scene--entree .nx-scene__colle { display: grid; align-items: center; overflow: clip; isolation: isolate; }
/* La scène rogne déjà aux bords de l'écran : rogner aussi la section découperait le halo en rectangle */
.nx-scroll .nx-hero { padding-block: var(--e-6) var(--e-8); overflow: visible; }
.nx-scroll .nx-ville { display: block; position: absolute; inset: 0; z-index: -1; opacity: calc(var(--p, 0) * 1.4); pointer-events: none; }
.nx-scroll .nx-ville img { width: 100%; height: 100%; object-fit: cover; filter: blur(8px) brightness(.4) saturate(1.3); transform: scale(calc(1.35 - var(--p, 0) * .35)); }
.nx-scroll .nx-scene--entree .nx-hero__grille > div:first-child { transform: translateY(calc(var(--p, 0) * -18vh)); opacity: calc(1 - var(--p, 0) * 2.2); }
.nx-scroll .nx-scene--entree .nx-cadre {
  clip-path: inset(calc(var(--a) * 49.7% - 24px * (1 - var(--a))) calc(var(--b) * 50% - 24px * (1 - var(--b))));
  filter: brightness(calc(1 + var(--a) * 2.2)) saturate(calc(1 + var(--a)));
  transform: scaleX(calc(1 + var(--a) * .08));
  opacity: calc(1 - var(--b) * .9);
}
/* Le calque cyan se décroche pendant la fermeture */
.nx-scroll .nx-scene--entree .nx-cadre::before { translate: calc(var(--a) * 26px) calc(var(--a) * -10px); opacity: calc(1 - var(--a) * 1.4); }
.nx-scroll .nx-scene--entree.passe .nx-hero { pointer-events: none; }
.nx-scroll .nx-scene--entree .nx-hero:focus-within .nx-hero__grille > div:first-child { opacity: 1; transform: none; }
.nx-scroll .nx-final {
  display: grid; place-items: center; position: absolute; inset: 0; margin: 0; padding-inline: var(--marge-page);
  font: italic 700 clamp(3rem, 9vw, 8rem)/.9 var(--police-titre); text-transform: uppercase; text-align: center;
  color: var(--magenta-clair); text-shadow: 6px 6px 0 var(--cyan-sombre);
  opacity: calc((var(--p, 0) - .5) * 2.6); transform: scale(calc(1.2 - (var(--p, 0) - .5) * .4));
  clip-path: inset(0 calc((1 - clamp(0, calc((var(--p, 0) - .48) / .3), 1)) * 50%));
  pointer-events: none;
}

/* Scène 2 : les panneaux s'empilent dans un viseur */
/* Pleine largeur : la scène sort du conteneur et occupe tout l'écran */
.nx-scroll .nx-scene--deck { height: calc(220dvh - var(--hauteur-nav)); margin-top: var(--e-8); margin-inline: calc(50% - 50vw); }
.nx-scroll .nx-deck { isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-8); align-items: center; padding: var(--e-7) max(calc(var(--marge-page) + var(--e-7)), calc((100vw - var(--largeur-max)) / 2)); }
/* Coins de viseur : quatre équerres cyan autour de la scène */
.nx-scroll .nx-deck::before {
  content: ""; position: absolute; inset: var(--e-5) var(--marge-page); z-index: -1; pointer-events: none; --l: 56px; --t: 2px; --c: var(--cyan);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l) no-repeat;
  opacity: .7;
}
/* La ville en lumière de fond, très sombre, qui glisse lentement avec la scène */
.nx-ambiance { display: none; }
.nx-scroll .nx-ambiance { display: block; position: absolute; inset: 0; z-index: -2; overflow: clip; pointer-events: none; }
.nx-scroll .nx-ambiance img { position: absolute; right: -5%; top: 50%; width: 65%; opacity: .26; filter: blur(60px) saturate(1.4); transform: translateY(calc(-50% + (var(--p, 0) - .5) * -120px)); }
.nx-scroll .nx-deck .nx-tete { display: block; margin: 0; }
.nx-scroll .nx-deck .nx-tete .ns-chapo { margin-top: var(--e-5); }
.nx-scroll .nx-jauge { display: block; position: relative; max-width: 280px; height: 6px; margin-top: var(--e-7); background: var(--trait); transform: skewX(var(--inclinaison)); }
.nx-scroll .nx-jauge span { position: absolute; inset: 0; background: var(--magenta); transform-origin: left; transform: scaleX(var(--p, 0)); }
/* Sommaire des quatre points : l'actif s'allume */
.nx-index { display: none; }
.nx-scroll .nx-index { display: grid; gap: var(--e-3); margin: var(--e-6) 0 0; padding: 0; list-style: none; counter-reset: idx; }
.nx-scroll .nx-index li { counter-increment: idx; display: flex; align-items: baseline; gap: var(--e-3); font: 500 1rem/1.3 var(--police-titre); color: var(--texte-doux); opacity: .55; transition: color 300ms linear, opacity 300ms linear, transform 300ms var(--courbe); }
.nx-scroll .nx-index li::before { content: counter(idx, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--trait-fort); transition: color 300ms linear; }
.nx-scroll .nx-index li.actif { color: var(--texte); opacity: 1; transform: translateX(8px); }
.nx-scroll .nx-index li.actif::before { color: var(--magenta-clair); }
.nx-scroll .nx-index li.lu { opacity: .85; }
.nx-scroll .nx-deck .nx-cartes { grid-template-columns: minmax(0, 1fr); margin: 0; counter-reset: carte; }
.nx-scroll .nx-deck .nx-carte { grid-area: 1 / 1; counter-increment: carte; transition: opacity 500ms var(--courbe), transform 500ms var(--courbe); }
.nx-scroll .nx-deck .nx-carte > div { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(46dvh, 380px); padding: var(--e-7); overflow: hidden; }
/* Grand numéro en creux dans le coin du panneau */
.nx-scroll .nx-deck .nx-carte > div::after { content: counter(carte, decimal-leading-zero); position: absolute; top: var(--e-4); right: var(--e-6); font: italic 700 clamp(5rem, 9vw, 8rem)/1 var(--police-titre); color: transparent; -webkit-text-stroke: 1px var(--trait-fort); pointer-events: none; }
.nx-scroll .nx-deck .nx-carte dt { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.nx-scroll .nx-deck .nx-carte dd { margin-top: var(--e-4); font-size: 1.125rem; max-width: 46ch; }
.nx-scroll .nx-deck .nx-carte[data-etat="apres"] { opacity: 0; transform: translateY(60px) rotate(1.5deg); }
.nx-scroll .nx-deck .nx-carte[data-etat="actif"] { opacity: 1; transform: none; }
.nx-scroll .nx-deck .nx-carte[data-etat="avant"] { opacity: calc(1 - var(--k, 1) * .3); transform: translateY(calc(var(--k, 1) * -18px)) scale(calc(1 - var(--k, 1) * .05)); }

/* Scène 3 : le parcours se joue tout seul quand il arrive à l'écran.
   Chaque liaison part de la balise allumée et arrive pile quand la suivante
   s'allume : balise 1 à 0,2 s, liaison jusqu'à 1,2 s, balise 2, liaison
   jusqu'à 2,2 s, balise 3, puis le bouton. */
.nx-route li { --d: 0s; }
.nx-route li:nth-child(2) { --d: 1.2s; }
.nx-route li:nth-child(3) { --d: 2.2s; }
@media (prefers-reduced-motion: no-preference) {
  /* Plus de tracé continu : une liaison par étape, de sa balise à la suivante */
  .nx-auto .nx-route::before { display: none; }
  .nx-auto .nx-route li:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: 84px; right: calc(-1 * var(--e-7) + 4px); height: 2px; background: linear-gradient(90deg, var(--cyan), var(--magenta)); transform: scaleX(0); transform-origin: left; }
  .nx-auto .nx-route.joue li:not(:last-child)::after { transform: none; transition: transform 600ms linear calc(var(--d) + 400ms); }
  /* Avant : seules les balises éteintes attendent, le texte est caché */
  .nx-auto .nx-route li::before { color: var(--texte-doux); border-color: var(--trait-fort); background: var(--fond); }
  .nx-auto .nx-route li > * { opacity: 0; transform: translateY(12px); }
  .nx-auto .nx-route.joue li > * { opacity: 1; transform: none; transition: opacity 450ms var(--courbe) calc(var(--d) + 150ms), transform 450ms var(--courbe) calc(var(--d) + 150ms); }
  .nx-auto .nx-route.joue li > p { transition-delay: calc(var(--d) + 250ms); }
  .nx-auto .nx-route.joue li::before { animation: nx-balise 600ms var(--courbe) var(--d) both; }
  .nx-auto .nx-route.joue li:last-child::before { animation-name: nx-balise-fin; }
  .nx-auto .nx-etapes__suite { opacity: 0; transform: translateY(12px); }
  .nx-auto .nx-route.joue + .nx-etapes__suite { opacity: 1; transform: none; transition: opacity 450ms var(--courbe) 2.8s, transform 450ms var(--courbe) 2.8s; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .nx-auto .nx-route li:not(:last-child)::after { display: none; }
}
/* La balise flashe en magenta quand elle s'allume, puis reste cyan */
@keyframes nx-balise {
  0% { color: var(--texte-doux); border-color: var(--trait-fort); background: var(--fond); transform: skewX(var(--inclinaison)) scale(1); }
  35% { color: var(--encre); border-color: var(--magenta); background: var(--magenta); transform: skewX(var(--inclinaison)) scale(1.12); }
  100% { color: var(--cyan); border-color: var(--cyan); background: var(--fond); transform: skewX(var(--inclinaison)) scale(1); }
}
/* La dernière reste magenta : c'est là que tu arrives */
@keyframes nx-balise-fin {
  0% { color: var(--texte-doux); border-color: var(--trait-fort); background: var(--fond); transform: skewX(var(--inclinaison)) scale(1); }
  45% { transform: skewX(var(--inclinaison)) scale(1.12); }
  100% { color: var(--encre); border-color: var(--magenta); background: var(--magenta); transform: skewX(var(--inclinaison)) scale(1); }
}