/* ─────────────────────────────────────────────────────────────────────────
   Bouton retour unifié (design moderne).
  build:cfb2eb94c9c0f39f b:9bc2889d47afa79a
   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 <body> (rattaché à
   <html>) 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 <body>/<html> (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 <body>. 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; }
}

/* ─────────────────────────────────────────────────────────────────────────
   BOUTON ACCUEIL UNIFIÉ (`.ng-home`, injecté par ng-back.js, PO 13/10 et 14/10/2026).
   Coin HAUT-DROIT, symétrique du retour (haut-gauche) : retour = une étape en
   arrière, maison = raccourci direct vers l'accueil de l'appli. Dessin repris du
   bouton maison posé le 13/10 dans le bloc déchets (pastille blanche en relief,
   maison filaire), aspect INVERSE du retour (disque foncé) pour ne jamais les
   confondre. Cible tactile 48 px (Android 48 dp, Apple 44 pt), pastille 46 px.
   z-index 500 comme le retour : au-dessus des bandeaux, SOUS les modales.
   ───────────────────────────────────────────────────────────────────────── */
.ng-home {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  z-index: 500;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ng-home > span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1e293b;
  border: 1px solid #e3e9e1;
  box-shadow: 0 3px 0 #dfe5dd, 0 6px 14px rgba(19, 38, 27, 0.14);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.ng-home svg { width: 22px; height: 22px; display: block; }
.ng-home:active > span { transform: translateY(2px); box-shadow: 0 1px 0 #dfe5dd; }
.ng-home:focus-visible { outline: 2px solid #2389ae; outline-offset: 2px; }

/* Gouttière DROITE, jumelle des 58 px de gauche (REGLES_ABSOLUES § 2) : l'en-tête
   qui porte le retour (`.ng-back-host`) ou, à défaut, le bandeau du titre repéré par
   ng-back.js (`.ng-home-host`) réserve 64 px à droite ; de même les barres de vue
   plein écran du patron des tuiles (`.viewbar` & co.), collées en haut sous la maison. Posée SEULEMENT quand la
   maison est là (`html[data-ng-home]`) : une page publique sans maison garde sa
   largeur. Maison = 8 + 48 px depuis le bord : 8 px d'écart au moins avec la
   dernière action de l'en-tête. */
html[data-ng-home] .ng-back-host,
html[data-ng-home] .ng-home-host,
html[data-ng-home] :is(.viewbar, .ts-viewbar, .pf-viewbar) {
  padding-right: calc(64px + env(safe-area-inset-right)) !important;
}
/* Le « ? » du mode d'emploi se tient à GAUCHE de la maison, sur la même ligne (PO 14/10/2026) :
   la gouttière passe alors de 64 à 112 px (8 px d’écart + 44 px de « ? » + 4 px). */
html[data-ng-home][data-ng-aide] .ng-back-host,
html[data-ng-home][data-ng-aide] .ng-home-host,
html[data-ng-home][data-ng-aide] :is(.viewbar, .ts-viewbar, .pf-viewbar) {
  padding-right: calc(112px + env(safe-area-inset-right)) !important;
}

@media print {
  .ng-home { display: none !important; }
}