/* Atelia — coque de l'APP franchisé (mobile.html, PWA installable).
   Chargé UNIQUEMENT par mobile.html (body.m-app). N'affecte jamais la SPA desktop (index.html).
   Rôle : plein écran réel (pas de « téléphone dans le navigateur »), masquer le sélecteur de
   persona, gérer les safe-areas, et l'invite « Ajouter à l'écran d'accueil ». */

html, body { height: 100%; }
/* Colonne unique : l'invite d'installation, le bandeau de démonstration et l'app se
   partagent la hauteur. Tout est EN FLUX : plus rien ne se pose par-dessus la navigation. */
body.m-app { margin: 0; overflow: hidden; background: var(--cream); overscroll-behavior: none;
  display: flex; flex-direction: column; height: 100dvh; }

/* Coque plein écran : demobar slim en haut + app en dessous */
.m-app #root { display: flex; flex-direction: column; flex: 1 1 auto; height: auto; min-height: 0; }

/* Bandeau « données fictives » : conservé (obligatoire) mais discret et fondu dans la DA claire.
   C'est le SEUL rappel de démonstration de l'app : les écrans n'en répètent plus un second. */
.m-app .demobar {
  flex: 0 0 auto; justify-content: flex-start; gap: 8px; flex-wrap: nowrap;
  height: auto; min-height: var(--demobar-h);
  background: var(--cream); color: var(--navy);
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  padding: 5px 14px; padding-top: calc(5px + env(safe-area-inset-top, 0px));
}
.m-app .demobar .dot { flex: 0 0 auto; background: var(--blue); box-shadow: 0 0 0 3px rgba(36,86,196,.18); }
.m-app .demobar b { font-weight: 800; }
.m-app .demobar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* « Réinitialiser la démo » reste atteignable depuis l'app, comme sur les consoles.
   Le bouton de retour, lui, reste une affordance desktop. */
.m-app .demobar-actions { display: inline-flex; margin-left: auto; gap: 10px; }
/* Corrections 27/09 (UX-restaurant-41, M6-M7-vocabulaire-acces-09) : « Donner un retour » reste atteignable
   dans l'app, comme dans index.html : sous 901 px, css/responsive.css masque le libellé et garde « ✎ »
   (nom accessible : aria-label) ; au-dessus, « ✎ Donner un retour » en entier. */
/* Zone tactile élargie sans épaissir le bandeau (les marges négatives compensent). */
.m-app .demobar .demobar-x { flex: 0 0 auto; white-space: nowrap; font-weight: 600; padding: 10px 6px; margin: -10px -6px; }
/* UX-RESTAURANT-16 (vague C) : « ✎ » lisible (pleine opacité, 15 px, 44 px de large) et contenu dans la fenêtre
   (marge négative réduite à celle du bandeau) ; ses 44 px de haut demanderaient un bandeau plus haut (DA). */
.m-app .demobar #feedbackBtn { opacity: 1; font-size: 15px; min-width: 44px; justify-content: center; padding: 5px 12px; margin: -5px -6px; }
.m-app .demobar #feedbackBtn > span:not(.fb-count) { font-size: 11px; }

/* L'app franchisé occupe tout le reste, sans bezel de téléphone */
.m-app #shell { flex: 1 1 auto; min-height: 0; display: flex; }
.m-app .fr-root { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; }
.m-app .fr-root .fr-aside { display: none; }                       /* pas de sélecteur de persona dans l'app du franchisé */
.m-app .fr-root .fr-stage { flex: 1 1 auto; padding: 0; background: var(--cream); overflow: hidden; align-items: stretch; justify-content: stretch; }
.m-app .fr-root .fr-phone {
  width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; flex: 1 1 auto;
  border-radius: 0; padding: 0; background: none; box-shadow: none;
}
.m-app .fr-root .fr-screen { border-radius: 0; height: 100%; }
.m-app .fr-root .fr-status, .m-app .fr-root .fr-island { display: none; }  /* la vraie barre d'état de l'OS suffit */
.m-app .fr-root .fr-page { padding-top: 12px; }

/* Overlays plein-cadre : respirer sous l'encoche même sans la fausse barre d'état */
.m-app .fr-root .fr-assistant .close { top: calc(env(safe-area-inset-top, 0px) + 14px); }
.m-app .fr-root .fr-detail .dhead { padding-top: calc(env(safe-area-inset-top, 0px) + 18px); }
.m-app .fr-root .fr-assistant .fr-halo { margin-top: calc(env(safe-area-inset-top, 0px) + 40px); }

/* ── Invite « Ajouter à l'écran d'accueil » (affichée hors mode standalone) ──
   Bandeau discret EN HAUT, dans le flux de la colonne : `order` le remonte au-dessus de
   #root sans le sortir de la mise en page. Il pousse l'app vers le bas au lieu de la
   recouvrir — la barre d'onglets et le bouton « + » restent entiers et cliquables. */
.a2hs {
  order: -1; flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top, 0px));
  animation: a2hs-in .3s ease both;
}
/* L'invite porte alors la marge d'encoche : le bandeau de démonstration ne la double pas. */
.m-app.has-a2hs .demobar { padding-top: 5px; }
.a2hs[hidden] { display: none; }
@keyframes a2hs-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.a2hs .ic { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; }
.a2hs .ic img { width: 100%; height: 100%; }
.a2hs .tx { flex: 1; min-width: 0; }
.a2hs .tx b { display: block; font-size: 12.5px; color: var(--navy); font-weight: 800; }
.a2hs .tx span { display: block; font-size: 11px; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a2hs .cta { border: 0; background: var(--accent); color: #fff; font-weight: 700; font-size: 12.5px; padding: 8px 12px; border-radius: 10px; cursor: pointer; flex: 0 0 auto; }
.a2hs .x { border: 0; background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; padding: 4px 6px; flex: 0 0 auto; }

/* Modale d'instructions iOS (Safari n'a pas de prompt programmatique) */
.a2hs-ios { position: fixed; inset: 0; z-index: 71; display: none; align-items: flex-end; justify-content: center; background: rgba(22,36,63,.42); }
.a2hs-ios.show { display: flex; }
.a2hs-ios .sheet { background: var(--surface); width: 100%; max-width: 480px; border-radius: 20px 20px 0 0; padding: 20px 20px calc(env(safe-area-inset-bottom,0px) + 24px); box-shadow: var(--shadow-2); animation: a2hs-in .3s ease both; }
.a2hs-ios h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--navy); }
.a2hs-ios p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.a2hs-ios ol { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.a2hs-ios .close { margin-top: 16px; width: 100%; border: 0; background: var(--accent); color: #fff; font-weight: 700; padding: 13px; border-radius: 12px; cursor: pointer; font-size: 15px; }

/* M-101 · tablette et ordinateur : l'application du restaurateur reste une colonne lisible,
   centrée, au lieu de s'étirer sur toute la largeur (aucune couleur nouvelle). */
@media (min-width: 760px) {
  .m-app .fr-root .fr-screen { max-width: 720px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}