/* Barre de navigation — basse, dense, et qui se sait toujours située :
   un filet de progression suit la lecture de la page. */

.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--header-h);
  transition: background-color var(--dur-2) var(--ease-sortie),
              box-shadow var(--dur-2) var(--ease-sortie),
              transform var(--dur-2) var(--ease-sortie);
}
.navbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--trait);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-sortie);
}
.navbar.est-defile {
  background: rgba(255, 255, 255, 0.86);   /* --os, translucide */
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
.navbar.est-defile::after { opacity: 1; }
/* Page noire : la barre garde un fond sombre et un texte clair. */
[data-theme="noir"] .navbar {
  --texte: var(--os);
  --texte-doux: rgba(255, 255, 255, 0.72);
  --trait: rgba(255, 255, 255, 0.14);
  color: var(--os);
}
[data-theme="noir"] .navbar.est-defile { background: rgba(14, 14, 19, 0.86); }

/* Sur les six pages dont l'en-tête est bleu nuit, la barre transparente
   posait le mot VISTA et le bouton de menu en encre sur du bleu nuit :
   invisibles. Tant qu'elle n'a pas pris son fond clair, elle passe en
   clair. Les éléments tirent leur couleur de ces variables. */
body:has(.entete-page.est-sombre) .navbar:not(.est-defile) {
  --texte: var(--os);
  --texte-doux: rgba(245, 245, 242, 0.72);
  --trait: var(--trait-clair);
  color: var(--os);
}

/* On escamote la barre quand on descend vite, on la rend dès qu'on remonte. */
.navbar.est-cachee { transform: translateY(-101%); }

/* Trois colonnes : les onglets à gauche, le logo au centre, les onglets
   et l'accès client à droite. Les deux colonnes latérales ont la même
   largeur (1fr) : le logo reste exactement au milieu de la page, quelle
   que soit la longueur des libellés de chaque côté. */
.navbar-inner {
  height: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  justify-self: center;
}
/* L'icône n'est plus une image : le carré est dessiné ici, le V posé en
   masque (vista-v.svg, même géométrie que vista-icone.svg). Ses deux
   couleurs deviennent des variables, et hors de l'accueil l'icône
   entière passe en masque évidé — voir plus bas. */
.marque-signe {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 23%;               /* rx="23" sur 100 dans vista-icone.svg */
  background: var(--signe-fond, var(--orange));
}
.marque-signe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signe-v, #fff);
  -webkit-mask: url("../assets/logo/vista-v.svg") no-repeat center / contain;
  mask: url("../assets/logo/vista-v.svg") no-repeat center / contain;
}
@media (forced-colors: active) {
  .marque-signe, .marque-signe::after { forced-color-adjust: none; }
}
/* Le mot « vista » est composé dans la police des titres (Cabinet
   Grotesk extra-grasse), comme le reste du site. C'est du texte : il
   prend la couleur de .marque, donc passe en blanc tout seul sur un fond
   sombre. Il est masqué aux lecteurs d'écran : le lien porte déjà son
   nom (« VISTA, retour à l'accueil »). */
.marque-mot {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wght" var(--wght-titre);
  font-size: 1.72rem;
  line-height: 1;
  letter-spacing: -0.035em;
  /* L'œil de la police descend un peu : on recentre le mot sur l'icône. */
  translate: 0 -0.04em;
}

/* Le logo change avec la page (demande de Lohann).
   L'accueil garde le logo d'origine : icône orange, V blanc, mot encre.
   Partout ailleurs, l'icône prend la couleur du mot et son V est évidé
   (vista-icone-creuse.svg) : on voit le fond de la page au travers —
   les points bleus, les traits orange, ou le blanc de la barre.
   - en-tête bleu nuit : bleu clair, puis bleu vif quand la barre passe
     sur fond blanc ;
   - en-tête orange clair : orange ;
   - en-tête sobre, pages d'état : encre ;
   - page noire : blanc.
   Le mot et l'icône suivent tous deux la couleur de .marque. Le pied de
   page garde son logo : il est le même partout. */
.navbar .marque { transition: color var(--dur-2) var(--ease-sortie); }
body:not([data-page="accueil"]) .navbar .marque-signe {
  border-radius: 0;
  background: currentColor;
  -webkit-mask: url("../assets/logo/vista-icone-creuse.svg") no-repeat center / contain;
  mask: url("../assets/logo/vista-icone-creuse.svg") no-repeat center / contain;
}
body:not([data-page="accueil"]) .navbar .marque-signe::after { display: none; }

/* La couleur se décide sur le corps de la page : --logo tant que la
   barre est transparente, --logo-defile une fois qu'elle a pris son fond.
   À sélectivité égale, la dernière règle l'emporte : l'ordre compte. */
.navbar .marque { color: var(--logo, inherit); }
.navbar.est-defile .marque { color: var(--logo-defile, var(--logo, inherit)); }
body:has(.entete-page.est-sombre) { --logo: var(--bleu-clair); --logo-defile: var(--bleu-chiffre); }
body:has(.entete-page:not(.est-sombre)) { --logo: var(--orange); --logo-defile: var(--orange); }
body:has(.entete-page.est-sobre) { --logo: var(--encre); --logo-defile: var(--encre); }
body[data-theme="noir"][data-page] { --logo: var(--os); --logo-defile: var(--os); }

.nav-liens {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* Placement explicite : quand les onglets de gauche sont masqués (écrans
   étroits), le logo ne doit pas glisser dans la première colonne. */
.nav-gauche { grid-column: 1; justify-self: start; }
.navbar .marque { grid-column: 2; }
.nav-droite { grid-column: 3; }
.nav-lien {
  position: relative;
  padding: 7px 11px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texte-doux);
  border-radius: var(--radius-pill);
  transition: color var(--dur-1) var(--ease-sortie);
}
.nav-lien::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px; bottom: 2px;
  height: 1.5px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-sortie);
}
.nav-lien:hover { color: var(--texte); }
.nav-lien:hover::after { transform: scaleX(1); }
.nav-lien.est-actif { color: var(--texte); font-weight: 600; }
.nav-lien.est-actif::after { transform: scaleX(1); }

.nav-droite {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

/* Filet de progression de lecture — 1,5 px, orange, en bas de la barre. */
.nav-jauge {
  position: absolute;
  left: 0; bottom: 0;
  height: 1.5px;
  width: 100%;
  transform: scaleX(var(--progres, 0));
  transform-origin: left;
  background: var(--orange);
  z-index: 2;
}

.nav-bascule {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--trait-fort);
  border-radius: 50%;
  background: transparent;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-1) var(--ease-sortie), border-color var(--dur-1) var(--ease-sortie);
}
.nav-bascule span {
  display: block;
  width: 15px; height: 1.5px;
  background: var(--texte);
  position: relative;
  transition: background-color var(--dur-1) linear;
}
.nav-bascule span::before,
.nav-bascule span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px; height: 1.5px;
  background: var(--texte);
  transition: transform var(--dur-2) var(--ease-sortie);
}
.nav-bascule span::before { top: -5px; }
.nav-bascule span::after { top: 5px; }
.nav-bascule.est-ouvert span { background: transparent; }
.nav-bascule.est-ouvert span::before { transform: translateY(5px) rotate(45deg); }
.nav-bascule.est-ouvert span::after { transform: translateY(-5px) rotate(-45deg); }

/* ------------------------------------------------------------ mobile */
/* Le petit menu (les trois barres) : un panneau qui MONTE DU BAS et
   s'arrête à mi-hauteur — le haut de l'écran reste visible, légèrement
   assombri (demande de Lohann). Un clic hors du panneau, la touche
   Échap ou un lien le referment (js/nav.js). Sur un ordinateur étroit, le
   panneau garde une largeur de lecture, centré en bas de l'écran. */
.menu-fond {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgb(14 14 19 / 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-sortie);
}
body.menu-ouvert .menu-fond { opacity: 1; pointer-events: auto; }

.menu-mobile {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 91;
  width: min(100%, 640px);
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: 12px var(--container-pad) calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 -18px 50px rgb(14 14 19 / 0.18);
  translate: -50% 105%;
  visibility: hidden;
  /* La courbe des feuilles qui montent sur un téléphone : départ vif,
     arrivée amortie. */
  transition: translate 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.5s;
}
.menu-mobile.est-ouvert {
  translate: -50% 0;
  visibility: visible;
  transition: translate 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}
/* La poignée : dit que c'est une feuille posée par-dessus la page. */
.menu-mobile::before {
  content: "";
  flex: none;
  align-self: center;
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--trait-fort);
}
[data-theme="noir"] .menu-mobile { background: rgb(14 14 19 / 0.9); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu-mobile { background: rgb(255 255 255 / 0.98); }
  [data-theme="noir"] .menu-mobile { background: rgb(14 14 19 / 0.98); }
}

/* Deux colonnes : les sept onglets tiennent dans la moitié de l'écran. */
.menu-mobile-liens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-5);
}
.menu-mobile-liens a {
  padding: 12px 0;
  border-bottom: 1px solid var(--trait);
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-display), "wght" var(--wght-titre);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease-sortie), transform 0.45s var(--ease-sortie);
}
.menu-mobile.est-ouvert .menu-mobile-liens a {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 0.035s + 0.12s);
}
.menu-mobile-liens a::after {
  content: "→";
  color: var(--orange-texte);
  font-size: 1rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-2) var(--ease-sortie), transform var(--dur-2) var(--ease-sortie);
}
.menu-mobile-liens a:hover::after { opacity: 1; transform: none; }

.menu-mobile-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.menu-mobile-pied .btn { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .menu-mobile, .menu-mobile.est-ouvert { transition: visibility 0s; }
}

/* Sous 1180 px, les onglets ne tiennent plus de part et d'autre du logo :
   il reste seul au centre, le bouton du menu à droite. */
@media (max-width: 1180px) {
  .nav-liens { display: none; }
  .nav-bascule { display: flex; }
  .nav-cta { display: none; }
}
@media (min-width: 1181px) {
  .menu-mobile, .menu-fond { display: none; }
}

/* Accès à l'espace client : présent mais discret — c'est une porte pour
   les clients déjà là, pas un appel à l'action pour les visiteurs. */
.nav-compte {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--texte-doux);
  padding: 6px 2px;
  transition: color var(--dur-1) ease;
}
.nav-compte:hover { color: var(--orange-texte); }
@media (max-width: 1180px) { .nav-compte { display: none; } }