/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   LA FLÈCHE RETOUR (js/93, 20.09.2026)

   Une seule flèche, au même endroit sur tous les écrans, et qui DIT où elle ramène. « ← » seul
   oblige à cliquer pour savoir ; quand on connaît la destination, autant l'écrire.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.nav-fleche-bloc {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: var(--e-3, 12px);
}

.nav-fleche {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 9px; border-radius: var(--r-rond, 999px);
  cursor: pointer; font-family: inherit; font-size: var(--t-s, 12.5px); font-weight: 500;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  max-width: 280px;
  transition: color var(--v-court, .15s), border-color var(--v-court, .15s), transform var(--v-court, .15s);
}
.nav-fleche:hover { color: var(--text); border-color: var(--accent-border); transform: translateX(-2px); }
.nav-fleche:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-fleche svg { flex-shrink: 0; }
/* Le nom de la destination est tronqué plutôt que de pousser la flèche hors du bandeau : un titre
   d'affaire fait parfois soixante caractères. */
.nav-fleche span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* « En avant » n'a pas de libellé : on sait déjà d'où l'on vient puisqu'on y était. Le bouton
   n'existe d'ailleurs que si l'on est revenu en arrière — sinon il n'aurait rien à proposer. */
.nav-fleche-avant { padding: 6px 9px; }
.nav-fleche-avant:hover { transform: translateX(2px); }

/* ── Dans un bandeau ───────────────────────────────────────────────────────────────────────────
   La flèche y flotte en verre sur le fond coloré. Le bandeau étant inversé en thème sombre (clair
   sur marine devient marine sur bleu pâle), on repart de l'encre héritée plutôt que d'une couleur
   fixe qui serait fausse dans l'un des deux cas. */
.nav-fleche-bloc.sur-bandeau { margin-bottom: var(--e-3, 12px); }
.sur-bandeau .nav-fleche {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .26);
  color: inherit;
  backdrop-filter: blur(6px);
}
.sur-bandeau .nav-fleche:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .4);
}
/* Bandeau inversé (css/97) : le fond clair demande une encre marine, et le verre blanc n'y
   ressort plus — on passe à un verre sombre. */
html:not([data-theme="clair"]) body:not(.mode-cloud):not(.mode-espace-client) .sur-bandeau .nav-fleche {
  background: rgba(11, 36, 88, .07);
  border-color: rgba(11, 36, 88, .18);
  color: #0B2458;
}
html:not([data-theme="clair"]) body:not(.mode-cloud):not(.mode-espace-client) .sur-bandeau .nav-fleche:hover {
  background: rgba(11, 36, 88, .13);
  border-color: rgba(11, 36, 88, .3);
}

/* L'ancienne barre de retour de js/03 : sa flèche est remplacée par la nôtre, mais le fil
   d'Ariane qu'elle porte reste utile. On lui retire seulement son propre bouton. */
#nav-back-bar > button:not(.nav-fleche) { display: none; }
#nav-back-bar { flex-wrap: wrap; }

@media (max-width: 620px) {
  .nav-fleche { max-width: 180px; }
}