/* ==========================================================================
   Midnight — liens de pages en transparence (.page-nav), voir js/page-nav.js
   En haut à gauche (en bas à gauche sous 700 px). Aucun fond, aucune bordure, aucun flou.
   Animations en transform / opacity uniquement.
   ========================================================================== */

.page-nav {
  --pn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pn-ink: #fff;
  --pn-hit: 40px;                              /* hauteur minimale de la zone cliquable */
  position: fixed;
  top: calc(28px + env(safe-area-inset-top, 0px));
  left: calc(max(20px, 2.5vw) + env(safe-area-inset-left, 0px));   /* légèrement décalé vers la gauche */
  z-index: 40;                                 /* au-dessus du contenu, sous le visionneur de Projects (45 / 50) */
  margin: 0;
  padding: 0;
  font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--pn-ink);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);   /* lisible sur les pages sombres et la vidéo */
  pointer-events: none;                        /* seul le texte des liens est cliquable */
  transition: opacity 0.3s ease, color 0.3s linear;
}
html[data-nav-tone="light"] .page-nav { --pn-ink: #050505; text-shadow: none; }

.pn-list { margin: 0; padding: 0; list-style: none; }
.pn-item { display: block; }
.pn-link {
  --pn-size: clamp(16px, 1.45vw, 24px);
  --pn-lh: 1.35;
  --pn-pad: max(0px, calc((var(--pn-hit) - var(--pn-size) * var(--pn-lh)) / 2));
  position: relative;
  display: inline-block;
  padding: var(--pn-pad) 0;
  font-size: var(--pn-size);
  line-height: var(--pn-lh);
  color: inherit;
  text-decoration: none;
  opacity: 0.28;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s ease, transform 0.4s var(--pn-ease);
}
.page-nav--landing .pn-link { opacity: 0.55; }
.pn-item.is-current .pn-link { --pn-size: clamp(30px, 3vw, 52px); --pn-lh: 1; margin-bottom: 8px; opacity: 1; }
/* Autres pages que la landing : liens plus petits */
.page-nav:not(.page-nav--landing) .pn-link { --pn-size: clamp(14px, 1.2vw, 20px); }
.page-nav:not(.page-nav--landing) .pn-item.is-current .pn-link { --pn-size: clamp(26px, 2.5vw, 44px); }

/* Masque d'entrée : chaque lien monte depuis sous sa ligne */
.pn-mask { display: block; overflow: hidden; padding-top: 4px; margin-top: -4px; }   /* 4 px pour le petit saut des lettres */
.pn-in { display: block; white-space: nowrap; }
.pn-c { display: inline-block; }
html.js .page-nav:not(.is-in) .pn-in { transform: translateY(110%); }
.page-nav.is-in .pn-in {
  transform: none;
  transition: transform 0.7s var(--pn-ease);
  transition-delay: calc(var(--k, 0) * 70ms);
}
/* Autres pages : le nom courant (0,8 s) puis les 4 autres liens, l'un après l'autre */
.page-nav:not(.page-nav--landing).is-in .pn-item.is-current .pn-in { transition-duration: 0.8s; transition-delay: 0ms; }
.page-nav:not(.page-nav--landing).is-in .pn-item:not(.is-current) .pn-in { transition-delay: calc(0.5s + (var(--k, 1) - 1) * 70ms); }
.page-nav.is-anim .pn-in { will-change: transform; }

/* Trait sous le lien et petit point à gauche */
.pn-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--pn-pad) + 0.06em);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--pn-ease);
}
.pn-link::before {
  content: "•";
  position: absolute;
  right: 100%;
  top: 50%;
  margin: -0.62em 0.45em 0 0;
  font-size: 0.8em;
  line-height: 1;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.4s var(--pn-ease);
}

/* Survol (souris) */
@media (hover: hover) and (pointer: fine) {
  .pn-list:hover .pn-link { opacity: 0.15; }
  .pn-list .pn-link:hover { opacity: 1; transform: translateX(10px); }
  .pn-link:hover::after { transform: scaleX(1); }
  .pn-link:hover::before { opacity: 1; transform: none; }
  .pn-link:hover .pn-c { animation: pn-hop 0.4s var(--pn-ease) both; animation-delay: calc(var(--i) * 25ms); }
}
@keyframes pn-hop { 0% { transform: none; } 40% { transform: translateY(-3px); } 100% { transform: none; } }
.pn-link.is-pressed { transform: translateX(10px) scale(0.98); transition-duration: 0.15s; }

/* Clavier : trait permanent, pleine opacité */
.pn-link:focus { outline: none; }
.pn-link:focus-visible { opacity: 1; }
.pn-link:focus-visible::after { transform: scaleX(1); }

/* Curseur M un peu plus grand sur les liens */
.page-nav .pn-link,
.page-nav .pn-link * {
  cursor: url("../images/cursor-m-lg.png") 17 14, pointer !important;
  cursor: -webkit-image-set(url("../images/cursor-m-lg.png") 1x, url("../images/cursor-m-lg@2x.png") 2x) 17 14, pointer !important;
  cursor: image-set(url("../images/cursor-m-lg.png") 1x, url("../images/cursor-m-lg@2x.png") 2x) 17 14, pointer !important;
}

/* Calques plein écran ouverts (visionneur, panneau Ecosystem) : les liens s'effacent */
body.viewer-open .page-nav,
body.bp-open .page-nav { opacity: 0; }
body.viewer-open .page-nav .pn-link,
body.bp-open .page-nav .pn-link { pointer-events: none; }

/* Tablette et mobile : liens plus gros, zone de tap de 44 px */
@media (max-width: 899px) {
  .page-nav { --pn-hit: 44px; left: calc(12px + env(safe-area-inset-left, 0px)); top: calc(22px + env(safe-area-inset-top, 0px)); }
  .pn-link { --pn-size: clamp(16px, 4.5vw, 21px); }
  .pn-item.is-current .pn-link { --pn-size: clamp(28px, 8vw, 41px); }
  .page-nav:not(.page-nav--landing) .pn-link { --pn-size: clamp(15px, 4vw, 19px); }
  .page-nav:not(.page-nav--landing) .pn-item.is-current .pn-link { --pn-size: clamp(25px, 7vw, 36px); }
}
/* Téléphone : bloc plus compact (tailles et zones de tap réduites) */
@media (max-width: 699px) {
  .page-nav { --pn-hit: 32px; }
  .page-nav .pn-link,
  .page-nav:not(.page-nav--landing) .pn-link { --pn-size: clamp(14px, 3.8vw, 16px); }
  .page-nav:not(.page-nav--landing) .pn-item.is-current .pn-link { --pn-size: clamp(22px, 6vw, 26px); margin-bottom: 4px; }
}
/* Petit écran : le bloc passe en bas à gauche (il ne chevauche ni le logo, ni les titres) */
.page-nav--bottom {
  top: auto;
  bottom: calc(3vh + env(safe-area-inset-bottom, 0px));
}
/* Ecosystem sur petit écran : le bas est occupé (marque, Learn more, Contact), le bloc passe en haut, sous le logo */
.page-nav--up { top: calc(64px + env(safe-area-inset-top, 0px)); }
/* Texte de la page sous le bloc (petit écran) : le bloc s'atténue, il revient au toucher ou au focus */
.page-nav.is-over { opacity: 0.25; }
.page-nav.is-over:focus-within { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .pn-link:active { opacity: 1; }
}

/* About et Services sur petit écran : le bloc est en haut sous le logo, le texte commence en dessous */
@media (max-width: 699px) {
  html[data-page="services"] .page { padding-top: var(--pn-top, 0px); }
  html[data-page="services"] .cols { padding-top: 0; }
  html[data-page="about"] .about { place-items: start center; padding-top: var(--pn-top, 0px); padding-bottom: 10vh; }
}

/* Mouvement réduit : affichés directement, au survol seulement l'opacité */
@media (prefers-reduced-motion: reduce) {
  html.js .page-nav .pn-in,
  .page-nav.is-in .pn-in { transform: none; transition: none; }
  .pn-list .pn-link:hover,
  .pn-link.is-pressed { transform: none; }
  .pn-link:hover::after,
  .pn-link:hover::before { transform: scaleX(0); opacity: 0; }
  .pn-link:hover .pn-c { animation: none; }
  .pn-link:focus-visible::after { transform: scaleX(1); }
}