/*
 * Application installée (PWA) : rien de ce fichier ne s'applique dans le navigateur.
 * Mode application = media (display-mode: standalone), ou classe html.ma-standalone posée par le contrôleur pwa
 * (iPhone ancien, captures). Les règles sont donc écrites deux fois, à l'identique.
 */
:root { --ma-app-nav-h: 64px; --ma-app-safe-b: env(safe-area-inset-bottom, 0px); }

/* Masqués par défaut (navigateur) ; .ma-app-only : réservé au mode application (ex. « Actualiser » des commandes) */
.ma-app-nav, .ma-app-back-bar { display: none; }
.ma-app-only { display: none !important; }

/* ---------- Barre de navigation du bas ---------- */
.ma-app-nav {
    position: fixed; z-index: 1030; left: 0; right: 0; bottom: 0;
    padding-bottom: var(--ma-app-safe-b);
    background: #fff; border-top: 1px solid #dfe5dc; box-shadow: 0 -4px 16px rgba(16, 24, 40, .08);
}
.ma-app-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.ma-app-nav li { flex: 1 1 0; min-width: 0; }
.ma-app-nav-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    width: 100%; min-height: var(--ma-app-nav-h); padding: 6px 2px 4px; border: 0; background: none;
    color: #4a5a4c; font: inherit; font-size: .7rem; font-weight: 600; line-height: 1.1; text-decoration: none; cursor: pointer;
}
.ma-app-nav-link:hover { color: #1f5d23; }
.ma-app-nav-link.is-active { color: #1f5d23; }
.ma-app-nav-link.is-active .ma-app-nav-icon { background: #e3f1e3; }
.ma-app-nav-link:focus-visible { outline: 3px solid #1f5d23; outline-offset: -3px; border-radius: 10px; }
.ma-app-nav-icon { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 15px; }
.ma-app-nav-icon svg { width: 24px; height: 24px; }
.ma-app-nav-label { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.ma-app-nav-badge {
    position: absolute; top: -3px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #b42318; color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* ---------- Bouton retour ---------- */
.ma-app-back {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 4px 0 4px -6px; padding: 0 10px;
    border: 0; border-radius: 10px; background: none; color: #1f5d23; font: inherit; font-weight: 600; cursor: pointer;
}
.ma-app-back[hidden] { display: none; }
.ma-app-back svg { width: 20px; height: 20px; }
.ma-app-back:focus-visible { outline: 3px solid #1f5d23; }

/* ---------- Mode application ---------- */
@media (display-mode: standalone) {
    .ma-app-nav, .ma-app-back-bar { display: block; }
    body { padding-bottom: calc(var(--ma-app-nav-h) + var(--ma-app-safe-b)); }
    .ma-app-only { display: inline-flex !important; }
    html { scroll-padding-bottom: calc(var(--ma-app-nav-h) + var(--ma-app-safe-b) + 16px); }
    .ma-browser-only { display: none !important; }
    /* Rien de fixe ne passe sous la barre : bandeau cookies, bouton « Remonter », barres d'enregistrement */
    .ma-consent { bottom: calc(var(--ma-app-nav-h) + var(--ma-app-safe-b) + 12px); }
    .progress-wrap { display: none !important; }
    .ma-picker-bar, .ma-channels-save { bottom: calc(var(--ma-app-nav-h) + var(--ma-app-safe-b)); }
    /* Espace producteur : le bouton du menu reste, la barre du bas le complète ; pied de page inutile */
    .ma-espace .footer { display: none; }
}
@media (display-mode: standalone) and (max-width: 991.98px) {
    .ma-map-canvas-wrap { height: calc(100svh - 78px - 106px - var(--ma-app-nav-h) - var(--ma-app-safe-b)); }
    .ma-map-results { min-height: calc(100svh - 78px - 106px - var(--ma-app-nav-h) - var(--ma-app-safe-b)); }
    .ma-view-switch { bottom: calc(16px + var(--ma-app-nav-h) + var(--ma-app-safe-b)); }
}

html.ma-standalone .ma-app-nav, html.ma-standalone .ma-app-back-bar { display: block; }
html.ma-standalone body { padding-bottom: calc(var(--ma-app-nav-h) + var(--ma-app-safe-b)); }
html.ma-standalone .ma-app-only { display: inline-flex !important; }
html.ma-standalone { scroll-padding-bottom: calc(var(--ma-app-nav-h) + var(--ma-app-safe-b) + 16px); }
html.ma-standalone .ma-browser-only { display: none !important; }
html.ma-standalone .ma-consent { bottom: calc(var(--ma-app-nav-h) + var(--ma-app-safe-b) + 12px); }
html.ma-standalone .progress-wrap { display: none !important; }
html.ma-standalone .ma-picker-bar, html.ma-standalone .ma-channels-save { bottom: calc(var(--ma-app-nav-h) + var(--ma-app-safe-b)); }
html.ma-standalone .ma-espace .footer { display: none; }
@media (max-width: 991.98px) {
    html.ma-standalone .ma-map-canvas-wrap { height: calc(100svh - 78px - 106px - var(--ma-app-nav-h) - var(--ma-app-safe-b)); }
    html.ma-standalone .ma-map-results { min-height: calc(100svh - 78px - 106px - var(--ma-app-nav-h) - var(--ma-app-safe-b)); }
    html.ma-standalone .ma-view-switch { bottom: calc(16px + var(--ma-app-nav-h) + var(--ma-app-safe-b)); }
}

/* Grand écran (application installée sur ordinateur) : la barre latérale suffit dans l'espace producteur */
@media (min-width: 992px) {
    .ma-espace .ma-app-nav { display: none !important; }
    html.ma-standalone body.ma-espace { padding-bottom: 0; }
}
@media (display-mode: standalone) and (min-width: 992px) { body.ma-espace { padding-bottom: 0; } }

/* ---------- Page « Installer l'application » ---------- */
.ma-install { margin-top: 24px; }
.ma-install-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; font-size: 1.05rem; }
.ma-install-btn[hidden], .ma-install-steps[hidden], .ma-install-done[hidden] { display: none; }
.ma-install-btn svg { width: 22px; height: 22px; }
.ma-install-steps { padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid #dfe5dc; max-width: 560px; }
.ma-install-steps ol { margin: 0; padding-left: 1.4rem; list-style: decimal; }
.ma-install-steps li::marker { font-weight: 700; color: #1f5d23; }
.ma-install-steps li { margin-bottom: 8px; display: list-item; list-style: decimal; }
.ma-install-steps .icon, .ma-install-card h2 .icon { width: 1.2em; height: 1.2em; vertical-align: -.2em; color: #1f5d23; }
.ma-install-done { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #1f5d23; }
.ma-install-done .icon { width: 22px; height: 22px; }
.ma-install-icon { width: 260px; height: auto; border-radius: 56px; box-shadow: 0 24px 60px rgba(16, 24, 40, .16); }
.ma-install-card { height: 100%; padding: 22px 24px; border-radius: 16px; background: #fff; border: 1px solid #dfe5dc; }
.ma-install-card ul { padding-left: 1.15rem; }
.ma-install-card li { margin-bottom: 6px; }

/* Encart « Mes agriculteurs existe en application » des tableaux de bord */
.ma-app-promo { border-left: 4px solid var(--tblr-primary, #2f7d32); }
.ma-app-promo[hidden] { display: none; }
.ma-app-promo-icon { border-radius: 14px; box-shadow: 0 4px 12px rgba(16, 24, 40, .12); }
