/* ══════════════════════════════════════════════════════════════════════
   LA BARRE DU HAUT — la seule.

   La règle vient de « Frenchy Barre » et de la section « La règle de barre »
   du document « Chemin d'achat » : 1280 de large, 32 de gouttière, 72 de
   haut, 26 entre les blocs, 24 entre les liens, liens à 14,5 px, outils
   44 × 44, avatar 36 rayon 11. Aucune de ces valeurs n'est négociée par une
   page : c'est la barre, ou ce n'est pas la barre.

   Ce fichier existe parce que le même bloc vivait recopié dans neuf endroits
   — cadeaux.css, catalogue.css, direct.css, emplois.css, politique.css,
   profil.css, dashboard.css, shop.css et le <style> en ligne de feed.html —
   avec sept géométries différentes. Une barre, un fichier.
   ══════════════════════════════════════════════════════════════════════ */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(7, 7, 26, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--fy-bord, rgba(255, 255, 255, .08));
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  height: 72px; display: flex; align-items: center; gap: 26px;
}
/* Les maquettes Emplois et Mon profil cadrent leur contenu à 1180 : la barre
   suit la largeur de la page, sinon le logo ne s'aligne sur rien. */
.nav-inner.etroit { max-width: 1180px; }

.nav .logo {
  display: inline-flex; align-items: center;
  font-size: 1.688rem; color: var(--fy-encre, #f2f1f7);
  text-decoration: none; flex: none; line-height: 1;
}
.nav .logo-mot { font-family: var(--font-display, 'Instrument Serif', Georgia, serif); }
.logo-marque { color: var(--fy-encre, #f2f1f7); flex: none; }

/* ── LE MENU ────────────────────────────────────────────────────────────
   Feed · Catalogue · Direct · Emplois · Politique, dans cet ordre, et cet
   ordre a une raison : ce qui vient de vous, ce qui s'achète, ce qui se passe
   maintenant, ce qui se travaille — puis Politique, dernier parce qu'il
   n'appartient pas à la même famille.

   Cinq entrées mesurent 352 px, le bloc gauche 488 px. À 1280 il reste 400 px
   pour la droite, qui en demande environ 380 : ça tient, sans serrer la
   gouttière. Le champ de recherche, lui, ne tient plus — il est descendu dans
   la page sur Catalogue, et vit dans la colonne de gauche sur le Feed. */
.fy-menu-barre { display: flex; align-items: center; gap: 24px; flex: none; }
.fy-menu-barre a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--fy-gris, #a5a3bc); text-decoration: none;
  font-size: .906rem; white-space: nowrap;
  transition: color .18s ease;
}
.fy-menu-barre a:hover { color: var(--fy-encre, #f2f1f7); }
.fy-menu-barre a.actif { color: var(--fy-encre, #f2f1f7); font-weight: 600; }
@media (pointer: coarse) { .fy-menu-barre a { min-height: 44px; } }
/* 1100 px : seuil mesuré et apparié à la barre d'onglets de nav.css. Les
   déplacer séparément rouvre une bande d'écran sans navigation. */
@media (max-width: 1100px) { .fy-menu-barre { display: none; } }

/* Le point du Direct : éteint par défaut, il ne bat que si un direct est
   réellement en cours. Un point qui pulse en permanence ne dit plus rien. */
.nav-point-direct {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--fy-rouge, #ff6b6b); opacity: .32;
}
.nav-point-direct.en-direct { opacity: 1; animation: fy-pouls 1.8s ease-in-out infinite; }
@keyframes fy-pouls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .nav-point-direct.en-direct { animation: none; }
}

/* ── LA DROITE ──────────────────────────────────────────────────────────
   Déconnecté : « Se connecter » et le bouton violet. Les cinq entrées du menu
   restent — la moitié des pages sont publiques, et un visiteur doit pouvoir
   tout parcourir avant de créer un compte. */
.nav-right { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
/* UN LIEN NU DE CE GROUPE DOIT SE CENTRER DANS SA CIBLE.

   Sous `(pointer: coarse)`, layout.css donne 44 px de haut a tout `nav a`.
   Un plancher de hauteur sans centrage colle le texte EN HAUT de la cible :
   sur la tablette, « Annuler » remontait de 12 px au-dessus du bouton
   « Publier » d'a cote. Invisible au navigateur, ou le pointeur est fin.

   `.nav .logo` et `.fy-fil a` posent deja ces trois declarations ensemble ;
   ce groupe n'avait que le plancher. `.nav .btn` (0,2,0) l'emporte sur
   cette regle (0,1,1) : les liens-boutons gardent leur propre allure. */
.nav-right a { display: inline-flex; align-items: center; }
.nav .btn {
  display: inline-flex; align-items: center; border-radius: 10px;
  font-size: .906rem; text-decoration: none; white-space: nowrap;
}
.nav .btn-outline {
  color: var(--fy-gris, #a5a3bc); background: none; border: 0;
  padding: 0; min-height: 44px;
}
.nav .btn-outline:hover { color: var(--fy-encre, #f2f1f7); }
.nav .btn-primary {
  background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a);
  font-weight: 600; height: 44px; padding: 0 18px; border: 0;
}
.nav .btn-primary:hover { background: var(--fy-violet-vif, #a395ff); color: var(--fy-nuit, #07071a); }

/* Connecté : quatre outils, dans cet ordre. Publier est la seule action, donc
   la seule à porter un fond. */
.fy-outils { display: flex; align-items: center; gap: 8px; }
.fy-outils[hidden] { display: none; }

.fy-btn-publier {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .08); color: var(--fy-encre, #f2f1f7);
  border: 0; border-radius: 10px; height: 44px; padding: 0 16px; box-sizing: border-box;
  font-family: inherit; text-decoration: none; font-size: .906rem; font-weight: 600;
  white-space: nowrap; transition: background .18s ease;
}
.fy-btn-publier:hover { background: rgba(255, 255, 255, .15); color: var(--fy-encre, #f2f1f7); }

.fy-outil {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  color: var(--fy-gris, #a5a3bc); text-decoration: none; transition: color .18s ease;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.fy-outil:hover { color: var(--fy-encre, #f2f1f7); }
.fy-outil.actif { color: var(--fy-encre, #f2f1f7); }

/* Deux sortes de pastilles, et la différence est une règle.

   Les outils muets portent un point de 8 px : il dit qu'il y a quelque chose,
   pas combien — un chiffre à cette taille ne se lit pas.

   Le panier et la cloche font exception, assumée : devant un panier on veut
   savoir combien d'articles, et devant la cloche le compte sert à décider si
   on ouvre maintenant. Ces deux-là portent donc un nombre. */
.fy-outil-pastille {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fy-violet, #8b7bff); border: 1.5px solid var(--fy-nuit, #07071a);
}
.fy-outil-pastille[hidden] { display: none; }

.fy-outil-compte {
  position: absolute; top: 6px; right: 4px;
  min-width: 17px; height: 17px; box-sizing: border-box; padding: 0 4px;
  border-radius: 9px;
  background: var(--fy-violet, #8b7bff);
  border: 1.5px solid var(--fy-nuit, #07071a);
  color: var(--fy-nuit, #07071a);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px; font-weight: 500; line-height: 14px; text-align: center;
}
.fy-outil-compte[hidden] { display: none; }

.fy-outil-photo {
  width: 36px; height: 36px; flex: none; margin-left: 6px;
  border-radius: 11px; overflow: hidden;
  background: var(--fy-surface, #14142e); border: 1px solid rgba(139, 123, 255, .5);
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; font-weight: 600; color: var(--fy-violet, #8b7bff);
  text-decoration: none;
}
.fy-outil-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── LA VARIANTE D'ÉDITION ──────────────────────────────────────────────
   Publier, Retouche, Créer un produit. Le menu cède la place à un fil
   d'Ariane : sur un écran d'édition, quitter par erreur coûte le travail en
   cours, et cinq liens qui invitent à partir sont cinq occasions de le
   perdre. Même bandeau, même hauteur, même gouttière — c'est la barre, pas
   une autre. */
/* LE FIL CÈDE AVANT LES ACTIONS.

   Il portait `flex: none` : il refusait de rétrécir, et ce qui débordait
   n'était pas lui mais ce qui venait après — le bouton « Mettre en vente »,
   coupé au bord de l'écran sur une tablette de 800 px. Entre le chemin
   parcouru et le bouton qui publie, c'est le chemin qui peut céder.

   Corrigé SANS point de rupture : un seuil de plus aurait réglé 800 px et
   laissé 900 cassé. `flex: 0 1 auto` suffit, et l'ellipse dit qu'il manque
   de la place au lieu de le cacher. */
.fy-fil {
  display: flex; align-items: center; gap: 10px;
  flex: 0 1 auto; min-width: 0; overflow: hidden;
}
.fy-fil a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--fy-gris, #a5a3bc); text-decoration: none;
  font-size: .906rem; white-space: nowrap;
}
.fy-fil a:hover { color: var(--fy-encre, #f2f1f7); }
.fy-fil-sep { color: #4a4866; flex: none; display: inline-flex; align-items: center; }
.fy-fil-sep .ico { width: .9em; height: .9em; }
/* Chaque morceau s'abrège plutôt que de pousser dehors. */
.fy-fil a, .fy-fil-ici {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.fy-fil-ici {
  color: var(--fy-encre, #f2f1f7); font-size: .906rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* L'état d'enregistrement de l'écran d'édition, poussé contre les boutons. */
.fy-fil-etat {
  margin-left: auto; flex: none;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .75rem; color: #7e7c99; white-space: nowrap;
  /* Cède aussi, et avant les actions : un état non enregistré vaut moins
     que le bouton qui l'enregistre. */
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .nav-inner { padding: 0 16px; gap: 14px; height: 64px; }
  .fy-fil-etat { display: none; }
  .fy-outils { gap: 10px; }
  /* Le libellé de Publier tombe, le geste reste : la barre d'onglets du bas
     porte déjà la navigation, ici il ne faut plus que les actions. */
  .fy-btn-publier { padding: 0 11px; font-size: 0; gap: 0; }
  .fy-btn-publier svg { font-size: 1rem; }
}