/* ─────────────────────────────────────────────────────────────────────────
   Ngento — Bouton retour unifié (design moderne). © 2026 Jean-François Pellet.
   ref:NGENTOJFP-1f4d9e7a2b6c4f80
   Composant partagé : un seul endroit pour le style du bouton « retour » de
   toutes les pages.

   ROBUSTE SUR TOUS LES FONDS (corrige le défaut de contraste 2026-06-03) :
   pastille pleine d'une couleur DÉDIÉE au bouton (slate très foncé — jamais un
   fond de contenu de bloc, qui sont clairs) + chevron BLANC + anneau blanc.
   -> sur fond clair : la pastille foncée ressort ; sur fond foncé : l'anneau
   blanc détoure la pastille. Plus besoin de variante par page.

   FLOTTANT (D1) : le bouton se détache du flux et se FIXE en haut à gauche,
   décalé de la safe-area (encoche / coin arrondi) -> toujours accessible et
   cliquable, même après défilement, et jamais masqué par l'encoche. z-index 500 :
   au-dessus des bandeaux d'en-tête (≤100) mais SOUS les modales/overlays (≥1000),
   pour ne jamais flotter par-dessus une fenêtre modale. Sur desktop, le cadre
   ng-frame (body en transform) le contient dans la colonne téléphone.
   ───────────────────────────────────────────────────────────────────────── */
.ng-back {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left));
  z-index: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  /* Couleur dédiée au bouton retour (slate-800), distincte de tout fond de bloc. */
  background: #1e293b;
  /* Anneau blanc semi-opaque : garantit la visibilité même sur fond foncé. */
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.08s ease;
}
.ng-back:hover { background: #0f172a; }
.ng-back:active { transform: scale(0.92); }
.ng-back svg {
  width: 20px;
  height: 20px;
  display: block;
  color: #fff;        /* le chevron suit currentColor -> toujours blanc */
}

/* Compat : l'ancienne variante --light n'est plus nécessaire (le défaut est
   déjà robuste sur fond clair). Conservée comme alias inerte pour ne casser
   aucune page qui l'utilise encore. */
.ng-back.ng-back--light { background: #1e293b; color: #fff; border-color: rgba(255, 255, 255, 0.65); }
.ng-back.ng-back--light svg { color: #fff; }

/* Le bouton étant désormais flottant (hors flux), on réserve sa place dans le
   bandeau d'en-tête qui le contient pour que le titre ne glisse pas dessous.
   Cible le conteneur DIRECT du bouton (header, topbar, hdr…). `!important` pour
   l'emporter sur un padding défini en style inline. Navigateurs sans :has() ->
   le bouton flotte quand même (dégradation douce, sans blocage). La passe
   « par header » couvre les cas particuliers restants (frais, etc.). */
:where(header, [class*="topbar"], [class*="top-bar"], [class*="hdr"], [class*="header"]):has(> .ng-back) {
  padding-left: calc(58px + env(safe-area-inset-left)) !important;
}