/* ───────────────────────────────────────────────────────────────────────── 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; } /* ng-back.js « épingle » le bouton en le déplaçant hors du (rattaché à ) pour échapper au transform de ng-frame -> il devient réellement fixé au viewport (toujours visible, tous blocs). En partant, il n'est plus enfant du header, donc la réserve `:has(> .ng-back)` ci-dessus ne s'applique plus : le JS pose la classe `.ng-back-host` sur l'ancien parent pour garder l'espace du titre. ATTENTION : cette réserve n'a de sens que sur un EN-TÊTE. Le JS ne l'applique donc PAS si le bouton est enfant direct de / (sinon padding sur le body = bande verticale vide à gauche, incident 2026-06-27). Placez toujours le bouton DANS l'en-tête du bloc (cf. ng-back.js, règle d'intégration). */ .ng-back-host { padding-left: calc(58px + env(safe-area-inset-left)) !important; } /* ───────────────────────────────────────────────────────────────────────── DESKTOP (≥520px) : le cadre ng-frame pose un `transform` sur . Un élément `position:fixed` y est alors ANCRÉ au body (pas au viewport) et DÉFILE avec la page -> le bouton disparaissait au scroll, alors que le header (sticky) restait. Sur desktop on bascule donc le bouton en `position:absolute` : il s'ancre au header sticky qui le contient (contexte de positionnement qui reste à l'écran) -> il reste collé au header, toujours visible. Le `top/left` plus haut s'applique alors relativement au header. MOBILE inchangé (pas de transform -> `fixed` correct). ───────────────────────────────────────────────────────────────────────── */ @media (min-width: 520px) { .ng-back { position: absolute; } }